From 257d70c9c1f27d3eb500063347a044f22217a2ca Mon Sep 17 00:00:00 2001
From: luxumbra <me@luxumbra.dev>
Date: Thu, 2 Nov 2023 13:28:09 +0000
Subject: [PATCH] wip on fixing isues

---
 .../src/icons/CalendarAddIcon.tsx             |   2 +-
 .../web/components/Dashboard/Calendar.tsx     | 282 ++++++++++--------
 packages/web/lib/hooks/useCalendar.ts         |  99 +++---
 packages/web/pages/_app.tsx                   |  18 +-
 packages/web/pages/api/events.ts              |  37 ++-
 5 files changed, 254 insertions(+), 184 deletions(-)

diff --git a/packages/design-system/src/icons/CalendarAddIcon.tsx b/packages/design-system/src/icons/CalendarAddIcon.tsx
index cf1999ce1..8579867ea 100644
--- a/packages/design-system/src/icons/CalendarAddIcon.tsx
+++ b/packages/design-system/src/icons/CalendarAddIcon.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 export const CalendarAddIcon = createIcon({
   displayName: 'CalendarAddIcon',
   path: (
-    <g fill="none" fill-rule="evenodd">
+    <g fill="none" fillRule="evenodd">
       <path d="M24 0v24H0V0h24ZM12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036c-.01-.003-.019 0-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.016-.018Zm.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01l-.184-.092Z" />
       <path
         fill="currentColor"
diff --git a/packages/web/components/Dashboard/Calendar.tsx b/packages/web/components/Dashboard/Calendar.tsx
index 449669b91..4a1de0c32 100644
--- a/packages/web/components/Dashboard/Calendar.tsx
+++ b/packages/web/components/Dashboard/Calendar.tsx
@@ -30,7 +30,7 @@ import { MarkdownViewer } from 'components/MarkdownViewer';
 import type { GoogleCalEventType } from 'lib/hooks/useCalendar';
 import { useCalendar } from 'lib/hooks/useCalendar';
 import { DateTime } from 'luxon';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 type GroupedEventsType = {
   date: string;
@@ -53,7 +53,7 @@ const loadMoreButtonStyles: ButtonProps = {
 export const Calendar: React.FC = () => {
   const [calendar, setCalendar] = useState<GroupedEventsType[]>([]);
   const [loadingMore, setLoadingMore] = useState(false);
-  const showHowMany = 4;
+  const showHowMany = 3;
   const {
     fetching,
     error,
@@ -65,10 +65,18 @@ export const Calendar: React.FC = () => {
     limit,
     setLimit,
   } = useCalendar(showHowMany);
-
+  const lastItemRef = useRef<HTMLLIElement>(null);
   const handleShowMoreItems = async () => {
     try {
+      if (loadingMore || limit >= totalEvents) return;
       setLoadingMore(true);
+      setTimeout(() => {
+        lastItemRef.current?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start',
+          inline: 'nearest',
+        });
+      }, 0);
       setTimeout(() => {
         setLimit(limit + showHowMany);
         setLoadingMore(false);
@@ -80,7 +88,6 @@ export const Calendar: React.FC = () => {
 
   function renderLoadMoreButton() {
     if (limit < totalEvents) {
-      /* When there are more items to show */
       return (
         <MetaButton onClick={handleShowMoreItems} {...loadMoreButtonStyles}>
           {loadingMore ? <Spinner size="xs" /> : 'Load More'}
@@ -88,7 +95,6 @@ export const Calendar: React.FC = () => {
       );
     }
 
-    /* When there are no more items to show */
     return (
       <Tooltip label="No more to load" aria-label="A tooltip">
         <MetaButton as="span" isDisabled {...loadMoreButtonStyles}>
@@ -103,9 +109,7 @@ export const Calendar: React.FC = () => {
       const limitedEvents = eventsGroupedByDay.slice(0, limit);
       setCalendar(limitedEvents);
     }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [limit, fetching]);
+  }, [limit, fetching, eventsGroupedByDay]);
 
   if (error) {
     return (
@@ -146,9 +150,6 @@ export const Calendar: React.FC = () => {
               >
                 Calendar
               </Text>
-              {/* <Text as="span" color="Highlight" fontWeight={600}>
-                  {timeZone.users} {`(UTC${usersOffsetString}) ${DateTime.local().zoneName}`}
-                </Text> */}
             </HStack>
             <Box flexShrink={1}>
               <Button
@@ -195,124 +196,155 @@ export const Calendar: React.FC = () => {
               }}
             >
               {calendar.length > 0 &&
-                calendar.map((day) => (
-                  <Box
-                    as="li"
-                    className="calendar__day"
-                    display="flex"
-                    width="100%"
-                    px={0}
-                    py={0}
-                    mb={3}
-                    flexFlow="column wrap"
-                    alignItems="flex-start"
-                    justifyContent="flex-start"
-                    role="group"
-                    key={day.date}
-                    _last={{
-                      mb: 0,
-                    }}
-                  >
+                calendar.map((day, i) => {
+                  const last = i === calendar.length - 1;
+                  return (
                     <Box
-                      as="h3"
-                      fontSize="sm"
-                      fontFamily="body"
-                      fontWeight={400}
-                      className="calendar__day--title"
-                      mb={2}
-                      pl={0}
-                    >
-                      {DateTime.fromISO(day.date)
-                        .toLocaleString({ weekday: 'long' })
-                        .toUpperCase()}{' '}
-                      •{' '}
-                      {DateTime.fromISO(day.date)
-                        .toLocaleString({
-                          month: 'long',
-                          day: 'numeric',
-                          year: 'numeric',
-                        })
-                        .toUpperCase()}
-                    </Box>
-                    <VStack
-                      as="ol"
-                      className="calendar__day--events"
-                      ml={0}
+                      ref={last ? lastItemRef : null}
+                      as="li"
+                      className="calendar__day"
+                      display="flex"
                       width="100%"
-                      sx={{
-                        listStyle: 'none',
+                      px={0}
+                      py={0}
+                      mb={3}
+                      flexFlow="column wrap"
+                      alignItems="flex-start"
+                      justifyContent="flex-start"
+                      key={day.date}
+                      _last={{
+                        mb: 0,
                       }}
                     >
-                      {day &&
-                        day.events?.map((event) => (
-                          <Box
-                            as="li"
-                            className="calendar__day--event"
-                            width="100%"
-                            px={5}
-                            py={2}
-                            backgroundColor="blackAlpha.500"
-                            borderRadius="md"
-                            role="group"
-                            _groupHover={{
-                              backgroundColor: 'blackAlpha.600',
-                            }}
-                          >
-                            <Popover colorScheme="purple">
-                              <Event
-                                title={event.summary}
-                                start={
-                                  'dateTime' in event.start
-                                    ? DateTime.fromISO(
-                                        event.start.dateTime,
-                                      ).toLocaleString(DateTime.TIME_24_SIMPLE)
-                                    : DateTime.fromISO(
-                                        event.start.date,
-                                      ).toLocaleString(DateTime.TIME_24_SIMPLE)
-                                }
-                                end={
-                                  'dateTime' in event.end
-                                    ? DateTime.fromISO(
-                                        event.end.dateTime,
-                                      ).toLocaleString(DateTime.TIME_24_SIMPLE)
-                                    : DateTime.fromISO(
-                                        event.end.date,
-                                      ).toLocaleString(DateTime.TIME_24_SIMPLE)
-                                }
-                              />
-                              <EventPopover
-                                title={event.summary}
-                                start={
-                                  'dateTime' in event.start
-                                    ? DateTime.fromISO(
-                                        event.start.dateTime,
-                                      ).toLocaleString(DateTime.TIME_24_SIMPLE)
-                                    : DateTime.fromISO(
-                                        event.start.date,
-                                      ).toLocaleString(DateTime.TIME_24_SIMPLE)
-                                }
-                                end={
-                                  'dateTime' in event.end
-                                    ? DateTime.fromISO(
-                                        event.end.dateTime,
-                                      ).toLocaleString(DateTime.TIME_24_SIMPLE)
-                                    : DateTime.fromISO(
-                                        event.end.date,
-                                      ).toLocaleString(DateTime.TIME_24_SIMPLE)
-                                }
-                                description={cleanDescription(
-                                  event.description,
-                                )}
-                                htmlLink={event.htmlLink}
-                                location={event.location}
-                                addToCalUrl={buildAddToCalendarLink(event)}
+                      <Box
+                        as="h3"
+                        fontSize="sm"
+                        fontFamily="body"
+                        fontWeight={400}
+                        className="calendar__day--title"
+                        mb={2}
+                        pl={0}
+                      >
+                        {DateTime.fromISO(day.date)
+                          .toLocaleString({ weekday: 'long' })
+                          .toUpperCase()}{' '}
+                        •{' '}
+                        {DateTime.fromISO(day.date)
+                          .toLocaleString({
+                            month: 'long',
+                            day: 'numeric',
+                            year: 'numeric',
+                          })
+                          .toUpperCase()}
+                      </Box>
+                      <VStack
+                        as="ol"
+                        className="calendar__day--events"
+                        ml={0}
+                        width="100%"
+                        sx={{
+                          listStyle: 'none',
+                        }}
+                      >
+                        {day &&
+                          day.events?.map((event) => (
+                            <Box
+                              as="li"
+                              position="relative"
+                              className="calendar__day--event"
+                              width="100%"
+                              px={5}
+                              py={2}
+                              backgroundColor="blackAlpha.500"
+                              borderRadius="md"
+                              overflow="hidden"
+                              role="group"
+                              _groupHover={{
+                                backgroundColor: 'blackAlpha.600',
+                              }}
+                            >
+                              <Popover colorScheme="purple">
+                                <Event
+                                  title={event.summary}
+                                  start={
+                                    'dateTime' in event.start
+                                      ? DateTime.fromISO(
+                                          event.start.dateTime,
+                                        ).toLocaleString(
+                                          DateTime.TIME_24_SIMPLE,
+                                        )
+                                      : DateTime.fromISO(
+                                          event.start.date,
+                                        ).toLocaleString(
+                                          DateTime.TIME_24_SIMPLE,
+                                        )
+                                  }
+                                  end={
+                                    'dateTime' in event.end
+                                      ? DateTime.fromISO(
+                                          event.end.dateTime,
+                                        ).toLocaleString(
+                                          DateTime.TIME_24_SIMPLE,
+                                        )
+                                      : DateTime.fromISO(
+                                          event.end.date,
+                                        ).toLocaleString(
+                                          DateTime.TIME_24_SIMPLE,
+                                        )
+                                  }
+                                />
+
+                                <EventPopover
+                                  title={event.summary}
+                                  start={
+                                    'dateTime' in event.start
+                                      ? DateTime.fromISO(
+                                          event.start.dateTime,
+                                        ).toLocaleString(
+                                          DateTime.TIME_24_SIMPLE,
+                                        )
+                                      : DateTime.fromISO(
+                                          event.start.date,
+                                        ).toLocaleString(
+                                          DateTime.TIME_24_SIMPLE,
+                                        )
+                                  }
+                                  end={
+                                    'dateTime' in event.end
+                                      ? DateTime.fromISO(
+                                          event.end.dateTime,
+                                        ).toLocaleString(
+                                          DateTime.TIME_24_SIMPLE,
+                                        )
+                                      : DateTime.fromISO(
+                                          event.end.date,
+                                        ).toLocaleString(
+                                          DateTime.TIME_24_SIMPLE,
+                                        )
+                                  }
+                                  description={cleanDescription(
+                                    event.description,
+                                  )}
+                                  htmlLink={event.htmlLink}
+                                  location={event.location}
+                                  addToCalUrl={buildAddToCalendarLink(event)}
+                                />
+                              </Popover>
+                              <Box
+                                position="absolute"
+                                inset={0}
+                                _groupHover={{
+                                  backgroundColor: 'blackAlpha.600',
+                                }}
+                                transition="all 0.1s ease-in-out"
+                                zIndex={-1}
                               />
-                            </Popover>
-                          </Box>
-                        ))}
-                    </VStack>
-                  </Box>
-                ))}
+                            </Box>
+                          ))}
+                      </VStack>
+                    </Box>
+                  );
+                })}
             </VStack>
           </Box>
         </Box>
@@ -329,7 +361,7 @@ interface EventType {
 
 const Event = ({ title, start, end }: EventType) => (
   <PopoverTrigger>
-    <Box tabIndex={0} role="button" aria-label="Event summary">
+    <Box tabIndex={0} role="button" aria-label="Event summary" zIndex={10}>
       <Text as="h4" fontSize="md" fontFamily="body" fontWeight="bold" mb={0}>
         {title}
       </Text>
diff --git a/packages/web/lib/hooks/useCalendar.ts b/packages/web/lib/hooks/useCalendar.ts
index 8021b52e8..2e7af59a2 100644
--- a/packages/web/lib/hooks/useCalendar.ts
+++ b/packages/web/lib/hooks/useCalendar.ts
@@ -1,7 +1,7 @@
 import { Maybe } from '@metafam/utils';
 import { CONFIG } from 'config';
 import { DateTime } from 'luxon';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 type GoogleCalEventDateTimeType =
   | {
@@ -46,6 +46,13 @@ type GroupedEventsType = {
   events: GoogleCalEventType[];
 };
 
+type CalendarDataType = {
+  events: Maybe<GoogleCalEventType[]>;
+  days: GroupedEventsType[];
+  timeZone: TimeZonesType;
+  totalEvents: number;
+};
+
 /**
  * useCalendar hook to call the metagame calendar backend in `/api/events` and return calendar data
  * @param clamp restricts number of events to show
@@ -53,16 +60,16 @@ type GroupedEventsType = {
  */
 export const useCalendar = (clamp?: number): UseCalendarReturnTypes => {
   const { metagameCalendarBackend, calendarId } = CONFIG;
-  const [events, setEvents] = useState<Maybe<GoogleCalEventType[]>>(null);
-  const [timeZone, setTimeZone] = useState<TimeZonesType>({
-    users: '',
-    calendar: 'Europe/Belgrade',
+  const [calendarData, setCalendarData] = useState<CalendarDataType>({
+    events: null,
+    days: [],
+    timeZone: {
+      users: '',
+      calendar: 'Europe/Belgrade',
+    },
+    totalEvents: 0,
   });
   const [limit, setLimit] = useState<number>(clamp || 0);
-  const [totalEvents, setTotalEvents] = useState<number>(0);
-  const [eventsGroupedByDay, setEventsGroupedByDay] = useState<
-    GroupedEventsType[]
-  >([]);
   const [fetching, setFetching] = useState(false);
   const [error, setError] = useState<Error | undefined>(undefined);
   const calendarICS = `https://calendar.google.com/calendar/ical/${calendarId}%40group.calendar.google.com/public/basic.ics`;
@@ -93,59 +100,59 @@ export const useCalendar = (clamp?: number): UseCalendarReturnTypes => {
     return href;
   };
 
-  useEffect(() => {
-    const fetchCalendarData = async (): Promise<void> => {
-      try {
-        setFetching(true);
-
-        const res = await fetch(metagameCalendarBackend);
-        const data = await res.json();
-        const { days, events: fetchedEvents } = data;
-
-        if (res.status !== 200 || !data) {
-          throw new Error('Error fetching data');
-        }
-
-        setTotalEvents(fetchedEvents.items.length);
-
-        const items = fetchedEvents.items.map(
-          (item: GoogleCalEventType) => item,
-        );
-        const usersTimeZone =
-          DateTime.local().offsetNameShort || fetchedEvents.timeZone;
-        setEvents(items);
-        const groupedEvents = days;
-        setEventsGroupedByDay(groupedEvents);
-        setTimeZone({ users: usersTimeZone, calendar: fetchedEvents.timeZone });
-        setError(undefined);
-      } catch (err) {
-        console.error(err);
-        setError(err as Error);
-      } finally {
-        setFetching(false);
+  const fetchCalendarData = useCallback(async (): Promise<void> => {
+    try {
+      if (calendarData.days.length > 0) return;
+      setFetching(true);
+
+      const res = await fetch(metagameCalendarBackend);
+      const data = await res.json();
+      const { days, events: fetchedEvents } = data;
+
+      if (res.status !== 200 || !data) {
+        throw new Error('Error fetching data');
       }
-    };
 
-    if (events) {
+      const usersTimeZone =
+        DateTime.local().offsetNameShort || fetchedEvents.timeZone;
+      const calValues: CalendarDataType = {
+        events: fetchedEvents.items,
+        days,
+        timeZone: { users: usersTimeZone, calendar: fetchedEvents.timeZone },
+        totalEvents: fetchedEvents.items.length,
+      };
+      setCalendarData(calValues);
+
+      setError(undefined);
+    } catch (err) {
+      console.error(err);
+      setError(err as Error);
+    } finally {
+      setFetching(false);
+    }
+  }, [metagameCalendarBackend, calendarData]);
+
+  useEffect(() => {
+    if (calendarData.days.length > 0) {
       setFetching(false);
       return;
     }
 
     fetchCalendarData();
-  }, [metagameCalendarBackend, events]);
+  }, [metagameCalendarBackend, calendarData, fetchCalendarData]);
 
   if (error) {
     console.error('useCalendar error', error);
   }
 
   return {
-    events,
-    timeZone,
+    events: calendarData.events,
+    timeZone: calendarData.timeZone,
     fetching,
     error,
     ics: calendarICS,
-    eventsGroupedByDay,
-    totalEvents,
+    eventsGroupedByDay: calendarData.days,
+    totalEvents: calendarData.totalEvents,
     cleanDescription,
     buildAddToCalendarLink,
     limit,
diff --git a/packages/web/pages/_app.tsx b/packages/web/pages/_app.tsx
index a60a41117..e264c56c2 100644
--- a/packages/web/pages/_app.tsx
+++ b/packages/web/pages/_app.tsx
@@ -18,15 +18,20 @@ import PlausibleProvider from 'next-plausible';
 import { WithUrqlProps } from 'next-urql';
 import React from 'react';
 
-const { userbackToken, honeybadgerAPIKey } = CONFIG;
+const { userbackToken, honeybadgerAPIKey, gaId } = CONFIG;
 
-const Analytics: React.FC = () =>
-  !CONFIG.gaId ? null : (
+const Analytics: React.FC = () => {
+  // console.log('CONFIG', gaId);
+
+  if (!gaId) {
+    return null;
+  }
+  return (
     <>
       <script
         async
         defer
-        src={`https://www.googletagmanager.com/gtag/js?id=${CONFIG.gaId}`}
+        src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
       />
       <script
         type="text/javascript"
@@ -37,12 +42,13 @@ const Analytics: React.FC = () =>
             window.dataLayer = window.dataLayer || [];
             function gtag() { dataLayer.push(arguments) }
             gtag('js', new Date());
-            gtag('config', '${CONFIG.gaId}');
+            gtag('config', '${gaId}');
           `,
         }}
       />
     </>
   );
+};
 
 const App: React.FC<WithUrqlProps> = ({
   pageProps,
@@ -88,7 +94,7 @@ const App: React.FC<WithUrqlProps> = ({
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>MetaGame</title>
-        {CONFIG.appEnv === 'production' && <Analytics />}
+        <Analytics />
       </Head>
       <Web3ContextProvider {...{ resetUrqlClient }}>
         <ComposeDBContextProvider>
diff --git a/packages/web/pages/api/events.ts b/packages/web/pages/api/events.ts
index 79d47e4df..5ee26cad3 100644
--- a/packages/web/pages/api/events.ts
+++ b/packages/web/pages/api/events.ts
@@ -1,3 +1,4 @@
+import { CONFIG } from 'config';
 import { calendar_v3, google } from 'googleapis';
 import { DateTime } from 'luxon';
 import { NextApiRequest, NextApiResponse } from 'next';
@@ -27,28 +28,38 @@ export type GoogleCalEventType = {
   htmlLink: string;
   location: string;
 };
+export const cleanDescription = (desc: string): string =>
+  desc ? desc.replace(/(\+\+\+).*(\+\+\+)/, '') : desc;
 
 export default async (
   req: NextApiRequest,
   res: NextApiResponse,
 ): Promise<void> => {
+  const { host } = req.headers;
+  const { publicURL } = CONFIG;
+  const publicHost = publicURL?.replace('https://', '').replace('http://', '');
   if (req.method === 'GET') {
     const calId = options.CALENDAR_ID || '';
     const calendarId = `${calId}@group.calendar.google.com`;
 
+    // strip out the +++cover+++ from the description
+
     const groupEventsByDay = (items: GoogleCalEventType[]) => {
       const groupedEvents = items.reduce((acc, event) => {
         // console.log('event', {acc, event});
 
         const start =
           'dateTime' in event.start
-            ? DateTime.fromISO(event.start.dateTime)
-            : DateTime.fromISO(event.start.date);
-        const date = `${start}`;
-        if (!acc[date]) {
-          acc[date] = [];
+            ? DateTime.fromISO(event.start.dateTime, {
+                zone: event.start.timeZone,
+              }).toLocal()
+            : DateTime.fromISO(event.start.date).toLocal();
+
+        const dateKey = start.toFormat('yyyy-MM-dd');
+        if (!acc[dateKey]) {
+          acc[dateKey] = [];
         }
-        acc[date].push(event);
+        acc[dateKey].push(event);
         return acc;
       }, {} as Record<string, GoogleCalEventType[]>);
 
@@ -64,6 +75,19 @@ export default async (
       res.status(405).end(); // Method Not Allowed
       return;
     }
+    if (host !== publicHost) {
+      res.status(403).end(); // Forbidden
+      return;
+    }
+    if (!options.PRIVATE_KEY || !options.CLIENT_EMAIL) {
+      res.status(500).json({ error: 'Missing Google Cal Credentials' });
+      return;
+    }
+    if (!calendarId) {
+      res.status(500).json({ error: 'Missing Google Cal Calendar ID' });
+      return;
+    }
+
     const auth = new google.auth.JWT(
       options.CLIENT_EMAIL,
       undefined,
@@ -84,6 +108,7 @@ export default async (
       const result = await calendar.events.list(params);
       const events = result.data;
       const days = groupEventsByDay(events.items as GoogleCalEventType[]);
+
       const calData = { events, days };
 
       res.status(200).json(calData);