store optimization

app/src/components/layout/sidebarLeft/assetList/Assets.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useMemo, useCallback } from "react";
-import { useDecalStore } from "../../../../store/builder/store";
 import { getFilteredAssets } from "./assetsHelpers/filteredAssetsHelper";
 import { fetchCategoryDecals } from "./assetsHelpers/fetchDecalsHelper";
+import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
 import {
   fetchAllAssets,
   fetchCategoryAssets,
@@ -16,7 +16,7 @@ import {
 import { ArrowIcon } from "../../../icons/ExportCommonIcons";
 
 const Assets: React.FC = () => {
-  const { selectedSubCategory, setSelectedSubCategory } = useDecalStore();
+  const { selectedDecalCategory, setSelectedDecalCategory } = useBuilderStore();
   const [searchValue, setSearchValue] = useState<string | null>(null);
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
   const [assets, setAssets] = useState<AssetProp[] | DecalProp[]>([]);
@@ -31,9 +31,9 @@ const Assets: React.FC = () => {
         assets,
         searchValue,
         selectedCategory,
-        selectedSubCategory,
+        selectedDecalCategory,
       }),
-    [assets, searchValue, selectedCategory, selectedSubCategory]
+    [assets, searchValue, selectedCategory, selectedDecalCategory]
   );
 
   const handleFetchCategory = useCallback(
@@ -43,14 +43,14 @@ const Assets: React.FC = () => {
       if (category === "Decals") {
         const res = await fetchCategoryDecals("Safety");
         setAssets(res);
-        setSelectedSubCategory("Safety");
+        setSelectedDecalCategory("Safety");
       } else {
         const res = await fetchCategoryAssets(category);
         setAssets(res);
       }
       setIsLoading(false);
     },
-    [setSelectedSubCategory]
+    [setSelectedDecalCategory]
   );
 
   const fetchGlobalSearch = useCallback(async (term: string) => {
@@ -90,7 +90,7 @@ const Assets: React.FC = () => {
                       className="back-button"
                       onClick={() => {
                         setSelectedCategory(null);
-                        setSelectedSubCategory(null);
+                        setSelectedDecalCategory(null);
                         setAssets([]);
                         setSearchValue(null);
                       }}
@@ -106,14 +106,13 @@ const Assets: React.FC = () => {
                       {ACTIVE_DECAL_SUBCATEGORIES.map((cat) => (
                         <div
                           key={cat.name}
-                          className={`catogory-asset-filter-wrapper ${
+                          className={`catogory-asset-filter-wrapper ${selectedDecalCategory === cat.name ? "active" : ""
-                            selectedSubCategory === cat.name ? "active" : ""
                             }`}
                           onClick={async () => {
                             setIsLoading(true);
                             const res = await fetchCategoryDecals(cat.name);
                             setAssets(res);
-                            setSelectedSubCategory(cat.name);
+                            setSelectedDecalCategory(cat.name);
                             setIsLoading(false);
                           }}
                         >

app/src/components/layout/sidebarLeft/assetList/assetsHelpers/filteredAssetsHelper.ts

@@ -2,19 +2,19 @@ interface FilterProps {
   assets: AssetProp[] | DecalProp[];
   searchValue: string | null;
   selectedCategory: string | null;
-  selectedSubCategory: string | null;
+  selectedDecalCategory: string | null;
 }
 
 export const getFilteredAssets = ({
   assets,
   searchValue,
   selectedCategory,
-  selectedSubCategory,
+  selectedDecalCategory,
 }: FilterProps) => {
   const term = searchValue?.trim().toLowerCase();
   if (!term) return assets;
 
-  if (selectedCategory === "Decals" || selectedSubCategory) {
+  if (selectedCategory === "Decals" || selectedDecalCategory) {
     return (assets as DecalProp[]).filter((a) =>
       a.decalName?.toLowerCase().includes(term)
     );

app/src/components/layout/sidebarLeft/assetList/assetsHelpers/renderAssetHelper.tsx

@@ -1,9 +1,10 @@
 import React from "react";
-import { useDroppedDecal, useSelectedItem } from "../../../../../store/builder/store";
+import { useSelectedItem } from "../../../../../store/builder/store";
+import { useBuilderStore } from "../../../../../store/builder/useBuilderStore";
 
 export const RenderAsset: React.FC<{ asset: AssetProp | DecalProp; index: number }> = ({ asset, index }) => {
   const { setSelectedItem } = useSelectedItem();
-  const { setDroppedDecal } = useDroppedDecal();
+  const { setDroppedDecal } = useBuilderStore();
 
   if ("decalName" in asset) {
     return (

app/src/modules/builder/Decal/decalCreator/decalCreator.tsx

@@ -2,7 +2,8 @@ import { MathUtils } from 'three';
 import { useEffect } from 'react';
 import { useThree } from '@react-three/fiber';
 import { useParams } from 'react-router-dom';
-import { useDroppedDecal, useSocketStore } from '../../../../store/builder/store';
+import { useSocketStore } from '../../../../store/builder/store';
+import { useBuilderStore } from '../../../../store/builder/useBuilderStore';
 import useModuleStore from '../../../../store/useModuleStore';
 import { useSceneContext } from '../../../scene/sceneContext';
 import { useVersionContext } from '../../version/versionContext';
@@ -16,7 +17,7 @@ function DecalCreator() {
     const { wallStore, floorStore } = useSceneContext();
     const { addDecal: addDecalOnWall, getWallById } = wallStore();
     const { addDecal: addDecalOnFloor, getFloorById } = floorStore();
-    const { droppedDecal, setDroppedDecal } = useDroppedDecal();
+    const { droppedDecal, setDroppedDecal } = useBuilderStore();
     const { activeModule } = useModuleStore();
     const { userId, organization } = getUserData();
     const { selectedVersionStore } = useVersionContext();

app/src/modules/scene/controls/transformControls/transformControls.tsx

@@ -196,7 +196,7 @@ export default function TransformControl() {
         return () => {
             window.removeEventListener("keydown", handleKeyDown);
         };
-    }, [selectedFloorAsset]);
+    }, [selectedFloorAsset, setObjectPosition, setObjectRotation]);
 
     useEffect(() => {
         if (activeTool === "delete") {
@@ -208,7 +208,7 @@ export default function TransformControl() {
             setObjectPosition({ x: undefined, y: undefined, z: undefined });
             setObjectRotation({ x: undefined, y: undefined, z: undefined });
         }
-    }, [activeTool]);
+    }, [activeTool, setObjectPosition, setObjectRotation, setSelectedFloorAsset, state.controls]);
 
     return (
         <>

app/src/pages/Project.tsx

@@ -2,8 +2,6 @@ import React, { useEffect } from "react";
 import useModuleStore from "../store/useModuleStore";
 import {
   useSocketStore,
-  useOrganization,
-  useUserName,
   useProjectName,
   useActiveTool,
 } from "../store/builder/store";
@@ -29,8 +27,6 @@ const Project: React.FC = () => {
   let navigate = useNavigate();
   const echo = useLogger();
   const { setActiveModule } = useModuleStore();
-  const { setUserName } = useUserName();
-  const { setOrganization } = useOrganization();
   const { projectId } = useParams();
   const { setProjectName } = useProjectName();
   const { userId, email, organization, userName } = getUserData();
@@ -107,10 +103,6 @@ const Project: React.FC = () => {
           .getState()
           .initializeSocket(email, organization, token, refreshToken);
       }
-      if (organization && userName) {
-        setOrganization(organization);
-        setUserName(userName);
-      }
       echo.success("Project initialized and loaded successfully");
     } else {
       navigate("/");

app/src/pages/UserAuth.tsx

@@ -4,8 +4,6 @@ import { LogoIconLarge } from "../components/icons/Logo";
 import { EyeIcon } from "../components/icons/ExportCommonIcons";
 import {
   useLoadingProgress,
-  useOrganization,
-  useUserName,
 } from "../store/builder/store";
 import { signInApi } from "../services/factoryBuilder/signInSignUp/signInApi";
 import { signUpApi } from "../services/factoryBuilder/signInSignUp/signUpApi";
@@ -19,8 +17,8 @@ const UserAuth: React.FC = () => {
   const [showPassword, setShowPassword] = useState(false);
   const [error, setError] = useState("");
   const [isSignIn, setIsSignIn] = useState(true);
-  const { userName, setUserName } = useUserName();
+  const { userName } = getUserData();
-  const { setOrganization } = useOrganization();
+  const [name, setName] = useState<string>(userName || '');
   const { setLoadingProgress } = useLoadingProgress();
   const [fingerprint, setFingerprint] = useState("");
 
@@ -43,8 +41,6 @@ const UserAuth: React.FC = () => {
       const res = await signInApi(email, password, organization, fingerprint);
       if (res.message.message === "login successfull") {
         setError("");
-        setOrganization(organization);
-        setUserName(res.message.name);
         localStorage.setItem("userId", res.message.userId);
         localStorage.setItem("email", res.message.email);
         localStorage.setItem("userName", res.message.name);
@@ -113,11 +109,11 @@ const UserAuth: React.FC = () => {
 
   const handleRegister = async (e: FormEvent) => {
     e.preventDefault();
-    if (email && password && userName) {
+    if (email && password && name) {
       setError("");
       try {
         const organization = email.split("@")[1].split(".")[0];
-        const res = await signUpApi(userName, email, password, organization);
+        const res = await signUpApi(name, email, password, organization);
 
         if (res.message === "New User created") {
           setIsSignIn(true);
@@ -178,9 +174,9 @@ const UserAuth: React.FC = () => {
         {!isSignIn && (
           <input
             type="text"
-            value={userName}
+            value={name}
             placeholder="Username"
-            onChange={(e) => setUserName(e.target.value)}
+            onChange={(e) => setName(e.target.value)}
             required
           />
         )}

app/src/store/builder/store.ts

@@ -81,11 +81,6 @@ export const useLoadingProgress = create<{
     setLoadingProgress: (x: number) => set({ loadingProgress: x }),
 }));
 
-export const useOrganization = create<any>((set: any) => ({
-    organization: "",
-    setOrganization: (x: any) => set(() => ({ organization: x })),
-}));
-
 export const useToggleView = create<any>((set: any) => ({
     toggleView: false,
     setToggleView: (x: any) => set(() => ({ toggleView: x })),
@@ -107,51 +102,16 @@ export const useSelectedItem = create<any>((set: any) => ({
     setSelectedItem: (x: any) => set(() => ({ selectedItem: x })),
 }));
 
-type DroppedDecalType = {
-    category: string;
-    decalName: string;
-    decalImage: string;
-    decalId: string;
-};
-
-export const useDroppedDecal = create<{
-    droppedDecal: DroppedDecalType | null;
-    setDroppedDecal: (x: DroppedDecalType | null) => void;
-}>((set) => ({
-    droppedDecal: null,
-    setDroppedDecal: (x) => set({ droppedDecal: x }),
-}));
-
 export const useNavMesh = create<any>((set: any) => ({
     navMesh: null,
     setNavMesh: (x: any) => set({ navMesh: x }),
 }));
 
-export const useLayers = create<any>((set: any) => ({
-    Layers: 1,
-    setLayers: (x: any) => set(() => ({ Layers: x })),
-}));
-
-export const useCamPosition = create<any>((set: any) => ({
-    camPosition: { x: undefined, y: undefined, z: undefined },
-    setCamPosition: (newCamPosition: any) => set({ camPosition: newCamPosition }),
-}));
-
-export const useMenuVisible = create<any>((set: any) => ({
-    menuVisible: false,
-    setMenuVisible: (x: any) => set(() => ({ menuVisible: x })),
-}));
-
 export const useToolMode = create<any>((set: any) => ({
     toolMode: null,
     setToolMode: (x: any) => set(() => ({ toolMode: x })),
 }));
 
-export const useSetScale = create<any>((set: any) => ({
-    scale: null,
-    setScale: (x: any) => set(() => ({ scale: x })),
-}));
-
 export const useRoofVisibility = create<any>((set: any) => ({
     roofVisibility: false,
     setRoofVisibility: (x: any) => set(() => ({ roofVisibility: x })),
@@ -173,16 +133,6 @@ export const useSunPosition = create<any>((set: any) => ({
         set({ sunPosition: newSuntPosition }),
 }));
 
-export const useRemoveLayer = create<any>((set: any) => ({
-    removeLayer: false,
-    setRemoveLayer: (x: any) => set(() => ({ removeLayer: x })),
-}));
-
-export const useRemovedLayer = create<any>((set: any) => ({
-    removedLayer: null,
-    setRemovedLayer: (x: any) => set(() => ({ removedLayer: x })),
-}));
-
 export const useProjectName = create<any>((set: any) => ({
     projectName: "Creating Your Project",
     setProjectName: (x: any) => set({ projectName: x }),
@@ -233,11 +183,6 @@ export const useCamMode = create<any>((set: any) => ({
     setCamMode: (x: any) => set({ camMode: x }),
 }));
 
-export const useUserName = create<any>((set: any) => ({
-    userName: "",
-    setUserName: (x: any) => set({ userName: x }),
-}));
-
 export const useRenameModeStore = create<any>((set: any) => ({
     isRenameMode: false,
     setIsRenameMode: (state: boolean) => set({ isRenameMode: state }),
@@ -345,12 +290,6 @@ export const useTileDistance = create<any>((set: any) => ({
         })),
 }));
 
-export const usePlayAgv = create<any>((set, get) => ({
-    PlayAgv: [],
-    setPlayAgv: (updateFn: (prev: any[]) => any[]) =>
-        set({ PlayAgv: updateFn(get().PlayAgv) }),
-}));
-
 // Define the Asset type
 type Asset = {
     id: string;
@@ -411,14 +350,17 @@ export const useMachineCount = create<any>((set: any) => ({
     machineCount: 0,
     setMachineCount: (x: any) => set({ machineCount: x }),
 }));
+
 export const useMachineUptime = create<any>((set: any) => ({
     machineActiveTime: 0,
     setMachineActiveTime: (x: any) => set({ machineActiveTime: x }),
 }));
+
 export const useMachineDowntime = create<any>((set: any) => ({
     machineIdleTime: 0,
     setMachineIdleTime: (x: any) => set({ machineIdleTime: x }),
 }));
+
 export const useMaterialCycle = create<any>((set: any) => ({
     materialCycleTime: 0,
     setMaterialCycleTime: (x: any) => set({ materialCycleTime: x }),
@@ -428,6 +370,7 @@ export const useThroughPutData = create<any>((set: any) => ({
     throughputData: 0,
     setThroughputData: (x: any) => set({ throughputData: x }),
 }));
+
 export const useProductionCapacityData = create<any>((set: any) => ({
     productionCapacityData: 0,
     setProductionCapacityData: (x: any) => set({ productionCapacityData: x }),
@@ -437,6 +380,7 @@ export const useProcessBar = create<any>((set: any) => ({
     processBar: [],
     setProcessBar: (x: any) => set({ processBar: x }),
 }));
+
 export const useDfxUpload = create<any>((set: any) => ({
     dfxuploaded: [],
     dfxWallGenerate: [],
@@ -541,6 +485,7 @@ function getInitialViewSceneLabels(): boolean {
     const saved = localStorage.getItem("viewSceneLabels");
     return saved ? JSON.parse(saved) : false;
 }
+
 export interface CompareProduct {
     productUuid: string;
     productName: string;
@@ -579,6 +524,7 @@ export const useSelectedComment = create<any>((set: any) => ({
     commentPositionState: null,
     setCommentPositionState: (x: any) => set({ commentPositionState: x }),
 }));
+
 export const useSelectedPath = create<any>((set: any) => ({
     selectedPath: "auto",
     setSelectedPath: (x: any) => set({ selectedPath: x }),
@@ -588,16 +534,3 @@ export const useContextActionStore = create<any>((set: any) => ({
     contextAction: null,
     setContextAction: (x: any) => set({ contextAction: x }),
 }));
-
-
-// Define the store's state and actions type
-interface DecalStore {
-    selectedSubCategory: string | null;
-    setSelectedSubCategory: (subCategory: string | null) => void;
-}
-
-// Create the Zustand store with types
-export const useDecalStore = create<DecalStore>((set) => ({
-    selectedSubCategory: 'Safety',
-    setSelectedSubCategory: (subCategory: string | null) => set({ selectedSubCategory: subCategory }),
-}));

app/src/store/builder/useBuilderStore.ts

@@ -46,6 +46,13 @@ interface BuilderState {
         draggingDecalUuid: string | null,
         dragOffset: Vector3 | null,
     },
+    selectedDecalCategory: string | null,
+    droppedDecal: {
+        category: string;
+        decalName: string;
+        decalImage: string;
+        decalId: string;
+    } | null,
 
     // Aisle General
     selectedAisle: { aisleMesh: Object3D | null, aisleData: Aisle } | null;
@@ -97,6 +104,8 @@ interface BuilderState {
     setSelectedDecal: (decal: { decalMesh: Object3D | null, decalData: Decal } | null) => void;
     setDeletableDecal: (decal: Object3D | null) => void;
     setDecalDragState: (isDragging: boolean, draggingDecalUuid: string | null, dragOffset: Vector3 | null) => void;
+    setSelectedDecalCategory: (subCategory: string | null) => void,
+    setDroppedDecal: (droppedDecal: { category: string, decalName: string, decalImage: string, decalId: string } | null) => void,
 
     // Setters - Aisle General
     setSelectedAisle: (aisle: { aisleMesh: Object3D | null, aisleData: Aisle } | null) => void;
@@ -157,6 +166,8 @@ export const useBuilderStore = create<BuilderState>()(
             draggingDecalUuid: null,
             dragOffset: null,
         },
+        selectedDecalCategory: 'Safety',
+        droppedDecal: null,
 
         selectedAisle: null,
         aisleType: 'solid-aisle',
@@ -332,6 +343,18 @@ export const useBuilderStore = create<BuilderState>()(
             })
         },
 
+        setSelectedDecalCategory: (subCategory: string | null) => {
+            set((state) => {
+                state.selectedDecalCategory = subCategory;
+            })
+        },
+
+        setDroppedDecal: (droppedDecal: { category: string, decalName: string, decalImage: string, decalId: string } | null) => {
+            set((state) => {
+                state.droppedDecal = droppedDecal;
+            })
+        },
+
         // === Setters: Aisle General ===
 
         setSelectedAisle: (aisle: { aisleMesh: Object3D | null, aisleData: Aisle } | null) => {