diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx index 5417f58ce..9365064ba 100644 --- a/src/frontend/src/components/cardComponent/index.tsx +++ b/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); diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index 16688a83d..3aa7e6340 100644 --- a/src/frontend/src/components/headerComponent/index.tsx +++ b/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); diff --git a/src/frontend/src/components/storeGuard/index.tsx b/src/frontend/src/components/storeGuard/index.tsx index 448153daa..c2349044f 100644 --- a/src/frontend/src/components/storeGuard/index.tsx +++ b/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 ; } diff --git a/src/frontend/src/contexts/index.tsx b/src/frontend/src/contexts/index.tsx index e9ca5babb..3ace4cdba 100644 --- a/src/frontend/src/contexts/index.tsx +++ b/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 }) { - - {children} - + {children} diff --git a/src/frontend/src/contexts/storeContext.tsx b/src/frontend/src/contexts/storeContext.tsx deleted file mode 100644 index d78a5aa1b..000000000 --- a/src/frontend/src/contexts/storeContext.tsx +++ /dev/null @@ -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(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 ( - - {children} - - ); -} diff --git a/src/frontend/src/modals/StoreApiKeyModal/index.tsx b/src/frontend/src/modals/StoreApiKeyModal/index.tsx index ffba35c2d..5ac0dc2fa 100644 --- a/src/frontend/src/modals/StoreApiKeyModal/index.tsx +++ b/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( diff --git a/src/frontend/src/modals/shareModal/index.tsx b/src/frontend/src/modals/shareModal/index.tsx index 3363777d6..bd2e4aaca 100644 --- a/src/frontend/src/modals/shareModal/index.tsx +++ b/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); diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index 909a0dcd7..3e5342422 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/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(""); diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 7e04211b8..ab6015e54 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/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, } ); }} diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx index dc2e4db37..69d24728c 100644 --- a/src/frontend/src/pages/StorePage/index.tsx +++ b/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 ( void; + updateValidApiKey: (validApiKey: State["validApiKey"]) => void; + updateHasApiKey: (hasApiKey: State["hasApiKey"]) => void; + updateLoadingApiKey: (loadingApiKey: State["loadingApiKey"]) => void; +}; + +export const useStoreStore = create((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(); diff --git a/src/frontend/src/types/contexts/store.ts b/src/frontend/src/types/contexts/store.ts deleted file mode 100644 index 1bd762c64..000000000 --- a/src/frontend/src/types/contexts/store.ts +++ /dev/null @@ -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; -};