From 9b8f7ea4d43494fe566ced9f7c985d9e0fc38c72 Mon Sep 17 00:00:00 2001 From: Venessa Kuchenik Date: Mon, 4 Aug 2025 15:38:19 -0700 Subject: [PATCH] fixed widget state saving bug + decluttered props by using prop forwarding + renamed DashboardCanvas to HomeCanvas --- .../src/components/layout/Canvas/Canvas.jsx | 28 +++----------- .../{DashboardCanvas.jsx => HomeCanvas.jsx} | 36 +++++++----------- client/src/components/layout/Dashboard.jsx | 38 +++++++------------ .../src/components/layout/Sidebar/Sidebar.jsx | 2 - 4 files changed, 32 insertions(+), 72 deletions(-) rename client/src/components/layout/Canvas/views/{DashboardCanvas.jsx => HomeCanvas.jsx} (80%) diff --git a/client/src/components/layout/Canvas/Canvas.jsx b/client/src/components/layout/Canvas/Canvas.jsx index 1fe26fb..4e0df5f 100644 --- a/client/src/components/layout/Canvas/Canvas.jsx +++ b/client/src/components/layout/Canvas/Canvas.jsx @@ -1,38 +1,20 @@ -// This Canvas component will be used to dynamically populate -// the main canvas section of the web App with a default state -// of 'WidgetCanvas' - -import { Box, useRecipe } from "@chakra-ui/react"; +import { Box } from "@chakra-ui/react"; import GlobalMapCanvas from "./views/GlobalMapCanvas"; import RegionalMapCanvas from "./views/RegionalMapCanvas"; import VolcanoCanvas from "./views/VolcanoCanvas"; import AdminCanvas from "./views/AdminCanvas"; import AccountCanvas from "./views/AccountCanvas" import SettingsCanvas from "./views/SettingsCanvas" -import { DashboardCanvas } from "./views/DashboardCanvas"; +import { HomeCanvas } from "./views/HomeCanvas"; import { DASHBOARD_VIEWS } from "@/constants/viewKeys"; -export default function Canvas({ onCancel, isEditable, setIsEditable, isDelete, setIsDelete, view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView }) { - const recipe = useRecipe({ key: "canvas" }); - const styles = recipe(); - +export default function Canvas({...props}) { + const { view } = props; return ( {/* Check if view is a tab inside the Canvas Header */} { DASHBOARD_VIEWS.includes(view) && ( - + )} {view === "global" && } {view === "regional" && } diff --git a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx b/client/src/components/layout/Canvas/views/HomeCanvas.jsx similarity index 80% rename from client/src/components/layout/Canvas/views/DashboardCanvas.jsx rename to client/src/components/layout/Canvas/views/HomeCanvas.jsx index fc6664b..d290845 100644 --- a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx +++ b/client/src/components/layout/Canvas/views/HomeCanvas.jsx @@ -11,8 +11,10 @@ import { CancelButton } from "../components/CancelButton"; import { SaveButton } from "../components/SaveButton"; import DeleteAllButton from "../components/DeleteAllButton"; -export function DashboardCanvas({ view, layout, setLayout, onLayoutChange, onCancel, isDelete, setIsDelete, isEditable, setIsEditable, onChangeView, setOriginalLayout }) { - const [widgetArray, setWidgetArray] = useState([]); +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 => [ @@ -63,9 +65,9 @@ export function DashboardCanvas({ view, layout, setLayout, onLayoutChange, onCan setIsDelete(true); } - const DeleteWidget = (id) => { - console.log("Deleting widget with id: ", id); - setLayout(layout => layout.filter(w => w.i !== id)); + const DeleteWidget = (ID) => { + console.log("Deleting widget with id: ", ID); + setLayout(layout => layout.filter(w => w.i !== ID)); // add removal for widgetArray here } @@ -81,12 +83,16 @@ export function DashboardCanvas({ view, layout, setLayout, onLayoutChange, onCan else return; } + // Prop Forwarding + const widgetCanvasProps = { layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray }; + const settingsButtonProps = { onAddWidget, onEditWidgets, onDeleteWidgets, setWidgetArray, widgetArray }; + return ( /* HEADER */ { const nextView = e.value; @@ -135,13 +141,7 @@ export function DashboardCanvas({ view, layout, setLayout, onLayoutChange, onCan ):( <> - + )} @@ -149,15 +149,7 @@ export function DashboardCanvas({ view, layout, setLayout, onLayoutChange, onCan {/* CANVAS */} - + diff --git a/client/src/components/layout/Dashboard.jsx b/client/src/components/layout/Dashboard.jsx index 513d9f6..73f7e7f 100644 --- a/client/src/components/layout/Dashboard.jsx +++ b/client/src/components/layout/Dashboard.jsx @@ -14,6 +14,7 @@ export default function Dashboard() { const [originalLayout, setOriginalLayout] = useState([]); const [view, setView] = useState("widget"); const [layout, setLayout] = useState([]); + const [widgetArray, setWidgetArray] = useState([]); const onCancel = () => { console.log("canceling changes..."); @@ -39,7 +40,16 @@ export default function Dashboard() { } setView(nextView); }; + + const onLayoutChange = (newLayout) => setLayout(newLayout); + // Prop Forwarding + const canvasProps = { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView: handleViewChange, + onCancel, isEditable, setIsEditable, isDelete, setIsDelete, widgetArray, setWidgetArray + }; + const sidebarProps = { view, onChangeView: handleViewChange, darkMode, setDarkMode }; + const headerProps = { onChangeView: handleViewChange }; + return ( <> -
+
- + - setLayout( newLayout )} - onChangeView={ handleViewChange } - onCancel={ onCancel } - isEditable={ isEditable } - setIsEditable={ setIsEditable } - isDelete={ isDelete } - setIsDelete={ setIsDelete } - /> + diff --git a/client/src/components/layout/Sidebar/Sidebar.jsx b/client/src/components/layout/Sidebar/Sidebar.jsx index 9af13a2..47e1e88 100644 --- a/client/src/components/layout/Sidebar/Sidebar.jsx +++ b/client/src/components/layout/Sidebar/Sidebar.jsx @@ -34,14 +34,12 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) { // Track currrent view from both Sidebar and Canvas when 'view' changes useEffect(() => { console.log("Current view = ", view); - const newIndex = buttons.findIndex((btn) => { if (btn.view === "widget") { return DASHBOARD_VIEWS.includes(view); } return btn.view === view; }); - if (newIndex !== -1 ) { setActiveButton(newIndex); }