From 46ab48fd1a19d5d76b8d2c2859daf915b1cfdac4 Mon Sep 17 00:00:00 2001 From: Serge Date: Tue, 23 Jul 2024 19:43:05 +0300 Subject: [PATCH] Stored Project ID in Global Store --- src/DataTable/TemplateTable.tsx | 20 +++++++++++--------- src/DialogComp/CreateNewDialog.tsx | 1 - src/MenuBar/LogoBar.tsx | 2 +- src/MenuBar/TopMenuBar.tsx | 5 ++--- src/StartScreenComp/StartScreenComp.tsx | 3 ++- src/pages/HomePage.tsx | 19 ++++++++++++++++--- src/pages/TemplatePage.tsx | 9 +++++++-- src/store/store.js | 6 ++++++ src/ui/Select.tsx | 10 +++++++--- 9 files changed, 52 insertions(+), 23 deletions(-) diff --git a/src/DataTable/TemplateTable.tsx b/src/DataTable/TemplateTable.tsx index a7d490c..36c49bc 100644 --- a/src/DataTable/TemplateTable.tsx +++ b/src/DataTable/TemplateTable.tsx @@ -106,9 +106,9 @@ export default function TemplateTable({ data }) { {table.getHeaderGroups().map((headerGroup) => ( - {headerGroup.headers.map((header) => ( + {headerGroup.headers.map((header, idx) => ( @@ -122,10 +122,10 @@ export default function TemplateTable({ data }) { {/* {console.log(table.getRowModel().rows[0]?.original?.uuid)} */} {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( + table.getRowModel().rows.map((row, i) => ( { setRowSelection(row.id); @@ -134,8 +134,8 @@ export default function TemplateTable({ data }) { row.id == rowSelection ? "selected" : "nonSelected" } > - {row.getVisibleCells().map((cell) => ( - + {row.getVisibleCells().map((cell, y) => ( + {flexRender( cell.column.columnDef.cell, cell.getContext() @@ -146,9 +146,11 @@ export default function TemplateTable({ data }) { )) ) : ( -

- Sorry, no search result -

+ + + Sorry, no search result + + )} diff --git a/src/DialogComp/CreateNewDialog.tsx b/src/DialogComp/CreateNewDialog.tsx index 3fc5320..c51ef2a 100644 --- a/src/DialogComp/CreateNewDialog.tsx +++ b/src/DialogComp/CreateNewDialog.tsx @@ -33,7 +33,6 @@ const CreateNewDialog = () => { const storageItemKey = "my-survey"; var survey_data = new Model(json).data; - console.log("Create: UUID", UUID); return ( diff --git a/src/MenuBar/LogoBar.tsx b/src/MenuBar/LogoBar.tsx index 8596f70..9a879d0 100644 --- a/src/MenuBar/LogoBar.tsx +++ b/src/MenuBar/LogoBar.tsx @@ -8,7 +8,7 @@ import { useSetUuid, useSetIsShosen } from "../store/store"; import { Link } from "react-router-dom"; import Button from "@/ui/Button"; -export default function LogoBar({ startScreen, uuid }) { +export default function LogoBar({ startScreen, uuid, setProjectID }) { const setUUID = useSetUuid(); const setIdShosen = useSetIsShosen(); const [projectName, setProjectName] = useState(() => diff --git a/src/MenuBar/TopMenuBar.tsx b/src/MenuBar/TopMenuBar.tsx index 7e29228..60fa6cf 100644 --- a/src/MenuBar/TopMenuBar.tsx +++ b/src/MenuBar/TopMenuBar.tsx @@ -6,7 +6,7 @@ import "./Header.css"; import config from "../utils/config"; -import { useIntermediateData, useUuid } from "../store/store"; +import { useIntermediateData, useUuid, useProjectID } from "../store/store"; import { postRequestUUID, downloadFile } from "../lib/request"; @@ -17,11 +17,10 @@ export default function TopMenuBar() { const uuid = useUuid(); const interData = useIntermediateData(); + const projectID = useProjectID(); const apiUrl = config.apiUrl; - const projectID = localStorage.getItem("projectID"); - const templateURL = `${apiUrl}/${uuid}?format=xlsx&project=${projectID}`; const urlToCopy = import.meta.env.PROD diff --git a/src/StartScreenComp/StartScreenComp.tsx b/src/StartScreenComp/StartScreenComp.tsx index b0bc98e..4bf7ab9 100644 --- a/src/StartScreenComp/StartScreenComp.tsx +++ b/src/StartScreenComp/StartScreenComp.tsx @@ -22,6 +22,7 @@ import { useSetShowStartScreen, useSetUuid, useUuid, + useProjectID, } from "../store/store"; import { downloadFile } from "../lib/request"; @@ -36,12 +37,12 @@ export default function StartScreenComp({}) { const UUID = useUuid(); const setUUID = useSetUuid(); const setStartScreen = useSetShowStartScreen(); + const projectID = useProjectID(); const idShosen = useIsShosen(); const setIdShosen = useSetIsShosen(); const apiUrl = config.apiUrl; - const projectID = localStorage.getItem("projectID"); const templateURL = `${apiUrl}/${idShosen}?format=xlsx&project=${projectID}`; diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 61f59a6..8fda451 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,14 +1,21 @@ -import React from "react"; +import React, { useState } from "react"; import { useLocation } from "react-router-dom"; import StartScreenComp from "../StartScreenComp/StartScreenComp"; import TemplatePage from "./TemplatePage"; import WizardPage from "./WizardPage"; -import { useSetUuid, useUuid } from "../store/store"; +import { useSetUuid, useUuid, useProjectID } from "../store/store"; export default function HomePage() { const setUUID = useSetUuid(); const UUID = useUuid(); + const prID = useProjectID(); + + const [projectID, setProjectID] = useState(() => + localStorage.getItem("projectID") + ); + + // console.log("Home", prID, localStorage.getItem("projectID")); const location = useLocation(); const queryParams = new URLSearchParams(location.search); @@ -20,7 +27,13 @@ export default function HomePage() { return ( <> {wizardParams && } - {uuidParams || UUID ? : null} + {uuidParams || UUID ? ( + + ) : null} {!uuidParams && !wizardParams && } ); diff --git a/src/pages/TemplatePage.tsx b/src/pages/TemplatePage.tsx index 7108176..24fa6c2 100644 --- a/src/pages/TemplatePage.tsx +++ b/src/pages/TemplatePage.tsx @@ -6,7 +6,7 @@ import SurveyComponent from "../SurveyComp/SurveyComp"; import "../App.css"; -export default function TemplatePage({ uuid }) { +export default function TemplatePage({ uuid, setProjectID, projectID }) { const params = useParams<{ templateId: string }>(); const [result, setResult] = useState(null); @@ -14,7 +14,12 @@ export default function TemplatePage({ uuid }) { return (
- +
diff --git a/src/store/store.js b/src/store/store.js index 6ce79f7..948ee74 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -9,6 +9,9 @@ const useStore = create((set) => ({ showStartScreen: true, saveOnServer: false, intermediateData: null, + project: localStorage.getItem("project"), + projectID: localStorage.getItem("projectID"), + setProjectID: (projectID) => set(() => ({ projectID: projectID })), setUuid: (uuid) => set(() => ({ uuid: uuid })), setIsShosen: (isShosen) => set(() => ({ isShosen: isShosen })), setName: (name) => set(() => ({ name: name })), @@ -22,6 +25,9 @@ const useStore = create((set) => ({ set((state) => ({ saveOnServer: !state.saveOnServer })), })); +export const useProjectID = () => useStore((state) => state.projectID); +export const useSetProjectID = () => useStore((state) => state.setProjectID); + export const useIsShosen = () => useStore((state) => state.isShosen); export const useSetIsShosen = () => useStore((state) => state.setIsShosen); diff --git a/src/ui/Select.tsx b/src/ui/Select.tsx index 523dd5d..07b83c2 100644 --- a/src/ui/Select.tsx +++ b/src/ui/Select.tsx @@ -4,16 +4,19 @@ import SearchIcon from "@/IconsComponents/SearchIcon"; import CloseIcon from "@/IconsComponents/CloseIcon"; import useSWR from "swr"; import { fetcher } from "@/lib/fetcher"; +import { useSetProjectID } from "../store/store"; export default function Select({ url, setProjectName, projectName }) { const [open, setOpen] = useState(false); const [project, setProject] = useState(() => localStorage.getItem("project")); - const [projectID, setProjectID] = useState(() => - localStorage.getItem("projectID") - ); + // const [projectID, setProjectID] = useState(() => + // localStorage.getItem("projectID") + // ); const [filtered, setFiltered] = useState([]); const [search, setSearch] = useState(""); + const setProjectID = useSetProjectID(); + const { data, isLoading } = useSWR(url, fetcher, { revalidateIfStale: false, revalidateOnFocus: false, @@ -33,6 +36,7 @@ export default function Select({ url, setProjectName, projectName }) { const resetProject = () => { setProjectName(""); + setProjectID(""); localStorage.setItem("project", ""); localStorage.setItem("projectID", ""); localStorage.clear();