Merge branch 'refactor/canvas-component' into 'main'

Refactor src/components directory with a layout section for better separation of concerns.

See merge request vkuchenik/website-framework!16

client/src/App.jsx

@@ -1,10 +1,8 @@
 import { useState } from 'react'
-import Header from './components/header.jsx';
-import Sidebar from './components/sidebar.jsx';
-import Widget from './components/Widget.jsx'
-import { Grid, GridItem, useRecipe } from "@chakra-ui/react"
-import CanvasHeader from './components/CanvasHeader.jsx'
-
+import Header from './components/layout/Header/Header.jsx';
+import Sidebar from './components/layout/Sidebar/Sidebar.jsx';
+import Canvas from './components/layout/Canvas/Canvas.jsx';
+import { Grid, GridItem, useRecipe, Box } from '@chakra-ui/react';
 
 function App() {
   const recipe = useRecipe({ key: "canvas" });
@@ -24,20 +22,8 @@ function App() {
         <Sidebar />
       </GridItem>
       <GridItem colSpan={1}>
-        <Grid
-          templateRows="repeat(12, 1fr)"
-          templateColumns="repeat(4, 1fr)"
-          height="100%"
-          width="100%"
-        >
-          <GridItem colSpan={4} rowSpan={1}>
-            <CanvasHeader />
-          </GridItem> 
-          <GridItem colSpan={4} rowSpan={5}>
-            <Widget />
-          </GridItem>
-        </Grid>
-      </GridItem>
+        <Canvas />
+      </GridItem> 
     </Grid>
   );
 }

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

@@ -0,0 +1,23 @@
+// This Canvas component will be used to dynamically populate 
+// the main canvas section of the web App with a default state
+// of 'WidgetCanvas' 
+import { useState } from "react";
+import { Box } from "@chakra-ui/react";
+import CanvasHeader from "./CanvasHeader";
+import WidgetCanvas from "./views/WidgetCanvas";
+// import MapCanvas from "./views/MapCanvas";
+// import AdminCanvas from "./views/AdminCanvas";
+
+export default function Canvas() {
+    const [view, setView] = useState("widget");
+
+    return (
+        <Box height="100%" width="100%">
+            <CanvasHeader onSwitchView={setView} />
+            {view === "widget" && <WidgetCanvas />}
+            {/* {view === "map" && <MapCanvas />} */}
+            {/* {view === "admin" && <AdminCanvas />} */}
+        </Box>
+    );
+}
+

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

@@ -14,7 +14,6 @@ export default function CanvasHeader() {
                 as="header"
                 position="sticky"
                 top="0"
-                // zIndex="banner"
                 bg="base200"
                 borderBottom="1px solid"
                 borderColor="gray.200"

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

@@ -0,0 +1,16 @@
+export default function Widget({ title }) {
+    return (
+      <>
+        <div
+          className="widget-handle"
+          style={{ padding: '4px', cursor: 'move', background: '#ddd' }}
+        >
+          {title}
+        </div>
+        <div style={{ padding: '8px' }}>
+          This is the widget content - drag or resize me!
+        </div>
+      </>
+    );
+  }
+

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

@@ -4,8 +4,10 @@
 
 import { useState } from 'react';
 import GridLayout from 'react-grid-layout';
+import Widget from '../Widget.jsx';
+import { Box } from '@chakra-ui/react';
 
-export default function Widget() {
+export default function WidgetCanvas() {
     // Define widgets initial position and size
     // TODO Add dynamic adding/deleting of widgets via options button 
     const [layout, setLayout] = useState([
@@ -30,28 +32,11 @@ export default function Widget() {
             onLayoutChange={onLayoutChange}
             draggableHandle=".widget-handle" // Make only the header draggable
         >
-            <div key="myWidget1" style={{ background: '#f0f0f0', borderRadius: 4 }}>
-                <div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
-                    VDAP Widget
+            {layout.map((item) => (
+                <div key={item.i} style={{ background: '#f0f0f0', borderRadius: 4 }}>
+                    <Widget title="VDAP Widget" />
                 </div>
-                <div style={{ padding: '8px' }}>
-                    This is the widget content - drag or resize me!
-                </div>
-            </div><div key="myWidget2" style={{ background: '#f0f0f0', borderRadius: 4 }}>
-                <div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
-                    VDAP Widget
-                </div>
-                <div style={{ padding: '8px' }}>
-                    This is the widget content - drag or resize me!
-                </div>
-            </div><div key="myWidget3" style={{ background: '#f0f0f0', borderRadius: 4 }}>
-                <div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
-                    VDAP Widget
-                </div>
-                <div style={{ padding: '8px' }}>
-                    This is the widget content - drag or resize me!
-                </div>
-            </div>
+            ))}
         </GridLayout>
     );
 }

client/src/components/layout/Header/Header.jsx

@@ -1,5 +1,12 @@
 import { chakra, useRecipe, Box, Button, Stack, Text, Flex } from "@chakra-ui/react"
-import UserAvatarMenu from "./UserAvatarMenu";
+import UserAvatarMenu from "./UserAvatarMenu.jsx";
+
+//TODO: Dynamically populate per each user
+const user = {
+  name: "venessa kuchenik",
+  email: "vkuchenik@contractor.usgs.gov",
+  // avatar: "src\\assets\\user_profile.svg"
+}
 
 export default function Header() {
   const recipe = useRecipe({ key: "header" });
@@ -19,8 +26,3 @@ export default function Header() {
   );
 }
 
-const user = {
-  name: "venessa kuchenik",
-  email: "vkuchenik@contractor.usgs.gov",
-  // avatar: "src\\assets\\user_profile.svg"
-}

client/src/components/layout/Header/UserAvatarMenu.jsx

@@ -8,7 +8,7 @@ export default function UserAvatarMenu({ name, avatar }) {
                 <Box
                     rounded="full" 
                     tabIndex={0}
-                    _hover={{ boxShadow: "0 0 0 2px rgb(37, 77, 197)" }}
+                    _hover={{ boxShadow: "0 0 0 2px rgb(102, 122, 182)" }}
                 >
                     <Avatar.Root shape="full">
                         <Avatar.Fallback name={name} />