Changed way of declaring Zustand functions

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -53,7 +53,7 @@ export default function CodeTabsComponent({
   const [isCopied, setIsCopied] = useState<Boolean>(false);
   const [data, setData] = useState(flow ? flow["data"]!["nodes"] : null);
   const [openAccordion, setOpenAccordion] = useState<string[]>([]);
-  const dark = useDarkStore((state) => state.dark);
+  const {dark} = useDarkStore();
 
   const { setNodes } = useContext(FlowsContext);
   const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);

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 {dark, setDark, stars, gradientIndex} = useDarkStore();
-  const setDark = useDarkStore((state) => state.updateDark);
-  const stars = useDarkStore((state) => state.stars);
-  const gradientIndex = useDarkStore((state) => state.gradientIndex);
 
   useEffect(() => {
     if (dark) {

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<HTMLDivElement>(null);
   const fadeContainerRef = useRef<HTMLDivElement>(null);

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<string | null>(null);
   const { setErrorData, setSuccessData } = useContext(alertContext);

src/frontend/src/stores/darkStore.ts

@@ -8,9 +8,9 @@ type State = {
 };
 
 type Action = {
-  updateDark: (dark: State["dark"]) => void;
+  setDark: (dark: State["dark"]) => void;
-  updateStars: (starts: State["stars"]) => void;
+  setStars: (starts: State["stars"]) => void;
-  updateGradientIndex: (gradientIndex: State["gradientIndex"]) => void;
+  setGradientIndex: (gradientIndex: State["gradientIndex"]) => void;
 };
 
 function gradientIndexInitialState() {
@@ -23,9 +23,9 @@ export const useDarkStore = create<State & Action>((set) => ({
   dark: JSON.parse(window.localStorage.getItem("isDark")!) ?? false,
   stars: 0,
   gradientIndex: gradientIndexInitialState(),
-  updateDark: (dark) => set(() => ({ dark: dark })),
+  setDark: (dark) => set(() => ({ dark: dark })),
-  updateStars: (starts) => set(() => ({ stars: starts })),
+  setStars: (starts) => set(() => ({ stars: starts })),
-  updateGradientIndex: (gradientIndex) =>
+  setGradientIndex: (gradientIndex) =>
     set(() => ({ gradientIndex: gradientIndex })),
 }));
 

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<RFState>((set, get) => ({
+const useFlow = create<RFState>((set, get) => ({
   nodes: [],
   edges: [],
   isBuilt: false,
@@ -75,4 +75,4 @@ const useStore = create<RFState>((set, get) => ({
   isPending: false,
 }));
 
-export default useStore;
+export default useFlow;