wip adding remote url and update info

teamdigitale · Oct 29, 2024 · 9d544f6 · 9d544f6
1 parent ebc03fa
commit 9d544f6
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 114 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@types/file-saver": "^2.0.7",
     "@types/papaparse": "^5.3.14",
+    "@types/ramda": "^0.30.2",
     "@xstate/react": "^4.1.1",
     "axios": "^1.6.8",
     "dayjs": "^1.11.12",
@@ -21,6 +22,7 @@
     "immer": "^10.1.1",
     "nanoid": "^5.0.7",
     "papaparse": "^5.4.1",
+    "ramda": "^0.30.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.4",

diff --git a/src/components/ChartSave.tsx b/src/components/ChartSave.tsx
@@ -1,3 +1,4 @@
+import * as R from "ramda";
 import dayjs from "dayjs";
 import { useForm } from "react-hook-form";
 import * as api from "../lib/api";
@@ -7,6 +8,7 @@ function ChartSave({ item, handleSave }: any) {
     "YYYY-MM-DD_HH-mm"
   )}`;
   // const generatedId = nanoid();
+
   const {
     register,
     handleSubmit,
@@ -16,20 +18,19 @@ function ChartSave({ item, handleSave }: any) {
       id: item?.id || "",
       name: item?.name || defaultName,
       description: item?.description || "",
-      publish: item?.published || true,
+      publish: item?.id ? item?.publish : true,
     },
   });
 
   function saveChart(formData: any) {
     const { id = "", name, description = "", publish = false } = formData;
     console.log("Save chart id", id);
+    const itemData = R.omit(["id"], item);
     const payload = {
       name,
       description,
       publish,
-      chart: item.chart,
-      config: item.config,
-      data: item.data,
+      ...itemData,
     };
     console.log("Save chart", JSON.stringify(payload, null, 2));
     return api.upsertChart(payload, id);
@@ -92,6 +93,7 @@ function ChartSave({ item, handleSave }: any) {
               </label>
             </div>
           </div>
+
           {isSubmitting && (
             <div className="loading loading-lg">...sumbitting</div>
           )}

diff --git a/src/components/LoadJsonSource.tsx b/src/components/LoadJsonSource.tsx
@@ -0,0 +1,62 @@
+import { useState } from "react";
+import axios from "axios";
+import { log } from "../lib/utils";
+import Papa from "papaparse";
+
+const PLACEHOLDER_URL = "";
+
+function LoadSource({
+  setData,
+  currentValue,
+}: {
+  setData: Function;
+  currentValue: string | null;
+}) {
+  const [loading, setLoading] = useState(false);
+  const [url, setUrl] = useState(currentValue || PLACEHOLDER_URL);
+
+  async function getData() {
+    setLoading(true);
+    try {
+      let testUrl = new URL(url);
+      if (testUrl) {
+        axios.defaults.timeout = 5000;
+        const response = await axios.get(url);
+        console.log("response.data", response.data);
+        if (response.data) {
+          setData({ remoteUrl: url, data: response.data });
+        }
+      }
+    } catch (error) {
+      log(error);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div
+      style={{
+        marginTop: 10,
+        marginBottom: 10,
+        width: "100%",
+      }}
+    >
+      {loading && <p>Loading...</p>}
+      <div className="bg-base-200 p-4 my-5">
+        <label className="label">Url</label>
+        <input
+          className="input w-full"
+          type="text"
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+        />
+      </div>
+      <button className="btn btn-primary" onClick={() => getData()}>
+        USE REMOTE DATA
+      </button>
+    </div>
+  );
+}
+
+export default LoadSource;
diff --git a/src/components/LoadSource.tsx b/src/components/LoadSource.tsx
@@ -1,13 +1,14 @@
-import { useState } from 'react';
-import axios from 'axios';
-import { log } from '../lib/utils';
-import Papa from 'papaparse';
+import { useState } from "react";
+import axios from "axios";
+import { log } from "../lib/utils";
+import Papa from "papaparse";
+
+const PLACEHOLDER_URL =
+  "https://www.datocms-assets.com/38008/1722249098-generated-data-3x51722249031636.csv";
 
 function LoadSource({ setRawData }: { setRawData: Function }) {
   const [loading, setLoading] = useState(false);
-  const [url, setUrl] = useState(
-    'https://www.datocms-assets.com/38008/1722249098-generated-data-3x51722249031636.csv'
-  );
+  const [url, setUrl] = useState(PLACEHOLDER_URL);
 
   async function getData() {
     setLoading(true);
@@ -16,13 +17,13 @@ function LoadSource({ setRawData }: { setRawData: Function }) {
       if (testUrl) {
         axios.defaults.timeout = 5000;
         const response = await axios.get(url);
-        console.log('response.data', response.data);
+        console.log("response.data", response.data);
         Papa.parse(response.data, {
           header: false,
           skipEmptyLines: true,
           complete: (results) => {
             const { data } = results;
-            console.log('setRawData ', data);
+            console.log("setRawData ", data);
             setRawData(data);
           },
         });
@@ -39,7 +40,7 @@ function LoadSource({ setRawData }: { setRawData: Function }) {
       style={{
         marginTop: 10,
         marginBottom: 10,
-        width: '100%',
+        width: "100%",
       }}
     >
       {loading && <p>Loading...</p>}

diff --git a/src/components/unused/Nav.tsx b/src/components/unused/Nav.tsx
diff --git a/src/lib/api.ts b/src/lib/api.ts
@@ -4,17 +4,7 @@ const SERVER_URL = import.meta.env.VITE_SERVER_URL;
 let headers: HeadersInit | undefined = { "Content-Type": "application/json" };
 
 /** Upsert */
-export async function upsertChart(
-  item: {
-    name: string;
-    description?: string;
-    chart: string;
-    config?: any;
-    data: any;
-    publish: boolean;
-  },
-  id?: string
-) {
+export async function upsertChart(item: any, id?: string) {
   const token = auth.getAuth();
   if (!token) return null;
 

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -113,6 +113,7 @@ export const sampleData: FieldDataType = {
     categories: [],
     series: [],
   },
+  isRemote: false,
 };
 
 export const getFields = (availabelPalettes: any, defaultPalette: string) => [

diff --git a/src/lib/storeState.ts b/src/lib/storeState.ts
@@ -1,7 +1,7 @@
 import { create } from "zustand";
-import { persist } from "zustand/middleware";
 import { defaultConfig } from "./constants";
 import { MatrixType, StoreStateType } from "../sharedTypes";
+// import { persist } from "zustand/middleware";
 // import { immer } from 'zustand/middleware/immer';
 
 const useStoreState = create<StoreStateType>()(
@@ -13,6 +13,8 @@ const useStoreState = create<StoreStateType>()(
     rawData: null,
     description: "",
     publish: false,
+    remoteUrl: null,
+    isRemote: false,
     name: "",
     id: null,
     setId: (value: string) => set(() => ({ id: value })),
@@ -21,6 +23,8 @@ const useStoreState = create<StoreStateType>()(
     setChart: (value: string) => set(() => ({ chart: value })),
     setRawData: (value: any) => set(() => ({ rawData: value })),
     setData: (value: MatrixType | null) => set(() => ({ data: value })),
+    setRemoteUrl: (value: string | null) => set(() => ({ remoteUrl: value })),
+    setIsRemote: (value: boolean) => set(() => ({ isRemote: value })),
     loadItem: (value: any) =>
       set((state) => ({
         chart: value.chart,
@@ -30,6 +34,8 @@ const useStoreState = create<StoreStateType>()(
         description: value.description,
         publish: value.publish,
         name: value.name,
+        remoteUrl: value.remoteUrl,
+        isRemote: value.isRemote,
         id: value.id,
       })),
     resetItem: () =>
@@ -42,6 +48,8 @@ const useStoreState = create<StoreStateType>()(
         config: defaultConfig,
         rawData: null,
         publish: true,
+        // remoteUrl: null,
+        // isRemote: false,
       })),
   })
   // { name: "persistedStore" }

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -22,6 +22,7 @@ import { dataToCSV, downloadCSV } from "../lib/downloadUtils";
 import * as auth from "../lib/auth";
 import * as api from "../lib/api";
 import { FieldDataType } from "../sharedTypes";
+import LoadJsonSource from "../components/LoadJsonSource";
 
 function Home() {
   const [state, send] = useMachine(stepMachine);
@@ -33,10 +34,14 @@ function Home() {
     name,
     description,
     publish,
+    isRemote,
+    remoteUrl,
 
     setConfig,
     setChart,
     setData,
+    setRemoteUrl,
+    setIsRemote,
 
     loadItem,
     resetItem,
@@ -93,6 +98,15 @@ function Home() {
     setData(d);
     send({ type: "NEXT" });
   }
+  function handleSetRemoteData(d: any) {
+    console.log("handleSetRemoteData", d);
+    setIsRemote(true);
+    setRemoteUrl(d.remoteUrl);
+    setData(d.data);
+    setTimeout(() => {
+      send({ type: "CONFIG" });
+    }, 100);
+  }
 
   function handleLoadChart(item: FieldDataType) {
     send({ type: "CONFIG" });
@@ -194,6 +208,10 @@ function Home() {
               <div className="container">
                 <h4 className="text-4xl font-bold">Upload your data</h4>
                 <CSVUpload setData={(d: any) => handleUpload(d)} />
+                <LoadJsonSource
+                  currentValue={remoteUrl}
+                  setData={(d: any) => handleSetRemoteData(d)}
+                />
               </div>
             )}
 
@@ -222,6 +240,8 @@ function Home() {
                     publish,
                     config,
                     data,
+                    remoteUrl,
+                    isRemote,
                   }}
                   handleSave={() => handleSaveChart()}
                 />