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 useModuleStore from "../../../store/useModuleStore";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import useRestStates from "../../../hooks/useResetStates";
|
||||
|
||||
const Header: React.FC = () => {
|
||||
const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
|
||||
const { activeModule } = useModuleStore();
|
||||
const navigate = useNavigate();
|
||||
const { resetStates } = useRestStates();
|
||||
|
||||
return (
|
||||
<div className="header-container">
|
||||
<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 />
|
||||
</button>
|
||||
<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;
|
||||
storageUnitStore: StorageUnitStoreType;
|
||||
|
||||
clearStores: () => void;
|
||||
|
||||
layout: 'Main Layout' | 'Comparison Layout';
|
||||
};
|
||||
|
||||
@@ -55,8 +57,17 @@ export function SceneProvider({
|
||||
const storageUnitStore = useMemo(() => createStorageUnitStore(), []);
|
||||
|
||||
const clearStores = useMemo(() => () => {
|
||||
assetStore().clearAssets();
|
||||
}, [assetStore]);
|
||||
assetStore.getState().clearAssets();
|
||||
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(() => (
|
||||
{
|
||||
|
||||
@@ -8,6 +8,7 @@ interface AisleStore {
|
||||
updateAisle: (uuid: string, updated: Partial<Aisle>) => void;
|
||||
removeAisle: (uuid: string) => void;
|
||||
removePoint: (uuid: string) => Aisles;
|
||||
clearAisles: () => void;
|
||||
setPosition: (
|
||||
pointUuid: string,
|
||||
position: [number, number, number]
|
||||
@@ -92,6 +93,12 @@ export const createAisleStore = () => {
|
||||
return removedAisles;
|
||||
},
|
||||
|
||||
clearAisles: () => {
|
||||
set((state) => {
|
||||
state.aisles = [];
|
||||
})
|
||||
},
|
||||
|
||||
setPosition: (pointUuid, position) => {
|
||||
let updatedAisle: Aisle | undefined;
|
||||
set((state) => {
|
||||
|
||||
Reference in New Issue
Block a user