Implement resetStates hook and integrate it into Header component for state management
This commit is contained in:
@@ -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">
|
||||||
|
|||||||
26
app/src/hooks/useResetStates.ts
Normal file
26
app/src/hooks/useResetStates.ts
Normal 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;
|
||||||
@@ -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(() => (
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -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) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user