Merge pull request #62 from ChangePlusPlusVandy/admin_main_page

Scrollable Container in Main Dashboard which Displays Featured Events

components/Forms/CreateAdminPopupWindow.tsx

@@ -4,7 +4,6 @@ import {
   ShortFormInput,
   LongFormInput,
   LargeFormInput,
-  InputFlex,
   FormInput,
   FormLabel,
   CreateEventForm,

components/Home/FeaturedEvents.tsx

@@ -0,0 +1,57 @@
+// FeaturedEvents.tsx
+import React, { Suspense, useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+
+const EventCard = React.lazy(() => import('@/components/shared/EventCard')); // Lazy loading the EventCard
+import { QueriedVolunteerEventData } from 'bookem-shared/src/types/database';
+import { fetchData } from '@/utils/utils';
+
+import {
+  FeaturedEventsContainer,
+  EventsScrollContainer,
+  Header,
+  Events,
+} from '@/styles/components/featuredEvents.styles'; // Assume you have similar styles to upcomingEvents.styles
+
+// Vertical list of sample FeaturedEvents
+const FeaturedEvents = () => {
+  const [events, setEvents] = useState<QueriedVolunteerEventData[]>();
+  const [error, setError] = useState<Error>();
+  const router = useRouter();
+
+  // Fetch featured events when rendered
+  useEffect(() => {
+    fetchData('/api/events/featured')
+      .then(data => setEvents(data))
+      .catch(err => setError(err));
+  }, []);
+
+  return (
+    <>
+      {error && <div>404 Event not found!</div>}
+      {!events && !error && <div>Loading...</div>}
+      {events && (
+        <div style={{ marginTop: '50px' }}>
+          <Header>Featured events</Header>
+          <FeaturedEventsContainer>
+            <EventsScrollContainer>
+              <Suspense fallback={<Header>Please Wait...</Header>}>
+                {events.map(event => (
+                  <EventCard
+                    key={event._id.toString()}
+                    eventData={event}
+                    size={'small'}
+                    href={'/event/' + event._id}
+                  />
+                ))}
+              </Suspense>
+              <button onClick={() => router.push('/event/')}>Show More</button>
+            </EventsScrollContainer>
+          </FeaturedEventsContainer>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default FeaturedEvents;

components/Home/MainDashBoard.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import Image from 'next/image';
 
+import FeaturedEvents from '@/components/Home/FeaturedEvents';
 import UpcomingEvents from '@/components/Home/UpcomingEvents';
 import type { MenuProps } from 'antd';
 
@@ -78,7 +79,7 @@ const MainDashboard: React.FC = () => {
         </InfoIcon>
 
         <Header>
-          Here are some quick stats for
+          Here are some quick stats:
           <span style={{ marginRight: '10px' }}></span>
           {/* <Dropdown menu={menuProps}>
             <Button>
@@ -107,6 +108,8 @@ const MainDashboard: React.FC = () => {
           </FlexChild>
         </StatsFlex>
 
+        <FeaturedEvents />
+
         {/* Additional dashboard components go here */}
       </Container>
 

pages/api/events/featured.ts

@@ -0,0 +1,50 @@
+import dbConnect from '@/lib/dbConnect';
+import VolunteerEvents from 'bookem-shared/src/models/VolunteerEvents';
+import Tags from 'bookem-shared/src/models/Tags'; // Replace with the actual path to your Tags model
+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/featured
+     * @desc Get all events with the tag 'featured'
+     * @res QueriedVolunteerEventData[]
+     */
+    case 'GET':
+      try {
+        await dbConnect();
+
+        // First, find the ObjectId for the 'featured' tag
+        const featuredTag = await Tags.findOne({ tagName: 'featured' });
+        if (!featuredTag) {
+          return res.status(404).json({ message: 'Featured tag not found.' });
+        }
+
+        // Now, use the ObjectId to query for events
+        const featuredEvents = await VolunteerEvents.find({
+          tags: featuredTag._id, // Use the ObjectId of the 'featured' tag
+        }).sort({ startDate: 1 });
+
+        return res.status(200).json(featuredEvents);
+      } catch (error) {
+        console.error(error);
+        res.status(500).json({ message: 'Failed to fetch featured events.' });
+      }
+      break;
+
+    // case 'POST':
+    // case 'PUT':
+    // case 'DELETE':
+    default:
+      // Inform the client about allowed methods if necessary
+      // res.setHeader('Allow', ['GET']); // Uncomment and adjust according to supported methods
+      res.status(405).end(`Method ${method} Not Allowed`);
+      break;
+  }
+}

pages/volunteer/[pid].tsx

@@ -94,7 +94,7 @@ export default function Volunteer() {
 
   const getVolunteerLogs = async () => {
     try {
-      const path = '/api/volunteerLogs/' + pid;
+      const path = '/api/volunteer-logs/' + pid;
       const res = await fetch(path, {
         method: 'GET',
       });

styles/components/event.styles.tsx

@@ -53,11 +53,16 @@ export const FormInput = styled.input`
   padding: 10px;
 `;
 
-export const InputFlex = styled.div`
+export const InputRowFlex = styled.div`
   display: flex;
   flex-direction: row;
 `;
 
+export const InputColumnFlex = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
 export const ShortFormInput = styled.input`
   margin: 15px 10px 0 0;
   border-radius: 10px;

styles/components/featuredEvents.styles.tsx

@@ -0,0 +1,69 @@
+import styled from 'styled-components';
+
+export const EventsScrollContainer = styled.div`
+  display: flex;
+  overflow-x: auto; // Allows horizontal scrolling
+  overflow-y: hidden; // Prevents vertical scrolling
+  padding: 10px;
+  white-space: nowrap;
+  max-width: 100%; // Ensures the container does not exceed the viewport width
+  width: 100%; // Optionally set a fixed width
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .event-card {
+    display: inline-block;
+    margin-right: 20px;
+    background-color: #ffffff;
+    border-radius: 10px;
+  }
+`;
+
+export const FeaturedEventsContainer = styled.div`
+  background-color: #d9d9d9;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+/**
+ * Header for featured events
+ */
+export const Header = styled.p`
+  font-size: 25px;
+  margin-top: 0; // Assuming no top margin if it's at the start of the container
+  text-align: left; // Align to the left based on the screenshot
+  padding-left: 10px; // Padding to match the container
+`;
+
+/**
+ * Container for list of featured events
+ */
+export const Events = styled.ul`
+  list-style: none; // Remove bullet points
+  padding: 0; // Remove padding
+  margin-top: 20px; // Space below the header
+`;
+
+// Additional styles for the event cards can be added here. For example:
+export const EventCardContainer = styled.li`
+  background-color: #ffffff;
+  padding: 15px;
+  margin-bottom: 10px; // Space between cards
+  border-radius: 8px; // Rounded corners for the cards
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // Optional shadow for cards
+
+  &:last-child {
+    margin-bottom: 0; // No margin for the last card
+  }
+`;
+
+// If you have a line or separator in your design, add it here
+export const SeparatorLine = styled.div`
+  height: 1px;
+  background-color: #d9d9d9; // Use a color that suits your design
+  margin: 20px 0;
+`;

styles/popupWindow.styles.tsx

@@ -6,7 +6,7 @@ export const Background = styled.div`
   top: 0px;
   width: 100%;
   height: 100%;
-  z-index: 5; // Need to be the MAX
+  z-index: 5;
   display: flex;
   background: rgba(0, 0, 0, 0.6);
 `;

styles/table.styles.tsx

@@ -20,6 +20,7 @@ export const SearchContainter = styled.div`
 
 export const TableContainer = styled.div`
   margin-top: 20px;
+  z-index: 1;
 `;
 
 export const StyledTypography = styled(Typography)`