fixed widget state saving bug

+ decluttered props by using prop forwarding + renamed DashboardCanvas to HomeCanvas
2025-08-04 15:38:19 -07:00
parent f250f11d8d
commit 9b8f7ea4d4
4 changed files with 32 additions and 72 deletions
@@ -0,0 +1,168 @@
+import { HStack, Flex, Tabs } from "@chakra-ui/react";
+import { useState } from "react";
+import WidgetCanvas from "./DashboardCanvasNav/WidgetCanvas";
+import { SearchBar } from "../components/SearchBar";
+import { SettingsButton } from "../components/SettingsButton";
+import { DailyActivity } from "./DashboardCanvasNav/DailyActivity";
+import { Gas } from "./DashboardCanvasNav/Gas";
+import { Seismic } from "./DashboardCanvasNav/Seismic";
+import { RemoteSensing } from "./DashboardCanvasNav/RemoteSensing";
+import { CancelButton } from "../components/CancelButton";
+import { SaveButton } from "../components/SaveButton";
+import DeleteAllButton from "../components/DeleteAllButton";
+
+export function HomeCanvas({...props}) {
+  // deconstructing props
+  const { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView, onCancel, 
+    isDelete, setIsDelete, isEditable, setIsEditable, widgetArray, setWidgetArray } = props;
+
+  const onAddWidget = (ID) => {
+    setLayout(prev => [
+      ...prev,
+      {
+        i: ID,
+        x: (prev.length * 3) % 12,
+        y: Infinity, 
+        w: 3, 
+        h: 3,
+        static: false
+      }
+    ]);
+    onEditWidgets();
+  };
+
+  const onEditWidgets = () => {
+    console.log("widgets are now editable");
+    setOriginalLayout(layout); // Backup layout before editing
+    // Set all widgets to editable, static: false
+    setLayout(prevLayout =>
+      prevLayout.map(item => ({
+        ...item, 
+        static: false
+      }))
+    );
+    setIsEditable(true); // Enable edit mode
+  }
+
+  const onSave = () => {
+    console.log("saving widgets...");
+    // Set all widgets back to static: true
+    setLayout(prevLayout => 
+      prevLayout.map(item => ({
+        ...item,
+        static: true
+    }))
+  );
+    setIsEditable(false);
+    setIsDelete(false);
+    setOriginalLayout([]); // Clear backup layout
+  }
+
+  const onDeleteWidgets = () => {
+    console.log("Start deleting widgets...");
+    setOriginalLayout(layout);
+    setIsEditable(true);
+    setIsDelete(true);
+  }
+
+  const DeleteWidget = (ID) => {
+    console.log("Deleting widget with id: ", ID);
+    setLayout(layout => layout.filter(w => w.i !== ID));
+    // add removal for widgetArray here
+  }
+
+  const DeleteAll = () => {
+    const confirm = window.confirm(
+      "Are you sure you want to delete all widgets?"
+    );
+    if (confirm) {
+      setLayout([]);
+      setWidgetArray([]);
+      onSave();
+    }
+    else return;
+  }
+
+  // Prop Forwarding
+  const widgetCanvasProps = { layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray };
+  const settingsButtonProps = { onAddWidget, onEditWidgets, onDeleteWidgets, setWidgetArray, widgetArray };
+  
+  return (
+    /* HEADER */
+    <Tabs.Root 
+      lazyMount 
+      value={ view }
+      variant="line"
+      // Prevent navigation away from 'My Dashboard' while in Edit mode
+      onValueChange={(e) => {
+        const nextView = e.value;
+        onChangeView(nextView); 
+      }}
+    >
+      <Flex 
+        as="header"
+				position="sticky"
+				top="0"
+        zIndex="dropdown" // zIndex: 1100
+				bg="base200"
+				px={6}
+				pt={3}
+				align="center"
+				justify="space-between"
+      >
+        <Tabs.List>
+          <Tabs.Trigger value="widget" fontSize="lg">
+            My Dashboard
+          </Tabs.Trigger>
+          <Tabs.Trigger value="gas" fontSize="lg">
+            Gas
+          </Tabs.Trigger>
+          <Tabs.Trigger value="seismic" fontSize="lg">
+            Seismic
+          </Tabs.Trigger>
+          <Tabs.Trigger value="remote" fontSize="lg">
+            Remote Sensing
+          </Tabs.Trigger>
+          <Tabs.Trigger value="daily" fontSize="lg">
+            Daily Activity
+          </Tabs.Trigger>
+        </Tabs.List>
+
+        <HStack >
+          {isEditable ? (
+            <>
+              <SaveButton onSave={ onSave } />
+              <CancelButton onCancel={ onCancel } />
+              {isDelete ? (
+                <DeleteAllButton onDeleteAll={ DeleteAll } />
+              ):(null)
+              }
+            </>
+          ):(
+            <>
+              <SearchBar />
+              <SettingsButton {...settingsButtonProps}/>
+            </>
+          )}
+        </HStack>
+      </Flex>
+
+      {/* CANVAS */}
+      <Tabs.Content value="widget">
+        <WidgetCanvas {...widgetCanvasProps}/>
+      </Tabs.Content>
+      <Tabs.Content value="gas">
+        <Gas />
+      </Tabs.Content>
+      <Tabs.Content value="seismic">
+        <Seismic />
+      </Tabs.Content>
+      <Tabs.Content value="remote">
+        <RemoteSensing />
+      </Tabs.Content>
+      <Tabs.Content value="daily">
+        <DailyActivity />
+      </Tabs.Content>
+    </Tabs.Root>
+  );
+}