Merge pull request #62 from ChangePlusPlusVandy/past-activities-EL

Past activities el

components/Event/Event.tsx

@@ -16,7 +16,6 @@ import {
 import { Media } from '@/lib/media';
 import Footer from '@/components/Event/Footer';
 import { BOOKEM_THEME } from '@/utils/constants';
-
 /**
  * Event Detail
  * @param event Data about the event

components/Home/MainDashboard.tsx

@@ -98,7 +98,7 @@ const MainDashboard = ({ userData }: { userData: QueriedUserData | null }) => {
               <StatsFlex>
                 <FlexChild>
                   <StatsNumber>{userData?.events.length}</StatsNumber>
-                  <StatsDescription>Events attended</StatsDescription>
+                  <StatsDescription>Events signed up</StatsDescription>
                 </FlexChild>
 
                 <FlexChild>

components/Home/PastActivity.tsx

@@ -1,6 +1,8 @@
-import React, { Suspense, useState } from 'react';
+import React, { Suspense, useState, useEffect } from 'react';
 import mongoose from 'mongoose';
+import { useRouter } from 'next/router';
 import { Media } from '@/lib/media';
+import { fetchData } from '@/utils/utils';
 import {
   QueriedUserData,
   QueriedVolunteerEventData,
@@ -17,34 +19,23 @@ import {
   Events,
 } from '@/styles/components/pastActivity.styles';
 
-/**
- * Dummy data for event cards
- */
-const dummyEventData: QueriedVolunteerEventData = {
-  _id: new mongoose.Types.ObjectId(),
-  name: 'Distribute books (BNFK)',
-  description: 'blablabla',
-  startDate: new Date('2005-12-17T13:24:00'),
-  endDate: new Date('2005-12-17T13:24:00'),
-  maxSpot: 11,
-  location: {
-    street: '3593 Cedar Rd',
-    city: 'Nashville',
-  },
-  phone: '123-456-7890',
-  email: '[email protected]',
-  program: new mongoose.Types.ObjectId(),
-  requireApplication: true,
-  volunteers: [],
-  tags: [],
-  createdAt: new Date(),
-  updatedAt: new Date(),
-};
-
 // vertical list of sample PastEvents
 const PastActivity = ({ userData }: { userData: QueriedUserData | null }) => {
   // state for hiding/showing mobile Past Activities
   const [onMobileHide, setOnMobileHide] = useState(false);
+  const [events, setEvents] = useState<QueriedVolunteerEventData[]>();
+  const [error, setError] = useState<Error>();
+  const router = useRouter();
+
+  useEffect(() => {
+    // Use fetchData helper function instead of direct fetch
+    fetchData('/api/events/past-five')
+      .then(data => setEvents(data)) // Set the activities in state
+      .catch(error => {
+        console.error('Error fetching past activities:', error);
+        setError(error); // Set the error in state
+      });
+  }, []);
 
   return (
     <>
@@ -55,16 +46,26 @@ const PastActivity = ({ userData }: { userData: QueriedUserData | null }) => {
 
           <Events>
             {/* if PastEvents aren't loading in yet, component will display "Please Wait..." */}
+            {/* display the retrieved past*/}
             <Suspense fallback={<Header>Please Wait...</Header>}>
               {/* TODO: integrate with backend */}
-              <EventCard eventData={dummyEventData} size="small" />
-              <EventCard eventData={dummyEventData} size="small" />
-              <EventCard eventData={dummyEventData} size="small" />
-              <EventCard eventData={dummyEventData} size="small" />
-              <EventCard eventData={dummyEventData} size="small" />
-              <EventCard eventData={dummyEventData} size="small" />
+              <Container>
+                {events &&
+                  events.map(event => (
+                    // Iterate through events to and pass data to EventCard
+                    <EventCard
+                      key={event._id.toString()}
+                      eventData={event}
+                      size={'large'}
+                      href={'/event/' + event._id}
+                    />
+                  ))}
+              </Container>
             </Suspense>
           </Events>
+          <button onClick={() => router.push('/volunteerHistory')}>
+            Show More
+          </button>
         </Container>
       </Media>
 
@@ -97,12 +98,18 @@ const PastActivity = ({ userData }: { userData: QueriedUserData | null }) => {
               {/* if PastEvents aren't loading in yet, component will display "Please Wait..." */}
               <Suspense fallback={<Header>Please Wait...</Header>}>
                 {/* TODO: integrate with backend */}
-                <EventCard eventData={dummyEventData} size="small" />
-                <EventCard eventData={dummyEventData} size="small" />
-                <EventCard eventData={dummyEventData} size="small" />
-                <EventCard eventData={dummyEventData} size="small" />
-                <EventCard eventData={dummyEventData} size="small" />
-                <EventCard eventData={dummyEventData} size="small" />
+                <Container>
+                  {events &&
+                    events.map(event => (
+                      // Iterate through events to and pass data to EventCard
+                      <EventCard
+                        key={event._id.toString()}
+                        eventData={event}
+                        size={'large'}
+                        href={'/event/' + event._id}
+                      />
+                    ))}
+                </Container>
               </Suspense>
             </Events>
           </Container>

components/Volunteer/VolunteerDashboard.tsx

@@ -94,14 +94,14 @@ const VolunteerDashboard = ({
           <StatsFlex>
             <FlexChild>
               <StatsNumber>{userData?.events.length}</StatsNumber>
-              <StatsDescription>Events attended</StatsDescription>
+              <StatsDescription>Events signed up</StatsDescription>
             </FlexChild>
 
             <FlexChild>
               <StatsNumber>
                 {formatDate(new Date(userData?.createdAt as Date))}
               </StatsNumber>
-              <StatsDescription>Books distributed</StatsDescription>
+              <StatsDescription>Date joined</StatsDescription>
             </FlexChild>
           </StatsFlex>
         </VolunteerStatsContainer>

components/mobile/MobileSidebar/MobileSidebar.tsx

@@ -36,7 +36,7 @@ export const MobileSidebar = ({
             <UserIcon />
             <Cross
               onClick={handleHideSidebar}
-              src="/sidebar/error.png"
+              src="/event/error.svg"
               alt=""
               width={40}
               height={40}

pages/api/event/[id].ts

@@ -87,6 +87,13 @@ export default async function handler(
           if (userIndex === -1 && eventIndex === -1) {
             // Register to the event
 
+            // Check whether event is filled.
+            if (event.maxSpot <= event.volunteers.length) {
+              return res
+                .status(500)
+                .json({ message: 'Event already filled up!' });
+            }
+
             // TODO: Speed this up!
             event.volunteers.unshift(user._id);
             user.events.unshift(event._id);

pages/api/events/past-five.ts

@@ -0,0 +1,58 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import dbConnect from 'lib/dbConnect';
+import { getServerSession } from 'next-auth';
+import VolunteerEvents from 'bookem-shared/src/models/VolunteerEvents';
+import Users from 'bookem-shared/src/models/Users';
+import { authOptions } from '@/pages/api/auth/[...nextauth]';
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<any>
+) {
+  // check that user is authenticated
+  const session = await getServerSession(req, res, authOptions);
+
+  switch (req.method) {
+    case 'GET':
+      try {
+        // Connect to the database
+        await dbConnect();
+
+        // Ensure the user is found in the session
+        if (!session?.user?._id) {
+          return res.status(401).json({ message: 'User not authenticated' });
+        }
+
+        // Get user from Users collection
+        const user = await Users.findById(session.user._id);
+        if (!user) {
+          return res.status(404).json({ message: 'User not found' });
+        }
+
+        // Use the user's events array to filter the VolunteerEvents
+        // Only fetch events that have ended and limit to 5
+        const events = await VolunteerEvents.find({
+          _id: { $in: user.events },
+          endDate: { $lt: new Date() },
+        })
+          .sort({ endDate: 1 })
+          .limit(5);
+
+        // return the result
+        res.status(200).json(events);
+      } catch (e) {
+        // if there is an error, print and return the error
+        console.error('An error has occurred in VolunteerEvents index.ts', e);
+        res.status(500).json({
+          error: 'Sorry, an error occurred while connecting to the database',
+        });
+      }
+      break;
+
+    default:
+      res.status(405).json({
+        error: 'Sorry, only GET requests are supported',
+      });
+      break;
+  }
+}

pages/api/scripts/03-insert-events.ts

@@ -36,7 +36,7 @@ export default async function handler(
           VolunteerEvents.collection.initializeUnorderedBulkOp();
 
         // insert a bunch of equally distributed events
-        for (let i = 0; i < 100; i++) {
+        for (let i = 0; i < 200; i++) {
           const event = generateEvent(
             i,
             tags as QueriedTagData[],

pages/volunteerHistory.tsx

@@ -30,7 +30,7 @@ const VolunteerHistoryPage = () => {
   return (
     <>
       <HeaderContainer>
-        <IconLink href="/volunteer">
+        <IconLink href="#" onClick={() => history.back()}>
           <Image
             src="/event/arrow-left.png"
             alt="Go Back"

styles/components/pastActivity.styles.tsx

@@ -44,7 +44,7 @@ export const HeaderBox = styled.div`
   @media (max-width: 767px) {
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 15px;
+    margin: 50px 0 15px 0;
   }
 `;