From ae4fd2ff01007dc54445f1b215ec840013d35cd3 Mon Sep 17 00:00:00 2001 From: Jerald-Golden-B Date: Tue, 2 Sep 2025 09:46:27 +0530 Subject: [PATCH] store optimization --- .../layout/sidebarLeft/assetList/Assets.tsx | 21 +++-- .../assetsHelpers/filteredAssetsHelper.ts | 6 +- .../assetsHelpers/renderAssetHelper.tsx | 5 +- .../Decal/decalCreator/decalCreator.tsx | 5 +- .../transformControls/transformControls.tsx | 4 +- app/src/pages/Project.tsx | 8 -- app/src/pages/UserAuth.tsx | 16 ++-- app/src/store/builder/store.ts | 83 ++----------------- app/src/store/builder/useBuilderStore.ts | 23 +++++ 9 files changed, 58 insertions(+), 113 deletions(-) diff --git a/app/src/components/layout/sidebarLeft/assetList/Assets.tsx b/app/src/components/layout/sidebarLeft/assetList/Assets.tsx index 5294be5..72c1207 100644 --- a/app/src/components/layout/sidebarLeft/assetList/Assets.tsx +++ b/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(null); const [selectedCategory, setSelectedCategory] = useState(null); const [assets, setAssets] = useState([]); @@ -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) => (
{ setIsLoading(true); const res = await fetchCategoryDecals(cat.name); setAssets(res); - setSelectedSubCategory(cat.name); + setSelectedDecalCategory(cat.name); setIsLoading(false); }} > diff --git a/app/src/components/layout/sidebarLeft/assetList/assetsHelpers/filteredAssetsHelper.ts b/app/src/components/layout/sidebarLeft/assetList/assetsHelpers/filteredAssetsHelper.ts index 38d2b39..1ced2e2 100644 --- a/app/src/components/layout/sidebarLeft/assetList/assetsHelpers/filteredAssetsHelper.ts +++ b/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) ); diff --git a/app/src/components/layout/sidebarLeft/assetList/assetsHelpers/renderAssetHelper.tsx b/app/src/components/layout/sidebarLeft/assetList/assetsHelpers/renderAssetHelper.tsx index bd553c1..9a3cf95 100644 --- a/app/src/components/layout/sidebarLeft/assetList/assetsHelpers/renderAssetHelper.tsx +++ b/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 ( diff --git a/app/src/modules/builder/Decal/decalCreator/decalCreator.tsx b/app/src/modules/builder/Decal/decalCreator/decalCreator.tsx index 16721d3..3ea4005 100644 --- a/app/src/modules/builder/Decal/decalCreator/decalCreator.tsx +++ b/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(); diff --git a/app/src/modules/scene/controls/transformControls/transformControls.tsx b/app/src/modules/scene/controls/transformControls/transformControls.tsx index 61f264e..b71cac4 100644 --- a/app/src/modules/scene/controls/transformControls/transformControls.tsx +++ b/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 ( <> diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx index f3f369a..5013884 100644 --- a/app/src/pages/Project.tsx +++ b/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("/"); diff --git a/app/src/pages/UserAuth.tsx b/app/src/pages/UserAuth.tsx index 4db2358..3fec867 100644 --- a/app/src/pages/UserAuth.tsx +++ b/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 { setOrganization } = useOrganization(); + const { userName } = getUserData(); + const [name, setName] = useState(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 && ( setUserName(e.target.value)} + onChange={(e) => setName(e.target.value)} required /> )} diff --git a/app/src/store/builder/store.ts b/app/src/store/builder/store.ts index c2c9648..0346f42 100644 --- a/app/src/store/builder/store.ts +++ b/app/src/store/builder/store.ts @@ -81,11 +81,6 @@ export const useLoadingProgress = create<{ setLoadingProgress: (x: number) => set({ loadingProgress: x }), })); -export const useOrganization = create((set: any) => ({ - organization: "", - setOrganization: (x: any) => set(() => ({ organization: x })), -})); - export const useToggleView = create((set: any) => ({ toggleView: false, setToggleView: (x: any) => set(() => ({ toggleView: x })), @@ -107,51 +102,16 @@ export const useSelectedItem = create((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((set: any) => ({ navMesh: null, setNavMesh: (x: any) => set({ navMesh: x }), })); -export const useLayers = create((set: any) => ({ - Layers: 1, - setLayers: (x: any) => set(() => ({ Layers: x })), -})); - -export const useCamPosition = create((set: any) => ({ - camPosition: { x: undefined, y: undefined, z: undefined }, - setCamPosition: (newCamPosition: any) => set({ camPosition: newCamPosition }), -})); - -export const useMenuVisible = create((set: any) => ({ - menuVisible: false, - setMenuVisible: (x: any) => set(() => ({ menuVisible: x })), -})); - export const useToolMode = create((set: any) => ({ toolMode: null, setToolMode: (x: any) => set(() => ({ toolMode: x })), })); -export const useSetScale = create((set: any) => ({ - scale: null, - setScale: (x: any) => set(() => ({ scale: x })), -})); - export const useRoofVisibility = create((set: any) => ({ roofVisibility: false, setRoofVisibility: (x: any) => set(() => ({ roofVisibility: x })), @@ -173,16 +133,6 @@ export const useSunPosition = create((set: any) => ({ set({ sunPosition: newSuntPosition }), })); -export const useRemoveLayer = create((set: any) => ({ - removeLayer: false, - setRemoveLayer: (x: any) => set(() => ({ removeLayer: x })), -})); - -export const useRemovedLayer = create((set: any) => ({ - removedLayer: null, - setRemovedLayer: (x: any) => set(() => ({ removedLayer: x })), -})); - export const useProjectName = create((set: any) => ({ projectName: "Creating Your Project", setProjectName: (x: any) => set({ projectName: x }), @@ -233,11 +183,6 @@ export const useCamMode = create((set: any) => ({ setCamMode: (x: any) => set({ camMode: x }), })); -export const useUserName = create((set: any) => ({ - userName: "", - setUserName: (x: any) => set({ userName: x }), -})); - export const useRenameModeStore = create((set: any) => ({ isRenameMode: false, setIsRenameMode: (state: boolean) => set({ isRenameMode: state }), @@ -345,12 +290,6 @@ export const useTileDistance = create((set: any) => ({ })), })); -export const usePlayAgv = create((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((set: any) => ({ machineCount: 0, setMachineCount: (x: any) => set({ machineCount: x }), })); + export const useMachineUptime = create((set: any) => ({ machineActiveTime: 0, setMachineActiveTime: (x: any) => set({ machineActiveTime: x }), })); + export const useMachineDowntime = create((set: any) => ({ machineIdleTime: 0, setMachineIdleTime: (x: any) => set({ machineIdleTime: x }), })); + export const useMaterialCycle = create((set: any) => ({ materialCycleTime: 0, setMaterialCycleTime: (x: any) => set({ materialCycleTime: x }), @@ -428,6 +370,7 @@ export const useThroughPutData = create((set: any) => ({ throughputData: 0, setThroughputData: (x: any) => set({ throughputData: x }), })); + export const useProductionCapacityData = create((set: any) => ({ productionCapacityData: 0, setProductionCapacityData: (x: any) => set({ productionCapacityData: x }), @@ -437,6 +380,7 @@ export const useProcessBar = create((set: any) => ({ processBar: [], setProcessBar: (x: any) => set({ processBar: x }), })); + export const useDfxUpload = create((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((set: any) => ({ commentPositionState: null, setCommentPositionState: (x: any) => set({ commentPositionState: x }), })); + export const useSelectedPath = create((set: any) => ({ selectedPath: "auto", setSelectedPath: (x: any) => set({ selectedPath: x }), @@ -587,17 +533,4 @@ export const useSelectedPath = create((set: any) => ({ export const useContextActionStore = create((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((set) => ({ - selectedSubCategory: 'Safety', - setSelectedSubCategory: (subCategory: string | null) => set({ selectedSubCategory: subCategory }), -})); +})); \ No newline at end of file diff --git a/app/src/store/builder/useBuilderStore.ts b/app/src/store/builder/useBuilderStore.ts index 5e36d58..01411b0 100644 --- a/app/src/store/builder/useBuilderStore.ts +++ b/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()( draggingDecalUuid: null, dragOffset: null, }, + selectedDecalCategory: 'Safety', + droppedDecal: null, selectedAisle: null, aisleType: 'solid-aisle', @@ -332,6 +343,18 @@ export const useBuilderStore = create()( }) }, + 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) => {