refactoring components

teamdigitale · Sep 20, 2024 · d08e2f8 · d08e2f8
1 parent f634cb4
commit d08e2f8
Show file tree

Hide file tree

Showing 19 changed files with 655 additions and 537 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "react-resizable-panels": "^2.0.22",
     "react-router-dom": "^6.23.1",
     "remark-gfm": "^4.0.0",
+    "swr": "^2.2.5",
     "typeface-lora": "^1.1.13",
     "typeface-roboto-mono": "^1.1.13",
     "typeface-titillium-web": "^1.1.13",

diff --git a/src/components/ChartList.tsx b/src/components/ChartList.tsx
@@ -0,0 +1,53 @@
+import { FieldDataType } from "../sharedTypes";
+
+type ChartListProps = {
+  list: FieldDataType[] | [];
+  handleLoadChart: (item: FieldDataType) => void;
+  handleDeleteChart: (id: string) => void;
+};
+
+export default function ChartList({
+  list,
+  handleLoadChart,
+  handleDeleteChart,
+}: ChartListProps) {
+  return (
+    <div className="">
+      {list?.map((item) => (
+        <div key={item.id} className="my-2 flex gap-2 items-center border p-2">
+          <div className="grow flex flex-col">
+            <div className="text-lg">{item.name}</div>
+            <small
+              className={`text-xxs text-content opacity-70 pr-4 ${
+                item.publish ? "text-success" : "text-content"
+              }`}
+            >
+              {item.publish ? "public" : "private"}
+            </small>
+          </div>
+          {item.publish && (
+            <a
+              className="btn btn-outline btn-success btn-sm"
+              target="_blank"
+              href={`/chart/${item.id}`}
+            >
+              view
+            </a>
+          )}
+          <button
+            className="btn btn-outline btn-primary btn-sm"
+            onClick={() => handleLoadChart(item)}
+          >
+            load
+          </button>
+          <button
+            className="btn btn-outline btn-error btn-sm"
+            onClick={() => handleDeleteChart(item.id || "")}
+          >
+            delete
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/RenderChart.tsx b/src/components/RenderChart.tsx
@@ -1,9 +1,9 @@
-import BasicChart from './charts/BasicChart';
-import PieChart from './charts/PieChart';
-import GeoMapChart from './charts/GeoMapChart';
-import { getPieValues, getBasicValues, getMapValues } from '../lib/utils';
-import { useEffect, useState, useRef } from 'react';
-import { downloadPng } from '../lib/downloadUtils';
+import BasicChart from "./charts/BasicChart";
+import PieChart from "./charts/PieChart";
+import GeoMapChart from "./charts/GeoMapChart";
+import { getPieValues, getBasicValues, getMapValues } from "../lib/utils";
+import { useEffect, useState, useRef } from "react";
+import { downloadPng } from "../lib/downloadUtils";
 
 function RenderChart(ds: any) {
   const [loading, setLoading] = useState(false);
@@ -30,37 +30,37 @@ function RenderChart(ds: any) {
   }
 
   useEffect(() => {
-    window.addEventListener('resize', setDimension);
+    window.addEventListener("resize", setDimension);
     setDimension();
     return () => {
-      window.removeEventListener('resize', setDimension);
+      window.removeEventListener("resize", setDimension);
     };
   }, [wrapRef]);
 
   if (loading) return null;
   return (
-    <div className="w-full min-height-[800px]">
-      <div className="w-full min-height-[800px]">
+    <div className="w-full min-height-[800px] h-full">
+      <div className="w-full min-height-[800px]  h-full">
         <div ref={wrapRef}>
           {ds && (
             <>
-              {(ds.chart === 'bar' || ds.chart === 'line') && (
+              {(ds.chart === "bar" || ds.chart === "line") && (
                 <BasicChart
                   id={ds.id}
                   data={getBasicValues(ds)}
                   isMobile={isMobile}
                   setEchartInstance={setEchartInstance}
                 />
               )}
-              {ds.chart === 'pie' && (
+              {ds.chart === "pie" && (
                 <PieChart
                   id={ds.id}
                   data={getPieValues(ds)}
                   isMobile={isMobile}
                   setEchartInstance={setEchartInstance}
                 />
               )}
-              {ds.chart === 'map' && (
+              {ds.chart === "map" && (
                 <GeoMapChart
                   id={ds.id}
                   data={getMapValues(ds)}
@@ -73,17 +73,17 @@ function RenderChart(ds: any) {
         </div>
       </div>
       <button
-        className="btn btn-primary btn-outline"
-        title={'Download PNG'}
-        aria-label={'Download PNG'}
+        className="btn btn-primary btn-outline mt-4"
+        title={"Download PNG"}
+        aria-label={"Download PNG"}
         onClick={() =>
           downloadPng(
             echartInstance,
             ds.name || `${ds.chart}chart-pic-${Date.now()}`
           )
         }
       >
-        {'Download'} PNG
+        {"Download"} PNG
       </button>
     </div>
   );

diff --git a/src/components/layout/Loading.tsx b/src/components/layout/Loading.tsx
@@ -0,0 +1,8 @@
+export default function Loading() {
+  return (
+    <div className="my-10 gap-2 text-primary flex">
+      <span className="text-primary text-2xl uppercase">Loading</span>
+      <span className="loading loading-dots loading-lg" />
+    </div>
+  );
+}
diff --git a/src/components/layout/QuickstartInfo.tsx b/src/components/layout/QuickstartInfo.tsx
@@ -0,0 +1,26 @@
+export default function QuickstartInfo() {
+  return (
+    <div className="my-5 prose">
+      <h3>Quickstart</h3> If you want start quickly you can generate some dummy
+      data for test purpose from the section{" "}
+      <a className="link link-primary" href="/generate-data">
+        Generate Data
+      </a>{" "}
+      or from the section{" "}
+      <a className="link link-primary" href="/load-data">
+        Load Data
+      </a>{" "}
+      and download th data in CSV format. Then you can upload the data e create
+      a new chart.
+      <h3>How to use:</h3>
+      follow these steps to create a new chart:
+      <ul>
+        <li>Click on "Create New Chart" to start</li>
+        <li>Upload your data</li>
+        <li>Configure your chart</li>
+        <li>Save your chart</li>
+      </ul>
+      <hr />
+    </div>
+  );
+}
diff --git a/src/components/Layout.tsx → src/components/layout/index.tsx b/src/components/Layout.tsx → src/components/layout/index.tsx
@@ -1,5 +1,5 @@
-import Header from "./layout/Header";
-import Footer from "./layout/Footer";
+import Header from "./Header";
+import Footer from "./Footer";
 function Layout({ children }: any) {
   return (
     <div data-theme="italia" className="w-screen h-screen h-full flex flex-col">

diff --git a/src/components/ChartWrapper.tsx → src/components/unused/ChartWrapper.tsx b/src/components/ChartWrapper.tsx → src/components/unused/ChartWrapper.tsx
diff --git a/src/components/CheckGeo.tsx → src/components/unused/CheckGeo.tsx b/src/components/CheckGeo.tsx → src/components/unused/CheckGeo.tsx
diff --git a/src/components/Nav.tsx → src/components/unused/Nav.tsx b/src/components/Nav.tsx → src/components/unused/Nav.tsx
diff --git a/src/lib/api.ts b/src/lib/api.ts
@@ -1,6 +1,8 @@
 import * as auth from "./auth";
 const SERVER_URL = import.meta.env.VITE_SERVER_URL;
 
+let headers: HeadersInit | undefined = { "Content-Type": "application/json" };
+
 /** Upsert */
 export async function upsertChart(
   item: {
@@ -20,12 +22,10 @@ export async function upsertChart(
   const payload = JSON.stringify(item);
   const method = id ? "PUT" : "POST";
 
-  console.log("UPSERT-CHART", url, method);
-
   const response = await fetch(url, {
     method,
     headers: {
-      "Content-Type": "application/json",
+      ...headers,
       Authorization: `Bearer ${token}`,
     },
     body: payload,
@@ -52,7 +52,7 @@ export async function deleteChart(id: string) {
   const response = await fetch(`${SERVER_URL}/charts/${id}`, {
     method: "DELETE",
     headers: {
-      "Content-Type": "application/json",
+      ...headers,
       Authorization: `Bearer ${token}`,
     },
   });
@@ -74,12 +74,11 @@ export async function getCharts() {
   const response = await fetch(`${SERVER_URL}/charts`, {
     method: "GET",
     headers: {
-      "Content-Type": "application/json",
+      ...headers,
       Authorization: `Bearer ${token}`,
     },
   });
 
-  console.log("getCharts", response.status);
   if (response.status === 401) {
     return auth.logout();
   }
@@ -103,9 +102,7 @@ export async function login({
 }) {
   const response = await fetch(`${SERVER_URL}/auth/login`, {
     method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
+    headers,
     body: JSON.stringify({ email, password }),
   });
   if (response.status === 200) {
@@ -131,9 +128,7 @@ export async function register({
 }) {
   const response = await fetch(`${SERVER_URL}/auth/register`, {
     method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
+    headers,
     body: JSON.stringify({ email, password }),
   });
   if (response.status === 200) {
@@ -151,9 +146,7 @@ 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",
-    },
+    headers,
   });
   if (response.status === 200) {
     const data = await response.json();
@@ -162,3 +155,26 @@ export async function showChart(id: string) {
     return [];
   }
 }
+
+type FetcherProps = {
+  path: string;
+  method: string;
+  open?: boolean;
+};
+const fetcher = ({ path, method = "GET", open = true }: FetcherProps) => {
+  let options = {
+    method,
+    headers,
+  };
+  if (!open) {
+    const token = auth.getAuth();
+    options.headers = { ...headers, Authorization: `Bearer ${token}` };
+  }
+  fetch(`${SERVER_URL}/${path}`, options).then((res) => res.json());
+};
+
+// function useApi() {
+//   let path = "/charts";
+//   const { data, error, isLoading } = useSWR(path, getCharts);
+//   return { data, error, isLoading };
+// }
diff --git a/src/main.tsx b/src/main.tsx
@@ -4,13 +4,13 @@ import ReactDOM from "react-dom/client";
 import "./style/index.css";
 
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import Layout from "./components/Layout";
 import HomePage from "./pages/Home";
 import AboutPage from "./pages/About";
 import LoadDataPage from "./pages/LoadDataPage";
 import GenerateDataPage from "./pages/GenerateDataPage";
 import ShowChartPage from "./pages/ShowChartPage";
 import AuthPage from "./pages/AuthPage";
+import EmbedChartPage from "./pages/EmbedChartPage";
 
 function App() {
   const router = createBrowserRouter([
@@ -39,13 +39,13 @@ function App() {
       path: "/chart/:id",
       element: <ShowChartPage />,
     },
+    {
+      path: "/embed/:id",
+      element: <EmbedChartPage />,
+    },
   ]);
 
-  return (
-    <Layout>
-      <RouterProvider router={router} />
-    </Layout>
-  );
+  return <RouterProvider router={router} />;
 }
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(