From 68a4e0417e85325fcd55536c705a146a548a3bac Mon Sep 17 00:00:00 2001 From: Dan Hansen Date: Fri, 5 Sep 2025 20:15:00 +0000 Subject: [PATCH] Refactor the way TABS and VIEWS are handeled, now derived inside viewKeys.js --- client/src/components/Canvas/Canvas.jsx | 8 ++--- .../CanvasComponents/CanvasHeaderTabs.jsx | 16 +--------- client/src/components/Canvas/views/Admin.jsx | 26 ++++++----------- client/src/components/Canvas/views/Home.jsx | 26 ++++------------- .../src/components/Canvas/views/Volcano.jsx | 29 +++++++++++++++---- .../Canvas/views/VolcanoTabs/VolcanoHome.jsx | 2 +- client/src/constants/viewKeys.js | 25 +++++++++++++--- 7 files changed, 62 insertions(+), 70 deletions(-) diff --git a/client/src/components/Canvas/Canvas.jsx b/client/src/components/Canvas/Canvas.jsx index d842f4a..1eb97cd 100644 --- a/client/src/components/Canvas/Canvas.jsx +++ b/client/src/components/Canvas/Canvas.jsx @@ -4,7 +4,7 @@ import Volcano from "./views/Volcano"; import Admin from "./views/Admin"; import Account from "./views/Account" import Home from "./views/Home"; -import { DASHBOARD_VIEWS, VOLCANO_VIEWS, ADMIN_VIEWS } from "@/constants/viewKeys"; +import { DASHBOARD_VIEWS, ADMIN_VIEWS, VOLCANO_VIEWS } from "@/constants/viewKeys"; import { chakra } from "@chakra-ui/react"; import Personal from "./views/Personal"; import Security from "./views/Security"; @@ -12,9 +12,6 @@ import Security from "./views/Security"; export default function Canvas(props) { const { view } = props; - // Derive values for volcano tabs - const VOLCANO_VALUES = VOLCANO_VIEWS.map(t => typeof t === "string" ? t : t.value) - return ( {/* Check if view is a tab inside the Home Header */} @@ -22,7 +19,7 @@ export default function Canvas(props) { )} {/* Check if view is a tab inside the Volcano Header */} - { VOLCANO_VALUES.includes(view) && ( + { VOLCANO_VIEWS.includes(view) && ( )} {/* Check if view is a tab inside the Admin Header */} @@ -31,7 +28,6 @@ export default function Canvas(props) { )} {view === "global" && } {view === "regional" && } - {/* {view === "volcano" && } */} {view === "account" && } {view === "settings" && } {view === "personal" && } diff --git a/client/src/components/Canvas/CanvasComponents/CanvasHeaderTabs.jsx b/client/src/components/Canvas/CanvasComponents/CanvasHeaderTabs.jsx index aff5efe..5c02236 100644 --- a/client/src/components/Canvas/CanvasComponents/CanvasHeaderTabs.jsx +++ b/client/src/components/Canvas/CanvasComponents/CanvasHeaderTabs.jsx @@ -1,21 +1,8 @@ -import { Flex, Tabs } from '@chakra-ui/react' +import { Tabs } from '@chakra-ui/react' // This component needs to be nested inside of a Tabs.Root to work properly export function CanvasHeaderTabs({ view, onChangeView, tabs }) { return ( - {tabs.map(({ value, label }) => @@ -23,6 +10,5 @@ export function CanvasHeaderTabs({ view, onChangeView, tabs }) { )} - ) } \ No newline at end of file diff --git a/client/src/components/Canvas/views/Admin.jsx b/client/src/components/Canvas/views/Admin.jsx index f159e22..8deb1d3 100644 --- a/client/src/components/Canvas/views/Admin.jsx +++ b/client/src/components/Canvas/views/Admin.jsx @@ -5,7 +5,10 @@ import { NASApplication } from './AdminTabs/NASApplication'; import { IVANS } from './AdminTabs/IVANS' import { SearchBar } from "../CanvasComponents/SearchBar"; import { SettingsButton } from "../CanvasComponents/SettingsButton"; +import { CanvasHeaderTabs } from '../CanvasComponents/CanvasHeaderTabs'; +import { ADMIN_TABS } from '@/constants/viewKeys'; +// TODO - refactor this. Currently Admin doesn't use onEditWidgets or appendWidget export default function Admin({ view, onChangeView, onEditWidgets, appendWidget }) { const settingsButtonProps = { onEditWidgets, appendWidget }; @@ -29,30 +32,19 @@ export default function Admin({ view, onChangeView, onEditWidgets, appendWidget top="0" zIndex="dropdown" // zIndex: 1100 bg="base200" - px={5} + pl={5} + pr={2} pt={3} pb={2} align="center" justify="space-between" width="100%" > - - - M&E Data Entry - - - Project Collector - - - NAS Application - - IVANS - - - + {/* HEADER */} + - - + + diff --git a/client/src/components/Canvas/views/Home.jsx b/client/src/components/Canvas/views/Home.jsx index 0ed888c..a04309f 100644 --- a/client/src/components/Canvas/views/Home.jsx +++ b/client/src/components/Canvas/views/Home.jsx @@ -10,6 +10,8 @@ import { CancelButton } from "../CanvasComponents/CancelButton"; import { SaveButton } from "../CanvasComponents/SaveButton"; import DeleteAllButton from "../CanvasComponents/DeleteAllButton"; import { v4 as uuid } from 'uuid'; +import { CanvasHeaderTabs } from '../CanvasComponents/CanvasHeaderTabs'; +import { DASHBOARD_TABS } from "@/constants/viewKeys"; export default function Home(props) { // deconstructing props @@ -34,8 +36,6 @@ export default function Home(props) { ...prev, { i: newID, - // x: (prev.length * 3) % 12, - // y: Infinity, x: (prev.length * W) % COLS, y: 0, w: w, @@ -120,31 +120,15 @@ export default function Home(props) { top="0" zIndex="dropdown" // zIndex: 1100 bg="base200" - px={5} + pl={5} + pr={2} pt={3} pb={2} align="center" justify="space-between" width="100%" > - - - My Dashboard - - - Gas - - - Seismic - - - Remote Sensing - - - Daily Activity - - - + {isEditable ? ( <> diff --git a/client/src/components/Canvas/views/Volcano.jsx b/client/src/components/Canvas/views/Volcano.jsx index ec015fc..ada36cd 100644 --- a/client/src/components/Canvas/views/Volcano.jsx +++ b/client/src/components/Canvas/views/Volcano.jsx @@ -1,7 +1,7 @@ -import { Box, Text, Heading, DataList, HStack, Tabs } from '@chakra-ui/react'; +import { Box, Text, Heading, DataList, Flex, HStack, Tabs } from '@chakra-ui/react'; import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; import { CanvasHeaderTabs } from '../CanvasComponents/CanvasHeaderTabs'; -import { VOLCANO_VIEWS } from '@/constants/viewKeys'; +import { VOLCANO_TABS } from '@/constants/viewKeys'; import { VolcanoHome } from './VolcanoTabs/VolcanoHome'; import { PartnerData } from './VolcanoTabs/PartnerData'; import { Reports } from './VolcanoTabs/Reports'; @@ -15,7 +15,6 @@ export default function Volcano({ view, onChangeView }) { onChangeView(e.value)} variant="line" width="100%" height="100%" @@ -25,9 +24,27 @@ export default function Volcano({ view, onChangeView }) { const nextView = e.value; onChangeView(nextView); }} - > - {/* HEADER */} - + > + + {/* HEADER */} + + + + + + {/* CANVAS */} diff --git a/client/src/components/Canvas/views/VolcanoTabs/VolcanoHome.jsx b/client/src/components/Canvas/views/VolcanoTabs/VolcanoHome.jsx index 62bf539..f2aecac 100644 --- a/client/src/components/Canvas/views/VolcanoTabs/VolcanoHome.jsx +++ b/client/src/components/Canvas/views/VolcanoTabs/VolcanoHome.jsx @@ -23,7 +23,7 @@ export function VolcanoHome() { `; return ( - + Mount St. Helens - United States CVO diff --git a/client/src/constants/viewKeys.js b/client/src/constants/viewKeys.js index 5398c90..b511ae5 100644 --- a/client/src/constants/viewKeys.js +++ b/client/src/constants/viewKeys.js @@ -1,9 +1,14 @@ // Main views called from Home tab -> Canvas navigation header -export const DASHBOARD_VIEWS = ["mydashboard", "gas", "seismic", "remote", "daily"] +export const DASHBOARD_TABS = [ + { value: "mydashboard", label: "My Dashboard" }, + { value: "gas", label: "Gas" }, + { value: "seismic", label: "Seismic" }, + { value: "remote", label: "Remote Sensing" }, + { value: "daily", label: "Daily Activity" }, +] // Volcano views called from Volcano tab -> Canvas navigation header -// export const VOLCANO_VIEWS = ["volcanohome", "partner", "reports", "official", "social"] -export const VOLCANO_VIEWS = [ +export const VOLCANO_TABS = [ { value: "volcanohome", label: "Volcano Home" }, { value: "partner", label: "Partner Data" }, { value: "reports", label: "Reports" }, @@ -12,7 +17,19 @@ export const VOLCANO_VIEWS = [ ] // Admin views called from Admin tab -> Canvas navigation header -export const ADMIN_VIEWS = ["medataentry", "projectcollector", "nasapplication", "ivans"] +export const ADMIN_TABS = [ + { value: "medataentry", label: "M&E Data Entry" }, + { value: "projectcollector", label: "Project Collector" }, + { value: "nasapplication", label: "NAS Application" }, + { value: "ivans", label: "IVANS" }, +] + +// Derived string arrays for tracking current view tab via '.includes(view)' in Canvas.jsx +const toViews = (tabs) => tabs.map(t => t.value); + +export const DASHBOARD_VIEWS = toViews(DASHBOARD_TABS); +export const VOLCANO_VIEWS = toViews(VOLCANO_TABS); +export const ADMIN_VIEWS = toViews(ADMIN_TABS); // Sub views called from inside Home.jsx export const VIEW_LABELS = {