Merge branch 'refactor/header-tabs' into 'main'

Refactor the way TABS and VIEWS are handeled, now derived inside viewKeys.js

See merge request vkuchenik/website-framework!73

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 (
         <chakra.div width="100%" height="100%">
             {/* Check if view is a tab inside the Home Header */}
@@ -22,7 +19,7 @@ export default function Canvas(props) {
                 <Home {...props}/>
             )}
             {/* Check if view is a tab inside the Volcano Header */}
-            { VOLCANO_VALUES.includes(view) && (
+            { VOLCANO_VIEWS.includes(view) && (
                 <Volcano {...props}/>
             )}
             {/* Check if view is a tab inside the Admin Header */}
@@ -31,7 +28,6 @@ export default function Canvas(props) {
             )}
             {view === "global" && <GlobalMap />}
             {view === "regional" && <RegionalMap />}
-            {/* {view === "volcano" && <Volcano />} */}
             {view === "account" && <Account />}
             {view === "settings" && <Personal />}
             {view === "personal" && <Personal />}

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 (
-            <Flex 
-            as="header"
-            position="sticky"
-            top="0"
-            zIndex="dropdown" // zIndex: 1100
-            bg="base200"
-            px={5}
-            pt={3}
-            pb={2}
-            align="center"
-            justify="space-between"
-            width="100%"
-            >
             <Tabs.List>
                 {tabs.map(({ value, label }) =>
                     <Tabs.Trigger key={value} value={value} fontSize="lg">
@@ -23,6 +10,5 @@ export function CanvasHeaderTabs({ view, onChangeView, tabs }) {
                     </Tabs.Trigger>
                 )}
             </Tabs.List>
-        </Flex>
     )
 }

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%"
       >
-        <Tabs.List>
+        {/* HEADER */}
-          <Tabs.Trigger value="medataentry" fontSize="lg">
+        <CanvasHeaderTabs tabs={ADMIN_TABS} />
-            M&E Data Entry
-          </Tabs.Trigger>
-          <Tabs.Trigger value="projectcollector" fontSize="lg">
-            Project Collector
-          </Tabs.Trigger>
-          <Tabs.Trigger value="nasapplication" fontSize="lg">
-            NAS Application
-          </Tabs.Trigger><Tabs.Trigger value="ivans" fontSize="lg">
-            IVANS
-          </Tabs.Trigger>
-        </Tabs.List>
-
         <HStack width="258px" justifyContent="flex-end">
-          <SearchBar />
+            <SearchBar />
-          <SettingsButton {...settingsButtonProps}/>
+            <SettingsButton />
         </HStack>
       </Flex>
 

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%"
       >
-        <Tabs.List>
+        <CanvasHeaderTabs tabs={DASHBOARD_TABS} />
-          <Tabs.Trigger value="mydashboard" fontSize="lg">
-            My Dashboard
-          </Tabs.Trigger>
-          <Tabs.Trigger value="gas" fontSize="lg">
-            Gas
-          </Tabs.Trigger>
-          <Tabs.Trigger value="seismic" fontSize="lg">
-            Seismic
-          </Tabs.Trigger>
-          <Tabs.Trigger value="remote" fontSize="lg">
-            Remote Sensing
-          </Tabs.Trigger>
-          <Tabs.Trigger value="daily" fontSize="lg">
-            Daily Activity
-          </Tabs.Trigger>
-        </Tabs.List>
-
         <HStack width="258px" justifyContent="flex-end">
           {isEditable ? (
             <>

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 }) {
         <Tabs.Root
             key={view}
             value={view}
-            // onValueChange={(e) => 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 */}
+            <Flex 
-            <CanvasHeaderTabs tabs={VOLCANO_VIEWS} />
+                as="header"
+                position="sticky"
+                top="0"
+                zIndex="dropdown" // zIndex: 1100
+                bg="base200"
+                pl={5}
+                pr={2}
+                pt={3}
+                align="center"
+                justify="space-between"
+                width="100%"
+            > 
+                {/* HEADER */}
+                <CanvasHeaderTabs tabs={VOLCANO_TABS} />
+                <HStack width="258px" justifyContent="flex-end">
+                    <SearchBar />
+                    <SettingsButton />
+                </HStack>
+            </Flex>
             
             {/* CANVAS */}
             <Tabs.Content value="volcanohome">

client/src/components/Canvas/views/VolcanoTabs/VolcanoHome.jsx

@@ -23,7 +23,7 @@ export function VolcanoHome() {
   `;
 
     return (
-        <Box width="100%" px={6} py={4}>
+        <Box width="100%" px={6} py={2}>
             <Heading textAlign="center" mb={6} size="xl" fontWeight="bold">
                 Mount St. Helens - United States CVO
             </Heading>

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_TABS = [
-export const VOLCANO_VIEWS = [
     { 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 = {