diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx index 6a9228f2d..f86fe370e 100644 --- a/src/frontend/src/components/codeTabsComponent/index.tsx +++ b/src/frontend/src/components/codeTabsComponent/index.tsx @@ -53,7 +53,7 @@ export default function CodeTabsComponent({ const [isCopied, setIsCopied] = useState(false); const [data, setData] = useState(flow ? flow["data"]!["nodes"] : null); const [openAccordion, setOpenAccordion] = useState([]); - const dark = useDarkStore((state) => state.dark); + const {dark} = useDarkStore(); const { setNodes } = useContext(FlowsContext); const [errorDuplicateKey, setErrorDuplicateKey] = useState(false); diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index 16688a83d..743377378 100644 --- a/src/frontend/src/components/headerComponent/index.tsx +++ b/src/frontend/src/components/headerComponent/index.tsx @@ -31,10 +31,7 @@ export default function Header(): JSX.Element { const { hasStore } = useContext(StoreContext); const navigate = useNavigate(); - const dark = useDarkStore((state) => state.dark); - const setDark = useDarkStore((state) => state.updateDark); - const stars = useDarkStore((state) => state.stars); - const gradientIndex = useDarkStore((state) => state.gradientIndex); + const {dark, setDark, stars, gradientIndex} = useDarkStore(); useEffect(() => { if (dark) { diff --git a/src/frontend/src/components/tagsSelectorComponent/index.tsx b/src/frontend/src/components/tagsSelectorComponent/index.tsx index ce9da74ab..a6ffd953a 100644 --- a/src/frontend/src/components/tagsSelectorComponent/index.tsx +++ b/src/frontend/src/components/tagsSelectorComponent/index.tsx @@ -1,5 +1,4 @@ import { useEffect, useRef, useState } from "react"; -import { useDarkStore } from "../../stores/darkStore"; import { cn } from "../../utils/utils"; import { Badge } from "../ui/badge"; @@ -24,7 +23,6 @@ export function TagsSelector({ : selectedTags.filter((_, i) => i !== index); setSelectedTags(newArray); }; - const dark = useDarkStore((state) => state.dark); const scrollContainerRef = useRef(null); const fadeContainerRef = useRef(null); diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx index cba033acd..880bbe4cb 100644 --- a/src/frontend/src/modals/codeAreaModal/index.tsx +++ b/src/frontend/src/modals/codeAreaModal/index.tsx @@ -26,7 +26,7 @@ export default function CodeAreaModal({ readonly = false, }: codeAreaModalPropsType): JSX.Element { const [code, setCode] = useState(value); - const dark = useDarkStore((state) => state.dark); + const {dark} = useDarkStore(); const [height, setHeight] = useState(null); const { setErrorData, setSuccessData } = useContext(alertContext); diff --git a/src/frontend/src/stores/darkStore.ts b/src/frontend/src/stores/darkStore.ts index 1acf37ead..3eb9a55ee 100644 --- a/src/frontend/src/stores/darkStore.ts +++ b/src/frontend/src/stores/darkStore.ts @@ -8,9 +8,9 @@ type State = { }; type Action = { - updateDark: (dark: State["dark"]) => void; - updateStars: (starts: State["stars"]) => void; - updateGradientIndex: (gradientIndex: State["gradientIndex"]) => void; + setDark: (dark: State["dark"]) => void; + setStars: (starts: State["stars"]) => void; + setGradientIndex: (gradientIndex: State["gradientIndex"]) => void; }; function gradientIndexInitialState() { @@ -23,9 +23,9 @@ export const useDarkStore = create((set) => ({ dark: JSON.parse(window.localStorage.getItem("isDark")!) ?? false, stars: 0, gradientIndex: gradientIndexInitialState(), - updateDark: (dark) => set(() => ({ dark: dark })), - updateStars: (starts) => set(() => ({ stars: starts })), - updateGradientIndex: (gradientIndex) => + setDark: (dark) => set(() => ({ dark: dark })), + setStars: (starts) => set(() => ({ stars: starts })), + setGradientIndex: (gradientIndex) => set(() => ({ gradientIndex: gradientIndex })), })); diff --git a/src/frontend/src/stores/flowManagerStore.ts b/src/frontend/src/stores/flowManagerStore.ts index 6aba64e2a..2d66c9a8c 100644 --- a/src/frontend/src/stores/flowManagerStore.ts +++ b/src/frontend/src/stores/flowManagerStore.ts @@ -35,7 +35,7 @@ type RFState = { }; // this is our useStore hook that we can use in our components to get parts of the store and call actions -const useStore = create((set, get) => ({ +const useFlow = create((set, get) => ({ nodes: [], edges: [], isBuilt: false, @@ -75,4 +75,4 @@ const useStore = create((set, get) => ({ isPending: false, })); -export default useStore; +export default useFlow;