feat(cwn-dashboard): added a preview of the customizable navbar

Greenstand · Dec 30, 2022 · b41864b · b41864b
1 parent e19842c
commit b41864b
Show file tree

Hide file tree

Showing 5 changed files with 176 additions and 69 deletions.
diff --git a/cypress/tests/integration/admin/global/navbarPreview.cy.js b/cypress/tests/integration/admin/global/navbarPreview.cy.js
@@ -0,0 +1,69 @@
+describe('navbarPreview', { defaultCommandTimeout: 5000 }, () => {
+  beforeEach(() => {
+    cy.viewport(1440, 1080);
+  });
+  it('should not exist yet', () => {
+    cy.visit('/admin/global');
+    cy.get('My Test Link').should('not.exist');
+  });
+  it('should add a new tab', () => {
+    // Add first tab
+    cy.get('[data-cy="addNavButton"]').click();
+    cy.get('[data-cy="customizeNavName"]').contains('New Url').click();
+    cy.get('input[name="title"][value="New Url"]').clear().type('My Test Link');
+    cy.get('input[name="url"][value="/new-url"]').clear().type('/My-Test-Link');
+    cy.contains('Update').click();
+
+    // Add second tab
+    cy.get('[data-cy="addNavButton"]').click();
+    cy.get('[data-cy="customizeNavName"]').contains('New Url').click();
+    cy.get('input[name="title"][value="New Url"]')
+      .clear()
+      .type('My Test Link 2');
+    cy.get('input[name="url"][value="/new-url"]')
+      .clear()
+      .type('/My-Test-Link-2');
+    cy.get('[data-cy="customizeNavName"]')
+      .siblings()
+      .find('button')
+      .contains('Update')
+      .click();
+  });
+
+  it('should remove a tab', () => {
+    cy.contains('My Test Link 2')
+      .siblings()
+      .find('[data-testid="DeleteIcon"]')
+      .click();
+    cy.contains('My Test Link 2').should('not.exist');
+  });
+
+  it('should update a tab', () => {
+    cy.get('input[name="title"][value="My Test Link"]')
+      .clear()
+      .type('UpdatedLink');
+    cy.get('input[name="url"][value="/My-Test-Link"]')
+      .clear()
+      .type('/UpdatedLink');
+    cy.get('[data-cy="customizeNavName"]')
+      .siblings()
+      .find('button')
+      .contains('Update')
+      .click();
+  });
+
+  it('should navigate to new url tab', () => {
+    cy.get('[data-cy="addNavButton"]').click();
+    cy.get('[data-cy="customizeNavName"]').contains('New Url').click();
+    cy.get('input[name="title"][value="New Url"]').clear().type('Home');
+    cy.get('input[name="url"][value="/new-url"]')
+      .clear()
+      .type('https://greenstand.org/home');
+    cy.get('[data-cy="customizeNavName"]')
+      .siblings()
+      .find('button')
+      .contains('Update')
+      .click();
+    cy.get('a[href="https://greenstand.org/home"]').click();
+  });
+});
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -8,8 +8,9 @@ import {
   Typography,
 } from '@mui/material';
 import Image from 'next/image';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { initialState } from 'context/configContext';
+import { getStorageValue } from 'hooks/globalHooks/useLocalStorage';
 import MenuBar from 'images/MenuBar';
 import { makeStyles } from 'models/makeStyles';
 import ChangeThemeButton from './ChangeThemeButton';
@@ -60,11 +61,11 @@ const useStyles = makeStyles()((theme) => ({
   },
 }));
 
-function Navbar() {
+function Navbar({ preview }) {
   const [anchorEl, setAnchorEl] = useState(null);
   const isMobile = useMobile();
   const [webMapConfig] = useLocalStorage('config', initialState);
-  const { items: navItems } = webMapConfig.navbar;
+  const [navItems, setNavItems] = useState(webMapConfig.navbar.items);
 
   const open = Boolean(anchorEl);
   const handleMenuClick = (event) => {
@@ -74,10 +75,24 @@ function Navbar() {
     setAnchorEl(null);
   };
   const { classes } = useStyles();
+
+  // Detect webMapConfig changes. Reactively update the nav-items;
+  useEffect(() => {
+    const updateFunction = () => {
+      const localWebMapConfig = getStorageValue('config', initialState);
+      setNavItems(localWebMapConfig.navbar.items);
+    };
+    window.addEventListener('storage', updateFunction);
+    return () => {
+      window.removeEventListener('storage', updateFunction);
+    };
+  }, []);
+
   return (
     <AppBar
       elevation={4}
       className={classes.navContainer}
+      sx={preview ? { width: '100%!important' } : null}
       color="default"
       position="static"
     >

diff --git a/src/components/dashboard/CustomizeNavbar.js b/src/components/dashboard/CustomizeNavbar.js
@@ -137,9 +137,13 @@ function CustomAccordion({ item: defaultItem, index }) {
             <div {...provided.dragHandleProps}>
               <DragIndicatorIcon />
             </div>
-            <Typography>{item.title}</Typography>
+            <Typography data-cy="customizeNavName">{item.title}</Typography>
             <Box>
-              {hasItemChanged && <Button onClick={handleUpdate}>Update</Button>}
+              {hasItemChanged && (
+                <Button data-cy="UpdateButton" onClick={handleUpdate}>
+                  Update
+                </Button>
+              )}
               <SquareIconButton
                 icon={<DeleteIcon />}
                 onClick={handleDelete}
@@ -197,7 +201,9 @@ function CustomizeNavbar() {
           )}
         </Droppable>
       </DragDropContext>
-      <Button onClick={onAddNewItem}>New Item</Button>
+      <Button onClick={onAddNewItem} data-cy="addNavButton">
+        New Item
+      </Button>
     </>
   );
 }

diff --git a/src/hooks/globalHooks/useLocalStorage.js b/src/hooks/globalHooks/useLocalStorage.js
@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 const KEY_PREFIX = 'greenstand-web-map-client-';
 
 // Get value from localStorage if possible, otherwise return provided default
-function getStorageValue(key, defaultValue) {
+export function getStorageValue(key, defaultValue) {
   if (typeof window !== 'undefined') {
     const value = localStorage.getItem(KEY_PREFIX + key);
     let saved;
@@ -23,6 +23,7 @@ const useLocalStorage = (key, defaultValue) => {
 
   useEffect(() => {
     localStorage.setItem(KEY_PREFIX + key, JSON.stringify(value));
+    window.dispatchEvent(new Event('storage'));
   }, [key, value]);
 
   return [value, setValue];

diff --git a/src/pages/admin/global.js b/src/pages/admin/global.js
@@ -2,10 +2,12 @@ import { Box, Typography, Divider, List } from '@mui/material';
 import dynamic from 'next/dynamic';
 import { useEffect, useState } from 'react';
 import HeadTag from 'components/HeadTag';
+import Navbar from 'components/Navbar';
 import ChangeLogoSection from 'components/dashboard/ChangeLogoSection';
 import ChangeNavSection from 'components/dashboard/ChangeNavSection';
 import { Tab, TabPanel } from 'components/dashboard/Tabs';
 import { ConfigProvider, useConfigContext } from 'context/configContext';
+import { CustomThemeProvider } from 'context/themeContext';
 import { getOrganizationById } from 'models/api';
 import { updateLogoUrl } from 'models/config.reducer';
 import { wrapper } from 'models/utils';
@@ -47,79 +49,93 @@ function Global({ organization }) {
   }, [mapContext, organization, state.map.initialLocation]);
 
   return (
-    <>
-      <HeadTag title="Admin Dashboard" />
-      <Box
-        sx={{
-          display: 'flex',
-          height: '100vh',
-        }}
-      >
+    <CustomThemeProvider>
+        <HeadTag title="Admin Dashboard" />
         <Box
           sx={{
-            minWidth: '220px',
-            p: 2,
-            backgroundColor: '#f5f5f3',
+            display: 'flex',
+            height: '100vh',
           }}
         >
-          <Typography
-            variant="h6"
+          <Box
             sx={{
-              textAlign: 'center',
+              minWidth: '220px',
+              p: 2,
+              backgroundColor: '#f5f5f3',
             }}
           >
-            Dashboard
-          </Typography>
-          <Divider
-            sx={{
-              my: 2,
-            }}
-          />
-          <List
-            sx={{
-              p: 0,
-            }}
-          >
-            <Tab value={currentTab} index={0} onClick={handleSidebarClick}>
-              <Typography>Navbar Settings</Typography>
-            </Tab>
-            <Tab value={currentTab} index={1} onClick={handleSidebarClick}>
-              <Typography>Theme Settings</Typography>
-            </Tab>
-            <Tab value={currentTab} index={2} onClick={handleSidebarClick}>
-              <Typography>Map Settings</Typography>
-            </Tab>
-          </List>
-        </Box>
-        <Box
-          sx={{
-            flex: 1,
-            p: 2,
-          }}
-        >
-          <TabPanel value={currentTab} index={0}>
-            <Typography variant="h5">Navbar View</Typography>
-            <Box
+            <Typography
+              variant="h6"
               sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                justifyContent: 'space-between',
+                textAlign: 'center',
               }}
             >
-              <ChangeLogoSection />
-              <ChangeNavSection />
-            </Box>
-          </TabPanel>
-          <TabPanel value={currentTab} index={1}>
-            <Typography variant="h5">Theme View</Typography>
-          </TabPanel>
-          <TabPanel value={currentTab} index={2}>
-            <Typography variant="h5">Map View</Typography>
-            <MapLayout />
-          </TabPanel>
+              Dashboard
+            </Typography>
+            <Divider
+              sx={{
+                my: 2,
+              }}
+            />
+            <List
+              sx={{
+                p: 0,
+              }}
+            >
+              <Tab value={currentTab} index={0} onClick={handleSidebarClick}>
+                <Typography>Navbar Settings</Typography>
+              </Tab>
+              <Tab value={currentTab} index={1} onClick={handleSidebarClick}>
+                <Typography>Theme Settings</Typography>
+              </Tab>
+              <Tab value={currentTab} index={2} onClick={handleSidebarClick}>
+                <Typography>Map Settings</Typography>
+              </Tab>
+            </List>
+          </Box>
+          <Box
+            sx={{
+              flex: 1,
+              p: 2,
+            }}
+          >
+            <TabPanel value={currentTab} index={0}>
+              <Typography variant="h4">Navbar Preview</Typography>
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  paddingY: '50px;',
+                  backgroundColor: 'background.paperDark',
+                  borderRadius: '8px',
+                  marginBottom: '24px',
+                }}
+              >
+                <Navbar preview />
+              </Box>
+
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <ChangeLogoSection />
+                <ChangeNavSection />
+              </Box>
+            </TabPanel>
+            <TabPanel value={currentTab} index={1}>
+              <Typography variant="h5">Theme View</Typography>
+            </TabPanel>
+            <TabPanel value={currentTab} index={2}>
+              <Typography variant="h5">Map View</Typography>
+              <MapLayout />
+            </TabPanel>
+          </Box>
         </Box>
-      </Box>
-    </>
+      </CustomThemeProvider>
   );
 }