feat(activities): add to calendar in upcoming events

Signed-off-by: Max Makaluk <70341920+FussuChalice@users.noreply.github.com>

Author: FussuChalice

package-lock.json

@@ -47,6 +47,7 @@
     "file-select-dialog": "^1.5.4",
     "firebase": "^12.8.0",
     "i18next": "^25.8.0",
+    "ics": "^3.8.1",
     "interweave": "^13.1.1",
     "jotai": "^2.17.0",
     "jszip": "^3.10.1",

package.json

@@ -0,0 +1,27 @@
+import Button from '@components/button';
+import { AddToCalendarProps } from './index.types';
+import { IconAddMonth } from '@components/icons';
+import { useAppTranslation } from '@hooks/index';
+import { Box } from '@mui/material';
+import useAddToCalendar from './useAddToCalendar';
+import IconLoading from '@components/icon_loading';
+
+const AddToCalendar = (props: AddToCalendarProps) => {
+  const { t } = useAppTranslation();
+  const { isProcessing, handleAddToCalendar } = useAddToCalendar(props);
+
+  return (
+    <Box className="upc-add-to-calendar-btn">
+      <Button
+        variant="small"
+        startIcon={isProcessing ? <IconLoading /> : <IconAddMonth />}
+        sx={{ width: '100%' }}
+        onClick={handleAddToCalendar}
+      >
+        {t('tr_addToCalendar')}
+      </Button>
+    </Box>
+  );
+};
+
+export default AddToCalendar;

src/features/activities/upcoming_events/add_to_calendar/index.tsx

@@ -0,0 +1,5 @@
+import { UpcomingEventType } from '@definition/upcoming_events';
+
+export type AddToCalendarProps = {
+  event: UpcomingEventType;
+};

src/features/activities/upcoming_events/add_to_calendar/index.types.ts

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { createEvent, EventAttributes } from 'ics';
+import { AddToCalendarProps } from './index.types';
+import {
+  UpcomingEventCategory,
+  UpcomingEventDuration,
+} from '@definition/upcoming_events';
+import { useAppTranslation } from '@hooks/index';
+import { decorationsForEvent } from '../decorations_for_event';
+import { displaySnackNotification } from '@services/states/app';
+import { getMessageByCode } from '@services/i18n/translation';
+import { saveAs } from 'file-saver';
+
+const useAddToCalendar = ({ event }: AddToCalendarProps) => {
+  const { t } = useAppTranslation();
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const eventDecoration =
+    event.event_data.category !== undefined &&
+    event.event_data.category < decorationsForEvent.length
+      ? decorationsForEvent[event.event_data.category]
+      : decorationsForEvent[decorationsForEvent.length - 1];
+
+  const handleAddToCalendar = () => {
+    if (isProcessing) return;
+
+    setIsProcessing(true);
+
+    const startDate = new Date(event.event_data.start);
+    const endDate = new Date(event.event_data.end);
+
+    const eventTitle =
+      event.event_data.category !== UpcomingEventCategory.Custom
+        ? t(eventDecoration.translationKey)
+        : event.event_data.custom;
+
+    const eventDetails: EventAttributes = {
+      title: eventTitle,
+      description: event.event_data.description,
+      start:
+        event.event_data.duration === UpcomingEventDuration.SingleDay
+          ? [
+              startDate.getFullYear(),
+              startDate.getMonth() + 1,
+              startDate.getDate(),
+              startDate.getHours(),
+              startDate.getMinutes(),
+            ]
+          : [
+              startDate.getFullYear(),
+              startDate.getMonth() + 1,
+              startDate.getDate(),
+            ],
+      end:
+        event.event_data.duration === UpcomingEventDuration.SingleDay
+          ? [
+              endDate.getFullYear(),
+              endDate.getMonth() + 1,
+              endDate.getDate(),
+              endDate.getHours(),
+              endDate.getMinutes(),
+            ]
+          : [
+              endDate.getFullYear(),
+              endDate.getMonth() + 1,
+              endDate.getDate() + 1,
+            ],
+    };
+
+    createEvent(eventDetails, (error, value) => {
+      if (error) {
+        console.error(error);
+
+        setIsProcessing(false);
+
+        displaySnackNotification({
+          header: getMessageByCode('error_app_generic-title'),
+          message: getMessageByCode(error.message),
+          severity: 'error',
+        });
+      } else {
+        const blob = new Blob([value], { type: 'text/calendar' });
+
+        const filename = `${event.event_uid}.ics`;
+
+        saveAs(blob, filename);
+      }
+      setIsProcessing(false);
+    });
+  };
+
+  return {
+    isProcessing,
+    handleAddToCalendar,
+  };
+};
+
+export default useAddToCalendar;

src/features/activities/upcoming_events/add_to_calendar/useAddToCalendar.tsx

@@ -14,15 +14,15 @@ import { UpcomingEventProps } from './index.types';
 import useUpcomingEvent from './useUpcomingEvent';
 import Divider from '@components/divider';
 import EditUpcomingEvent from '../edit_upcoming_event';
+import AddToCalendar from '../add_to_calendar';
 import Typography from '@components/typography';
 import UpcomingEventDate from '../upcoming_event_date';
 
 const UpcomingEvent = (props: UpcomingEventProps) => {
   const { t } = useAppTranslation();
 
   const { isAdmin } = useCurrentUser();
-
-  const { desktopUp, tabletUp } = useBreakpoints();
+  const { desktopUp, tabletUp, tablet600Up } = useBreakpoints();
 
   const {
     eventDecoration,
@@ -59,23 +59,42 @@ const UpcomingEvent = (props: UpcomingEventProps) => {
         display: 'flex',
         flexDirection: 'column',
         gap: '16px',
+
+        ...(desktopUp && {
+          '.upc-edit-btn': {
+            visibility: 'hidden',
+          },
+          '.upc-add-to-calendar-btn': {
+            visibility: 'hidden',
+          },
+          '&:hover': {
+            '.upc-edit-btn': {
+              visibility: 'visible',
+            },
+            '.upc-add-to-calendar-btn': {
+              visibility: 'visible',
+            },
+          },
+        }),
       }}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
       <Box
         sx={{
           display: 'flex',
-          flexDirection: 'row',
+          flexDirection: tablet600Up ? 'row' : 'column',
           gap: '16px',
+          justifyContent: 'space-between',
         }}
       >
         <Box
           sx={{
             display: 'flex',
             gap: '4px',
             flexDirection: 'column',
-            width: desktopUp ? 'auto' : '100%',
+            justifyContent: 'center',
+            width: tablet600Up ? 'auto' : '100%',
           }}
         >
           <Box
@@ -114,6 +133,7 @@ const UpcomingEvent = (props: UpcomingEventProps) => {
             {props.data.event_data.description}
           </Typography>
         </Box>
+        <AddToCalendar event={props.data} />
       </Box>
 
       <Divider color="var(--accent-200)" />
@@ -164,3 +184,4 @@ const UpcomingEvent = (props: UpcomingEventProps) => {
 };
 
 export default UpcomingEvent;
+