Merge pull request #163 from ctc-uci/151-implement-volunteer-side-hom…

…e-page 151 implement volunteer side home page
ctc-uci · Apr 17, 2024 · abeee6c · abeee6c
2 parents f693029 + c344e08
commit abeee6c
Show file tree

Hide file tree

Showing 6 changed files with 368 additions and 13 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -59,6 +59,7 @@ const Layout = () => {
 
 import { theme } from './utils/chakraTheme';
 import InputDataPage from './pages/InputDataPage';
+import VolunteerHomePage from './pages/VolunteerHomePage';
 
 const App = () => {
   return (
@@ -241,6 +242,14 @@ const App = () => {
                     </ProtectedRoute>
                   }
                 />
+                <Route
+                  path="/volunteer-home"
+                  element={
+                    <ProtectedRoute pageType="volunteer">
+                      <VolunteerHomePage />
+                    </ProtectedRoute>
+                  }
+                />
               </Route>
 
               {/* PLAYGROUND */}

diff --git a/src/Assets/impact_summary/ImpactSummaryIcons.jsx b/src/Assets/impact_summary/ImpactSummaryIcons.jsx
@@ -0,0 +1,64 @@
+import { createIcon } from '@chakra-ui/react';
+
+const TotalEventsIcon = createIcon({
+  displayName: 'TotalEventsIcon',
+  viewBox: '0 0 16 21',
+  width: '16',
+  height: '21',
+  fill: 'none',
+  xmlns: 'http://www.w3.org/2000/svg',
+
+  path: (
+    <path
+      fillRule={'evenodd'}
+      clipRule={'evenodd'}
+
+      d="M10.1406 0.890625C10.1406 0.824321 10.1143 0.760732 10.0674 0.713848C10.0205 0.666964 9.95693 0.640625 9.89062 0.640625H2.89062C2.16128 0.640625 1.46181 0.930356 0.946081 1.44608C0.430356 1.96181 0.140625 2.66128 0.140625 3.39062V17.3906C0.140625 18.12 0.430356 18.8194 0.946081 19.3352C1.46181 19.8509 2.16128 20.1406 2.89062 20.1406H12.8906C13.62 20.1406 14.3194 19.8509 14.8352 19.3352C15.3509 18.8194 15.6406 18.12 15.6406 17.3906V7.53763C15.6406 7.47132 15.6143 7.40773 15.5674 7.36085C15.5205 7.31396 15.4569 7.28763 15.3906 7.28763H10.8906C10.6917 7.28763 10.5009 7.20861 10.3603 7.06796C10.2196 6.9273 10.1406 6.73654 10.1406 6.53763V0.890625ZM10.8906 10.6406C11.0895 10.6406 11.2803 10.7196 11.421 10.8603C11.5616 11.0009 11.6406 11.1917 11.6406 11.3906C11.6406 11.5895 11.5616 11.7803 11.421 11.921C11.2803 12.0616 11.0895 12.1406 10.8906 12.1406H4.89062C4.69171 12.1406 4.50095 12.0616 4.3603 11.921C4.21964 11.7803 4.14062 11.5895 4.14062 11.3906C4.14062 11.1917 4.21964 11.0009 4.3603 10.8603C4.50095 10.7196 4.69171 10.6406 4.89062 10.6406H10.8906ZM10.8906 14.6406C11.0895 14.6406 11.2803 14.7196 11.421 14.8603C11.5616 15.0009 11.6406 15.1917 11.6406 15.3906C11.6406 15.5895 11.5616 15.7803 11.421 15.921C11.2803 16.0616 11.0895 16.1406 10.8906 16.1406H4.89062C4.69171 16.1406 4.50095 16.0616 4.3603 15.921C4.21964 15.7803 4.14062 15.5895 4.14062 15.3906C4.14062 15.1917 4.21964 15.0009 4.3603 14.8603C4.50095 14.7196 4.69171 14.6406 4.89062 14.6406H10.8906Z"
+      fill="white"
+    />
+  ),
+});
+
+const TotalTrashIcon = createIcon({
+    displayName: 'TotalTrashIcon',
+    viewBox: '0 0 19 22',
+    width: '19',
+    height: '22',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+
+    path: (
+      <path
+        fillRule={'evenodd'}
+        clipRule={'evenodd'}
+
+        d="M13.8906 3.0341V3.2611C15.1896 3.37989 16.4833 3.55069 17.7686 3.7731C17.8657 3.78991 17.9585 3.82567 18.0417 3.87834C18.1249 3.931 18.197 3.99955 18.2537 4.08006C18.3104 4.16057 18.3508 4.25146 18.3724 4.34755C18.394 4.44365 18.3964 4.54305 18.3796 4.6401C18.3628 4.73715 18.3271 4.82993 18.2744 4.91316C18.2217 4.99639 18.1532 5.06843 18.0727 5.12516C17.9922 5.1819 17.9013 5.22222 17.8052 5.24383C17.7091 5.26544 17.6097 5.26791 17.5126 5.2511L17.3036 5.2161L16.2986 18.2861C16.2407 19.0397 15.9004 19.7436 15.3459 20.2572C14.7914 20.7707 14.0634 21.0561 13.3076 21.0561H5.47463C4.71883 21.0561 3.99089 20.7707 3.43636 20.2572C2.88183 19.7436 2.54158 19.0397 2.48363 18.2861L1.47763 5.2161L1.26863 5.2511C1.17158 5.26791 1.07218 5.26544 0.976085 5.24383C0.879993 5.22222 0.789098 5.1819 0.708589 5.12516C0.545995 5.01058 0.435579 4.8361 0.401632 4.6401C0.367684 4.44411 0.412985 4.24265 0.52757 4.08006C0.642155 3.91746 0.816637 3.80705 1.01263 3.7731C2.2979 3.55043 3.59161 3.37962 4.89063 3.2611V3.0341C4.89063 1.4701 6.10363 0.1341 7.70663 0.0831003C8.82934 0.0471697 9.95292 0.0471697 11.0756 0.0831003C12.6786 0.1341 13.8906 1.4701 13.8906 3.0341ZM7.75463 1.5821C8.84535 1.54722 9.93691 1.54722 11.0276 1.5821C11.7806 1.6061 12.3906 2.2401 12.3906 3.0341V3.1471C10.3925 3.02575 8.38879 3.02575 6.39063 3.1471V3.0341C6.39063 2.2401 6.99963 1.6061 7.75463 1.5821ZM7.39963 7.5271C7.39582 7.42861 7.37265 7.33183 7.33144 7.2423C7.29023 7.15276 7.23179 7.07222 7.15946 7.00526C7.08712 6.93831 7.0023 6.88627 6.90985 6.85209C6.8174 6.81792 6.71912 6.80229 6.62063 6.8061C6.52214 6.80991 6.42536 6.83308 6.33583 6.87429C6.24629 6.9155 6.16575 6.97394 6.0988 7.04628C6.03184 7.11861 5.9798 7.20343 5.94562 7.29588C5.91145 7.38833 5.89582 7.48661 5.89963 7.5851L6.24663 16.5851C6.25432 16.7839 6.34066 16.9715 6.48666 17.1066C6.55895 17.1735 6.64371 17.2255 6.7361 17.2596C6.82849 17.2938 6.92671 17.3094 7.02513 17.3056C7.12356 17.3018 7.22027 17.2786 7.30975 17.2375C7.39922 17.1963 7.47971 17.1379 7.54661 17.0656C7.61352 16.9933 7.66553 16.9085 7.69968 16.8161C7.73382 16.7237 7.74944 16.6255 7.74563 16.5271L7.39963 7.5271ZM12.8796 7.5851C12.887 7.48472 12.874 7.38388 12.8416 7.28861C12.8091 7.19334 12.7578 7.10557 12.6907 7.03054C12.6236 6.95551 12.5421 6.89475 12.451 6.85189C12.36 6.80902 12.2612 6.78492 12.1606 6.78103C12.0601 6.77713 11.9597 6.79353 11.8656 6.82922C11.7715 6.86492 11.6856 6.91919 11.6129 6.98881C11.5402 7.05843 11.4822 7.14196 11.4425 7.23444C11.4028 7.32692 11.3821 7.42645 11.3816 7.5271L11.0346 16.5271C11.0269 16.726 11.0986 16.9198 11.2338 17.0659C11.369 17.212 11.5567 17.2984 11.7556 17.3061C11.9545 17.3138 12.1484 17.2422 12.2945 17.1069C12.4405 16.9717 12.5269 16.784 12.5346 16.5851L12.8796 7.5851Z"
+        fill="white"
+      />
+    ),
+});
+
+const LargestTrashIcon = createIcon({
+    displayName: 'TotalTrashIcon',
+    viewBox: '0 0 27 25',
+    width: '27',
+    height: '25',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+
+    path: (
+      <path
+        fillRule={'evenodd'}
+        clipRule={'evenodd'}
+
+        d="M6.79202 0.555664C6.87038 3.72856 7.70244 6.90056 8.74419 9.49827C9.83852 12.2269 11.1944 14.3482 11.9658 15.088L12.1123 15.2285V16.6531H14.6689V15.2285L14.8155 15.088C15.5868 14.3481 16.9427 12.2269 18.0371 9.49827C19.0788 6.90056 19.9109 3.72856 19.9892 0.555664H6.79202ZM3.97949 4.19598C2.98076 4.51846 2.18455 5.16683 1.88837 5.81462C1.7208 6.18108 1.69496 6.53101 1.83346 6.88755C1.8493 6.92838 1.86792 6.96964 1.88881 7.01111C2.04263 6.91944 2.20031 6.83387 2.36145 6.75462L2.71031 6.58325L2.96714 6.86714C3.25264 7.18269 3.50124 7.52649 3.71311 7.88655C3.85611 7.72345 4.0025 7.46738 4.10493 7.13834C4.35453 6.33699 4.34514 5.16881 3.97949 4.19598ZM22.8018 4.19598C22.4361 5.16875 22.4267 6.33699 22.6763 7.13834C22.7787 7.46738 22.9251 7.72345 23.0681 7.88655C23.2801 7.52644 23.5286 7.18269 23.8141 6.86714L24.0709 6.58325L24.4198 6.75462C24.5809 6.83387 24.7386 6.91944 24.8924 7.01111C24.9133 6.96959 24.9319 6.92838 24.9478 6.88755C25.0863 6.53101 25.0604 6.18108 24.8929 5.81462C24.5967 5.16683 23.8005 4.51846 22.8018 4.19598ZM2.4616 7.80671C1.33609 8.47225 0.565225 9.48441 0.419333 10.3638C0.338911 10.8489 0.424335 11.2819 0.715174 11.6721C0.807434 11.796 0.923203 11.917 1.06554 12.0324C1.25467 11.7503 1.4673 11.4833 1.70135 11.2341L1.96368 10.9548L2.30921 11.1323C2.74883 11.3581 3.15744 11.6346 3.52859 11.9453C3.58267 11.7516 3.61857 11.5246 3.62713 11.2728C3.66248 10.2367 3.25131 8.84563 2.46166 7.80671H2.4616ZM24.3196 7.80671C23.5299 8.84558 23.1188 10.2368 23.1541 11.2728C23.1627 11.5246 23.1986 11.7516 23.2527 11.9453C23.6238 11.6346 24.0324 11.3581 24.472 11.1323L24.8176 10.9548L25.0799 11.2341C25.3139 11.4833 25.5266 11.7503 25.7157 12.0324C25.858 11.917 25.9738 11.796 26.0661 11.6721C26.3569 11.2819 26.4423 10.8489 26.3619 10.3638C26.216 9.48441 25.4452 8.47225 24.3196 7.80671ZM2.1861 12.1828C1.38611 13.1852 1.04697 14.3902 1.24105 15.2609C1.34821 15.7414 1.59108 16.1179 2.01048 16.3844C2.28525 16.559 2.64851 16.6882 3.1187 16.7386C3.22367 16.4119 3.35564 16.0937 3.51336 15.787L3.68704 15.4492L4.07053 15.531C4.29812 15.5796 4.52254 15.6401 4.74269 15.711C4.72196 15.5065 4.66994 15.2747 4.58012 15.0277C4.22353 14.0471 3.31578 12.8858 2.1861 12.1828ZM24.5951 12.1828C23.4655 12.8858 22.5577 14.0471 22.2011 15.0277C22.1113 15.2747 22.0593 15.5065 22.0386 15.711C22.2591 15.6398 22.4835 15.5797 22.7107 15.531L23.0942 15.4492L23.2679 15.787C23.4256 16.0937 23.5576 16.4119 23.6625 16.7386C24.1327 16.6883 24.496 16.559 24.7708 16.3844C25.1902 16.1179 25.433 15.7413 25.5402 15.2609C25.7343 14.3902 25.3951 13.1852 24.5951 12.1828ZM4.24804 16.5746C3.732 17.808 3.74634 19.1251 4.20864 19.9614C4.46263 20.4209 4.82589 20.74 5.33509 20.8975C5.58998 20.9764 5.88848 21.0143 6.23462 20.9937C6.11597 20.3991 6.08062 19.7693 6.13703 19.1314L6.17049 18.7543L6.56065 18.6975C6.80853 18.6617 7.05819 18.6384 7.30861 18.6276C7.3394 18.6263 7.37014 18.6255 7.40087 18.6245C6.71065 17.7835 5.51772 16.9491 4.24804 16.5746ZM22.5332 16.5746C21.2635 16.9491 20.0705 17.7835 19.3803 18.6245C19.4111 18.6255 19.4418 18.6263 19.4726 18.6276C19.7227 18.6386 19.9725 18.6616 20.2207 18.6975L20.6108 18.7543L20.6442 19.1314C20.7006 19.7692 20.6653 20.3991 20.5466 20.9937C20.8928 21.0142 21.1913 20.9764 21.4462 20.8975C21.9554 20.74 22.3187 20.4209 22.5726 19.9614C23.0349 19.1251 23.0492 17.808 22.5332 16.5746ZM10.2632 17.6126C10.1552 18.0061 9.92723 18.3611 9.6315 18.6447C9.56991 18.7033 9.50528 18.7589 9.43786 18.8112C10.2606 18.9869 11.0307 19.2745 11.6834 19.6353C11.8159 19.3496 11.9822 19.0839 12.2063 18.8606C12.4992 18.5689 12.9188 18.3588 13.3906 18.3588C13.8625 18.3588 14.2822 18.5689 14.5749 18.8606C14.799 19.0839 14.9653 19.3496 15.0978 19.6352C15.7545 19.2723 16.5298 18.9833 17.3582 18.808C17.2856 18.7509 17.2163 18.6901 17.1504 18.6261C16.8599 18.3418 16.6352 17.9943 16.5245 17.6126H10.2632ZM13.3906 19.3182C13.1998 19.3182 13.0774 19.376 12.9271 19.5259C12.7768 19.6756 12.6273 19.9267 12.5088 20.2347C12.2717 20.8506 12.1562 21.6738 12.1111 22.284C12.0516 23.0858 12.2778 24.0626 12.7938 24.4193C13.0569 24.6011 13.7244 24.6011 13.9874 24.4193C14.5035 24.0626 14.7297 23.0858 14.6702 22.284C14.625 21.6738 14.5095 20.8506 14.2725 20.2347C14.154 19.9267 14.0044 19.6756 13.8541 19.5259C13.7038 19.3761 13.5815 19.3182 13.3906 19.3182ZM7.63714 19.5836C7.54188 19.5832 7.44684 19.5848 7.35219 19.5884C7.2741 19.5914 7.19824 19.6034 7.12076 19.6092C7.09753 21.0919 7.66631 22.4632 8.50988 23.1615C8.96917 23.5418 9.48727 23.7357 10.0855 23.7029C10.4139 23.6849 10.7743 23.5947 11.1623 23.4087C11.0917 23.0001 11.0857 22.5868 11.1132 22.2158C11.1483 21.742 11.2161 21.1518 11.3621 20.57C10.4084 20.0004 9.00419 19.5895 7.63714 19.5836V19.5836ZM19.1441 19.5836C17.7771 19.5895 16.3728 20.0005 15.4191 20.57C15.5651 21.1518 15.6329 21.742 15.668 22.2158C15.6955 22.5867 15.6896 23.0001 15.619 23.4087C16.0069 23.5948 16.3674 23.6849 16.6958 23.7029C17.294 23.7357 17.8121 23.5418 18.2714 23.1616C19.1149 22.4632 19.6837 21.0919 19.6605 19.6092C19.5831 19.6034 19.5071 19.5914 19.4291 19.5884C19.3341 19.5848 19.2391 19.5832 19.1441 19.5836Z"
+        fill="white"
+      />
+    ),
+});
+
+export {
+    TotalEventsIcon,
+    TotalTrashIcon,
+    LargestTrashIcon
+};
diff --git a/src/components/Events/DataCard.jsx b/src/components/Events/DataCard.jsx
@@ -2,12 +2,12 @@ import { Text, VStack } from '@chakra-ui/react';
 import PropTypes from 'prop-types';
 const DataCard = ({ icon, text, amount }) => {
   return (
-    <VStack bg="white" p={25} borderRadius="lg" align="center" w={'23%'}>
+    <VStack bg="white" pt={25} pb={2} borderRadius="lg" align="center" w={'25%'}>
       {icon}
-      <Text textAlign={'center'} fontWeight={'medium'} fontSize={20}>
+      <Text textAlign={'center'} fontWeight={500} fontSize={18} fontFamily={'Avenir'}>
         {text}
       </Text>
-      <Text textAlign={'center'} fontSize={50} fontWeight={'bold'} color={'rgba(0, 0, 0, 0.75)'}>
+      <Text textAlign={'center'} fontSize={56} fontWeight={800} color={'rgba(0, 0, 0, 0.75)'} fontFamily={'Avenir'}>
         {amount}
       </Text>
     </VStack>

diff --git a/src/components/Events/EventCard.jsx b/src/components/Events/EventCard.jsx
@@ -132,8 +132,8 @@ const EventCard = ({
             {name.length > 30 ? (
               <Text
                 fontWeight="800"
-                fontSize="32px"
-                lineHeight="44px"
+                fontSize="24px"
+                lineHeight="30px"
                 fontFamily="Avenir"
                 mt={2}
                 overflowWrap={'break-word'}
@@ -143,21 +143,16 @@ const EventCard = ({
             ) : (
               <Text
                 fontWeight="800"
-                fontSize="32px"
-                lineHeight="44px"
+                fontSize="24px"
+                lineHeight="30px"
                 fontFamily="Avenir"
                 mt={2}
                 overflowWrap={'break-word'}
               >
                 {name}
               </Text>
             )}
-            <Text
-              fontFamily="Avenir"
-              fontSize={sideBySideCard ? '18px' : '20px'}
-              fontWeight={500}
-              mt={1}
-            >
+            <Text fontFamily="Avenir" fontSize={sideBySideCard ? '15px' : '16px'} fontWeight={300} mt={1}>
               {dateStr}
             </Text>
 

diff --git a/src/components/Events/VolunteerImpactSummary.jsx b/src/components/Events/VolunteerImpactSummary.jsx
@@ -0,0 +1,111 @@
+import { Box, Flex, Text } from '@chakra-ui/react';
+import { useEffect, useState, useContext } from 'react';
+import UserContext from '../../utils/UserContext';
+import Backend from '../../utils/utils';
+import DataCard from './DataCard';
+import { TotalEventsIcon, TotalTrashIcon, LargestTrashIcon } from '../../Assets/impact_summary/ImpactSummaryIcons';
+
+const VolunteerImpactSummary = () => {
+  const [events, setEvents] = useState(0);
+  const [total, setTotalPounds] = useState(0);
+  const [largestItem, setLargestItem] = useState(0);
+
+  const { user, updateUser } = useContext(UserContext);
+
+  useEffect(() => {
+    updateUser();
+    console.log(user);
+    getData();
+  }, []);
+
+  const getData = async () => {
+    try {
+      let totalPounds = 0; 
+      let allWeights = [];
+      // let userId = 111; // For testing
+      let userId = user?.id;
+
+      // Get the events which the user has attended, length = num events
+      let eventResponse = await Backend.get(`/data/volunteer/${userId}/event`);
+      setEvents(eventResponse.data.length);
+
+      // Get all weight entries and calculate total weight in lbs
+      let weightResponse = await Backend.get(`/data/volunteer/${userId}`);
+      for (const { ounces, pounds } of weightResponse.data) { totalPounds += ounces / 16 + pounds; allWeights.push(ounces / 16 + pounds); }
+      setTotalPounds(parseFloat(totalPounds));
+
+      // Largest value of all weights entered
+      let largestItem = parseFloat(Math.max(...allWeights));
+      if (isNaN(largestItem) || !isFinite(largestItem)) {
+        // NaN if invalid entry, -inf if empty
+        largestItem = 0;
+      }
+      setLargestItem(largestItem);
+    } catch (err) {
+      console.log(`Error getting events: `, err.message);
+    }
+  };
+
+  return (
+    <Box
+      mb="5"
+      display="flex"
+      flexDirection="row"
+      gap="8"
+      justifyContent="center"
+      alignItems={'stretch'}
+      backgroundColor={'#F8F8F8'}
+      borderRadius={'lg'}
+      py={10}
+    >
+      <DataCard
+        amount={events}
+        text={<Text
+            fontSize={'18px'}
+            fontFamily={'Avenir'}
+            fontWeight={500}
+          >
+            Total Events Participated
+        </Text>}
+        icon={
+          <Flex background={'#96DB53'} p={2.5} borderRadius={'lg'}>
+            <TotalEventsIcon></TotalEventsIcon>
+          </Flex>
+        }
+
+      />
+      <DataCard
+        amount={total + ' lbs'}
+        text={<Text
+            fontSize={'18px'}
+            fontFamily={'Avenir'}
+            fontWeight={500}
+          >
+            Total Trash Weight
+          </Text>}
+        icon={
+          <Flex background={'#FF792E'} p={2.5} borderRadius={'lg'}>
+            <TotalTrashIcon></TotalTrashIcon>
+          </Flex>
+        }
+      />
+      <DataCard
+        amount={largestItem + ' lbs'}
+        text={<Text
+          fontSize={'18px'}
+          fontFamily={'Avenir'}
+          fontWeight={500}
+        >
+          Largest Trash Item Collected
+        </Text>}
+        icon={
+          <Flex background={'#915EFF'} p={2.5} borderRadius={'lg'}>
+            <LargestTrashIcon></LargestTrashIcon>
+          </Flex>
+        }
+      />
+    </Box>
+  );
+};
+
+export default VolunteerImpactSummary;