From d5c1b56c753e87255a12fe8a226980d304cce432 Mon Sep 17 00:00:00 2001
From: Elara Liu <40444637+ZL-Asica@users.noreply.github.com>
Date: Fri, 6 Dec 2024 10:49:41 -0600
Subject: [PATCH] feat: add exporting all calendar events (#29) (#31)

Reverts 392-f24/OpenHands#29

---------

Co-authored-by: chip <49256163+chipanyanwu@users.noreply.github.com>
---
 src/components/Schedule/index.tsx | 24 +++++++---
 src/utils/generateICSFile.ts      | 78 ++++++++++++-------------------
 2 files changed, 47 insertions(+), 55 deletions(-)

diff --git a/src/components/Schedule/index.tsx b/src/components/Schedule/index.tsx
index f4e54cd..756bfe2 100644
--- a/src/components/Schedule/index.tsx
+++ b/src/components/Schedule/index.tsx
@@ -71,25 +71,35 @@ const ScheduleBase = ({ events, title, description }: ScheduleBaseProps) => {
         setSelectedDate={setSelectedDate}
       />
 
-      <Box mt={2}>
+      <>
         <Box
           sx={{
             display: 'flex',
             justifyContent: 'space-between',
             alignItems: 'center',
             marginBottom: '1rem',
+            flexDirection: 'column',
+            gap: '0.5rem',
           }}
         >
-          <Typography variant='h6'>
-            Events for {selectedDate?.format('MMMM D, YYYY')}:
-          </Typography>
           <Button
             onClick={() => generateCombinedICSFile(events)}
             variant='contained'
+            sx={{
+              p: '0.5rem 1.5rem',
+              display: 'flex',
+              alignItems: 'center',
+            }}
           >
-            <FileDownload sx={{ marginRight: '0.25rem' }} />
-            Export All Events to Calendar
+            <FileDownload sx={{ marginRight: '0.5rem' }} />
+            Export All to Calendar
           </Button>
+          <Typography
+            variant='h6'
+            textAlign='center'
+          >
+            Events for {selectedDate?.format('MMMM D, YYYY')}:
+          </Typography>
         </Box>
 
         {eventsForSelectedDate.length > 0 ? (
@@ -154,7 +164,7 @@ const ScheduleBase = ({ events, title, description }: ScheduleBaseProps) => {
             No events for this date.
           </Typography>
         )}
-      </Box>
+      </>
 
       {/* Event Details Modal */}
       <Dialog
diff --git a/src/utils/generateICSFile.ts b/src/utils/generateICSFile.ts
index 9837298..eacdc1b 100644
--- a/src/utils/generateICSFile.ts
+++ b/src/utils/generateICSFile.ts
@@ -1,4 +1,4 @@
-const formatDate = (dateString: string) => {
+const formatDate = (dateString: string): string => {
   const date = new Date(dateString);
   return date
     .toISOString()
@@ -6,12 +6,20 @@ const formatDate = (dateString: string) => {
     .replace(/\.\d{3}/, '');
 };
 
-const createICSContent = (event: DonationEvent) => {
+const downloadICSFile = (fileName: string, content: string): void => {
+  const blob = new Blob([content], { type: 'text/calendar;charset=utf-8' });
+  const link = document.createElement('a');
+  link.href = globalThis.URL.createObjectURL(blob);
+  link.setAttribute('download', fileName);
+  document.body.append(link);
+  link.click();
+  link.remove();
+  globalThis.URL.revokeObjectURL(link.href); // Clean up
+};
+
+const createICSContent = (event: DonationEvent): string => {
   const endTime = new Date(new Date(event.date).getTime() + 60 * 60 * 1000);
   return [
-    'BEGIN:VCALENDAR',
-    'VERSION:2.0',
-    'PRODID:-//OpenHands//Donation Event//EN',
     'BEGIN:VEVENT',
     `DTSTART:${formatDate(event.date)}`,
     `DTEND:${formatDate(endTime.toISOString())}`,
@@ -21,62 +29,36 @@ const createICSContent = (event: DonationEvent) => {
       .join(', ')}`,
     `UID:${event.eventId}-${formatDate(event.date)}`,
     'END:VEVENT',
-    'END:VCALENDAR',
   ].join('\r\n');
 };
 
-const generateICSFile = (event: DonationEvent) => {
-  const icsContent = createICSContent(event);
-  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-event-${event.eventId}.ics`
-  );
-  document.body.append(link);
-  link.click();
-  link.remove();
-  globalThis.URL.revokeObjectURL(link.href);
-};
-
 const createCombinedICSContent = (events: DonationEvent[]): string => {
+  const eventContents = events
+    .map((event) => createICSContent(event))
+    .join('\r\n');
   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',
-      ];
-    }),
+    eventContents,
+    'END:VCALENDAR',
+  ].join('\r\n');
+};
+
+const generateICSFile = (event: DonationEvent): void => {
+  const icsContent = [
+    'BEGIN:VCALENDAR',
+    'VERSION:2.0',
+    'PRODID:-//OpenHands//Donation Event//EN',
+    createICSContent(event),
     'END:VCALENDAR',
   ].join('\r\n');
+  downloadICSFile(`openhands-donation-event-${event.eventId}.ics`, icsContent);
 };
 
-const generateCombinedICSFile = (events: DonationEvent[]) => {
+const generateCombinedICSFile = (events: DonationEvent[]): void => {
   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
+  downloadICSFile('openhands-donation-events.ics', icsContent);
 };
 
 export { generateICSFile, generateCombinedICSFile };