From 7296e1f6df59562dabef21313d90deb48cff775d Mon Sep 17 00:00:00 2001
From: Tyler Hill <gotyhill@gmail.com>
Date: Mon, 12 Aug 2024 12:57:26 -0500
Subject: [PATCH] Switch to new calendar

---
 src/components/Footer.tsx        |   3 -
 src/components/Navbar.tsx        |   2 +-
 src/pages/api/getCalendar.ts     |   2 +-
 src/pages/contact.tsx            |   2 +-
 src/pages/resources/calendar.tsx |  59 ++++++--
 src/pages/resources/meetings.tsx | 229 -------------------------------
 6 files changed, 50 insertions(+), 247 deletions(-)
 delete mode 100644 src/pages/resources/meetings.tsx

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 1fdee32..5dd379b 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -61,9 +61,6 @@ const Footer = () => {
           <Link className={linkClasses} href="/about/governance">
             Project Governance
           </Link>
-          <Link className={linkClasses} href="/resources/meetings">
-            Meetings
-          </Link>
           <Link className={linkClasses} href="/resources/calendar">
             Calendar
           </Link>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index ce75d30..4a097f9 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -323,7 +323,7 @@ const Navbar = (props: Props) => {
                 ))}
               </ul>
               <Link
-                href="/resources/meetings"
+                href="/resources/calendar"
                 className={clsx(
                   'justify-self-end w-max px-4 py-2 rounded-full border whitespace-nowrap',
                   textShadow,
diff --git a/src/pages/api/getCalendar.ts b/src/pages/api/getCalendar.ts
index b605642..f2e7f57 100644
--- a/src/pages/api/getCalendar.ts
+++ b/src/pages/api/getCalendar.ts
@@ -3,7 +3,7 @@ import { auth, JWT } from 'google-auth-library';
 import type { NextApiRequest, NextApiResponse } from 'next';
 
 const CALENDAR_ID =
-  'c_64bca4fdc75077d852bc5236ec20402d8514792841894b264da57d41bb0ee32e@group.calendar.google.com';
+  'c_81b7102868d4acac8b7db3a18de6440d45740e4754be4f8a28a5c3915b0d1e71@group.calendar.google.com';
 
 type Data = {
   message: string;
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index 3bdd15a..1df3ad0 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -20,7 +20,7 @@ const Contact = () => (
     <Header text="Contact Us" />
     <div className="px-8 lg:px-16 xl:px-32 flex flex-col items-center gap-12">
       <div className="flex flex-col items-center gap-12">
-        <h2 className="text-2xl gap-2">
+        <h2 className="text-2xl">
           Discord is the best place to stay up to date with our latest updates and events.
         </h2>
         <a
diff --git a/src/pages/resources/calendar.tsx b/src/pages/resources/calendar.tsx
index a8908ba..2470402 100644
--- a/src/pages/resources/calendar.tsx
+++ b/src/pages/resources/calendar.tsx
@@ -36,9 +36,9 @@ interface EventReactProps {
 
 const Event = (props: EventReactProps) => {
   const important =
-    props.name.includes('Kickoff') ||
-    props.name.includes('Social') ||
-    props.name.includes('All-Hands');
+    !props.name.includes('Project Meeting') &&
+    !props.name.includes('Division Meeting') &&
+    !props.name.includes('After Hours');
 
   const start = new Date(props.start);
   const end = new Date(props.end);
@@ -150,7 +150,6 @@ const Calendar = () => {
         if (data.message !== 'success') {
           throw new Error(data.message);
         }
-        console.log(data.data);
         setEvents(data.data.data.items);
         setState('done');
       })
@@ -230,13 +229,46 @@ const Calendar = () => {
   );
 
   if (state === 'loading') {
-    result = <h2 className="text-5xl font-bold pb-4 text-center">Loading...</h2>;
-  } else if (state === 'done') {
     result = (
-      <div className="px-8 lg:px-16 xl:px-32 flex flex-col items-center">
-        <div className="flex flex-col gap-4 w-full max-w-[40ch]">{...labelsAndEvents}</div>
+      <div className="flex flex-col gap-4 w-full max-w-[40ch] animate-pulse">
+        <h3 className="text-transparent w-fit text-4xl font-semibold bg-gray-200 rounded-full">
+          January
+        </h3>
+        <h2 className="text-transparent w-fit text-3xl font-medium bg-gray-200 rounded-full">
+          19 Monday
+        </h2>
+        <div className="text-transparent w-full p-4 bg-gray-200 rounded-lg">
+          <p className="text-2xl">After Hours</p>
+          <p>7:00 - 9:00 PM</p>
+          <p>AD 2.232</p>
+        </div>
+        <h3 className="text-transparent w-fit text-4xl font-semibold bg-gray-200 rounded-full">
+          January
+        </h3>
+        <h2 className="text-transparent w-fit text-3xl font-medium bg-gray-200 rounded-full">
+          19 Monday
+        </h2>
+        <div className="text-transparent w-full p-4 bg-gray-200 rounded-lg">
+          <p className="text-2xl">After Hours</p>
+          <p>7:00 - 9:00 PM</p>
+          <p>AD 2.232</p>
+        </div>
+        <h3 className="text-transparent w-fit text-4xl font-semibold bg-gray-200 rounded-full">
+          January
+        </h3>
+        <h2 className="text-transparent w-fit text-3xl font-medium bg-gray-200 rounded-full">
+          19 Monday
+        </h2>
+        <div className="text-transparent w-full p-4 bg-gray-200 rounded-lg">
+          <p className="text-2xl">After Hours</p>
+          <p>7:00 - 9:00 PM</p>
+          <p>AD 2.232</p>
+        </div>
       </div>
     );
+    //<h2 className="text-5xl font-bold pb-4 text-center">Loading...</h2>;
+  } else if (state === 'done') {
+    result = <div className="flex flex-col gap-4 w-full max-w-[40ch]">{...labelsAndEvents}</div>;
   }
 
   return (
@@ -247,17 +279,20 @@ const Calendar = () => {
         <meta property="og:url" content="https://www.utdnebula.com/resources/calendar" />
       </Head>
       <Header text="Calendar" />
-      <div className="px-8 lg:px-16 xl:px-32 pb-12 flex justify-center gap-2 flex-wrap">
+      <h2 className="px-8 lg:px-16 xl:px-32 text-2xl text-center mb-12">
+        Stop by any of our events to see about becoming a new member!
+      </h2>
+      <div className="px-8 lg:px-16 xl:px-32 mb-12 flex justify-center gap-2 flex-wrap">
         <a
           className={buttonLinkClasses}
           target="_blank"
-          href="https://accounts.google.com/AccountChooser?continue=https://calendar.google.com/calendar/?cid=Y182NGJjYTRmZGM3NTA3N2Q4NTJiYzUyMzZlYzIwNDAyZDg1MTQ3OTI4NDE4OTRiMjY0ZGE1N2Q0MWJiMGVlMzJlQGdyb3VwLmNhbGVuZGFyLmdvb2dsZS5jb20"
+          href="https://accounts.google.com/AccountChooser?continue=https://calendar.google.com/calendar/?cid=c_81b7102868d4acac8b7db3a18de6440d45740e4754be4f8a28a5c3915b0d1e71%40group.calendar.google.com"
         >
           Subscribe in Google Calendar
         </a>
         <a
           className={buttonLinkClasses}
-          href="https://calendar.google.com/calendar/ical/c_64bca4fdc75077d852bc5236ec20402d8514792841894b264da57d41bb0ee32e%40group.calendar.google.com/public/basic.ics"
+          href="https://calendar.google.com/calendar/ical/c_81b7102868d4acac8b7db3a18de6440d45740e4754be4f8a28a5c3915b0d1e71%40group.calendar.google.com/public/basic.ics"
         >
           Subscribe with iCal
         </a>
@@ -265,7 +300,7 @@ const Calendar = () => {
           View on Discord
         </a>
       </div>
-      {result}
+      <div className="px-8 lg:px-16 xl:px-32 flex flex-col items-center">{result}</div>
       <Footer />
     </>
   );
diff --git a/src/pages/resources/meetings.tsx b/src/pages/resources/meetings.tsx
deleted file mode 100644
index d940368..0000000
--- a/src/pages/resources/meetings.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-import Header from '@/components/Header';
-import Footer from '@/components/Footer';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-import { ics } from 'calendar-link';
-
-const timeFormat = new Intl.DateTimeFormat('en-US', {
-  hour: 'numeric',
-  minute: 'numeric',
-  hour12: true,
-});
-
-const dateFormat = new Intl.DateTimeFormat('en-US', {
-  weekday: 'long',
-});
-
-interface MeetingReactProps {
-  name: string;
-  found: boolean;
-  start?: string;
-  end?: string;
-  location?: string;
-  htmlLink?: string;
-}
-
-const Meeting = (props: MeetingReactProps) => {
-  if (
-    props.found === false ||
-    typeof props.start === 'undefined' ||
-    typeof props.end === 'undefined' ||
-    typeof props.location === 'undefined' ||
-    typeof props.htmlLink === 'undefined'
-  ) {
-    return (
-      <div>
-        <p className="text-4xl font-semibold">{props.name}</p>
-        <p>No meetings currently planned.</p>
-      </div>
-    );
-  }
-
-  const start = new Date(props.start);
-  const end = new Date(props.end);
-  let startTime = timeFormat.format(start);
-  if (start.getHours() >= 12 === end.getHours() >= 12) {
-    //AMPM the same
-    startTime = startTime.slice(0, -3);
-  }
-
-  const buttonLinkClasses =
-    'hover:scale-105 active:scale-95 transition duration-300 ease-in-out px-2 py-1 rounded-lg cursor-pointer border-2 hover:bg-royal hover:text-white border-royal';
-
-  const iCalFileString = ics({
-    title: props.name,
-    start: props.start,
-    end: props.end,
-    location: props.location,
-    url: props.htmlLink,
-  });
-
-  return (
-    <div className="flex flex-col md:flex-row items-center">
-      <div className="mr-auto">
-        <p className="text-4xl font-semibold">{props.name}</p>
-        <p>
-          {dateFormat.format(start)} {startTime} - {timeFormat.format(end)}
-        </p>
-        <p>{props.location === 'Unknown' ? 'TBD' : props.location}</p>
-      </div>
-      <div className="mt-2 flex flex-row md:flex-col items-end gap-2">
-        <a
-          className={buttonLinkClasses}
-          target="_blank"
-          href={
-            'https://accounts.google.com/AccountChooser?continue=https://calendar.google.com/calendar/r/eventedit/copy/' +
-            props.htmlLink.split('eid=')[1]
-          }
-        >
-          Copy to Google Calendar
-        </a>
-        <a download={props.name} className={buttonLinkClasses} href={iCalFileString}>
-          Copy with iCal
-        </a>
-      </div>
-    </div>
-  );
-};
-
-const Meetings = () => {
-  const router = useRouter();
-
-  const [events, setEvents] = useState<EventFetchProps[]>([]);
-  const [state, setState] = useState('loading');
-
-  interface EventFetchProps {
-    status: string;
-    id: string;
-    summary: string;
-    start: {
-      dateTime: string;
-    };
-    end: {
-      dateTime: string;
-    };
-    location: string;
-    htmlLink: string;
-  }
-
-  interface FetchProps {
-    message: string;
-    data: {
-      data: {
-        items: EventFetchProps[];
-      };
-    };
-  }
-
-  useEffect(() => {
-    fetch('/api/getCalendar')
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error(response.statusText);
-        }
-        return response.json() as Promise<FetchProps>;
-      })
-      .then((data) => {
-        if (data.message !== 'success') {
-          throw new Error(data.message);
-        }
-        console.log(data.data);
-        setEvents(data.data.data.items);
-        setState('done');
-      })
-      .catch((error) => {
-        setState('error');
-        console.error('Feedback', error);
-      });
-  }, []);
-
-  interface MeetingObject {
-    name: string;
-    found: boolean;
-    start?: string;
-    end?: string;
-    location?: string;
-    htmlLink?: string;
-  }
-  type MeetingProps = Record<'planner' | 'jupiter' | 'trends' | 'api', MeetingObject>;
-
-  const meetings: MeetingProps = {
-    planner: {
-      name: 'Planner',
-      found: false,
-    },
-    jupiter: {
-      name: 'Jupiter',
-      found: false,
-    },
-    trends: {
-      name: 'Trends & Skedge',
-      found: false,
-    },
-    api: {
-      name: 'API & Platform',
-      found: false,
-    },
-  };
-  const elements = [];
-  if (typeof events !== 'undefined') {
-    for (const project in meetings) {
-      for (const event of events) {
-        if (event.status !== 'confirmed') {
-          continue;
-        }
-        const name = event.summary.toLowerCase();
-        if (name.includes('project meeting') && name.includes(project)) {
-          meetings[project as keyof MeetingProps] = {
-            ...meetings[project as keyof MeetingProps],
-            found: true,
-            start: event.start.dateTime,
-            end: event.end.dateTime,
-            location: event.location,
-            htmlLink: event.htmlLink,
-          };
-        }
-      }
-      elements.push(<Meeting key={project} {...meetings[project as keyof MeetingProps]} />);
-    }
-  }
-
-  const buttonLinkClasses =
-    'hover:scale-105 active:scale-95 transition duration-300 ease-in-out px-4 py-2 rounded-lg cursor-pointer hover:bg-royal hover:text-white border-royal border-2';
-
-  //error state
-  let result = (
-    <div className="px-8 lg:px-16 xl:px-32 flex flex-col items-center gap-4">
-      <h2 className="text-5xl font-bold text-center">Error loading calendar</h2>
-      <button className={buttonLinkClasses} onClick={() => router.reload()}>
-        Reload
-      </button>
-    </div>
-  );
-
-  if (state === 'loading') {
-    result = <h2 className="text-5xl font-bold pb-4 text-center">Loading...</h2>;
-  } else if (state === 'done') {
-    result = (
-      <div className="px-8 lg:px-16 xl:px-32 flex flex-col items-center">
-        <div className="flex flex-col gap-16 w-full">{...elements}</div>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <Head>
-        <title>Meetings - Nebula Labs</title>
-        <link rel="canonical" href="https://www.utdnebula.com/resources/meetings" key="canonical" />
-        <meta property="og:url" content="https://www.utdnebula.com/resources/meetings" />
-      </Head>
-      <Header text="Meetings" />
-      {result}
-      <Footer />
-    </>
-  );
-};
-
-export default Meetings;