Merge pull request #206 from ctc-uci/navbar-responsive

Navbar responsive
ctc-uci · May 20, 2024 · e84116c · e84116c
2 parents 0ccb37e + 85081df
commit e84116c
Show file tree

Hide file tree

Showing 20 changed files with 79 additions and 52 deletions.
diff --git a/src/components/Checkin/VolunteerEventsTable.jsx b/src/components/Checkin/VolunteerEventsTable.jsx
@@ -101,7 +101,7 @@ const RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage, isVie
             justifyContent={'center'}
           >
             <Image src={status === 'Checked-in' ? checked_in : registered} />
-            <Text fontSize="md" textOverflow={'ellipsis'} maxW={48} overflow={'hidden'}>
+            <Text fontSize={status === 'Checked-in' ? "xs" : "md"} mr={status === 'Checked-in' ? 2 : 0}>
               {status}
             </Text>
           </Flex>

diff --git a/src/components/Events/EventFilteredGrid.jsx b/src/components/Events/EventFilteredGrid.jsx
@@ -10,7 +10,7 @@ import {
   Heading,
   HStack,
 } from '@chakra-ui/react';
-import { useEffect, useState, useContext } from 'react';
+import { useEffect, useState, useContext, useCallback } from 'react';
 import { SearchIcon } from '@chakra-ui/icons';
 import PropTypes from 'prop-types';
 
@@ -32,9 +32,11 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
   const [date, setDate] = useState('');
   const [fuse, setFuse] = useState();
 
+
   const { user } = useContext(UserContext);
+
+  const getEvents = useCallback(async () => {
 
-  const getEvents = async () => {
     try {
       let eventsData;
       if (onlyUnregistered) {
@@ -52,7 +54,7 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
     } catch (err) {
       console.log(`Error getting events: `, err.message);
     }
-  };
+  }, []);
 
   const getLocation = data => {
     let location = [];
@@ -85,7 +87,7 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
 
   useEffect(() => {
     getEvents();
-  }, []);
+  }, [getEvents]);
 
   const handleLocationChange = event => {
     const selectedLocation = event.target.value;
@@ -130,16 +132,16 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
       result = fuseResult.map(item => item.item);
     } else result = events;
     setDisplayEvents(result);
-  }, [name, location, date, fuse]);
+  }, [name, location, date, fuse, events]);
 
   return (
     <>
-    {/* Flag: Navbar responsive (Use 15%) */}
+      {/* Flag: Navbar responsive (Use 15%) */}
       <Flex
         flexDir={'column'}
         alignItems={'center'}
         bg="#E6EAEF"
-        ml={{ base: '2vw', xl: '15rem' }}
+        ml={{ base: '2vw', xl: isOpen ? '22%' : '15%' }}
         mr={{ base: '2vw' }}
         pt={4}
         mb="32px"

diff --git a/src/components/Events/FeaturedDashboard.jsx b/src/components/Events/FeaturedDashboard.jsx
@@ -12,6 +12,7 @@ const FeaturedDashboard = ({
   setIsOpen,
   setShowOpenDrawerButton,
   onOpen,
+  isSideBarOpen,
   showOpenDrawerButton,
 }) => {
   const [featuredEvents, setFeaturedEvents] = useState([]);
@@ -29,6 +30,15 @@ const FeaturedDashboard = ({
   };
 
   useEffect(() => {
+    const getEvents = async () => {
+      try {
+        const eventsData = await Backend.get('/events');
+        setFeaturedEvents(eventsData.data.slice(0, numEvents));
+      } catch (err) {
+        console.log(`Error getting events: `, err.message);
+      }
+    };
+
     getEvents();
   }, [numEvents]);
 
@@ -38,7 +48,7 @@ const FeaturedDashboard = ({
       flexDir={'column'}
       alignItems={'center'}
       bg="#E6EAEF"
-      ml={{ base: '3vw', xl: '15rem' }}
+      ml={{ base: '3vw', xl: isSideBarOpen ? '22%' : '15%' }}
       mr={{ base: '3vw' }}
       pt={4}
     >
@@ -132,6 +142,7 @@ FeaturedDashboard.propTypes = {
   setCurrentEventId: PropTypes.func.isRequired,
   setIsOpen: PropTypes.func.isRequired,
   setShowOpenDrawerButton: PropTypes.func.isRequired,
+  isSideBarOpen: PropTypes.bool
 };
 
 export default FeaturedDashboard;
diff --git a/src/components/Events/ImpactSummary.jsx b/src/components/Events/ImpactSummary.jsx
@@ -137,7 +137,7 @@ const ImpactSummary = () => {
             filename="./data.csv"
             headers={header}
           >
-            Export Data
+            Export All Data
           </CSVLink>
           {/* {eventIdData.map((eventData) => <CSVLink
             data={eventData ? [eventData] : ''}

diff --git a/src/components/Events/PastEventsImpactSummary.jsx b/src/components/Events/PastEventsImpactSummary.jsx
@@ -124,7 +124,7 @@ const PastEventsImpactSummary = () => {
             filename="./data.csv"
             headers={header}
           >
-            Export Data
+            Export Past Events Data
           </CSVLink>
         </Button>
       </VStack>

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -76,7 +76,7 @@ const Navbar = () => {
 
   useEffect(() => {
     updateUser();
-  }, []);
+  }, [updateUser]);
 
   // Change the paths for each button since these might change
   const homePath = '/';
@@ -102,7 +102,7 @@ const Navbar = () => {
     <>
       {/* Box for entire navbar */}
       {/* Flag: Navbar responsive (Use 15%) */}
-      <Box position="fixed" top="0" w={{ base: 'full', xl: '15rem' }} float="left">
+      <Box position="fixed" top="0" w={{ base: 'full', xl: '15%' }} float="left">
         {/* Box for entire nabar with coloring */}
         <Box
           h="100vh"
@@ -246,12 +246,13 @@ const Navbar = () => {
                 alignItems: 'center',
                 gap: '10px',
                 padding: '12px',
-                marginLeft: '14px',
-                marginRight: '13px',
-                marginBottom: '18px',
-                borderRadius: '12px',
+                // marginLeft: '14px',
+                // marginRight: '13px',
+                // marginBottom: '18px',
+                // borderRadius: '12px',
                 backgroundColor: '#FFF',
                 border: '1px',
+                width: 'full'
               }}
               onClick={e => {
                 e.preventDefault();
@@ -261,29 +262,30 @@ const Navbar = () => {
               href="#"
             >
               {/* User image */}
-              <Box style={{ borderRadius: '50%' }}>
+              {/* <Box style={{ borderRadius: '50%' }}> */}
                 <Image
                   src={user?.image_url}
-                  width="45px"
-                  height="45px"
+                  width="20%"
+                  aspectRatio={1}
                   borderRadius="full"
                   objectFit="cover"
                 />
-              </Box>
+              {/* </Box> */}
               <Box
                 style={{
                   flexDirection: 'column',
                   alignItems: 'center',
                 }}
+                maxWidth={{ base: '219px', md: '150px', xl: '50%' }}
               >
                 {/* User name */}
                 <Text
-                  maxWidth={{ base: '219px', md: '150px', xl: '100px' }}
+                  // maxWidth={{ base: '219px', md: '150px', xl: '100px' }}
                   overflow="hidden"
                   textOverflow="ellipsis"
                   fontWeight='800'
                   color='#000000'
-                  fontSize='14px'
+                  fontSize='75%'
                   lineHeight='25px'
                   textAlign='left'
                   marginTop='-1px'
@@ -294,7 +296,7 @@ const Navbar = () => {
 
                 <Tag
                   style={{
-                    fontSize: '12px',
+                    fontSize: '56.25%',
                     fontWeight: '500',
                     lineHeight: '16px',
                     color: '#717171',

diff --git a/src/components/VolunteerSideViewDrawer.jsx b/src/components/VolunteerSideViewDrawer.jsx
@@ -3,7 +3,6 @@ import {
   Drawer,
   DrawerOverlay,
   DrawerContent,
-  DrawerCloseButton,
   DrawerBody,
   useDisclosure,
 } from '@chakra-ui/react';
@@ -52,7 +51,7 @@ const VolunteerSideViewDrawer = ({ eventId, isOpen, onClose, setShowOpenDrawerBu
     getEventById(eventId).then(data => setEventData(data));
     getEventDataVolunteerId(user?.id, eventId).then(data => setEventDataVolunteer(data));
     // setDateObj(new Date(Date.parse(eventData.date)))
-  }, [eventId]);
+  }, [eventId, user?.id]);
 
   function formatDate(dateString) {
     const months = [
@@ -87,12 +86,11 @@ const VolunteerSideViewDrawer = ({ eventId, isOpen, onClose, setShowOpenDrawerBu
     <Drawer isOpen={isOpen} placement="right" onClose={onClose} size="full">
       <DrawerOverlay />
       <DrawerContent>
-        <DrawerCloseButton />
         <DrawerBody>
           <Flex
             flexDir={'column'}
             w={'100%'}
-            maxW={'26em'}
+            maxW={'100vw'}
             mt={'1em'}
             px={{ base: '10px', md: '20px' }}
           >

diff --git a/src/pages/AdminPage.jsx b/src/pages/AdminPage.jsx
@@ -94,7 +94,7 @@ export default function AdminPage() {
   ));
 
   return (
-    <Flex ml="15rem" flexDir={'column'} padding={'2%'} gap={'1em'} backgroundColor={'#C8E6FF'}>
+    <Flex ml="15%" flexDir={'column'} padding={'2%'} gap={'1em'} backgroundColor={'#C8E6FF'}>
       <Flex justify={'space-between'}>
         <Text fontSize={'2.3rem'} fontWeight={500}>
           Administrators

diff --git a/src/pages/ArchivedEvents.jsx b/src/pages/ArchivedEvents.jsx
@@ -80,7 +80,7 @@ const ArchivedEvents = () => {
   }, []);
 
   return (
-    <Box ml="15rem" style={{ display: 'grid', gap: '22px' }} backgroundColor={'#c8e6fe'}>
+    <Box ml="15%" style={{ display: 'grid', gap: '22px' }} backgroundColor={'#c8e6fe'}>
       {/* Overall Imapct Card */}
       <Heading marginLeft={10} marginTop={5}>
         Overall Impact

diff --git a/src/pages/CheckinPage.jsx b/src/pages/CheckinPage.jsx
@@ -185,7 +185,7 @@ const CheckinPage = () => {
       alignItems={'center'}
       bg="#E6EAEF"
       minH="100vh"
-      ml={{ base: '0', xl: '15rem' }}
+      ml={{ base: '0', xl: '15%' }}
     >
       <Flex minW="95%" justifyContent={'space-between'} mt={10} mb={5}>
         <Flex alignItems={'center'} gap={3}>

diff --git a/src/pages/DummyVolunteerProfilePage.jsx b/src/pages/DummyVolunteerProfilePage.jsx
@@ -18,7 +18,7 @@ import SettingsField from '../components/DummyVolunteerProfile/SettingsField';
 
 export const DummyVolunteerProfilePage = () => {
   return (
-    <Box bg={'#e6eaee'} minHeight="100vh" paddingLeft={'15rem'}>
+    <Box bg={'#e6eaee'} minHeight="100vh" paddingLeft={'15%'}>
       {/* Profile Card and Account Information */}
       <Grid templateColumns="repeat(3, 1fr)" gap={4}>
         <GridItem colSpan={1}>

diff --git a/src/pages/EventPage.jsx b/src/pages/EventPage.jsx
@@ -257,7 +257,7 @@ const Events = () => {
       alignItems={'center'}
       bg="#E6EAEF"
       minH="100vh"
-      ml={{ base: '0', xl: '15rem' }}
+      ml={{ base: '0', xl: '15%' }}
       py={10}
     >
       <Flex

diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
@@ -105,7 +105,7 @@ const Home = () => {
       alignItems={'center'}
       bg="#E6EAEF"
       minH="100vh"
-      ml={{ base: '0', xl: '15rem' }}
+      ml={{ base: '0', xl: '15%' }}
       py={10}
     >
       <Flex w={'95%'} flexDir={'column'}>

diff --git a/src/pages/InputDataPage.jsx b/src/pages/InputDataPage.jsx
@@ -146,7 +146,7 @@ const InputDataPage = () => {
       alignItems={'center'}
       bg="#E6EAEF"
       minH="100vh"
-      ml={{ base: '0', xl: '15rem' }}
+      ml={{ base: '0', xl: '15%' }}
       px={5}
     >
       <Flex width={'100%'} justifyContent={'space-between'} mt={10} mb={5}>

diff --git a/src/pages/PastEvents.jsx b/src/pages/PastEvents.jsx
@@ -86,7 +86,7 @@ const PastEvents = () => {
       alignItems={'center'}
       bg="#E6EAEF"
       minH="100vh"
-      ml={{ base: '0', xl: '15rem' }}
+      ml={{ base: '0', xl: '15%' }}
       py={10}
     >
       <Flex w={'95%'} flexDir={'column'}>

diff --git a/src/pages/ProfilePage.jsx b/src/pages/ProfilePage.jsx
@@ -135,7 +135,7 @@ export const ProfilePage = () => {
     <Box
       bg={{ base: 'white', md: '#E8EDF3', lg: '#E8EDF3' }}
       minHeight="100vh"
-      ml={{ base: '0', xl: '15rem' }}
+      ml={{ base: '0', xl: '15%' }}
       w={{ base: '100vw', md: 'auto', lg: 'auto' }}
       display={{ base: 'flex', md: 'block', lg: 'block' }}
       flexDirection={{ base: 'column', md: 'row', lg: 'row' }}

diff --git a/src/pages/ViewEvents.jsx b/src/pages/ViewEvents.jsx
@@ -177,7 +177,7 @@ const ViewEvents = () => {
       alignItems={'center'}
       bg="#E6EAEF"
       minH="100vh"
-      ml={{ base: '0', xl: '15rem' }}
+      ml={{ base: '0', xl: '15%' }}
     >
       <Flex minW="95%" justifyContent={'space-between'} mt={10} mb={5}>
         <Flex alignItems={'center'} gap={3}>

diff --git a/src/pages/VolunteerEventPage.jsx b/src/pages/VolunteerEventPage.jsx
@@ -35,7 +35,7 @@ const VolunteerEventPage = () => {
           flexDir={'row'}
           alignItems={'center'}
           bg="#E6EAEF"
-          ml={{ base: '0', xl: '15rem' }}
+          ml={{ base: '0', xl: '15%' }}
           pt={6}
           px={6}
           justifyContent={'space-between'}
@@ -90,7 +90,7 @@ const VolunteerEventPage = () => {
         />
       </Box>
       {/* Drawer Component */}
-      {breakpoint == 'base' ? (
+      {breakpoint != 'xl' ? (
         <VolunteerSideViewDrawer
           eventId={currentEventId}
           isOpen={isDrawerOpen}