From 968b9b9873a9697e573b8c6f26aeda069191c698 Mon Sep 17 00:00:00 2001 From: qhgill Date: Mon, 5 Aug 2024 18:57:32 -0700 Subject: [PATCH 01/10] gcal integration initial commit --- src/components/events/CalendarEvents.jsx | 62 +++++++++++++++++------- 1 file changed, 44 insertions(+), 18 deletions(-) diff --git a/src/components/events/CalendarEvents.jsx b/src/components/events/CalendarEvents.jsx index fb9b77c..59bd76d 100644 --- a/src/components/events/CalendarEvents.jsx +++ b/src/components/events/CalendarEvents.jsx @@ -1,32 +1,54 @@ "use client"; -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import moment from "moment"; import "react-big-calendar/lib/css/react-big-calendar.css"; import { Calendar, momentLocalizer } from "react-big-calendar"; import CustomEvent from "./CustomEvents"; import CustomHeader from "./CustomHeader"; import CustomToolbar from "./CustomToolbar"; +import Modal from "./Modal"; const mLocalizer = momentLocalizer(moment); const CalendarEvents = () => { + const [events, setEvents] = useState([]); const [date, setDate] = useState(new Date()); - const dummyEvents = [ - { - title: "Tabling event 1", - start: new Date(2024, 7, 5, 10, 0), - end: new Date(2024, 7, 5, 11, 0), - location: "WCH", - summary: "the best event", - }, - { - title: "Tabling event 2", - start: new Date(2024, 6, 5, 10, 0), - end: new Date(2024, 6, 5, 11, 0), - location: "WCH", - summary: "even better event", - }, - ]; + const [selectedEvent, setSelectedEvent] = useState(null); + useEffect(() => { + const startDate = new Date( + new Date().getTime() - 60 * 60 * 24 * 7 * 10 * 1000 + ).toISOString(); + const endDate = new Date( + new Date().getTime() + 60 * 60 * 24 * 7 * 10 * 1000 + ).toISOString(); + const fetchData = async () => { + try { + const response = await fetch( + `https://www.googleapis.com/calendar/v3/calendars/${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_EMAIL}/events?key=${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_API_KEY} + &singleEvents=true&orderBy=startTime&timeMin=${startDate}&timeMax=${endDate}` + ); + + const offset = new Date().getTimezoneOffset() * 60000; + const data = await response.json(); + const items = data.items.map((item) => { + item.allDay = !item.start.dateTime; + (item.start = item.start.dateTime + ? new Date(item.start.dateTime) + : new Date(new Date(item.start.date).getTime() + offset)), + (item.end = new Date( + item.end.dateTime || new Date(item.end.date).getTime() + offset + )), + (item.hidden = false); + return item; + }); + setEvents(items); + } catch (error) { + console.error("Error fetching data: ", error); + } + }; + + fetchData(); + }, []); return (
@@ -39,7 +61,7 @@ const CalendarEvents = () => { onNavigate={(newDate) => { setDate(newDate); }} - events={dummyEvents} + events={events} localizer={mLocalizer} defaultView="month" views={["month"]} @@ -70,6 +92,10 @@ const CalendarEvents = () => { }; }} /> + {selectedEvent && ( + + )} + {console.log(selectedEvent)}
From e2701ba133eefdccff984160a3b4d28ce0ef7df0 Mon Sep 17 00:00:00 2001 From: qhgill Date: Tue, 6 Aug 2024 14:57:08 -0700 Subject: [PATCH 02/10] fix z? --- src/components/events/Modal.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/events/Modal.jsx b/src/components/events/Modal.jsx index e092ec5..cb71127 100644 --- a/src/components/events/Modal.jsx +++ b/src/components/events/Modal.jsx @@ -8,7 +8,7 @@ const Modal = ({ description = "No description provided.", }) => { return ( -
+
From fc52f4a2e51c743b88f849eb954a0a660d356c3e Mon Sep 17 00:00:00 2001 From: Sean Quiambao <91030482+toastmeal@users.noreply.github.com> Date: Tue, 6 Aug 2024 23:48:04 -0700 Subject: [PATCH 03/10] clean up + fixed modal --- src/components/events/CalendarEvents.jsx | 11 +++++-- src/components/events/CustomEvents.jsx | 10 +++--- src/components/events/Modal.jsx | 39 +++++++++--------------- 3 files changed, 27 insertions(+), 33 deletions(-) diff --git a/src/components/events/CalendarEvents.jsx b/src/components/events/CalendarEvents.jsx index 59bd76d..b03dad5 100644 --- a/src/components/events/CalendarEvents.jsx +++ b/src/components/events/CalendarEvents.jsx @@ -51,10 +51,10 @@ const CalendarEvents = () => { }, []); return ( -
+
{/* Calendar Section */}
-
+
{ }} /> {selectedEvent && ( - + )} {console.log(selectedEvent)}
diff --git a/src/components/events/CustomEvents.jsx b/src/components/events/CustomEvents.jsx index f4f0ddf..bcc75f8 100644 --- a/src/components/events/CustomEvents.jsx +++ b/src/components/events/CustomEvents.jsx @@ -2,21 +2,19 @@ import React from "react"; const CustomEvent = ({ event }) => { const getColorClass = () => { - if (event.title.includes("Tabling")) { + if (event.summary.includes("Tabling")) { return "bg-biscuits-pinkTabling"; } - if (event.title.includes("Event")) { + if (event.summary.includes("Event")) { return "bg-biscuits-orangeEvent"; } return "bg-biscuits-blueResources"; }; - const colorClass = getColorClass(); - return ( -
+

- {event.title} + {event.summary}

); diff --git a/src/components/events/Modal.jsx b/src/components/events/Modal.jsx index cb71127..bb40b3b 100644 --- a/src/components/events/Modal.jsx +++ b/src/components/events/Modal.jsx @@ -2,34 +2,25 @@ import { IoMdClose } from "react-icons/io"; const Modal = ({ title = "Event Title", - date = "Date", - time = "Time", - place = "Place", - description = "No description provided.", + time, + location = "No Location Specified", + description = "No Description Specified", + setEvents, }) => { return ( -
- -
{title}
-
    -
  • - - {date} -
    • -
  • - - {time} -
    • -
  • - - {place} -
    • -
  • - - {description} -
    • +
    {title}
    +
      +
    • Start:
      • +
    • End:
      • +
    • {location}
      • +
    • {description}
); From 0e93fc66e05ed8a4c9631571310b933ceff843d0 Mon Sep 17 00:00:00 2001 From: qhgill Date: Thu, 8 Aug 2024 15:15:09 -0700 Subject: [PATCH 04/10] modal time --- src/components/events/CalendarEvents.jsx | 2 ++ src/components/events/Modal.jsx | 7 ++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/events/CalendarEvents.jsx b/src/components/events/CalendarEvents.jsx index b03dad5..1a95a28 100644 --- a/src/components/events/CalendarEvents.jsx +++ b/src/components/events/CalendarEvents.jsx @@ -98,6 +98,8 @@ const CalendarEvents = () => { title={selectedEvent.summary} description={selectedEvent.description} location={selectedEvent.location} + startTime={selectedEvent.start.toLocaleTimeString().split(":")[0]} + endTime={selectedEvent.end.toLocaleTimeString().split(":")[0]} /> )} {console.log(selectedEvent)} diff --git a/src/components/events/Modal.jsx b/src/components/events/Modal.jsx index bb40b3b..13d8701 100644 --- a/src/components/events/Modal.jsx +++ b/src/components/events/Modal.jsx @@ -2,7 +2,8 @@ import { IoMdClose } from "react-icons/io"; const Modal = ({ title = "Event Title", - time, + startTime, + endTime, location = "No Location Specified", description = "No Description Specified", setEvents, @@ -17,8 +18,8 @@ const Modal = ({
{title}
    -
  • Start:
    • -
  • End:
    • +
  • Start: {startTime}
    • +
  • End: {endTime}
  • {location}
  • {description}
From 9407ef5858f8dfb37f0e3735001cccf4a6ee0275 Mon Sep 17 00:00:00 2001 From: qhgill Date: Thu, 8 Aug 2024 16:26:51 -0700 Subject: [PATCH 05/10] modal time ampm --- src/components/events/CalendarEvents.jsx | 12 ++++++++++++ src/components/events/Modal.jsx | 10 ++++++++-- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/components/events/CalendarEvents.jsx b/src/components/events/CalendarEvents.jsx index 1a95a28..4208a82 100644 --- a/src/components/events/CalendarEvents.jsx +++ b/src/components/events/CalendarEvents.jsx @@ -99,7 +99,19 @@ const CalendarEvents = () => { description={selectedEvent.description} location={selectedEvent.location} startTime={selectedEvent.start.toLocaleTimeString().split(":")[0]} + startAMPM={ + selectedEvent.start + .toLocaleTimeString() + .split(":")[2] + .split(" ")[1] + } endTime={selectedEvent.end.toLocaleTimeString().split(":")[0]} + endAMPM={ + selectedEvent.end + .toLocaleTimeString() + .split(":")[2] + .split(" ")[1] + } /> )} {console.log(selectedEvent)} diff --git a/src/components/events/Modal.jsx b/src/components/events/Modal.jsx index 13d8701..99832f4 100644 --- a/src/components/events/Modal.jsx +++ b/src/components/events/Modal.jsx @@ -4,6 +4,8 @@ const Modal = ({ title = "Event Title", startTime, endTime, + startAMPM, + endAMPM, location = "No Location Specified", description = "No Description Specified", setEvents, @@ -18,8 +20,12 @@ const Modal = ({
{title}
    -
  • Start: {startTime}
    • -
  • End: {endTime}
    • +
  • + Start: {startTime} {startAMPM} +
    • +
  • + End: {endTime} {endAMPM} +
  • {location}
  • {description}
From 68eb6624efd0cf2cea948f9bc28346b0cf7a613e Mon Sep 17 00:00:00 2001 From: qhgill Date: Fri, 9 Aug 2024 11:12:20 -0700 Subject: [PATCH 06/10] modal adjustments --- src/components/events/CalendarEvents.jsx | 16 ++-------------- src/components/events/Modal.jsx | 8 ++++---- 2 files changed, 6 insertions(+), 18 deletions(-) diff --git a/src/components/events/CalendarEvents.jsx b/src/components/events/CalendarEvents.jsx index 4208a82..934b10b 100644 --- a/src/components/events/CalendarEvents.jsx +++ b/src/components/events/CalendarEvents.jsx @@ -98,20 +98,8 @@ const CalendarEvents = () => { title={selectedEvent.summary} description={selectedEvent.description} location={selectedEvent.location} - startTime={selectedEvent.start.toLocaleTimeString().split(":")[0]} - startAMPM={ - selectedEvent.start - .toLocaleTimeString() - .split(":")[2] - .split(" ")[1] - } - endTime={selectedEvent.end.toLocaleTimeString().split(":")[0]} - endAMPM={ - selectedEvent.end - .toLocaleTimeString() - .split(":")[2] - .split(" ")[1] - } + startTime={selectedEvent.start} + endTime={selectedEvent.end} /> )} {console.log(selectedEvent)} diff --git a/src/components/events/Modal.jsx b/src/components/events/Modal.jsx index 99832f4..fae4ce4 100644 --- a/src/components/events/Modal.jsx +++ b/src/components/events/Modal.jsx @@ -4,8 +4,6 @@ const Modal = ({ title = "Event Title", startTime, endTime, - startAMPM, - endAMPM, location = "No Location Specified", description = "No Description Specified", setEvents, @@ -21,10 +19,12 @@ const Modal = ({
{title}
  • - Start: {startTime} {startAMPM} + Start: {startTime.toLocaleTimeString().split(":")[0]}{" "} + {startTime.toLocaleTimeString().split(":")[2].split(" ")[1]}
  • - End: {endTime} {endAMPM} + End: {endTime.toLocaleTimeString().split(":")[0]}{" "} + {endTime.toLocaleTimeString().split(":")[2].split(" ")[1]}
  • {location}
  • {description}
    • From 2ebd3bb3e8d04bba83bd8c2d1b574a8846a9f630 Mon Sep 17 00:00:00 2001 From: Sean Quiambao <91030482+toastmeal@users.noreply.github.com> Date: Sun, 11 Aug 2024 20:22:45 -0700 Subject: [PATCH 07/10] added color coordination to modal + events --- src/app/events/page.js | 6 +++++- src/components/events/CalendarEvents.jsx | 6 +++--- src/components/events/CustomEvents.jsx | 18 +++++++++--------- src/components/events/CustomHeader.jsx | 2 +- src/components/events/Modal.jsx | 17 ++++++++++++++--- src/data/events/Color.js | 10 ++++++++++ 6 files changed, 42 insertions(+), 17 deletions(-) create mode 100644 src/data/events/Color.js diff --git a/src/app/events/page.js b/src/app/events/page.js index 2e8541a..576ec83 100644 --- a/src/app/events/page.js +++ b/src/app/events/page.js @@ -1,7 +1,11 @@ import CalendarEvents from "@/components/events/CalendarEvents"; const Page = () => { - return ; + return ( +
    + +
    + ); }; export default Page; diff --git a/src/components/events/CalendarEvents.jsx b/src/components/events/CalendarEvents.jsx index 934b10b..c4a4480 100644 --- a/src/components/events/CalendarEvents.jsx +++ b/src/components/events/CalendarEvents.jsx @@ -51,7 +51,7 @@ const CalendarEvents = () => { }, []); return ( -
    +
    {/* Calendar Section */}
    @@ -82,8 +82,8 @@ const CalendarEvents = () => { className: `${ new Date(event).toLocaleDateString() == new Date().toLocaleDateString() - ? "!bg-biscuits-orange" - : "!bg-white" + ? "!bg-biscuits-purple-100" + : "!bg-biscuits-peach" }`, style: { margin: 0, diff --git a/src/components/events/CustomEvents.jsx b/src/components/events/CustomEvents.jsx index bcc75f8..285b2fe 100644 --- a/src/components/events/CustomEvents.jsx +++ b/src/components/events/CustomEvents.jsx @@ -1,19 +1,19 @@ import React from "react"; +import { COLORS } from "@/data/events/Color"; const CustomEvent = ({ event }) => { - const getColorClass = () => { - if (event.summary.includes("Tabling")) { - return "bg-biscuits-pinkTabling"; + const getStyle = () => { + if (event.summary.toLowerCase().includes("tabling")) { + return COLORS["tabling"].event; + } else if (event.summary.toLowerCase().includes("resources")) { + return COLORS["resources"].event; } - if (event.summary.includes("Event")) { - return "bg-biscuits-orangeEvent"; - } - return "bg-biscuits-blueResources"; + return "bg-biscuits-orangeEvent"; }; return ( -
    -

    +

    +

    {event.summary}

    diff --git a/src/components/events/CustomHeader.jsx b/src/components/events/CustomHeader.jsx index 39a4c7f..b6ae32d 100644 --- a/src/components/events/CustomHeader.jsx +++ b/src/components/events/CustomHeader.jsx @@ -2,7 +2,7 @@ import React from "react"; const CustomHeader = ({ label }) => { return ( -
    +
    {label}
    ); diff --git a/src/components/events/Modal.jsx b/src/components/events/Modal.jsx index fae4ce4..8d35f33 100644 --- a/src/components/events/Modal.jsx +++ b/src/components/events/Modal.jsx @@ -1,4 +1,5 @@ import { IoMdClose } from "react-icons/io"; +import { COLORS } from "@/data/events/Color"; const Modal = ({ title = "Event Title", @@ -8,16 +9,26 @@ const Modal = ({ description = "No Description Specified", setEvents, }) => { + const getStyle = () => { + if (title.toLowerCase().includes("tabling")) { + return COLORS["tabling"].modal; + } else if (title.toLowerCase().includes("resources")) { + return COLORS["resources"].modal; + } + return "border-biscuits-orangeEvent"; + }; return ( -
    +
    {title}
    -
      +
      • Start: {startTime.toLocaleTimeString().split(":")[0]}{" "} {startTime.toLocaleTimeString().split(":")[2].split(" ")[1]} diff --git a/src/data/events/Color.js b/src/data/events/Color.js new file mode 100644 index 0000000..dc261ca --- /dev/null +++ b/src/data/events/Color.js @@ -0,0 +1,10 @@ +export const COLORS = { + tabling: { + event: "bg-biscuits-pinkTabling text-biscuits-purple-200", + modal: "border-biscuits-pinkTabling", + }, + resources: { + event: "bg-biscuits-blueResources", + modal: "border-biscuits-blueResources", + }, +}; From 02bb8fccd1a72902879f4c6bd14bd9b221f55ba2 Mon Sep 17 00:00:00 2001 From: qhgill Date: Tue, 13 Aug 2024 20:39:05 -0700 Subject: [PATCH 08/10] added legend to toolbar --- src/components/events/CustomToolbar.jsx | 26 +++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/src/components/events/CustomToolbar.jsx b/src/components/events/CustomToolbar.jsx index 4260fea..05a60b6 100644 --- a/src/components/events/CustomToolbar.jsx +++ b/src/components/events/CustomToolbar.jsx @@ -31,6 +31,21 @@ const mapToNum = { Dec: "12", }; +const filters = [ + { + topic: "H4B Food Tabling", + color: "bg-biscuits-pinkTabling", + }, + { + topic: "H4B Events", + color: "bg-biscuits-orangeEvent", + }, + { + topic: "Food Resources", + color: "bg-biscuits-blueResources", + }, +]; + const CustomToolbar = (event) => { return (
        @@ -59,6 +74,17 @@ const CustomToolbar = (event) => {
        </div> + <div className="font-inika font-bold absolute right-[5%] m-0 p-0 flex flex-col"> + {filters.map((filter, index) => ( + <div key={index} xs={9} sm={3} className="p-1"> + <p + className={`${filter.color} rounded-xl p-1 mb-1 px-12 text-center text-sm`} + > + {filter.topic} + </p> + </div> + ))} + </div> </div> ); }; From 8624ced3dd5ebb7a802199857680100416a7b9d9 Mon Sep 17 00:00:00 2001 From: Sean Quiambao <91030482+toastmeal@users.noreply.github.com> Date: Wed, 14 Aug 2024 18:02:11 -0700 Subject: [PATCH 09/10] wait this is someone else's issues oops --- src/app/events/page.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/events/page.js b/src/app/events/page.js index 576ec83..422dde4 100644 --- a/src/app/events/page.js +++ b/src/app/events/page.js @@ -2,7 +2,7 @@ import CalendarEvents from "@/components/events/CalendarEvents"; const Page = () => { return ( - <div className="bg-blobs1 bg-cover bg-biscuits-peach"> + <div> <CalendarEvents /> </div> ); From 359851d78885706307fbf249292486a29038f2af Mon Sep 17 00:00:00 2001 From: qhgill <qhgill2@gmail.com> Date: Fri, 16 Aug 2024 17:30:35 -0700 Subject: [PATCH 10/10] mobile responsive legend --- src/components/events/CustomToolbar.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/events/CustomToolbar.jsx b/src/components/events/CustomToolbar.jsx index 05a60b6..70c898c 100644 --- a/src/components/events/CustomToolbar.jsx +++ b/src/components/events/CustomToolbar.jsx @@ -48,7 +48,7 @@ const filters = [ const CustomToolbar = (event) => { return ( - <div className="flex items-center justify-center w-full text-5xl xl:text-6xl text-center relative h-60 md:h-80 xl:h-52"> + <div className="flex flex-col items-center justify-center w-full text-5xl xl:text-6xl text-center relative h-96 md:h-80 xl:h-52"> <div className="font-bold flex justify-center items-center gap-3 py-12 absolute left-[50%] translate-x-[-50%] -top-7 xl:left-0 xl:translate-x-0 xl:top-0"> <ImArrowLeft onClick={() => { @@ -74,7 +74,7 @@ const CustomToolbar = (event) => { <div className="absolute top-28 xl:top-[50%] xl:left-[50%] xl:translate-x-[-50%] xl:translate-y-[-50%]"> <Title text="Calendar of Events" color="purple" /> </div> - <div className="font-inika font-bold absolute right-[5%] m-0 p-0 flex flex-col"> + <div className="font-inika font-bold absolute top-40 xl:top-10 xl:right-[5%] m-0 py-20 md:p-0 flex flex-col"> {filters.map((filter, index) => ( <div key={index} xs={9} sm={3} className="p-1"> <p