From 22398e03c2ec6de25f8b20bdfc312a305f216cef Mon Sep 17 00:00:00 2001
From: Lorezz <point.point@gmail.com>
Date: Fri, 13 Sep 2024 16:09:14 +0200
Subject: [PATCH] fix update

---
 .env                             |   1 -
 .gitignore                       |   3 +-
 publiccode-editor-vite           |   1 +
 src/components/ChartSave.tsx     |  11 +-
 src/components/auth/SignIn.tsx   |   2 +-
 src/components/auth/SignUp.tsx   |   2 +-
 src/components/layout/Footer.tsx |  19 +-
 src/components/layout/Header.tsx | 113 +++++++---
 src/lib/api.ts                   |  25 ++-
 src/main.tsx                     |  17 +-
 src/pages/About.tsx              | 368 ++++++++++++++++++++++++-------
 src/pages/AuthPage.tsx           |   1 -
 src/pages/ShowChartPage.tsx      |   7 +-
 13 files changed, 416 insertions(+), 154 deletions(-)
 delete mode 100644 .env
 create mode 160000 publiccode-editor-vite

diff --git a/.env b/.env
deleted file mode 100644
index 8507387..0000000
--- a/.env
+++ /dev/null
@@ -1 +0,0 @@
-VITE_SERVER_URL="http://localhost:3003"
diff --git a/.gitignore b/.gitignore
index 7116c97..7f9d2cd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,5 +24,4 @@ dist-ssr
 *.sw?
 .vercel
 
-# Local Netlify folder
-.netlify
+.env
diff --git a/publiccode-editor-vite b/publiccode-editor-vite
new file mode 160000
index 0000000..a531dd5
--- /dev/null
+++ b/publiccode-editor-vite
@@ -0,0 +1 @@
+Subproject commit a531dd5b0175a6598609adf1ee91017e6abaf17e
diff --git a/src/components/ChartSave.tsx b/src/components/ChartSave.tsx
index 07d09df..39b8655 100644
--- a/src/components/ChartSave.tsx
+++ b/src/components/ChartSave.tsx
@@ -10,7 +10,7 @@ function ChartSave({ item, handleSave }: any) {
   const {
     register,
     handleSubmit,
-    formState: { errors },
+    formState: { errors, isDirty, isSubmitting, touchedFields, submitCount },
   } = useForm({
     defaultValues: {
       id: item?.id || "",
@@ -92,7 +92,14 @@ function ChartSave({ item, handleSave }: any) {
               </label>
             </div>
           </div>
-          <button type="submit" className="btn btn-primary full my-3">
+          {isSubmitting && (
+            <div className="loading loading-lg">...sumbitting</div>
+          )}
+          <button
+            disabled={isSubmitting}
+            type="submit"
+            className="btn btn-primary full my-3"
+          >
             Save
           </button>
         </div>
diff --git a/src/components/auth/SignIn.tsx b/src/components/auth/SignIn.tsx
index 50681f6..b924964 100644
--- a/src/components/auth/SignIn.tsx
+++ b/src/components/auth/SignIn.tsx
@@ -20,7 +20,7 @@ function SignIn({ setLogin }: { setLogin: (login: boolean) => void }) {
       const rememberMe = submittedData["remember-me"] ?? false;
       const result = await api.login({ email, password, rememberMe });
       if (result) {
-        navigate("/");
+        navigate("/home");
       } else {
         setMessage("Error while logging in");
       }
diff --git a/src/components/auth/SignUp.tsx b/src/components/auth/SignUp.tsx
index 5a5a64c..f197389 100644
--- a/src/components/auth/SignUp.tsx
+++ b/src/components/auth/SignUp.tsx
@@ -26,7 +26,7 @@ function SignUp({ setLogin }: { setLogin: (login: boolean) => void }) {
     try {
       const result = await api.register({ email, password });
       if (result) {
-        navigate("/login");
+        navigate("/home");
       } else {
         setMessage("Error while registering");
       }
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 8317486..865eefd 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -16,18 +16,17 @@ export default function Footer() {
         <p>Dataviz: share your charts</p>
       </aside>
       <nav>
-        <h6 className="footer-title">Services</h6>
-        <a className="link link-hover">Branding</a>
-        <a className="link link-hover">Design</a>
-        <a className="link link-hover">Marketing</a>
-        <a className="link link-hover">Advertisement</a>
+        <h6 className="footer-title">Tools</h6>
+        <a className="link link-hover">Generate Data</a>
+        <a className="link link-hover">Match Geo-Json Data</a>
+        <a className="link link-hover">Trasform raw data</a>
+        <a className="link link-hover">Use open source data</a>
       </nav>
       <nav>
-        <h6 className="footer-title">Company</h6>
-        <a className="link link-hover">About us</a>
-        <a className="link link-hover">Contact</a>
-        <a className="link link-hover">Jobs</a>
-        <a className="link link-hover">Press kit</a>
+        <h6 className="footer-title">Take part</h6>
+        <a className="link link-hover">Project Design</a>
+        <a className="link link-hover">Code</a>
+        <a className="link link-hover">Community</a>
       </nav>
       <nav>
         <h6 className="footer-title">Legal</h6>
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index c28fbef..85c197a 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,4 +1,3 @@
-import React, { useEffect, useState } from "react";
 import * as auth from "../../lib/auth";
 
 export default function Header() {
@@ -12,9 +11,34 @@ export default function Header() {
 
   function logoutAndRedir() {
     auth.logout();
-    // window.location.href = "/enter";
+    window.location.href = "/";
   }
 
+  const menu = [
+    {
+      name: "Home",
+      link: "/",
+    },
+    {
+      name: "Create Chart",
+      link: "/home",
+    },
+    {
+      name: "Manage Data",
+      link: "",
+      subMenu: [
+        {
+          name: "Generate",
+          link: "/generate-data",
+        },
+        {
+          name: "Load Remote",
+          link: "/load-data",
+        },
+      ],
+    },
+  ];
+
   return (
     <div className="navbar bg-primary text-primary-content shadow-xl mb-2">
       <div className="navbar-start">
@@ -39,23 +63,30 @@ export default function Header() {
             tabIndex={0}
             className="menu menu-sm dropdown-content bg-base-100 text-primary rounded-box z-[1] mt-3 w-52 p-2 shadow"
           >
-            <li>
-              <a href="/">Create Chart</a>
-            </li>
-            <li>
-              <a>Data</a>
-              <ul className="p-2">
-                <li>
-                  <a href="/generate-data">Generate</a>
-                </li>
-                <li>
-                  <a href="/load-data">Load Remote</a>
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a href="/about">About</a>
-            </li>
+            {menu.map((item, index) => {
+              if (item.subMenu) {
+                return (
+                  <li>
+                    <a>{item.name}</a>
+                    <ul className="p-2">
+                      {item.subMenu.map((subItem, subIndex) => {
+                        return (
+                          <li key={subIndex}>
+                            <a href={subItem.link}>{subItem.name}</a>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  </li>
+                );
+              } else {
+                return (
+                  <li key={index}>
+                    <a href={item.link}>{item.name}</a>
+                  </li>
+                );
+              }
+            })}
           </ul>
         </div>
         <a className="btn btn-ghost text-xl" href="/">
@@ -64,25 +95,35 @@ export default function Header() {
       </div>
       <div className="navbar-center hidden lg:flex">
         <ul className="menu menu-horizontal px-1 bg-base text-content">
-          <li>
-            <a href="/">Create Chart</a>
-          </li>
-          <li>
-            <a href="/about">About</a>
-          </li>
-          <li>
-            <details className="">
-              <summary>Data</summary>
-              <ul className="w-[125px] bg-base-100 text-primary">
-                <li className="bg-base-100 text-primary">
-                  <a href="/generate-data">Generate</a>
+          {menu.map((item, index) => {
+            if (item.subMenu) {
+              return (
+                <li>
+                  <details>
+                    <summary>{item.name}</summary>
+                    <ul className="w-[125px] bg-base-100 text-primary z-10">
+                      {item.subMenu.map((subItem, subIndex) => {
+                        return (
+                          <li
+                            key={subIndex}
+                            className="bg-base-100 text-primary"
+                          >
+                            <a href={subItem.link}>{subItem.name}</a>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  </details>
                 </li>
-                <li className="bg-base-100 text-primary">
-                  <a href="/load-data">Load Remote</a>
+              );
+            } else {
+              return (
+                <li key={index}>
+                  <a href={item.link}>{item.name}</a>
                 </li>
-              </ul>
-            </details>
-          </li>
+              );
+            }
+          })}
         </ul>
       </div>
       <div className="navbar-end px-4">
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 108b9aa..53b5c7c 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -1,6 +1,7 @@
 import * as auth from "./auth";
 const SERVER_URL = import.meta.env.VITE_SERVER_URL;
 
+/** Upsert */
 export async function upsertChart(
   item: {
     name: string;
@@ -19,7 +20,7 @@ export async function upsertChart(
   const payload = JSON.stringify(item);
   const method = id ? "PUT" : "POST";
 
-  console.log("upsertChart", url, method);
+  console.log("UPSERT-CHART", url, method);
 
   const response = await fetch(url, {
     method,
@@ -29,7 +30,7 @@ export async function upsertChart(
     },
     body: payload,
   });
-  console.log("upsertChart", response.status);
+  console.log("UPSERT-CHART", response.status);
 
   if (response.status === 401) {
     return auth.logout();
@@ -39,9 +40,11 @@ export async function upsertChart(
     const data = await response.json();
     return data;
   }
+
   return null;
 }
 
+/** Delete */
 export async function deleteChart(id: string) {
   const token = auth.getAuth();
   if (!token) return null;
@@ -64,6 +67,7 @@ export async function deleteChart(id: string) {
   return null;
 }
 
+/** List */
 export async function getCharts() {
   const token = auth.getAuth();
   if (!token) return null;
@@ -87,6 +91,7 @@ export async function getCharts() {
   }
 }
 
+/** Login */
 export async function login({
   email,
   password,
@@ -116,6 +121,7 @@ export async function login({
   }
 }
 
+/** Register */
 export async function register({
   email,
   password,
@@ -141,3 +147,18 @@ export async function register({
     }
   }
 }
+
+export async function showChart(id: string) {
+  const response = await fetch(`${SERVER_URL}/charts/show/${id}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+  if (response.status === 200) {
+    const data = await response.json();
+    return data;
+  } else {
+    return [];
+  }
+}
diff --git a/src/main.tsx b/src/main.tsx
index 0582737..9318099 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -16,8 +16,16 @@ function App() {
   const router = createBrowserRouter([
     {
       path: "/",
+      element: <AboutPage />,
+    },
+    {
+      path: "/home",
       element: <HomePage />,
     },
+    {
+      path: "/enter",
+      element: <AuthPage />,
+    },
     {
       path: "/load-data",
       element: <LoadDataPage />,
@@ -26,18 +34,11 @@ function App() {
       path: "/generate-data",
       element: <GenerateDataPage />,
     },
-    {
-      path: "/about",
-      element: <AboutPage />,
-    },
+
     {
       path: "/chart/:id",
       element: <ShowChartPage />,
     },
-    {
-      path: "/enter",
-      element: <AuthPage />,
-    },
   ]);
 
   return (
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index 6f03681..9abfbaa 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -1,108 +1,308 @@
-import { useState } from 'react';
-
-function About() {
-  const [count, setCount] = useState(0);
-
+export default function Landing() {
   const faqs = [
     {
       id: 1,
-      question: 'What is skishu?',
-      answer: 'Skishu is you divinity...',
+      question: "What is skishu?",
+      answer: "Skishu is you divinity...",
     },
     {
       id: 2,
-      question: 'Shamalaya?',
-      answer: 'Yes we can ....',
+      question: "Shamalaya?",
+      answer: "Yes we can ....",
     },
 
     {
       id: 3,
-      question: 'Who am I?',
-      answer: 'Roots of creation...',
+      question: "Who am I?",
+      answer: "Roots of creation...",
+    },
+  ];
+
+  const features = [
+    {
+      name: "Upload & Parse Your Data in Seconds",
+      description:
+        "Simply upload your CSV file, and Dataviz will instantly parse the data for you. View your data in a clean table format and get ready to visualize it in just a few clicks.",
+    },
+    {
+      name: "Customizable Chart Creation",
+      description:
+        "Choose how to represent your data by selecting which columns to display as series, and easily define your X and Y axes. Dataviz offers a range of chart types: <b>Bar </b>, <b>Line</b> , <b>Pie</b> charts and <b>Geographical Maps</b> (Geomap), No matter the type, you have full control over your data's presentation!",
+    },
+    {
+      name: "Intuitive Filtering & Data Selection",
+      description:
+        "Only want to display specific data points? No problem. Use our simple filtering options to select which columns or data sets to include in your visualization, ensuring clarity and focus in your chart.",
+    },
+    {
+      name: "Fine-Tune Chart Parameters",
+      description:
+        "Tweak and customize each aspect of your chart. From colors to data labels, control every detail to ensure your chart perfectly fits your needs and looks great.",
+    },
+    {
+      name: "Save, Edit & Reuse Your Charts",
+      description:
+        "Dataviz allows you to save your charts for future editing. Come back anytime to update your data, adjust chart settings, or switch the chart type. Your work is always at your fingertips.",
+    },
+    {
+      name: "Publish & Embed Your Charts",
+      description:
+        "Share your work with the world! Once your chart is ready, publish it directly from Dataviz and get an embed code to seamlessly integrate your visualizations into any website or platform.",
     },
   ];
 
   return (
     <div className="">
-      <h1 className="text-4xl font-bold">About</h1>
-      <div className="my-5 p-5 flex gap-4">
-        <button className="btn btn-primary" onClick={() => setCount(count + 1)}>
-          Increment
-        </button>
-        <div className="text-lg">Count : {count}</div>
-      </div>
-
-      <div className="space-y-2 mb-10 container max-w-xl">
-        <h2 className="text-4xl font-bold">FAQS</h2>
-        {faqs.map((faq) => (
-          <details
-            className="group [&_summary::-webkit-details-marker]:hidden"
-            key={faq.id}
-          >
-            <summary className="flex cursor-pointer items-center justify-between gap-1.5 rounded-lg  p-4  bg-accent text-accent-content">
-              <h2 className="font-medium">{faq.question}</h2>
-
-              <svg
-                className="size-5 shrink-0 transition duration-300 group-open:-rotate-180"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M19 9l-7 7-7-7"
-                />
-              </svg>
-            </summary>
+      <div className="relative isolate pt-14">
+        <svg
+          aria-hidden="true"
+          className="absolute inset-0 -z-10 h-full w-full stroke-gray-200 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
+        >
+          <defs>
+            <pattern
+              x="50%"
+              y={-1}
+              id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527"
+              width={200}
+              height={200}
+              patternUnits="userSpaceOnUse"
+            >
+              <path d="M100 200V.5M.5 .5H200" fill="none" />
+            </pattern>
+          </defs>
+          <svg x="50%" y={-1} className="overflow-visible fill-gray-50">
+            <path
+              d="M-100.5 0h201v201h-201Z M699.5 0h201v201h-201Z M499.5 400h201v201h-201Z M-300.5 600h201v201h-201Z"
+              strokeWidth={0}
+            />
+          </svg>
+          <rect
+            fill="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)"
+            width="100%"
+            height="100%"
+            strokeWidth={0}
+          />
+        </svg>
+        <div className="mx-auto max-w-6xl pb-32  lg:pb-56  ">
+          <div className="hidden sm:mb-8 sm:flex sm:justify-center">
+            <div className="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
+              This project is in heavy design/development.{" "}
+              <a href="#" className="font-semibold text-primary">
+                <span aria-hidden="true" className="absolute inset-0" />
+                Get Involved <span aria-hidden="true">&rarr;</span>
+              </a>
+            </div>
+          </div>
+          <div className="text-center">
+            <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
+              Transform Data Into Stunning Visuals with Dataviz
+            </h1>
+            <p className="mt-6 text-lg leading-8 text-gray-600">
+              Effortlessly convert your CSV data into beautiful, interactive
+              charts with Dataviz. Whether you're a data analyst, business
+              professional, or content creator, Dataviz offers an intuitive
+              interface to bring your numbers to life.
+            </p>
+            <div className="mt-10 flex items-center justify-center gap-x-6">
+              <a href="/enter" className="btn btn-primary">
+                Get started
+              </a>
+            </div>
+          </div>
+        </div>
+        <div className="mx-auto max-w-6xl pb-32  lg:pb-56">
+          <div className="mx-auto max-w-7xl px-6 lg:px-8">
+            <div className="mx-auto max-w-4xl lg:mx-0">
+              <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+                Everything you need
+              </h2>
+              <p className="mt-6 text-lg leading-8 text-gray-600">
+                Start Visualizing Your Data with Dataviz Today Dataviz makes
+                data visualization quick, simple, and powerful. Try it and see
+                how easily you can create, edit, and publish stunning charts in
+                minutes.
+              </p>
+            </div>
+            <dl className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-base leading-7 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+              {features.map((feature) => (
+                <div key={feature.name}>
+                  <dt className="font-semibold text-gray-900">
+                    {feature.name}
+                  </dt>
+                  <dd
+                    className="mt-1 text-gray-600"
+                    dangerouslySetInnerHTML={{
+                      __html: `${feature.description}`,
+                    }}
+                  />
+                </div>
+              ))}
+            </dl>
+          </div>
+        </div>
 
-            <p className="mt-4 px-4 leading-relaxed text-content">
-              {faq.answer}
+        <div className="bg-primary px-10 sm:mx-auto w-full py-12">
+          <div className="rounded-md mx-auto max-w-6xl p-12 prose bg-base-100">
+            <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+              Quick Start Guide: Creating Your First Chart with Dataviz
+            </h2>
+            <p>
+              Ready to jump in and create your first chart? Follow this simple
+              guide to visualize your data in no time. Whether you're using
+              sample data or generating your own, these steps will get you
+              started.
             </p>
-          </details>
-        ))}
-      </div>
+            <h3 className="h3">Step 1: Click on "Create New Chart"</h3>
+            <ul>
+              <li>Begin by logging into your Dataviz account.</li>
+              <li>
+                On the dashboard, locate and click the{" "}
+                <strong>"Create New Chart"</strong> button to start a new
+                project.
+              </li>
+            </ul>
+            <h3>Step 2: Upload Your Data</h3>
+            <ul>
+              <li>
+                You'll be prompted to upload your data. If you don't have data
+                yet, no worries—use one of these options:
+                <ul>
+                  <li>
+                    <strong>Sample Data</strong>: Select from a set of sample
+                    data provided by Dataviz. Click{" "}
+                    <strong>"Use Sample Data"</strong> to explore how the tool
+                    works.
+                  </li>
+                  <li>
+                    <strong>Generate Data</strong>: Click on{" "}
+                    <strong>"Generate Data"</strong> in the delegate section to
+                    create a simple CSV dataset automatically.
+                  </li>
+                  <li>
+                    <strong>Upload Your Own CSV</strong>: If you have your own
+                    data, simply upload a CSV file. Dataviz will instantly parse
+                    and display it in a table.
+                  </li>
+                </ul>
+              </li>
+            </ul>
+            <h3>Step 3: Choose Your Chart Type and Configure (Optional)</h3>
+            <ul>
+              <li>
+                After uploading or generating your data, select a chart type
+                that best represents your data. You can choose from:
+                <ul>
+                  <li>
+                    <strong>Bar Chart</strong>
+                  </li>
+                  <li>
+                    <strong>Line Chart</strong>
+                  </li>
+                  <li>
+                    <strong>Pie Chart</strong>
+                  </li>
+                  <li>
+                    <strong>Geographical Map (Geomap)</strong>
+                  </li>
+                </ul>
+              </li>
+              <li>
+                To customize your chart:
+                <ul>
+                  <li>Select which data columns to display.</li>
+                  <li>Assign your X and Y axes (for bar or line charts).</li>
+                  <li>
+                    Adjust chart parameters, such as colors, labels, and data
+                    points. This step is optional, but it's a great way to
+                    fine-tune your chart's appearance.
+                  </li>
+                </ul>
+              </li>
+            </ul>
+            <h3>Step 4: Save Your Chart</h3>
+            <ul>
+              <li>
+                Once you're satisfied with your chart, click{" "}
+                <strong>"Save"</strong> to store it for future editing.
+              </li>
+              <li>
+                Your chart will be saved to your dashboard, where you can:
+                <ul>
+                  <li>Re-edit it later.</li>
+                  <li>Publish it for sharing.</li>
+                  <li>
+                    Generate an embed code to add the chart to your website.
+                  </li>
+                </ul>
+              </li>
+            </ul>
+            <hr />
+            <p>
+              And that's it! You've successfully created and saved your first
+              chart with Dataviz. Continue experimenting with different
+              datasets, chart types, and configurations to fully unlock the
+              power of your visualizations.
+            </p>
+          </div>
+        </div>
 
-      <div className="flex flex-grow flex-col gap-3">
-        <div className="text-4xl font-bold">Text Size 1</div>
-        <div className="text-3xl font-bold">Text Size 2</div>
-        <div className="text-2xl font-bold">Text Size 3</div>
-        <div className="text-xl font-bold">Text Size 4</div>
-        <div className="text-lg font-bold">Text Size 5</div>
-        <div className="text-sm font-bold">Text Size 6</div>
-        <div className="text-xs font-bold">Text Size 7</div>
-      </div>
+        <div className="space-y-2 mx-auto max-w-4xl pb-32 sm:pb-48 lg:pb-56">
+          <h2 className="text-4xl font-bold">FAQS</h2>
+          {faqs.map((faq) => (
+            <details
+              className="group [&_summary::-webkit-details-marker]:hidden"
+              key={faq.id}
+            >
+              <summary className="flex cursor-pointer items-center justify-between gap-1.5 rounded-lg  p-4  bg-accent text-accent-content">
+                <h2 className="font-medium">{faq.question}</h2>
 
-      <div className="my-4 flex gap-2">
-        <button className="btn btn-primary">Primary</button>
-        <button className="btn btn-secondary">Secondary</button>
-        <button className="btn btn-accent">Accent</button>
-        <button className="btn btn-neutral">Neutral</button>
-        <button className="btn btn-warning">Warning</button>
-        <button className="btn btn-error">Error</button>
-        <button className="btn btn-success">Success</button>
-        <button className="btn btn-info">Info</button>
-      </div>
+                <svg
+                  className="size-5 shrink-0 transition duration-300 group-open:-rotate-180"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M19 9l-7 7-7-7"
+                  />
+                </svg>
+              </summary>
 
-      <div className="flex flex-col my-5">
-        <span className="link">I'm a simple link</span>
-        <span className="link link-primary">I'm a simple link</span>
-        <span className="link link-secondary">I'm a simple link</span>
-        <span className="link link-accent">I'm a simple link</span>
+              <p className="mt-4 px-4 leading-relaxed text-content">
+                {faq.answer}
+              </p>
+            </details>
+          ))}
+        </div>
       </div>
 
-      <div className="my-5">
-        <ul className="steps steps-vertical">
-          <li className="step step-primary">Step 1</li>
-          <li className="step step-primary">Step 2</li>
-          <li className="step">Step 3</li>
-          <li className="step">Step 4</li>
-        </ul>
-      </div>
+      {/* <div className="my-5">
 
-      <div className="my-5">
+       <div className="mx-auto max-w-4xl pb-32 sm:pb-48 lg:pb-56">
+          <h2 className="text-4xl font-bold">How It Works</h2>
+          <p>Import your data e create a chart with it in few simple steps</p>
+          <ul className="steps steps-vertical">
+            <li className="step step-primary">
+              1 Upload your data as a CSV file
+            </li>
+            <li className="step step-primary">
+              2 Select and filter what you want from raw data
+            </li>
+            <li className="step step-primary">
+              3 Choose chart type and tweak chart settings
+            </li>
+            <li className="step step-primary">
+              4 Preview and save your chart, publish if you want
+            </li>
+            <li className="step step-primary">
+              5 Organize your charts in dashboard and share with world
+            </li>
+          </ul>
+        </div>
         <div className="stats bg-base-300 border-base-300 border shadow">
           <div className="stat">
             <div className="stat-title">Total Page Views</div>
@@ -168,9 +368,7 @@ function About() {
             <div className="stat-desc text-secondary">31 tasks remaining</div>
           </div>
         </div>
-      </div>
+      </div> */}
     </div>
   );
 }
-
-export default About;
diff --git a/src/pages/AuthPage.tsx b/src/pages/AuthPage.tsx
index ea312fb..5dab884 100644
--- a/src/pages/AuthPage.tsx
+++ b/src/pages/AuthPage.tsx
@@ -4,7 +4,6 @@ import SignUp from "../components/auth/SignUp";
 
 function AuthPage() {
   const [login, setLogin] = useState(true);
-
   return (
     <>
       <div className="flex min-h-full flex-1">
diff --git a/src/pages/ShowChartPage.tsx b/src/pages/ShowChartPage.tsx
index 7b2e6d6..b816523 100644
--- a/src/pages/ShowChartPage.tsx
+++ b/src/pages/ShowChartPage.tsx
@@ -1,16 +1,13 @@
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import RenderChart from "../components/RenderChart";
-
-const SERVER_HOST = "http://localhost:3003";
+import * as api from "../lib/api";
 
 function ShowChartPage() {
   const { id } = useParams();
   const [chartData, setChartData] = useState<any>(null);
   useEffect(() => {
-    fetch(`${SERVER_HOST}/charts/show/${id}`)
-      .then((res) => res.json())
-      .then((data) => setChartData(data));
+    api.showChart(id as string).then((data) => setChartData(data));
   }, []);
 
   let description = (chartData as any)?.description ?? "";