From 06edb481e91758f6a832171b8aa23bd981aea1d7 Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Mon, 21 Jul 2025 11:33:44 -0700 Subject: [PATCH] Restructure file system to seperate Sidebar, Header, and Canvas components --- client/src/App.jsx | 8 ++++---- .../{ => layout/Canvas}/CanvasHeader.jsx | 6 +++--- .../{ => layout/Canvas}/CanvasHeaderNav.jsx | 0 .../components/{ => layout/Canvas}/SearchBar.jsx | 0 .../{ => layout/Canvas}/SettingsButton.jsx | 0 .../src/components/{ => layout/Canvas}/Widget.jsx | 0 .../components/layout/Canvas/views/AdminCanvas.jsx | 0 .../components/layout/Canvas/views/MapCanvas.jsx | 0 .../layout/Canvas/views/WidgetCanvas.jsx | 0 .../src/components/{ => layout/Header}/Header.jsx | 14 ++++++++------ .../{ => layout/Header}/UserAvatarMenu.jsx | 0 .../components/{ => layout/Sidebar}/Sidebar.jsx | 0 12 files changed, 15 insertions(+), 13 deletions(-) rename client/src/components/{ => layout/Canvas}/CanvasHeader.jsx (84%) rename client/src/components/{ => layout/Canvas}/CanvasHeaderNav.jsx (100%) rename client/src/components/{ => layout/Canvas}/SearchBar.jsx (100%) rename client/src/components/{ => layout/Canvas}/SettingsButton.jsx (100%) rename client/src/components/{ => layout/Canvas}/Widget.jsx (100%) create mode 100644 client/src/components/layout/Canvas/views/AdminCanvas.jsx create mode 100644 client/src/components/layout/Canvas/views/MapCanvas.jsx create mode 100644 client/src/components/layout/Canvas/views/WidgetCanvas.jsx rename client/src/components/{ => layout/Header}/Header.jsx (89%) rename client/src/components/{ => layout/Header}/UserAvatarMenu.jsx (100%) rename client/src/components/{ => layout/Sidebar}/Sidebar.jsx (100%) diff --git a/client/src/App.jsx b/client/src/App.jsx index cad1a7d..33e47ac 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -1,9 +1,9 @@ import { useState } from 'react' -import Header from './components/header.jsx'; -import Sidebar from './components/sidebar.jsx'; -import Widget from './components/Widget.jsx' +import Header from './components/layout/Header/Header.jsx'; +import Sidebar from './components/layout/Sidebar/Sidebar.jsx'; +import Widget from './components/layout/Canvas/Widget.jsx' import { Grid, GridItem, useRecipe } from "@chakra-ui/react" -import CanvasHeader from './components/CanvasHeader.jsx' +import CanvasHeader from './components/layout/Canvas/CanvasHeader.jsx' function App() { diff --git a/client/src/components/CanvasHeader.jsx b/client/src/components/layout/Canvas/CanvasHeader.jsx similarity index 84% rename from client/src/components/CanvasHeader.jsx rename to client/src/components/layout/Canvas/CanvasHeader.jsx index 57ff277..08a61cc 100644 --- a/client/src/components/CanvasHeader.jsx +++ b/client/src/components/layout/Canvas/CanvasHeader.jsx @@ -1,7 +1,7 @@ import { Flex, HStack, chakra, useRecipe } from "@chakra-ui/react"; -import { CanvasHeaderNav } from "./CanvasHeaderNav"; -import { SearchBar } from "./SearchBar"; -import { SettingsButton } from "./SettingsButton"; +import { CanvasHeaderNav } from "./CanvasHeaderNav.jsx"; +import { SearchBar } from "./SearchBar.jsx"; +import { SettingsButton } from "./SettingsButton.jsx"; diff --git a/client/src/components/CanvasHeaderNav.jsx b/client/src/components/layout/Canvas/CanvasHeaderNav.jsx similarity index 100% rename from client/src/components/CanvasHeaderNav.jsx rename to client/src/components/layout/Canvas/CanvasHeaderNav.jsx diff --git a/client/src/components/SearchBar.jsx b/client/src/components/layout/Canvas/SearchBar.jsx similarity index 100% rename from client/src/components/SearchBar.jsx rename to client/src/components/layout/Canvas/SearchBar.jsx diff --git a/client/src/components/SettingsButton.jsx b/client/src/components/layout/Canvas/SettingsButton.jsx similarity index 100% rename from client/src/components/SettingsButton.jsx rename to client/src/components/layout/Canvas/SettingsButton.jsx diff --git a/client/src/components/Widget.jsx b/client/src/components/layout/Canvas/Widget.jsx similarity index 100% rename from client/src/components/Widget.jsx rename to client/src/components/layout/Canvas/Widget.jsx diff --git a/client/src/components/layout/Canvas/views/AdminCanvas.jsx b/client/src/components/layout/Canvas/views/AdminCanvas.jsx new file mode 100644 index 0000000..e69de29 diff --git a/client/src/components/layout/Canvas/views/MapCanvas.jsx b/client/src/components/layout/Canvas/views/MapCanvas.jsx new file mode 100644 index 0000000..e69de29 diff --git a/client/src/components/layout/Canvas/views/WidgetCanvas.jsx b/client/src/components/layout/Canvas/views/WidgetCanvas.jsx new file mode 100644 index 0000000..e69de29 diff --git a/client/src/components/Header.jsx b/client/src/components/layout/Header/Header.jsx similarity index 89% rename from client/src/components/Header.jsx rename to client/src/components/layout/Header/Header.jsx index a9ee737..d11f2d6 100644 --- a/client/src/components/Header.jsx +++ b/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" -} \ No newline at end of file diff --git a/client/src/components/UserAvatarMenu.jsx b/client/src/components/layout/Header/UserAvatarMenu.jsx similarity index 100% rename from client/src/components/UserAvatarMenu.jsx rename to client/src/components/layout/Header/UserAvatarMenu.jsx diff --git a/client/src/components/Sidebar.jsx b/client/src/components/layout/Sidebar/Sidebar.jsx similarity index 100% rename from client/src/components/Sidebar.jsx rename to client/src/components/layout/Sidebar/Sidebar.jsx