Merge pull request #115 from acm-ucr/dev

merge to main
acm-ucr · Sep 19, 2023 · 869218e · 869218e
2 parents e907076 + 2b0c88f
commit 869218e
Show file tree

Hide file tree

Showing 53 changed files with 990 additions and 645 deletions.
diff --git a/components/About.jsx b/components/About.jsx
@@ -1,97 +1,46 @@
 import React from "react";
 import Title from "./Title";
-import Gear from "./Gear";
 import coil from "../public/assets/coil.svg";
-import gearStrokePink from "../public/assets/gear-stroke-pink.svg";
-import gearpurple from "../public/assets/gear-purple.svg";
-import gearLightblue from "../public/assets/gear-lightblue.svg";
-import circles1 from "../public/assets/circles1.svg";
-import circles2 from "../public/assets/circles2.svg";
-import circles3 from "../public/assets/circles3.svg";
 import wave from "../public/assets/wave.svg";
-import index1 from "../public/pictures/index1.webp";
 import index2 from "../public/pictures/index2.webp";
 import { motion } from "framer-motion";
+import Link from "next/link";
 
 const About = () => {
  return (
- <div className="relative w-full overflow-hidden flex flex-col">
+ <div className="relative w-full flex flex-col items-center">
  <img
  className="z-0 rotate-90 absolute right-[-1rem] top-[1rem] w-1/3"
  src={coil.src}
  />
-
  <img
  className="z-0 rotate-180 absolute -translate-x-[1/4] left-0 bottom-[40%] w-1/3"
  src={coil.src}
  />
-
- <img
- className="z-0 rotate-90 absolute right-0 translate-x-1/2 top-[20rem] w-1/5"
- src={circles3.src}
- />
-
- <img
- className="z-10 rotate-90 absolute left-0 -translate-x-[50%] bottom-[30%] w-1/3 "
- src={circles2.src}
- />
-
- <div className="z-10 relative flex flex-col items-center lg:mx-20 md:mx-20 mx-1">
- <Title title="About IEEE" />
- <p className="text-center lg:text-xl text-base w-9/12 my-5 mx-60 font-giden">
- IEEE &#40;pronounced &quot;I triple E&quot;&#41; is the Institute of
- Electrical and Electronics Engineers. We are a group dedicated to
- professionalism&#44; connections&#44; and our projects&#46;
- </p>
- </div>
- <div className="relative w-1/2">
- <img
- src={index2.src}
- className="z-10 relative rounded-tr-full rounded-br-full"
- />
- <img
- className="z-0 rotate-90 absolute right-0 bottom-0 w-1/2 translate-y-1/3 translate-x-1/3"
- src={circles1.src}
- />
- <div className="z-0 rotate-90 absolute -right-1/4 top-[20%] w-1/5">
- <Gear src={gearStrokePink.src} isClockwise={true} speed={7} />
- </div>
-
- <div className="z-0 rotate-90 absolute -right-[40%] top-[35%] w-[10%]">
- <Gear src={gearLightblue.src} isClockwise={true} speed={7} />
- </div>
- </div>
-
- <div className="flex flex-col items-center m-20">
- <motion.a
- className="z-10 bg-ieee-pink text-2xl lg:text-3xl font-teko shadow-[10px_-8px_0px_0px] shadow-ieee-blue py-2 px-4 no-underline text-white"
- transition={{ type: "spring", stiffness: 500 }}
- whileHover={{ scale: 1.2 }}
+ <Title title="About IEEE" />
+ <p className="relative text-center lg:text-xl text-base w-9/12 mt-3 mb-5 font-giden">
+ IEEE &#40;pronounced &quot;I triple E&quot;&#41; is the Institute of
+ Electrical and Electronics Engineers. We are a group dedicated to
+ professionalism&#44; connections&#44; and our projects&#46;
+ </p>
+ <motion.div
+ transition={{ type: "spring", stiffness: 300 }}
+ whileHover={{ scale: 1.05 }}
+ className="relative mb-10"
+ >
+ <Link
+ className="rounded bg-ieee-purple text-xl lg:text-3xl font-teko shadow-[10px_-8px_0px_0px] shadow-ieee-blue py-2 px-4 no-underline text-white"
  href="/events"
  >
  Checkout Events
- </motion.a>
- </div>
-
- <div className="z-10 relative self-end w-7/12">
- <img
- src={index1.src}
- className="rounded-tl-full rounded-bl-full w-full relative z-10"
- />
- <img
- className="z-0 absolute left-0 bottom-0 translate-y-1/3 w-1/4"
- src={circles3.src}
- />
- <div className="z-0 rotate-180 absolute -left-[20%] bottom-[50%] w-[15%]">
- <Gear src={gearLightblue.src} isClockwise={true} speed={5} />
- </div>
-
- <div className="z-0 rotate-180 absolute -left-[10%] bottom-[30%] w-[10%]">
- <Gear src={gearpurple.src} isClockwise={true} speed={5} />
- </div>
- </div>
+ </Link>
+ </motion.div>
+ <img
+ src={index2.src}
+ className="relative w-9/12 md:w-1/2 rounded-full h-[150px] md:h-[300px] object-cover"
+ />
 
- <img src={wave.src} className="rotate-180 w-full" />
+ <img src={wave.src} className="relative rotate-180 w-full" />
  </div>
  );
 };

diff --git a/components/Calendar.jsx b/components/Calendar.jsx
@@ -1,65 +1,110 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+import axios from "axios";
 import moment from "moment";
 import { Calendar, momentLocalizer } from "react-big-calendar";
 import "react-big-calendar/lib/css/react-big-calendar.css";
 import CustomToolbar from "./CustomToolbar.jsx";
 import CustomEvent from "./CustomEvent.jsx";
-import { useContext } from "react";
 
 import Modal from "./Modal.jsx";
-import EventsContext from "./EventsContext.jsx";
-import Title from "./Title.jsx";
-
+const recDayMap = { MO: 1, TU: 2, WE: 3, TH: 4, FR: 5, SA: 6, SU: 0 };
 const mLocalizer = momentLocalizer(moment);
-
 const CalendarEvents = () => {
  const [modalEvent, setModalEvent] = useState(null);
- const { events } = useContext(EventsContext);
- console.log(events);
+ const [events, setEvents] = useState([]);
+ useEffect(() => {
+ const eventList = [];
+ axios
+ .get(
+ `https://www.googleapis.com/calendar/v3/calendars/${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_EMAIL}/events?key=${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_API_KEY}&timeMin=2023-10-08T21:58:44.000Z`
+ )
+ .then((result) => {
+ result.data.items.map((event) => {
+ const startHour = new Date(event.start?.dateTime).getHours();
+ const endHour = new Date(event.end?.dateTime).getHours();
+ const color = event.summary?.includes("General Meeting")
+ ? "bg-ieee-pink"
+ : event.summary?.includes("SolarCar")
+ ? "bg-ieee-pinkPurple"
+ : event.summary?.includes("UAS")
+ ? "bg-ieee-purple"
+ : event.summary?.includes("Robosub")
+ ? "bg-ieee-bluePurple"
+ : event.summary?.includes("MicroMouse")
+ ? "bg-ieee-blue"
+ : "bg-ieee-lightblue";
+ if (event.recurrence[0].split("FREQ=")[1].split(";")[0] == "WEEKLY") {
+ const d = new Date(
+ new Date().getFullYear(),
+ new Date().getMonth(),
+ 1
+ );
+
+ d.setDate(
+ d.getDate() -
+ d.getDay() +
+ recDayMap[event.recurrence[0].split("BYDAY=")[1]] -
+ 7
+ );
+ for (let i = 0; i <= 5; i++) {
+ d.setDate(d.getDate() + 7);
+ const start = new Date(d);
+ start.setHours(startHour);
+ start.setMinutes(0);
+ const end = new Date(d);
+ end.setHours(endHour);
+ end.setMinutes(0);
+ eventList.push({
+ ...event,
+ start: start,
+ end: end,
+ color: color,
+ });
+ }
+ }
+ });
+ setEvents(eventList);
+ });
+ }, []);
  return (
  events && (
- <section className="w-full flex justify-center items-center flex-col mt-[2vh] text-xl">
- <Title title="Events" />
- <div className="w-10/12 flex justify-center items-center text-xl my-5">
- <div className="h-[100vh] w-full relative text-xl">
- <Calendar
- className={`font-teko w-full m-0 p-0 text-lg md:text-2xl `}
- showAllEvents={true}
- events={events}
- localizer={mLocalizer}
- defaultView="month"
- views={["month"]}
- components={{
- event: CustomEvent,
- toolbar: CustomToolbar,
- }}
- eventPropGetter={(event) => {
- return {
- className: `!${event.color} p-0 !active:ring-0 !focus:outline-0`,
- };
- }}
- dayPropGetter={(event) => {
- const bg =
- new Date(event).toLocaleDateString() ==
- new Date().toLocaleDateString()
- ? "!bg-opacity-20 !bg-white"
- : "!bg-transparent";
- return {
- className: `${bg}`,
- style: {
- margin: 0,
- padding: 0,
- },
- };
- }}
- onSelectEvent={(event) => {
- setModalEvent(event);
- }}
- />
- <Modal event={modalEvent} setState={setModalEvent} />
- </div>
- </div>
- </section>
+ <div className="w-11/12 h-[80vh] relative text-xl">
+ <Calendar
+ className={`font-teko w-full m-0 p-0 text-lg md:text-2xl`}
+ showAllEvents={true}
+ events={events}
+ localizer={mLocalizer}
+ defaultView="month"
+ views={["month"]}
+ components={{
+ event: CustomEvent,
+ toolbar: CustomToolbar,
+ }}
+ eventPropGetter={(event) => {
+ return {
+ className: `!${event.color} p-0 !active:ring-0 !focus:outline-0`,
+ };
+ }}
+ dayPropGetter={(event) => {
+ const bg =
+ new Date(event).toLocaleDateString() ==
+ new Date().toLocaleDateString()
+ ? "!bg-opacity-20 !bg-white"
+ : "!bg-transparent";
+ return {
+ className: `${bg}`,
+ style: {
+ margin: 0,
+ padding: 0,
+ },
+ };
+ }}
+ onSelectEvent={(event) => {
+ setModalEvent(event);
+ }}
+ />
+ <Modal event={modalEvent} setState={setModalEvent} />
+ </div>
  )
  );
 };

diff --git a/components/CustomToolbar.jsx b/components/CustomToolbar.jsx
@@ -1,6 +1,5 @@
 import React from "react";
 import Filter from "./Filter.jsx";
-import { FaArrowRight, FaArrowLeft } from "react-icons/fa";
 import Col from "react-bootstrap/Col";
 import Row from "react-bootstrap/Row";
 import Filters from "./Filters.jsx";
@@ -13,21 +12,11 @@ const CustomToolbar = (event) => {
  xs={4}
  className="p-0 m-0 flex justify-start items-center text-3xl font-teko"
  >
- <FaArrowLeft
- onClick={() => event.onNavigate("PREV")}
- className="hover:text-ieee-pink hover:cursor-pointer"
- />
  <div className="text-center text-4xl p-1">
- {event.date.getMonth() + 1 < 10
- ? `0${event.date.getMonth() + 1}`
- : event.date.getMonth() + 1}
+ {event.date.toString().split(" ")[1]}
  <br className="m-0" />
- {event.date.getFullYear() % 100}
+ {event.date.getFullYear()}
  </div>
- <FaArrowRight
- onClick={() => event.onNavigate("NEXT")}
- className="hover:text-ieee-pink hover:cursor-pointer"
- />
  </Col>
  <Col xs={8} className="px-2 w-full flex justify-end items-end m-0 pb-4">
  <Row className="w-full m-0 p-0 flex justify-evenly justify-items-center items-center ">

diff --git a/components/EventsContext.jsx b/components/EventsContext.jsx
diff --git a/components/Footer.jsx b/components/Footer.jsx
@@ -1,9 +1,8 @@
 import React from "react";
 import ieeelogo from "../public/assets/ieee-logo.svg";
-import { BsDiscord } from "react-icons/bs";
-import { GrMail } from "react-icons/gr";
 import { motion } from "framer-motion";
 import footer from "../public/assets/footer.svg";
+import { icons } from "./data/icons";
 
 const Footer = () => {
  return (
@@ -24,22 +23,22 @@ const Footer = () => {
  </div>
  <div className="pt-1 space-y-2 flex flex-col justify-evenly mr-3">
  <motion.a
- className="no-underline text-white"
+ className="no-underline text-white text-2xl md:text-4xl"
  transition={{ type: "spring", stiffness: 500 }}
  whileHover={{ scale: 1.2 }}
  target="_blank"
  href="https://discord.gg/Ugjp6Us"
  >
- <BsDiscord className=" text-2xl md:text-5xl" />
+ {icons["discord"]}
  </motion.a>
  <motion.a
- className="no-underline text-white"
+ className="no-underline text-white text-2xl md:text-4xl"
  transition={{ type: "spring", stiffness: 500 }}
  whileHover={{ scale: 1.2 }}
  target="_blank"
  href="https://ieeeucr.github.io/subscribe.html"
  >
- <GrMail className=" text-2xl md:text-5xl" />
+ {icons["email"]}
  </motion.a>
  </div>
  </div>

diff --git a/components/Gear.jsx b/components/Gear.jsx
@@ -6,7 +6,7 @@ import {
  useAnimationFrame,
  useTransform,
 } from "framer-motion";
-function Gear({ src, isClockwise, speed }) {
+function Gear({ src, speed, className }) {
  const [direction, setDirection] = useState(1);
  const { scrollY } = useScroll();
  const scrollVelocity = useVelocity(scrollY);
@@ -26,6 +26,7 @@ function Gear({ src, isClockwise, speed }) {
  });
  return (
  <motion.div
+ className={className}
  style={{ rotate }}
  transition={{
  ease: "linear",