Implement resetStates hook and integrate it into Header component for state management

This commit is contained in:
2025-06-24 11:04:56 +05:30
parent b49f431ebf
commit a5afcd5757
5 changed files with 56 additions and 3 deletions

View File

@@ -5,16 +5,25 @@ import FileMenu from "../../ui/FileMenu";
import { useToggleStore } from "../../../store/useUIToggleStore"; import { useToggleStore } from "../../../store/useUIToggleStore";
import useModuleStore from "../../../store/useModuleStore"; import useModuleStore from "../../../store/useModuleStore";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import useRestStates from "../../../hooks/useResetStates";
const Header: React.FC = () => { const Header: React.FC = () => {
const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore(); const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
const navigate = useNavigate(); const navigate = useNavigate();
const { resetStates } = useRestStates();
return ( return (
<div className="header-container"> <div className="header-container">
<div className="header-content"> <div className="header-content">
<button className="logo-container" onClick={() => navigate("/Dashboard")} title="Back to Dashboard"> <button
className="logo-container"
onClick={() => {
resetStates();
navigate("/Dashboard")
}}
title="Back to Dashboard"
>
<LogoIcon /> <LogoIcon />
</button> </button>
<div className="header-title"> <div className="header-title">

View File

View File

@@ -0,0 +1,26 @@
import { useVersionContext } from "../modules/builder/version/versionContext";
import { useSceneContext } from "../modules/scene/sceneContext";
import { useProductContext } from "../modules/simulation/products/productContext";
import { useVersionHistoryStore } from "../store/builder/useVersionHistoryStore";
const useRestStates = () => {
const { selectedVersionStore } = useVersionContext();
const { clearSelectedVersion } = selectedVersionStore();
const { selectedProductStore } = useProductContext();
const { clearSelectedProduct } = selectedProductStore();
const { clearVersions } = useVersionHistoryStore();
const { clearStores } = useSceneContext();
const resetStates = () => {
clearSelectedVersion();
clearSelectedProduct();
clearVersions();
clearStores();
};
return {
resetStates,
};
};
export default useRestStates;

View File

@@ -28,6 +28,8 @@ type SceneContextValue = {
vehicleStore: VehicleStoreType; vehicleStore: VehicleStoreType;
storageUnitStore: StorageUnitStoreType; storageUnitStore: StorageUnitStoreType;
clearStores: () => void;
layout: 'Main Layout' | 'Comparison Layout'; layout: 'Main Layout' | 'Comparison Layout';
}; };
@@ -55,8 +57,17 @@ export function SceneProvider({
const storageUnitStore = useMemo(() => createStorageUnitStore(), []); const storageUnitStore = useMemo(() => createStorageUnitStore(), []);
const clearStores = useMemo(() => () => { const clearStores = useMemo(() => () => {
assetStore().clearAssets(); assetStore.getState().clearAssets();
}, [assetStore]); aisleStore.getState().clearAisles();
eventStore.getState().clearEvents();
productStore.getState().clearProducts();
materialStore.getState().clearMaterials();
armBotStore.getState().clearArmBots();
machineStore.getState().clearMachines();
conveyorStore.getState().clearConveyors();
vehicleStore.getState().clearVehicles();
storageUnitStore.getState().clearStorageUnits();
}, [assetStore, aisleStore, eventStore, productStore, materialStore, armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore]);
const contextValue = useMemo(() => ( const contextValue = useMemo(() => (
{ {

View File

@@ -8,6 +8,7 @@ interface AisleStore {
updateAisle: (uuid: string, updated: Partial<Aisle>) => void; updateAisle: (uuid: string, updated: Partial<Aisle>) => void;
removeAisle: (uuid: string) => void; removeAisle: (uuid: string) => void;
removePoint: (uuid: string) => Aisles; removePoint: (uuid: string) => Aisles;
clearAisles: () => void;
setPosition: ( setPosition: (
pointUuid: string, pointUuid: string,
position: [number, number, number] position: [number, number, number]
@@ -92,6 +93,12 @@ export const createAisleStore = () => {
return removedAisles; return removedAisles;
}, },
clearAisles: () => {
set((state) => {
state.aisles = [];
})
},
setPosition: (pointUuid, position) => { setPosition: (pointUuid, position) => {
let updatedAisle: Aisle | undefined; let updatedAisle: Aisle | undefined;
set((state) => { set((state) => {