feat: add exporting all calendar events (#29)

Added "Export All Events to Calendar" button to Schedule page
392-f24 · Dec 6, 2024 · 29e9f56 · 29e9f56
1 parent 6037b31
commit 29e9f56
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 15 deletions.
diff --git a/src/components/Schedule/index.tsx b/src/components/Schedule/index.tsx
@@ -9,13 +9,16 @@ import {
   Button,
   IconButton,
 } from '@mui/material';
-import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
+import { FileDownload, CalendarMonth } from '@mui/icons-material';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 
 import EventsCalendar from './EventsCalendar';
 
-import generateICSFile from '@/utils/generateICSFile';
+import {
+  generateICSFile,
+  generateCombinedICSFile,
+} from '@/utils/generateICSFile';
 
 interface ScheduleBaseProps {
   events: DonationEvent[];
@@ -49,6 +52,7 @@ const ScheduleBase = ({ events, title, description }: ScheduleBaseProps) => {
       <Typography
         variant='h4'
         mb={2}
+        mt={4}
         textAlign='center'
       >
         {title}
@@ -68,12 +72,26 @@ const ScheduleBase = ({ events, title, description }: ScheduleBaseProps) => {
       />
 
       <Box mt={2}>
-        <Typography
-          variant='h6'
-          mb={1}
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginBottom: '1rem',
+          }}
         >
-          Events for {selectedDate?.format('MMMM D, YYYY')}:
-        </Typography>
+          <Typography variant='h6'>
+            Events for {selectedDate?.format('MMMM D, YYYY')}:
+          </Typography>
+          <Button
+            onClick={() => generateCombinedICSFile(events)}
+            variant='contained'
+          >
+            <FileDownload sx={{ marginRight: '0.25rem' }} />
+            Export All Events to Calendar
+          </Button>
+        </Box>
+
         {eventsForSelectedDate.length > 0 ? (
           eventsForSelectedDate.map((event_) => (
             <Box
@@ -123,8 +141,8 @@ const ScheduleBase = ({ events, title, description }: ScheduleBaseProps) => {
                 onClick={() => generateICSFile(event_)}
                 sx={{ fontSize: 12, display: 'flex', flexDirection: 'column' }}
               >
-                <CalendarMonthIcon fontSize='large' />
-                Add to Calendar
+                <CalendarMonth fontSize='large' />
+                Export to Calendar
               </IconButton>
             </Box>
           ))

diff --git a/src/utils/generateICSFile.ts b/src/utils/generateICSFile.ts
@@ -1,10 +1,9 @@
 const formatDate = (dateString: string) => {
   const date = new Date(dateString);
-  // Replace colons, dashes, and milliseconds
   return date
     .toISOString()
-    .replace(/[:-]/g, '') // Remove colons and dashes
-    .replace(/\.\d{3}/, ''); // Remove milliseconds
+    .replace(/[:-]/g, '')
+    .replace(/\.\d{3}/, '');
 };
 
 const createICSContent = (event: DonationEvent) => {
@@ -23,7 +22,7 @@ const createICSContent = (event: DonationEvent) => {
     `UID:${event.eventId}-${formatDate(event.date)}`,
     'END:VEVENT',
     'END:VCALENDAR',
-  ].join('\r\n'); // use CRLF for better compatibility
+  ].join('\r\n');
 };
 
 const generateICSFile = (event: DonationEvent) => {
@@ -33,11 +32,51 @@ const generateICSFile = (event: DonationEvent) => {
   });
   const link = document.createElement('a');
   link.href = globalThis.URL.createObjectURL(blob);
-  link.setAttribute('download', `donation-event-${event.eventId}.ics`);
+  link.setAttribute(
+    'download',
+    `openhands-donation-event-${event.eventId}.ics`
+  );
+  document.body.append(link);
+  link.click();
+  link.remove();
+  globalThis.URL.revokeObjectURL(link.href);
+};
+
+const createCombinedICSContent = (events: DonationEvent[]): string => {
+  return [
+    'BEGIN:VCALENDAR',
+    'VERSION:2.0',
+    'PRODID:-//OpenHands//Combined Donation Events//EN',
+    ...events.flatMap((event) => {
+      const endTime = new Date(new Date(event.date).getTime() + 60 * 60 * 1000);
+      return [
+        'BEGIN:VEVENT',
+        `DTSTART:${formatDate(event.date)}`,
+        `DTEND:${formatDate(endTime.toISOString())}`,
+        `SUMMARY:${event.title}`,
+        `DESCRIPTION:Items: ${event.supplies
+          .map((supply) => `${supply.itemName} (${supply.quantityProvided})`)
+          .join(', ')}`,
+        `UID:${event.eventId}-${formatDate(event.date)}`,
+        'END:VEVENT',
+      ];
+    }),
+    'END:VCALENDAR',
+  ].join('\r\n');
+};
+
+const generateCombinedICSFile = (events: DonationEvent[]) => {
+  const icsContent = createCombinedICSContent(events);
+  const blob = new Blob([icsContent], {
+    type: 'text/calendar;charset=utf-8',
+  });
+  const link = document.createElement('a');
+  link.href = globalThis.URL.createObjectURL(blob);
+  link.setAttribute('download', 'openhands-donation-events.ics');
   document.body.append(link);
   link.click();
   link.remove();
   globalThis.URL.revokeObjectURL(link.href); // Clean up
 };
 
-export default generateICSFile;
+export { generateICSFile, generateCombinedICSFile };