completed animation subsidebar for quadrat & census setting

Smithsonian · Nov 15, 2023 · ff16eeb · ff16eeb
1 parent 91d854f
commit ff16eeb
Show file tree

Hide file tree

Showing 7 changed files with 445 additions and 447 deletions.
diff --git a/NextJSApp/frontend/app/(endpoints)/dashboard/page.tsx b/NextJSApp/frontend/app/(endpoints)/dashboard/page.tsx
@@ -1,10 +1,12 @@
 "use client";
 import * as React from "react";
-import {usePlotContext} from "@/app/plotcontext";
+import {useCensusContext, usePlotContext, useQuadratContext} from "@/app/plotcontext";
 import Box from "@mui/joy/Box";
 
 export default function Page() {
   const currentPlot = usePlotContext();
+  const currentCensus = useCensusContext();
+  const currentQuadrat = useQuadratContext();
   if (!currentPlot?.key) {
     return (
       <>
@@ -17,7 +19,11 @@ export default function Page() {
     return (
       <>
         <Box sx={{display: 'flex', gap: 1, alignItems: 'center'}}>
-          <p>You have selected {currentPlot?.key ? currentPlot!.key : "nothing"}</p>
+          <p>You have selected {currentPlot ? currentPlot!.key : "no plot"}</p>
+          <br />
+          <p>You have selected {currentCensus ? currentCensus : "no census"}</p>
+          <br />
+          <p>You have selected {currentQuadrat ? currentQuadrat : "no quadrat"}</p>
         </Box>
       </>
     );

diff --git a/NextJSApp/frontend/app/(endpoints)/layout.tsx b/NextJSApp/frontend/app/(endpoints)/layout.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import {subtitle, title} from "@/config/primitives";
 import {redirect, usePathname} from "next/navigation";
 import {useSession} from "next-auth/react";
-import {Box} from "@mui/joy";
+import {Box, Stack} from "@mui/joy";
 import Sidebar from "@/components/sidebar";
 import Divider from "@mui/joy/Divider";
 
@@ -46,50 +46,52 @@ export default function EndpointLayout({children,}: { children: React.ReactNode
   let pathname = usePathname();
   return (
     <>
-      <Sidebar/>
-      <Box
-        component="main"
-        className="MainContent"
-        sx={{
-          px: {
-            xs: 2,
-            md: 6,
-          },
-          pt: {
-            xs: 'calc(12px + var(--Header-height))',
-            sm: 'calc(12px + var(--Header-height))',
-            md: 3,
-          },
-          pb: {
-            xs: 2,
-            sm: 2,
-            md: 3,
-          },
-          flex: 1,
-          display: 'flex',
-          flexDirection: 'column',
-          minWidth: 0,
-          height: '100dvh',
-          gap: 1,
-        }}
-      >
-        <Box sx={{display: 'flex', alignItems: 'center'}}>
-          {renderSwitch(pathname)}
-        </Box>
-        <Box sx={{display: 'flex', alignItems: 'center'}}>
-          {children}
-          <Box mt={3} position="absolute" bottom="10px" right="calc(40% - var(--Sidebar-width))"
-               sx={{display: 'flex', alignItems: 'center', flexDirection: 'row'}}>
-            <Box>
-              <h1 className={title({color: "violet"})}>ForestGEO&nbsp;</h1>
-            </Box>
-            <Divider orientation={"vertical"} sx={{marginRight: 2}}/>
-            <Box>
-              <p className={subtitle({color: "cyan"})}>A data entry and validation system for your convenience.</p>
+      <Stack direction={"row"}>
+        <Sidebar/>
+        <Box
+          component="main"
+          className="MainContent"
+          sx={{
+            px: {
+              xs: 2,
+              md: 6,
+            },
+            pt: {
+              xs: 'calc(12px + var(--Header-height))',
+              sm: 'calc(12px + var(--Header-height))',
+              md: 3,
+            },
+            pb: {
+              xs: 2,
+              sm: 2,
+              md: 3,
+            },
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            minWidth: 0,
+            height: '100dvh',
+            gap: 1,
+          }}
+        >
+          <Box sx={{display: 'flex', alignItems: 'left'}}>
+            {renderSwitch(pathname)}
+          </Box>
+          <Box sx={{display: 'flex', alignItems: 'left'}}>
+            {children}
+            <Box mt={3} position="absolute" bottom="10px" right="calc(40% - var(--Sidebar-width))"
+                 sx={{display: 'flex', alignItems: 'center', flexDirection: 'row'}}>
+              <Box>
+                <h1 className={title({color: "violet"})}>ForestGEO&nbsp;</h1>
+              </Box>
+              <Divider orientation={"vertical"} sx={{marginRight: 2}}/>
+              <Box>
+                <p className={subtitle({color: "cyan"})}>A data entry and validation system for your convenience.</p>
+              </Box>
             </Box>
           </Box>
         </Box>
-      </Box>
+      </Stack>
     </>
   );
 }
diff --git a/NextJSApp/frontend/app/plotcontext.tsx b/NextJSApp/frontend/app/plotcontext.tsx
@@ -2,28 +2,28 @@
 import React, {createContext, Dispatch, useContext, useReducer} from 'react';
 import {allCensus, allQuadrats, Plot, plots} from "@/config/macros";
 
-const initialState: Plot = {key: 'none', num: 0};
+const initialState: Plot = {key: '', num: 0};
 const initialCensus = 1;
 const initialQuadrat = 1;
 export const PlotsContext = createContext<Plot | null>(null);
 export const CensusContext = createContext<number | null>(null);
 export const QuadratContext = createContext<number | null>(null);
-export const PlotsDispatchContext = createContext<Dispatch<{ plotKey: string }> | null>(null);
-export const CensusDispatchContext = createContext<Dispatch<{census: number}> | null>(null);
-export const QuadratDispatchContext = createContext<Dispatch<{quadrat: number}> | null>(null);
+export const PlotsDispatchContext = createContext<Dispatch<{ plotKey: string | null }> | null>(null);
+export const CensusDispatchContext = createContext<Dispatch<{census: number | null}> | null>(null);
+export const QuadratDispatchContext = createContext<Dispatch<{quadrat: number | null}> | null>(null);
 
 export function ContextsProvider({children}: { children: React.ReactNode }) {
   const [plot, plotDispatch] = useReducer(
     plotsReducer,
-    initialState
+    null
   );
   const [census, censusDispatch] = useReducer(
     censusReducer,
-    initialCensus
+    null
   );
   const [quadrat, quadratDispatch] = useReducer(
     quadratReducer,
-    initialQuadrat
+    null
   )
 
 
@@ -44,21 +44,21 @@ export function ContextsProvider({children}: { children: React.ReactNode }) {
   );
 }
 
-function plotsReducer(currentPlot: any, action: { plotKey: string }) {
-  if (plots.find((p) => p.key == action.plotKey)) return plots.find((p) => p.key == action.plotKey);
-  else if (action.plotKey == "") return null;
+function plotsReducer(currentPlot: any, action: { plotKey: string | null }) {
+  if (action.plotKey == null) return null;
+  else if (plots.find((p) => p.key == action.plotKey)) return plots.find((p) => p.key == action.plotKey);
   else return currentPlot;
 }
 
-function censusReducer(currentCensus: any, action: { census: number} ) {
-  if (allCensus.includes(action.census)) return action.census;
-  else if (action.census < 0) return null;
+function censusReducer(currentCensus: any, action: { census: number | null} ) {
+  if (action.census == null) return null;
+  else if (allCensus.includes(action.census)) return action.census;
   else return currentCensus;
 }
 
-function quadratReducer(currentQuadrat: any, action: { quadrat: number } ) {
-  if (allQuadrats.includes(action.quadrat)) return action.quadrat;
-  else if (action.quadrat < 0) return null;
+function quadratReducer(currentQuadrat: any, action: { quadrat: number | null } ) {
+  if (action.quadrat == null) return null;
+  else if (allQuadrats.includes(action.quadrat)) return action.quadrat;
   else return currentQuadrat;
 }