Merge branch 'main' into drumwolf/userprofile/hero

waterthetrees · Dec 7, 2023 · 2d174e9 · 2d174e9
2 parents 70e5fbe + 8eb183d
commit 2d174e9
Show file tree

Hide file tree

Showing 10 changed files with 1,803 additions and 1,584 deletions.
diff --git a/client/src/components/Header/Header.scss b/client/src/components/Header/Header.scss
@@ -12,7 +12,7 @@
  border-color: transparent;
 
  /* put this above the map drawer but below modal dialogs */
- z-index: 1250 !important;
+ z-index: 12 !important;
 
 
  &__font {
@@ -104,4 +104,4 @@
  }
  }
 
-}
+}
diff --git a/client/src/components/PanelDrawer/PanelDrawer.js b/client/src/components/PanelDrawer/PanelDrawer.js
@@ -7,16 +7,18 @@ import {
  Drawer,
  IconButton,
 } from '@mui/material';
-import { Close } from '@mui/icons-material';
+import { Close, ArrowBack } from '@mui/icons-material';
 
 export default function PanelDrawer({
  children,
  width,
  open,
  title = '',
+ subtext = '',
  anchor = 'left',
  actions,
  onClose,
+ arrowBack
 }) {
  return (
  <Drawer
@@ -26,7 +28,6 @@ export default function PanelDrawer({
  left: 0,
  width: `${width}px`,
  height: '100vh',
- paddingTop: '3.5rem',
  boxShadow: '5px 0px 15px 3px rgba(0, 0, 0, 0.15)',
  },
  }}
@@ -37,13 +38,20 @@ export default function PanelDrawer({
  >
  <DialogTitle sx={{ py: 1 }}>
  <Box display="flex" alignItems="center">
- <Box flexGrow={1}>{title}</Box>
- <IconButton size="small" onClick={onClose} sx={{ mr: -1.5 }}>
- <Close />
+ <Box className="dialog-title" flexGrow={1}>{title}</Box>
+ <IconButton className="panel-icon-button" size="small" onClick={onClose} sx={{ mr: -1.5 }}>
+ {arrowBack ?
+ <ArrowBack fontSize="large" className="panel-arrow-back" />
+ :
+ <Close />
+ }
  </IconButton>
  </Box>
+ {subtext &&
+ <Box className="dialog-subtext">{subtext}</Box>
+ }
  </DialogTitle>
- <DialogContent dividers>{children}</DialogContent>
+ <DialogContent className="dialog-content" dividers>{children}</DialogContent>
  {actions && <DialogActions>{actions}</DialogActions>}
  </Drawer>
  );

diff --git a/client/src/pages/Tree/Tree.js b/client/src/pages/Tree/Tree.js
@@ -1,6 +1,5 @@
 import { Alert } from '@mui/material';
-import React from 'react';
-
+import React, { useState } from 'react';
 import { CarbonCalculator } from './CarbonCalculator';
 import TreeHeader from './TreeHeader';
 import TreeHealth from './TreeHealth';
@@ -56,62 +55,89 @@ export default function Tree({
 
  const handleClose = () => setCurrentTreeId(null);
  const imagePath = setFormatImagePath(scientific);
+ const [isMaintenanceAlertVisible, setMaintenanceAlertVisible] = useState(false)
+ const [maintenanceAlert, setMaintenanceAlert] = useState(null)
+
+ const handleMaintenanceAlert = (data) => {
+ setMaintenanceAlertVisible(true)
+ setMaintenanceAlert(data)
+
+ setTimeout(() => {
+ setMaintenanceAlert(null);
+ setMaintenanceAlertVisible(false);
+ }, 10000);
+ }
+
+ const closeMaintenanceAlert = () => {
+ setMaintenanceAlertVisible(false);
+ setMaintenanceAlert(null);
+ };
+
  return (
- <TreeDetailsContainer
- title="Tree Details"
- width={drawerWidth}
- open={!!currentTreeId}
- onClose={handleClose}
- >
- {currentTreeData ? (
- <>
- <TreeHeader
- currentTreeData={currentTreeData}
- hasUnfitData={hasUnfitData}
- isTreeQueryError={isTreeQueryError}
- />
-
- <ImageLoad src={imagePath} placeholder="placeholder.jpg" />
-
- {!hasUnfitData && (
- <TreeHealth
+ <div>
+ {isMaintenanceAlertVisible &&
+ maintenanceAlert
+ }
+ <TreeDetailsContainer
+ title="Tree Details"
+ width={drawerWidth}
+ open={!!currentTreeId}
+ onClose={handleClose}
+ >
+ {currentTreeData ? (
+ <>
+ <TreeHeader
  currentTreeData={currentTreeData}
+ hasUnfitData={hasUnfitData}
  isTreeQueryError={isTreeQueryError}
  />
- )}
 
- {!hasUnfitData && (
- <TreeNotes
- currentTreeData={currentTreeData}
- isTreeQueryError={isTreeQueryError}
- />
- )}
+ <ImageLoad src={imagePath} placeholder="placeholder.jpg" />
 
- {!hasUnfitData && (
- <TreeMaintenance
- currentTreeData={currentTreeData}
- isTreeQueryError={isTreeQueryError}
- />
- )}
+  {!hasUnfitData && (
+  <TreeHealth
+  currentTreeData={currentTreeData}
+  isTreeQueryError={isTreeQueryError}
+  />
+  )}
 
- {currentTreeId && <TreeHistory currentTreeId={currentTreeId} />}
+ {!hasUnfitData && (
+ <TreeNotes
+ currentTreeData={currentTreeData}
+ isTreeQueryError={isTreeQueryError}
+ />
+ )}
 
- <TreeInfo currentTreeData={currentTreeData} />
+ {!hasUnfitData && (
+ <TreeMaintenance
+ currentTreeData={currentTreeData}
+ isTreeQueryError={isTreeQueryError}
+ closeTreeDetails={handleClose}
+ maintenanceAlert={handleMaintenanceAlert}
+ closeMaintenanceAlert={closeMaintenanceAlert}
+ />
+ )}
 
- <TreeLinks currentTreeData={currentTreeData} />
+  {currentTreeId && <TreeHistory currentTreeId={currentTreeId} />}
 
- <CarbonCalculator currentTreeData={currentTreeData} />
+  <TreeInfo currentTreeData={currentTreeData} />
 
- {!hasUnfitData && (
- <TreeRemoval
- currentTreeData={currentTreeData}
- isTreeQueryError={isTreeQueryError}
- />
- )}
- </>
- ) : (
- noDataChild
- )}
- </TreeDetailsContainer>
+ <TreeLinks currentTreeData={currentTreeData} />
+
+ <CarbonCalculator currentTreeData={currentTreeData} />
+
+ {!hasUnfitData && (
+ <TreeRemoval
+ currentTreeData={currentTreeData}
+ isTreeQueryError={isTreeQueryError}
+ />
+ )}
+
+ </>
+ ) : (
+ noDataChild
+ )}
+ </TreeDetailsContainer>
+ </div>
  );
 }
diff --git a/client/src/pages/Tree/TreeMaintenance.js b/client/src/pages/Tree/TreeMaintenance.js
@@ -1,41 +1,62 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
-import { Button, styled } from '@mui/material';
+import { Button, Alert } from '@mui/material';
 import { Park } from '@mui/icons-material';
 import format from 'date-fns/format';
 import {
  useTreeHistoryMutation,
  useCreateTreeDataMutation,
 } from '@/api/queries';
 import useAuthUtils from '@/components/Auth/useAuthUtils';
-import TreeMaintenanceDialog from './TreeMaintenanceDialog';
+import TreeMaintenanceSidebar from './TreeMaintenanceSidebar';
+import './TreeMaintenance.scss';
 
-const TreeMaintenanceButton = styled(Button)`
- font-size: 1.5rem;
-`;
-
-export default function TreeMaintenance({ currentTreeData, isTreeQueryError }) {
+export default function TreeMaintenance({ currentTreeData, isTreeQueryError, closeTreeDetails, maintenanceAlert, closeMaintenanceAlert }) {
  const { id } = currentTreeData;
  const { user = {}, isAuthenticated } = useAuth0();
  const { loginToCurrentPage } = useAuthUtils();
- const [isDialogOpen, setIsDialogOpen] = useState(false);
+ const [isMaintenanceSidebarOpen, setMaintenanceSidebarOpen] = useState(false)
  const mutateHistory = useTreeHistoryMutation();
  const mutateCreateTreeData = useCreateTreeDataMutation();
  const volunteerName = isAuthenticated ? user.nickname : 'Volunteer';
 
- const openDialog = () => setIsDialogOpen(true);
- const closeDialog = () => setIsDialogOpen(false);
+ const openMaintenanceSidebar = () => {
+ setMaintenanceSidebarOpen(true)
+ }
+ const closeMaintenanceSidebar = () => {
+ setMaintenanceSidebarOpen(false)
+ }
 
  const handleClick = () => {
  if (isAuthenticated) {
- openDialog();
+ openMaintenanceSidebar();
  } else {
  loginToCurrentPage();
  }
  };
 
+ useEffect(() => {
+ setMaintenanceSidebarOpen(false)
+ }, [currentTreeData])
+
+ const MaintenanceSubmitNotification = (type, body) => {
+ const alertMessage =
+ <div className="maintenance-alert">
+ <Alert
+ className={`alert alert-${type}`}
+ severity={type}
+ onClose={closeMaintenanceAlert}
+ >
+ {body}
+ </Alert>
+ </div>
+ maintenanceAlert(alertMessage)
+ }
+
  const handleConfirm = ({ actions, volunteer, comment }) => {
- closeDialog();
+ closeMaintenanceSidebar();
+ closeTreeDetails()
+ MaintenanceSubmitNotification("success", "Thank you for submitting a maintenance request!")
 
  if (comment || Object.keys(actions).length) {
  const sendTreeHistory = {
@@ -61,7 +82,8 @@ export default function TreeMaintenance({ currentTreeData, isTreeQueryError }) {
 
  return (
  <div>
- <TreeMaintenanceButton
+ <Button
+ className="tree-maintenance-button"
  color="success"
  size="large"
  variant="contained"
@@ -71,15 +93,16 @@ export default function TreeMaintenance({ currentTreeData, isTreeQueryError }) {
  disableElevation
  >
  Maintenance
- </TreeMaintenanceButton>
- {isDialogOpen && (
- <TreeMaintenanceDialog
- open={isDialogOpen}
+ </Button>
+ {isMaintenanceSidebarOpen &&
+ <TreeMaintenanceSidebar
+ open={isMaintenanceSidebarOpen}
  volunteer={volunteerName}
  onConfirm={handleConfirm}
- onCancel={closeDialog}
+ onCancel={closeMaintenanceSidebar}
+ currentTreeData={currentTreeData}
  />
- )}
+ }
  </div>
  );
 }
diff --git a/client/src/pages/Tree/TreeMaintenance.scss b/client/src/pages/Tree/TreeMaintenance.scss
@@ -0,0 +1,21 @@
+.tree-maintenance-button {
+ font-size: 1.5rem;
+}
+
+.maintenance-alert {
+ margin: 0 auto;
+ position: absolute;
+ left: 0;
+ top: 10%;
+ display: grid;
+ place-items: center;
+ width: 100%;
+ height: 0px;
+}
+
+.alert-success {
+ width: fit-content;
+ margin: 10px 50px;
+ font-size: 14px;
+ font-weight: 400;
+}