events page done

acm-ucr · Mar 9, 2024 · 2431b62 · 2431b62
1 parent 7e91d0f
commit 2431b62
Show file tree

Hide file tree

Showing 2 changed files with 125 additions and 48 deletions.
diff --git a/src/app/events/page.js b/src/app/events/page.js
@@ -2,13 +2,15 @@ import React from "react";
 // import Event from "@/components/events/Event";
 import PageTitle from "@/components/PageTitle";
 import HeaderTitle from "@/components/board/Header";
-
+import UpcomingSection from "@/components/about/UpcomingSection";
 const page = () => {
   return (
     <div>
       <PageTitle title="EVENTS" />
       <HeaderTitle Name={"Upcoming Events"} />
+      <UpcomingSection showCurrent={true} />
       <HeaderTitle Name={"Past Events"} />
+      <UpcomingSection showPast={true} />
     </div>
   );
 };

diff --git a/src/components/about/UpcomingSection.js b/src/components/about/UpcomingSection.js
@@ -10,10 +10,10 @@ import axios from "axios";
 // import { momentLocalizer } from "react-big-calendar";
 // const mLocalizer = momentLocalizer(moment);
 
-const UpcomingSection = () => {
+const UpcomingSection = ({ showCurrent = false, showPast = false }) => {
   const [events, setEvents] = useState([]);
   // const [date, setDate] = useState(new Date());
-  const size = 3;
+  const size = 10;
 
   useEffect(() => {
     const startDate = moment().subtract(10, "weeks").toISOString();
@@ -40,59 +40,134 @@ const UpcomingSection = () => {
       });
   }, [size]);
   const upcoming = events.filter((e) => e.start >= new Date());
+  const past = events.filter((e) => e.start <= new Date());
 
   return (
-    <div className="flex justify-center">
-      <Image src={bar} alt="Left Bar" className="h-full" />
-      {/* {barImages.map((pic, index) => (
+    <div>
+      {!showCurrent && !showPast && (
+        <div className="flex justify-center">
+          <Image src={bar} alt="Left Bar" className="h-full" />
+          {/* {barImages.map((pic, index) => (
         <Image src={pic}/>
       ))} */}
-      <div className="flex flex-col justify-start items-center">
-        <div class=" flex justify-center items-start w-full  ">
-          <Image src={shootingStar} alt="ShootingStar" className="rotate-180" />
-          <div className="text-6xl font-montserrat font-extralight text-center mx-4 mt-14">
-            {" "}
-            Upcoming Events{" "}
-          </div>
-          <Image
-            src={shootingStar2}
-            alt="ShootingStar2"
-            className="rotate-180 "
-          />
-        </div>
-        {console.log(events)};
-        {upcoming.length !== 0 ? (
-          upcoming.map((event, index) => (
-            <div className="flex w-8/12  my-3" key={index}>
-              <Event
-                month={event.start
-                  .toLocaleDateString("en-US", { month: "short" })
-                  .toUpperCase()}
-                day={event.start.toLocaleDateString("en-US", {
-                  day: "2-digit",
-                })}
-                title={event.summary}
-                location={event.location}
-                start={
-                  event.isAllDay
-                    ? "All Day"
-                    : event.start.toLocaleTimeString([], {
-                        hour: "2-digit",
-                        minute: "2-digit",
-                      })
-                }
-                description={event.description}
+          <div className="flex flex-col justify-start items-center">
+            <div class=" flex justify-center items-start w-full  ">
+              <Image
+                src={shootingStar}
+                alt="ShootingStar"
+                className="rotate-180"
+              />
+              <div className="text-6xl font-montserrat font-extralight text-center mx-4 mt-14">
+                {" "}
+                Upcoming Events{" "}
+              </div>
+              <Image
+                src={shootingStar2}
+                alt="ShootingStar2"
+                className="rotate-180 "
               />
             </div>
-          ))
-        ) : (
-          <div className="flex justify-center text-lg md:text-2xl text-center text-black font-urbanist p-3">
-            No upcoming events, please check back later!
+            {console.log(events)};
+            {upcoming.length !== 0 ? (
+              upcoming.slice(0, 3).map((event, index) => (
+                <div className="flex w-8/12  my-3" key={index}>
+                  <Event
+                    month={event.start
+                      .toLocaleDateString("en-US", { month: "short" })
+                      .toUpperCase()}
+                    day={event.start.toLocaleDateString("en-US", {
+                      day: "2-digit",
+                    })}
+                    title={event.summary}
+                    location={event.location}
+                    start={
+                      event.isAllDay
+                        ? "All Day"
+                        : event.start.toLocaleTimeString([], {
+                            hour: "2-digit",
+                            minute: "2-digit",
+                          })
+                    }
+                    description={event.description}
+                  />
+                </div>
+              ))
+            ) : (
+              <div className="flex justify-center text-lg md:text-2xl text-center text-black font-urbanist p-3">
+                No upcoming events, please check back later!
+              </div>
+            )}
           </div>
-        )}
-      </div>
 
-      <Image src={bar} alt="Right Bar" className="h-full" />
+          <Image src={bar} alt="Right Bar" className="h-full" />
+        </div>
+      )}
+      {showCurrent && (
+        <div className="flex flex-col justify-center items-center w-full">
+          {upcoming.length !== 0 ? (
+            upcoming.slice(0, 4).map((event, index) => (
+              <div className="flex w-5/12  my-3" key={index}>
+                <Event
+                  month={event.start
+                    .toLocaleDateString("en-US", { month: "short" })
+                    .toUpperCase()}
+                  day={event.start.toLocaleDateString("en-US", {
+                    day: "2-digit",
+                  })}
+                  title={event.summary}
+                  location={event.location}
+                  start={
+                    event.isAllDay
+                      ? "All Day"
+                      : event.start.toLocaleTimeString([], {
+                          hour: "2-digit",
+                          minute: "2-digit",
+                        })
+                  }
+                  description={event.description}
+                />
+              </div>
+            ))
+          ) : (
+            <div className="flex justify-center text-lg md:text-2xl text-center text-black font-urbanist p-3">
+              No upcoming events, please check back later!
+            </div>
+          )}
+        </div>
+      )}
+      {showPast && (
+        <div className="flex flex-col justify-center items-center w-full">
+          {past.length !== 0 ? (
+            past.slice(0, 3).map((event, index) => (
+              <div className="flex w-5/12  my-3" key={index}>
+                <Event
+                  month={event.start
+                    .toLocaleDateString("en-US", { month: "short" })
+                    .toUpperCase()}
+                  day={event.start.toLocaleDateString("en-US", {
+                    day: "2-digit",
+                  })}
+                  title={event.summary}
+                  location={event.location}
+                  start={
+                    event.isAllDay
+                      ? "All Day"
+                      : event.start.toLocaleTimeString([], {
+                          hour: "2-digit",
+                          minute: "2-digit",
+                        })
+                  }
+                  description={event.description}
+                />
+              </div>
+            ))
+          ) : (
+            <div className="flex justify-center text-lg md:text-2xl text-center text-black font-urbanist p-3">
+              No Past Events Available, please check back later!
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 };