Merge branch 'main' into refactor

ChangePlusPlusVandy · Feb 27, 2024 · 3330a2e · 3330a2e
2 parents acea49b + 30a68cd
commit 3330a2e
Show file tree

Hide file tree

Showing 27 changed files with 2,007 additions and 1,193 deletions.
diff --git a/components/Event/Event.tsx b/components/Event/Event.tsx
@@ -1,5 +1,5 @@
-import { QueriedVolunteerEventData } from 'bookem-shared/src/types/database';
-import React, { useState } from 'react';
+import { QueriedVolunteerEventDTO } from 'bookem-shared/src/types/database';
+import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
 import Header from './Header';
 import BookIcon from './BookIcon';
@@ -13,17 +13,47 @@ import {
   BottomBox,
   EditButton,
   CopyButton,
+  EventName,
+  SpotsFilled,
+  TextContainer,
+  SeeSignUpButton,
+  ButtonContainer,
 } from '@/styles/components/Event/event.styles';
 import EditEventPopupWindowForm from '../Forms/EditEventPopupWindowForm';
 
 /**
  * Event Detail
- * @param event Data about the event
+ * @param pid - event id
  */
-const Event = ({ event }: { event: QueriedVolunteerEventData }) => {
+const Event = ({ pid }: { pid: string }) => {
   const [showPopup, setShowPopup] = useState(false);
   const [isCopied, setIsCopied] = useState(false);
 
+  const [event, setEvent] = useState<QueriedVolunteerEventDTO>();
+  const [error, setError] = useState<Error>();
+
+  useEffect(() => {
+    const fetchEvent = () => {
+      fetch('/api/event/' + pid)
+        .then(res => {
+          if (!res.ok) {
+            throw new Error(
+              'An error has occurred while fetching: ' + res.statusText
+            );
+          }
+          return res.json();
+        })
+        .then(data => setEvent(data))
+        .catch(err => setError(err));
+    };
+    if (!showPopup) {
+      fetchEvent();
+    }
+  }, [pid, showPopup]);
+
+  if (error) return <div>Event not found!</div>;
+  if (!event) return <div>Loading...</div>;
+
   return (
     <EventBox>
       <CopyButton
@@ -55,27 +85,32 @@ const Event = ({ event }: { event: QueriedVolunteerEventData }) => {
         </span>
       </CopyButton>
 
-      <EditButton onClick={() => setShowPopup(prev => !prev)}>
-        <Image
-          src="/event/pencil.png"
-          alt="Pencil icon"
-          width="20"
-          height="20"
-        />
-        Edit
-      </EditButton>
-
-      {/* edit button */}
-      {showPopup && <EditEventPopupWindowForm setShowPopup={setShowPopup} />}
-
       <Header />
 
       {/* Book Icon and Event name */}
       <MiddleBox>
         <BookIcon />
-        {/* <EventName event={event} /> */}
+        <TextContainer>
+          <EventName> {event.name}</EventName>
+          <SpotsFilled>
+            {' '}
+            {event.volunteers.length} / {event.maxSpot} spots filled
+          </SpotsFilled>
+          <ButtonContainer>
+            <EditButton onClick={() => setShowPopup(prev => !prev)}>
+              Edit
+            </EditButton>
+            <SeeSignUpButton> See sign-Ups </SeeSignUpButton>
+            <Image src="/event/bookmarks.png" alt="" width={50} height={50} />
+          </ButtonContainer>
+        </TextContainer>
       </MiddleBox>
 
+      {/* edit button */}
+      {showPopup && (
+        <EditEventPopupWindowForm event={event} setShowPopup={setShowPopup} />
+      )}
+
       {/* Time and Place of the event */}
       <TimeAndPlace eventDate={event.startDate} location={event.location} />
 

diff --git a/components/Event/Header.tsx b/components/Event/Header.tsx
@@ -12,7 +12,7 @@ import {
 const Header = () => {
   return (
     <HeaderBox>
-      <Link href="/">
+      <Link href="#" onClick={() => window.history.back()}>
         <Image src="/event/arrow-left.png" alt="" width={48} height={48} />
       </Link>
       <EventDetailText>Event Details</EventDetailText>