Stored Project ID in Global Store

src/DataTable/TemplateTable.tsx

@@ -106,9 +106,9 @@ export default function TemplateTable({ data }) {
           <thead>
             {table.getHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
+                {headerGroup.headers.map((header, idx) => (
                   <th
-                    key={header.id}
+                    key={idx}
                     className="thSorted"
                     onClick={header.column.getToggleSortingHandler()}
                   >
@@ -122,10 +122,10 @@ export default function TemplateTable({ data }) {
           </thead>
           {/* {console.log(table.getRowModel().rows[0]?.original?.uuid)} */}
           {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
+            table.getRowModel().rows.map((row, i) => (
               <tbody>
                 <tr
-                  key={RowsIcon.id}
+                  key={i}
                   data-state={row.getIsSelected() && "selected"}
                   onClick={() => {
                     setRowSelection(row.id);
@@ -134,8 +134,8 @@ export default function TemplateTable({ data }) {
                     row.id == rowSelection ? "selected" : "nonSelected"
                   }
                 >
-                  {row.getVisibleCells().map((cell) => (
-                    <td key={cell.id}>
+                  {row.getVisibleCells().map((cell, y) => (
+                    <td key={y}>
                       {flexRender(
                         cell.column.columnDef.cell,
                         cell.getContext()
@@ -146,9 +146,11 @@ export default function TemplateTable({ data }) {
               </tbody>
             ))
           ) : (
-            <p style={{ paddingLeft: "12px", color: "rgb(137 137 137)" }}>
-              Sorry, no search result
-            </p>
+            <tbody>
+              <tr style={{ paddingLeft: "12px", color: "rgb(137 137 137)" }}>
+                <td>Sorry, no search result</td>
+              </tr>
+            </tbody>
           )}
         </table>
       </div>

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 (
     <Dialog.Root>

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(() =>

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

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}`;
 

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 && <WizardPage />}
-      {uuidParams || UUID ? <TemplatePage uuid={UUID} /> : null}
+      {uuidParams || UUID ? (
+        <TemplatePage
+          uuid={UUID}
+          setProjectID={setProjectID}
+          projectID={projectID}
+        />
+      ) : null}
       {!uuidParams && !wizardParams && <StartScreenComp />}
     </>
   );

src/pages/TemplatePage.tsx

@@ -6,15 +6,20 @@ 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);
 
   return (
     <div>
       <div className="headerWrap">
-        <LogoBar startScreen={false} uuid={uuid} />
+        <LogoBar
+          startScreen={false}
+          uuid={uuid}
+          setProjectID={setProjectID}
+          projectID={projectID}
+        />
         <TopMenuBar />
       </div>
       <div className="mainWrap">

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);
 

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();