Add view and setView props in order to successfully pass state from Sidebar to the Canvas inside Dashboard

client/src/components/layout/Canvas/Canvas.jsx

@@ -8,12 +8,12 @@ import WidgetCanvas from "./views/WidgetCanvas";
 // import MapCanvas from "./views/MapCanvas";
 // import AdminCanvas from "./views/AdminCanvas";
 
-export default function Canvas() {
+export default function Canvas({ view }) {
-    const [view, setView] = useState("widget");
+    // const [view, setView] = useState("widget");
 
     return (
         <Box height="100%" width="100%">
-            <CanvasHeader onSwitchView={setView} />
+            <CanvasHeader />
             {view === "widget" && <WidgetCanvas />}
             {/* {view === "map" && <MapCanvas />} */}
             {/* {view === "admin" && <AdminCanvas />} */}

client/src/components/layout/Dashboard.jsx

@@ -2,12 +2,16 @@ import { Global, css } from "@emotion/react";
 import Header from './Header/Header.jsx';
 import Sidebar from './Sidebar/Sidebar.jsx';
 import Canvas from './Canvas/Canvas.jsx';
-import { Grid, GridItem, useRecipe, Box } from '@chakra-ui/react';
+import { Grid, GridItem, useRecipe } from '@chakra-ui/react';
+import { useState } from 'react';
 
 export default function Dashboard() {
   const recipe = useRecipe({ key: "canvas" });
   const styles = recipe();
 
+  // Lifted State - defaults to widget dashboard
+  const [view, setView] = useState("widget");
+
   return (
   <>
     <Global // change the background color of widget shadow when moving
@@ -37,10 +41,10 @@ export default function Dashboard() {
         <Header />
       </GridItem>
       <GridItem colSpan={1}>
-        <Sidebar />
+        <Sidebar onChangeView={ setView } />
       </GridItem>
       <GridItem colSpan={1} width="100%">
-        <Canvas />
+        <Canvas view={ view }/>
       </GridItem> 
     </Grid>
     </>

client/src/components/layout/Sidebar/Sidebar.jsx

@@ -57,18 +57,18 @@ export const Users = createIcon({
   ),
 });
 
-export default function Sidebar() {
+export default function Sidebar({ onChangeView }) {
   const [isOpen, setIsOpen] = useState(true);
+  const [activeButton, setActiveButton] = useState(0)
 
   const buttons = [
-    {icon: PushPin, name: "Dashboard"},
+    {icon: PushPin, name: "Dashboard", view: "widget"},
-    {icon: Globe, name: "Global Map"},
+    {icon: Globe, name: "Global Map", view: "global"},
-    {icon: MapMarker, name: "Regional Map"},
+    {icon: MapMarker, name: "Regional Map", view: "regional"},
-    {icon: FaVolcano, name: "Volcano"},
+    {icon: FaVolcano, name: "Volcano", view: "volcano"},
-    {icon: Users, name: "Admin"}
+    {icon: Users, name: "Admin", view: "admin"}
   ];
   
-  const [activeButton, setActiveButton] = useState(0)
   const recipe = useSlotRecipe({ key: "sidebar" });
   const styles = recipe();
 
@@ -98,7 +98,10 @@ export default function Sidebar() {
         return (
           <Button key={idx} 
                   css={styles.buttons} 
-                  onClick={() => setActiveButton(idx)} 
+                  onClick={() => {
+                    setActiveButton(idx);
+                    onChangeView(button.view); // Trigger state change in Dashboard
+                  }} 
                   bg={activeButton === idx ? "primary":undefined} 
                   justifyContent="flex-start"
           >