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/PastActivity.tsx

@@ -1,5 +1,6 @@
-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 { QueriedVolunteerEventData } from 'bookem-shared/src/types/database';
 import Image from 'next/image';
@@ -14,34 +15,30 @@ 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 }: any) => {
   // 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(() => {
+    // Assuming your API endpoint for past activities is '/api/pastActivities'
+    fetch('/api/events/past')
+      .then(response => response.json())
+      .then(data => {
+        setEvents(data); // Set the activities in state
+      })
+      .catch(error => {
+        console.error('Error fetching past activities:', error);
+      });
+  }, []);
+
+  const showMoreHandler = () => {
+    // Navigate to the volunteerHistory page
+    router.push('/volunteerHistory'); // Replace with your actual path to the volunteerHistory page
+  };
 
   return (
     <>
@@ -52,16 +49,24 @@ const PastActivity = ({ userData }: any) => {
 
           <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={showMoreHandler}>Show More</button>
         </Container>
       </Media>
 
@@ -94,12 +99,18 @@ const PastActivity = ({ userData }: any) => {
               {/* 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>

pages/api/event/[id].ts

@@ -49,6 +49,8 @@ export default async function handler(
           .populate('tags')
           .populate('volunteers');
 
+        // console.log(event);
+
         // if event is not found
         if (!event) return res.status(400).json({ message: 'Event not found' });
 

pages/api/events/past.ts

@@ -0,0 +1,40 @@
+import dbConnect from '@/lib/dbConnect';
+import VolunteerEvents from 'bookem-shared/src/models/VolunteerEvents';
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  // Get request method
+  const { method } = req;
+
+  switch (method) {
+    /**
+     * @route GET /api/events/past
+     * @desc Get all events in the past
+     * @res QueriedVolunteerEventData[]
+     */
+    case 'GET':
+      try {
+        await dbConnect();
+        // Select all events where eventDate > today order by progamDate ascending
+        const events = await VolunteerEvents.find({
+          endDate: { $lt: new Date() },
+        }).sort({ endDate: 1 });
+        return res.status(200).json(events.slice(0, 5));
+      } catch (error) {
+        console.error(error);
+        res.status(500).json({ message: error });
+      }
+      break;
+
+    // case 'POST':
+    // case 'PUT':
+    // case 'DELETE':
+    default:
+      // res.setHeader('Allow', ['GET', 'PUT', 'DELETE', 'POST']);
+      res.status(405).end(`Method ${method} Not Allowed`);
+      break;
+  }
+}

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"