fix(cardComponent): remove unused import and update import for useStoreStore

fix(headerComponent): remove unused import and update import for useStoreStore
fix(storeGuard): remove unused import and update import for useStoreStore
fix(index): remove unused import and update import for useStoreStore
fix(StoreApiKeyModal): remove unused import and update import for useStoreStore
fix(shareModal): remove unused import and update import for useStoreStore
fix(extraSidebarComponent): remove unused import and update import for useStoreStore
fix(nodeToolbarComponent): remove unused import and update import for useStoreStore
fix(index): remove unused import and update import for useStoreStore
fix(FlowPage): remove unused import and update import for useStoreStore
fix(darkStore): create store for dark mode and update import for useStoreStore
fix(storeStore): create store for store context and update import for useStoreStore

src/frontend/src/components/cardComponent/index.tsx

@@ -1,9 +1,9 @@
 import { useContext, useEffect, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
 import { FlowsContext } from "../../contexts/flowsContext";
-import { StoreContext } from "../../contexts/storeContext";
 import { getComponent, postLikeComponent } from "../../controllers/API";
 import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
+import { useStoreStore } from "../../stores/storeStore";
 import { storeComponent } from "../../types/store";
 import cloneFLowWithParent from "../../utils/storeUtils";
 import { cn } from "../../utils/utils";
@@ -34,7 +34,7 @@ export default function CollectionCardComponent({
 }) {
   const { addFlow } = useContext(FlowsContext);
   const { setSuccessData, setErrorData } = useContext(alertContext);
-  const { setValidApiKey } = useContext(StoreContext);
+  const setValidApiKey = useStoreStore((state) => state.updateValidApiKey);
   const isStore = false;
   const [loading, setLoading] = useState(false);
   const [loadingLike, setLoadingLike] = useState(false);

src/frontend/src/components/headerComponent/index.tsx

@@ -5,10 +5,10 @@ import AlertDropdown from "../../alerts/alertDropDown";
 import { USER_PROJECTS_HEADER } from "../../constants/constants";
 import { alertContext } from "../../contexts/alertContext";
 import { AuthContext } from "../../contexts/authContext";
-import { StoreContext } from "../../contexts/storeContext";
 
 import { FlowsContext } from "../../contexts/flowsContext";
 import { useDarkStore } from "../../stores/darkStore";
+import { useStoreStore } from "../../stores/storeStore";
 import { gradients } from "../../utils/styleUtils";
 import IconComponent from "../genericIconComponent";
 import { Button } from "../ui/button";
@@ -28,9 +28,10 @@ export default function Header(): JSX.Element {
   const { notificationCenter } = useContext(alertContext);
   const location = useLocation();
   const { logout, autoLogin, isAdmin, userData } = useContext(AuthContext);
-  const { hasStore } = useContext(StoreContext);
   const navigate = useNavigate();
 
+  const hasStore = useStoreStore((state) => state.hasStore);
+
   const dark = useDarkStore((state) => state.dark);
   const setDark = useDarkStore((state) => state.updateDark);
   const stars = useDarkStore((state) => state.stars);

src/frontend/src/components/storeGuard/index.tsx

@@ -1,9 +1,9 @@
-import { useContext } from "react";
 import { Navigate } from "react-router-dom";
-import { StoreContext } from "../../contexts/storeContext";
+import { useStoreStore } from "../../stores/storeStore";
 
 export const StoreGuard = ({ children }) => {
-  const { hasStore } = useContext(StoreContext);
+  const hasStore = useStoreStore((state) => state.hasStore);
+
   if (!hasStore) {
     return <Navigate to="/flows" replace />;
   }

src/frontend/src/contexts/index.tsx

@@ -8,7 +8,6 @@ import { AlertProvider } from "./alertContext";
 import { AuthProvider } from "./authContext";
 import { FlowsProvider } from "./flowsContext";
 import { LocationProvider } from "./locationContext";
-import { StoreProvider } from "./storeContext";
 
 import { TypesProvider } from "./typesContext";
 import { UndoRedoProvider } from "./undoRedoContext";
@@ -27,9 +26,7 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
                     <ApiInterceptor />
                     <SSEProvider>
                       <FlowsProvider>
-                        <UndoRedoProvider>
-                          <StoreProvider>{children}</StoreProvider>
-                        </UndoRedoProvider>
+                        <UndoRedoProvider>{children}</UndoRedoProvider>
                       </FlowsProvider>
                     </SSEProvider>
                   </LocationProvider>

src/frontend/src/contexts/storeContext.tsx

@@ -1,74 +0,0 @@
-import { createContext, useContext, useEffect, useState } from "react";
-import { checkHasApiKey, checkHasStore } from "../controllers/API";
-import { storeContextType } from "../types/contexts/store";
-import { AuthContext } from "./authContext";
-
-//store context to share user components and update them
-const initialValue = {
-  hasStore: true,
-  setHasStore: () => {},
-  validApiKey: false,
-  setValidApiKey: () => {},
-  hasApiKey: false,
-  setHasApiKey: () => {},
-  loadingApiKey: true,
-};
-
-export const StoreContext = createContext<storeContextType>(initialValue);
-
-export function StoreProvider({ children }) {
-  const [hasStore, setHasStore] = useState(false);
-  const [loadingApiKey, setLoadingApiKey] = useState(true);
-  const [hasApiKey, setHasApiKey] = useState(true);
-  const [validApiKey, setValidApiKey] = useState(false);
-  const [storeChecked, setStoreChecked] = useState(false);
-  const { apiKey } = useContext(AuthContext);
-
-  useEffect(() => {
-    const fetchStoreData = async () => {
-      try {
-        if (storeChecked) return;
-        const res = await checkHasStore();
-        setHasStore(res?.enabled ?? false);
-        setStoreChecked(true);
-      } catch (e) {
-        console.log(e);
-      }
-    };
-
-    fetchStoreData();
-  }, []);
-
-  const fetchApiData = async () => {
-    setLoadingApiKey(true);
-    try {
-      const res = await checkHasApiKey();
-      setHasApiKey(res?.has_api_key ?? false);
-      setValidApiKey(res?.is_valid ?? false);
-      setLoadingApiKey(false);
-    } catch (e) {
-      setLoadingApiKey(false);
-      console.log(e);
-    }
-  };
-
-  useEffect(() => {
-    fetchApiData();
-  }, [storeChecked, apiKey]);
-
-  return (
-    <StoreContext.Provider
-      value={{
-        hasStore,
-        setHasStore,
-        hasApiKey,
-        setHasApiKey,
-        validApiKey,
-        setValidApiKey,
-        loadingApiKey,
-      }}
-    >
-      {children}
-    </StoreContext.Provider>
-  );
-}

src/frontend/src/modals/StoreApiKeyModal/index.tsx

@@ -5,8 +5,8 @@ import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
 import { alertContext } from "../../contexts/alertContext";
 import { AuthContext } from "../../contexts/authContext";
-import { StoreContext } from "../../contexts/storeContext";
 import { addApiKeyStore } from "../../controllers/API";
+import { useStoreStore } from "../../stores/storeStore";
 import { StoreApiKeyType } from "../../types/components";
 import BaseModal from "../baseModal";
 
@@ -18,9 +18,11 @@ export default function StoreApiKeyModal({
   const [open, setOpen] = useState(false);
   const { setSuccessData, setErrorData } = useContext(alertContext);
   const { storeApiKey } = useContext(AuthContext);
-  const { hasApiKey, validApiKey } = useContext(StoreContext);
   const [apiKeyValue, setApiKeyValue] = useState("");
 
+  const validApiKey = useStoreStore((state) => state.validApiKey);
+  const hasApiKey = useStoreStore((state) => state.hasApiKey);
+
   const handleSaveKey = () => {
     if (apiKeyValue) {
       addApiKeyStore(apiKeyValue).then(

src/frontend/src/modals/shareModal/index.tsx

@@ -7,14 +7,13 @@ import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
 import { alertContext } from "../../contexts/alertContext";
 import { FlowsContext } from "../../contexts/flowsContext";
-import { StoreContext } from "../../contexts/storeContext";
-import { typesContext } from "../../contexts/typesContext";
 import {
   getStoreComponents,
   getStoreTags,
   saveFlowStore,
   updateFlowStore,
 } from "../../controllers/API";
+import { useStoreStore } from "../../stores/storeStore";
 import { FlowType } from "../../types/flow";
 import {
   downloadNode,
@@ -41,7 +40,9 @@ export default function ShareModal({
   disabled?: boolean;
 }): JSX.Element {
   const { version } = useContext(FlowsContext);
-  const { hasApiKey, hasStore } = useContext(StoreContext);
+  const hasStore = useStoreStore((state) => state.hasStore);
+  const hasApiKey = useStoreStore((state) => state.hasApiKey);
+
   const { setSuccessData, setErrorData } = useContext(alertContext);
   const [internalOpen, internalSetOpen] = useState(children ? false : true);
   const [openConfirmationModal, setOpenConfirmationModal] = useState(false);

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -6,11 +6,11 @@ import { Input } from "../../../../components/ui/input";
 import { Separator } from "../../../../components/ui/separator";
 import { alertContext } from "../../../../contexts/alertContext";
 import { FlowsContext } from "../../../../contexts/flowsContext";
-import { StoreContext } from "../../../../contexts/storeContext";
 import { typesContext } from "../../../../contexts/typesContext";
 import ApiModal from "../../../../modals/ApiModal";
 import ExportModal from "../../../../modals/exportModal";
 import ShareModal from "../../../../modals/shareModal";
+import { useStoreStore } from "../../../../stores/storeStore";
 import { APIClassType, APIObjectType } from "../../../../types/api";
 import {
   nodeColors,
@@ -30,7 +30,11 @@ export default function ExtraSidebar(): JSX.Element {
     useContext(typesContext);
   const { flows, tabId, uploadFlow, tabsState, saveFlow, isBuilt, isPending } =
     useContext(FlowsContext);
-  const { hasApiKey, validApiKey, hasStore } = useContext(StoreContext);
+
+  const hasStore = useStoreStore((state) => state.hasStore);
+  const hasApiKey = useStoreStore((state) => state.hasApiKey);
+  const validApiKey = useStoreStore((state) => state.validApiKey);
+
   const { setErrorData } = useContext(alertContext);
   const [dataFilter, setFilterData] = useState(data);
   const [search, setSearch] = useState("");

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -1,6 +1,5 @@
 import { cloneDeep } from "lodash";
 import { useContext, useEffect, useState } from "react";
-import { useReactFlow } from "reactflow";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import IconComponent from "../../../../components/genericIconComponent";
 import {
@@ -10,11 +9,11 @@ import {
   SelectTrigger,
 } from "../../../../components/ui/select-custom";
 import { FlowsContext } from "../../../../contexts/flowsContext";
-import { StoreContext } from "../../../../contexts/storeContext";
 import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import ConfirmationModal from "../../../../modals/ConfirmationModal";
 import EditNodeModal from "../../../../modals/EditNodeModal";
 import ShareModal from "../../../../modals/shareModal";
+import { useStoreStore } from "../../../../stores/storeStore";
 import { nodeToolbarPropsType } from "../../../../types/components";
 import { FlowType } from "../../../../types/flow";
 import {
@@ -51,7 +50,10 @@ export default function NodeToolbarComponent({
     ).length
   );
   const { getNodeId } = useContext(FlowsContext);
-  const { hasApiKey, validApiKey, hasStore } = useContext(StoreContext);
+
+  const hasStore = useStoreStore((state) => state.hasStore);
+  const hasApiKey = useStoreStore((state) => state.hasApiKey);
+  const validApiKey = useStoreStore((state) => state.validApiKey);
 
   function canMinimize() {
     let countHandles: number = 0;
@@ -64,7 +66,16 @@ export default function NodeToolbarComponent({
   const isMinimal = canMinimize();
   const isGroup = data.node?.flow ? true : false;
 
-  const { paste, saveComponent, version, flows, nodes, edges, setNodes, setEdges } = useContext(FlowsContext);
+  const {
+    paste,
+    saveComponent,
+    version,
+    flows,
+    nodes,
+    edges,
+    setNodes,
+    setEdges,
+  } = useContext(FlowsContext);
   const { takeSnapshot } = useContext(undoRedoContext);
   const [showModalAdvanced, setShowModalAdvanced] = useState(false);
   const [showconfirmShare, setShowconfirmShare] = useState(false);
@@ -155,8 +166,10 @@ export default function NodeToolbarComponent({
                   {
                     x: 50,
                     y: 10,
-                    paneX: nodes.find((node) => node.id === data.id)?.position.x,
-                    paneY: nodes.find((node) => node.id === data.id)?.position.y,
+                    paneX: nodes.find((node) => node.id === data.id)?.position
+                      .x,
+                    paneY: nodes.find((node) => node.id === data.id)?.position
+                      .y,
                   }
                 );
               }}

src/frontend/src/pages/StorePage/index.tsx

@@ -23,14 +23,22 @@ import {
 import { alertContext } from "../../contexts/alertContext";
 import { AuthContext } from "../../contexts/authContext";
 import { FlowsContext } from "../../contexts/flowsContext";
-import { StoreContext } from "../../contexts/storeContext";
-import { getStoreComponents, getStoreTags } from "../../controllers/API";
+import {
+  checkHasApiKey,
+  getStoreComponents,
+  getStoreTags,
+} from "../../controllers/API";
 import StoreApiKeyModal from "../../modals/StoreApiKeyModal";
+import { useStoreStore } from "../../stores/storeStore";
 import { storeComponent } from "../../types/store";
 import { cn } from "../../utils/utils";
+
 export default function StorePage(): JSX.Element {
-  const { validApiKey, setValidApiKey, hasApiKey, loadingApiKey } =
-    useContext(StoreContext);
+  const hasApiKey = useStoreStore((state) => state.hasApiKey);
+  const validApiKey = useStoreStore((state) => state.validApiKey);
+  const setValidApiKey = useStoreStore((state) => state.updateValidApiKey);
+  const loadingApiKey = useStoreStore((state) => state.loadingApiKey);
+
   const { apiKey } = useContext(AuthContext);
   const { setErrorData } = useContext(alertContext);
   const { setTabId } = useContext(FlowsContext);
@@ -162,6 +170,26 @@ export default function StorePage(): JSX.Element {
     setPageSize(12);
   }
 
+  const fetchApiData = async () => {
+    useStoreStore.setState({ loadingApiKey: true });
+    try {
+      const res = await checkHasApiKey();
+
+      useStoreStore.setState({
+        loadingApiKey: false,
+        validApiKey: res?.is_valid ?? false,
+        hasApiKey: res?.has_api_key ?? false,
+      });
+    } catch (e) {
+      useStoreStore.setState({ loadingApiKey: false });
+      console.log(e);
+    }
+  };
+
+  useEffect(() => {
+    fetchApiData();
+  }, [apiKey]);
+
   return (
     <PageLayout
       betaIcon

src/frontend/src/stores/storeStore.tsx

@@ -0,0 +1,50 @@
+import { create } from "zustand";
+import { checkHasApiKey, checkHasStore } from "../controllers/API";
+
+type State = {
+  hasStore: boolean;
+  validApiKey: boolean;
+  hasApiKey: boolean;
+  loadingApiKey: boolean;
+};
+
+type Action = {
+  updateHasStore: (hasStore: State["hasStore"]) => void;
+  updateValidApiKey: (validApiKey: State["validApiKey"]) => void;
+  updateHasApiKey: (hasApiKey: State["hasApiKey"]) => void;
+  updateLoadingApiKey: (loadingApiKey: State["loadingApiKey"]) => void;
+};
+
+export const useStoreStore = create<State & Action>((set) => ({
+  hasStore: true,
+  validApiKey: false,
+  hasApiKey: false,
+  loadingApiKey: true,
+  updateHasStore: (hasStore) => set(() => ({ hasStore: hasStore })),
+  updateValidApiKey: (validApiKey) => set(() => ({ validApiKey: validApiKey })),
+  updateLoadingApiKey: (hasApiKey) => set(() => ({ hasApiKey: hasApiKey })),
+  updateHasApiKey: (loadingApiKey) =>
+    set(() => ({ loadingApiKey: loadingApiKey })),
+}));
+
+checkHasStore().then((res) => {
+  useStoreStore.setState({ hasStore: res?.enabled ?? false });
+});
+
+const fetchApiData = async () => {
+  useStoreStore.setState({ loadingApiKey: true });
+  try {
+    const res = await checkHasApiKey();
+
+    useStoreStore.setState({
+      loadingApiKey: false,
+      validApiKey: res?.is_valid ?? false,
+      hasApiKey: res?.has_api_key ?? false,
+    });
+  } catch (e) {
+    useStoreStore.setState({ loadingApiKey: false });
+    console.log(e);
+  }
+};
+
+fetchApiData();

src/frontend/src/types/contexts/store.ts

@@ -1,9 +0,0 @@
-export type storeContextType = {
-  setHasStore: (store: boolean) => void;
-  hasStore: boolean;
-  setHasApiKey: (key: boolean) => void;
-  hasApiKey: boolean;
-  setValidApiKey: (key: boolean) => void;
-  validApiKey: boolean;
-  loadingApiKey: boolean;
-};