Adds Event Details page and Events page. (#24)

* Adds Carousel on Events page * Adds Event Details page * Misc changes in package.json * Reverting changes made in package.json * Fixes bug on [eventindex].js that prevented loading * Misc fix on [eventindex].js page * Completes functional desktop design of Events page * Misc changes in design of Events page * Adds responsive behaviour to Event Details page * Misc changes in design * Adds responsive behaviour to Events page * Misc adjustments in design of Events page * Misc adjustments 2 * Fixes direct DOM manipulation issue in EventArchive.jsx * Adds the requested changes * Completes code refactoring on Event Archive page * Adds responsiveness to Event Details page * Changes naming convention to camel casing for files related to Events page * Misc fix * code cleanup * Misc deletion to fix deploy bug * Misc addtion to fix deploy bug * Minor changes in mobile design of Event Details page
iiitv · Oct 18, 2021 · fbcead8 · fbcead8
1 parent 22b02ec
commit fbcead8
Show file tree

Hide file tree

Showing 21 changed files with 1,671 additions and 13 deletions.
diff --git a/components/Header.jsx b/components/Header.jsx
@@ -1,14 +1,18 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import Head from 'next/head'
 import Link from 'next/link'
 import easterEgg from './easterEgg'
 
 export default function Header({ pageTitle, description }) {
-  console.log(easterEgg, "font-family:monospace");
-
+
   const [wid, setWid] = React.useState('')
   const openNav = () => setWid('100%')
   const closeNav = () => setWid('0%')
+
+  useEffect(()=>{
+    console.log(easterEgg, "font-family:monospace");
+  }
+  ,[]);
 
   return (
     <React.Fragment>

diff --git a/components/eventsPage/eventTimer.jsx b/components/eventsPage/eventTimer.jsx
@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from "react";
+
+const EventTimer = ({date}) => {
+  const [days, setDays] = useState("00");
+  const [hours, setHours] = useState("00");
+  const [minutes, setMinutes] = useState("00");
+
+  useEffect(() => {
+    const countdownDate = new Date(date).getTime();
+
+    const interval = setInterval(() => {
+      const currentTime = new Date().getTime();
+      const timeLeft = countdownDate - currentTime;
+
+      const daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
+      const hoursLeft = Math.floor(
+        (timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+      );
+      const minutesLeft = Math.floor(
+        (timeLeft % (1000 * 60 * 60)) / (1000 * 60)
+      );
+
+      setDays((daysLeft > 9 ? "" : "0") + daysLeft);
+      setHours((hoursLeft > 9 ? "" : "0") + hoursLeft);
+      setMinutes((minutesLeft > 9 ? "" : "0") + minutesLeft);
+
+      if (timeLeft <= 0) {
+        clearInterval(interval);
+        setDays("00");
+        setHours("00");
+        setMinutes("00");
+      }
+    }, 1000);
+  }, []);
+
+  return (
+    <div className="timer-container">
+      <div className="timer-item">
+        <div className="timer-value">{days}</div>
+        <div className="timer-title">Days</div>
+      </div>
+      <div className="timer-value">:</div>
+      <div className="timer-item">
+        <div className="timer-value">{hours}</div>
+        <div className="timer-title">Hours</div>
+      </div>
+      <div className="timer-value">:</div>
+      <div className="timer-item">
+        <div className="timer-value">{minutes}</div>
+        <div className="timer-title">Minutes</div>
+      </div>
+    </div>
+  );
+}
+
+export default EventTimer;
diff --git a/components/eventsPage/eventsArchive.jsx b/components/eventsPage/eventsArchive.jsx
@@ -0,0 +1,131 @@
+import { useState } from "react";
+import { eventarchive } from "../../events/eventArchive.json";
+import Link from "next/link";
+const EventsArchive = () => {
+  const monthNames = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
+  let year1 = "2022";
+  let year2 = "2021";
+  const [year, setYear] = useState("year1");
+  return (
+    <div id="foobar">
+      <div className="bg-text">CODING</div>
+      <div className="event-archive-parent">
+        <div className="event-archive-head-cont">
+          <div className="event-archive-head-img">
+            <img src="/media/calendar.png" alt="calendar" />
+          </div>
+          <div className="event-archive-head-text">Past Events</div>
+        </div>
+        <div className="event-archive-cont">
+          <div className="event-archive-btns">
+            <button
+              className="btn-year1"
+              onClick={() => {
+                setYear("year1");
+              }}
+              style={{background:year=="year1"?"#602080":"none"}}
+            >
+              {year1}
+            </button>
+            <button className="btn-year2" onClick={() => {
+                setYear("year2");
+              }}
+              style={{background:year=="year2"?"#602080":"none"}}>
+              {year2}
+            </button>
+          </div>
+          <div className="event-archive">
+            {year == "year1" ? (
+              <div className="year1">
+                {eventarchive.map((e, index) => {
+                  let date = new Date(e.date);
+                  if (date.getFullYear() == year1) {
+                    return (
+                      <Link
+                        href={{
+                          pathname: "events/[eventindex]",
+                          query: {
+                            eventindex: index,
+                          },
+                          params: {
+                            eventindex: index,
+                          },
+                        }}
+                      >
+                        <div className="archived-event-detail">
+                          <div className="archived-event-photo">
+                            <img src={e.photos[0]} alt="event photo" />
+                          </div>
+                          <div className="archived-event-name">{e.title}</div>
+                          <div className="archived-event-date">
+                            <div className="archived-event-date-img">
+                              <img src="/media/calendar.png" alt="calendar" />
+                            </div>
+                            <div className="archived-event-date-text">{`${monthNames[
+                              date.getMonth()
+                            ].toUpperCase()}/${date.getFullYear()}`}</div>
+                          </div>
+                        </div>
+                      </Link>
+                    );
+                  }
+                })}
+              </div>
+            ) : (
+              <div className="year2">
+                {eventarchive.map((e, index) => {
+                  let date = new Date(e.date);
+                  if (date.getFullYear() == year2) {
+                    return (
+                      <Link
+                        href={{
+                          pathname: "events/[eventindex]",
+                          query: {
+                            eventindex: index,
+                          },
+                          params: {
+                            eventindex: index,
+                          },
+                        }}
+                      >
+                        <div className="archived-event-detail">
+                          <div className="archived-event-photo">
+                            <img src={e.photos[0]} alt="event photo" />
+                          </div>
+                          <div className="archived-event-name">{e.title}</div>
+                          <div className="archived-event-date">
+                            <div className="archived-event-date-img">
+                              <img src="/media/calendar.png" alt="calendar" />
+                            </div>
+                            <div className="archived-event-date-text">{`${monthNames[
+                              date.getMonth()
+                            ].toUpperCase()}/${date.getFullYear()}`}</div>
+                          </div>
+                        </div>
+                      </Link>
+                    );
+                  }
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EventsArchive;
diff --git a/components/eventsPage/eventsCarousel.jsx b/components/eventsPage/eventsCarousel.jsx
@@ -0,0 +1,88 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import SwiperCore, { Autoplay, Keyboard, Pagination } from "swiper";
+import Link from "next/link";
+import { eventarchive } from "../../events/eventArchive.json";
+
+SwiperCore.use([Autoplay, Keyboard, Pagination]);
+
+const EventsCarousel = () => {
+  let currentyear = "2021";
+  return (
+    <Swiper
+      slidesPerView={1}
+      spaceBetween={30}
+      autoplay={{
+        delay: 4000,
+        disableOnInteraction: false,
+      }}
+      keyboard={{
+        enabled: true,
+      }}
+      pagination={{
+        clickable: true,
+        renderBullet: function (index, className) {
+          return '<span class="' + className + '">' + "</span>";
+        },
+      }}
+      className="mySwiper"
+    >
+      <div>
+        {eventarchive.map((e, index) => {
+          let eventDate = new Date(e.date);
+          if (eventDate.getFullYear() == currentyear) {
+            const monthNames = [
+              "January",
+              "February",
+              "March",
+              "April",
+              "May",
+              "June",
+              "July",
+              "August",
+              "September",
+              "October",
+              "November",
+              "December",
+            ];
+            return (
+              <SwiperSlide>
+                <div className="event-slide">
+                <div className="event-photo">
+                    <img src={e.photos[0]} alt="event-photo" />
+                  </div>
+                  <div className="event-name">{e.title}</div>
+                  <div className="event-date">
+                    <span className="day">{eventDate.getDate()}</span>
+                    <span className="month">
+                      {monthNames[eventDate.getMonth()]}
+                    </span>
+                  </div>
+                  <div className="event-buttons">
+                    <Link href="">
+                      <button className="register">Register</button>
+                    </Link>
+                    <Link
+                      href={{
+                        pathname: "events/[eventindex]",
+                        query: {
+                          eventindex: index,
+                        },
+                        params: {
+                          eventindex: index,
+                        },
+                      }}
+                    >
+                      <button className="details">Details</button>
+                    </Link>
+                  </div>
+                </div>
+              </SwiperSlide>
+            );
+          }
+        })}
+      </div>
+    </Swiper>
+  );
+};
+
+export default EventsCarousel;
diff --git a/events/eventArchive.json b/events/eventArchive.json
@@ -0,0 +1,76 @@
+{
+  "eventarchive": [
+    {
+      "title": "GITHUB INTRODUCTION WORKSHOP '22",
+      "date": "2022-01-01 00:00:00",
+      "photos": ["/media/event0.jpg"],
+      "details": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, est velit impedit sed.",
+      "address": "Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet",
+      "speakers": ["speaker1", "speaker2"],
+      "skillreq": 1,
+      "prerequisites": "None",
+      "requirements": "Lorem ipsum dolor sit amet",
+      "poweredby": "GitHub"
+    },
+    {
+      "title": "UI/UX INTRODUCTION WORKSHOP '22",
+      "date": "2022-06-20T00:00:00",
+      "photos": ["/media/event0.jpg"],
+      "details": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, est velit impedit sed",
+      "address": "Lorem ipsum dolor sit amet",
+      "speakers": ["speaker1", "speaker2"],
+      "skillreq": 1,
+      "prerequisites": "None",
+      "requirements": "Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet",
+      "poweredby": "GitHub"
+    },
+    {
+      "title": "GITHUB INTRODUCTION WORKSHOP '22",
+      "date": "2022-06-20T00:00:00",
+      "photos": ["/media/event0.jpg"],
+      "details": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, est velit impedit sed",
+      "address": "Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet",
+      "speakers": ["speaker1", "speaker2"],
+      "skillreq": 1,
+      "prerequisites": "None",
+      "requirements": "Lorem ipsum dolor sit amet",
+      "poweredby": "GitHub"
+    },
+    {
+      "title": "GITHUB INTRODUCTION WORKSHOP '21",
+      "date": "2021-12-01 00:00:00",
+      "photos": ["/media/event0.jpg"],
+      "details": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, est velit impedit sed.",
+      "address": "Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet",
+      "speakers": ["speaker1", "speaker2"],
+      "skillreq": 1,
+      "prerequisites": "None",
+      "requirements": "Lorem ipsum dolor sit amet",
+      "poweredby": "GitHub"
+    },
+    {
+      "title": "UI/UX INTRODUCTION WORKSHOP '21",
+      "date": "2021-11-20T00:00:00",
+      "photos": ["/media/event0.jpg"],
+      "details": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, est velit impedit sed",
+      "address": "Lorem ipsum dolor sit amet",
+      "speakers": ["speaker1", "speaker2"],
+      "skillreq": 1,
+      "prerequisites": "None",
+      "requirements": "Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet",
+      "poweredby": "GitHub"
+    },
+    {
+      "title": "GITHUB INTRODUCTION WORKSHOP '21",
+      "date": "2021-12-20T00:00:00",
+      "photos": ["/media/event0.jpg"],
+      "details": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, est velit impedit sed",
+      "address": "Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet",
+      "speakers": ["speaker1", "speaker2"],
+      "skillreq": 1,
+      "prerequisites": "None",
+      "requirements": "Lorem ipsum dolor sit amet",
+      "poweredby": "GitHub"
+    }
+  ]
+}
diff --git a/events/events.json b/events/events.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "raw-loader": "^4.0.2",
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "react-markdown": "^5.0.3"
+    "react-markdown": "^5.0.3",
+    "swiper": "6.5.0"
   }
 }