Merge branch 'main' into dashboard-fix

components/Event/Contact.tsx

@@ -12,6 +12,7 @@ import {
   EVENT_CONTACT_ICON_HEIGHT,
 } from '@/utils/constants';
 import { Media } from '@/lib/media';
+import Link from 'next/link';
 
 /**
  * Contain Contact info
@@ -42,7 +43,9 @@ const Contact = ({ phone, email }: { phone: string; email: string }) => (
           width={EVENT_CONTACT_ICON_WIDTH}
           height={EVENT_CONTACT_ICON_HEIGHT}
         />
-        <IconText>{email}</IconText>
+        <IconText>
+          <Link href={'mailto:' + email}>{email}</Link>
+        </IconText>
       </IconBox>
     </BigIconBox>
   </ContactBox>

components/Event/Event.tsx

@@ -1,4 +1,4 @@
-import { QueriedVolunteerEventData } from 'bookem-shared/src/types/database';
+import { QueriedVolunteerEventDTO } from 'bookem-shared/src/types/database';
 import React, { useState } from 'react';
 import Header from '@/components/Event/Header';
 import BookIcon from '@/components/Event/BookIcon';
@@ -21,7 +21,7 @@ import { BOOKEM_THEME } from '@/utils/constants';
  * Event Detail
  * @param event Data about the event
  */
-const Event = ({ event }: { event: QueriedVolunteerEventData }) => {
+const Event = ({ event }: { event: QueriedVolunteerEventDTO }) => {
   /**
    * True: display About
    * False: display Contact

components/Event/EventName.tsx

@@ -1,4 +1,4 @@
-import { QueriedVolunteerEventData } from 'bookem-shared/src/types/database';
+import { QueriedVolunteerEventDTO } from 'bookem-shared/src/types/database';
 import React, { useEffect } from 'react';
 import {
   EventNameBox,
@@ -15,7 +15,7 @@ import Image from 'next/image';
  * Calculate the length of the event volunteers
  * If event.volunteers is undefined, return 0
  */
-export const getEventLength = (event: QueriedVolunteerEventData) => {
+export const getEventLength = (event: QueriedVolunteerEventDTO) => {
   if (event.volunteers && event.volunteers.length)
     return event.volunteers.length;
   else return 0;
@@ -33,7 +33,7 @@ const EventName = ({
 }: {
   signedUp: boolean;
   setSignedUp: (signedUp: boolean) => void;
-  event: QueriedVolunteerEventData;
+  event: QueriedVolunteerEventDTO;
   signUpEvent: () => void;
 }) => {
   const { data: session } = useSession();
@@ -54,7 +54,7 @@ const EventName = ({
       <Media greaterThanOrEqual="sm">
         <NameAndSpot>
           <b>{event.name}</b>
-          {event.tags.length > 0 && <p>({event.program.tagName})</p>}
+          {event.tags.length > 0 && <p>({event.program?.name})</p>}
           <br />
           {getEventLength(event)}/{event.maxSpot} spots filled
         </NameAndSpot>
@@ -66,7 +66,7 @@ const EventName = ({
       {/* Mobile */}
       <Media lessThan="sm">
         <NameAndSpot>
-          <b>{event.name}</b> <span>({event.program?.tagName}) </span>
+          <b>{event.name}</b> <span>({event.program?.name}) </span>
           <br />
           <StatusBox>
             <Image src="/event/dot.svg" alt="" width={10} height={10} />

components/Event/Footer.tsx

@@ -1,5 +1,5 @@
 import { SignupButton } from '@/styles/components/Event/event.styles';
-import { QueriedVolunteerEventData } from 'bookem-shared/src/types/database';
+import { QueriedVolunteerEventDTO } from 'bookem-shared/src/types/database';
 import { useSession } from 'next-auth/react';
 import React, { useEffect } from 'react';
 import { getEventLength } from '@/components/Event/EventName';
@@ -20,7 +20,7 @@ const Footer = ({
 }: {
   signedUp: boolean;
   setSignedUp: (signedUp: boolean) => void;
-  event: QueriedVolunteerEventData;
+  event: QueriedVolunteerEventDTO;
   signUpEvent: () => void;
 }) => {
   // Get user id in session

components/Home/PastActivity.tsx

@@ -30,10 +30,7 @@ const dummyEventData: QueriedVolunteerEventData = {
   },
   phone: '123-456-7890',
   email: '[email protected]',
-  program: {
-    _id: new mongoose.Types.ObjectId(),
-    tagName: 'BNFK',
-  },
+  program: new mongoose.Types.ObjectId(),
   requireApplication: true,
   volunteers: [],
   tags: [],

components/Volunteer/FilterEventsPopup.tsx

@@ -43,8 +43,8 @@ const FilterEventsPopup = ({
     <>
       <Background />
       <Container ref={wrapperRef}>
-        <FilterText onClick={sortLeastRecent}>Most Recent</FilterText>
-        <FilterText onClick={sortMostRecent}>Least Recent</FilterText>
+        <FilterText onClick={sortMostRecent}>Most Recent</FilterText>
+        <FilterText onClick={sortLeastRecent}>Least Recent</FilterText>
         <span />
         <FilterText onClick={sortDescendingSpots}>Most Spots</FilterText>
         <FilterText onClick={sortAscendingSpots}>Least Spots</FilterText>

components/Volunteer/FutureVolunteerEvents.tsx

@@ -22,6 +22,7 @@ import { fetchData } from '@/utils/utils';
 import { Media } from '@/lib/media';
 import LongEventCard from '../shared/LongEventCard';
 import Link from 'next/link';
+import { start } from 'repl';
 
 const FutureVolunteerEvents = () => {
   // Holds text in input box
@@ -68,18 +69,24 @@ const FutureVolunteerEvents = () => {
   };
 
   // Sorts events in order of most to least recent
-  const sortMostRecent = () => {
+  const sortLeastRecent = () => {
     if (!events) return;
     const copy = [...events];
-    copy.sort((a, b) => a.startDate.valueOf() - b.startDate.valueOf());
+    copy.sort(
+      (a, b) =>
+        new Date(b.startDate).valueOf() - new Date(a.startDate).valueOf()
+    );
     setEvents(copy);
   };
 
   // Sorts events in order of least to most recent
-  const sortLeastRecent = () => {
+  const sortMostRecent = () => {
     if (!events) return;
     const copy = [...events];
-    copy.sort((b, a) => a.startDate.valueOf() - b.startDate.valueOf());
+    copy.sort(
+      (a, b) =>
+        new Date(a.startDate).valueOf() - new Date(b.startDate).valueOf()
+    );
     setEvents(copy);
   };
 
@@ -138,7 +145,9 @@ const FutureVolunteerEvents = () => {
             {/* Container for events that show up based on query input */}
             <ImagesWrapper>
               {events
-                .filter(event => event.name.includes(query))
+                .filter(event =>
+                  event.name.toLowerCase().includes(query.toLowerCase())
+                )
                 .map(event => (
                   <EventCard
                     key={event._id.toString()}