feat: use downloadBlob util (#186)

* feat: use downloadBlob util

* chore: lint

* fix: revert saveCalAsPng

* feat: refactor downloadBlob

* chore: remove comments

* chore: lint and remove extra async

* refactor: cleanup

---------

Co-authored-by: Razboy20 <razboy20@gmail.com>

src/shared/types/MIMEType.ts

@@ -8,7 +8,10 @@ const MIMEType = {
     IMAGE: 'image/*',
     AUDIO: 'audio/*',
     VIDEO: 'video/*',
+    CALENDAR: 'text/calendar',
     ANY: '*/*',
 } as const satisfies Record<string, string>;
 
+export type MIMETypeKey = keyof typeof MIMEType;
+
 export default MIMEType;

src/shared/util/downloadBlob.ts

@@ -1,11 +1,16 @@
+import type { MIMETypeKey } from '../types/MIMEType';
+import MIMEType from '../types/MIMEType';
+
 /**
- * Downloads a blob as a file.
+ * Downloads a blob by creating a temporary URL and triggering a download.
- * @param {Blob} blob - The blob to download.
+ * @param blobPart The blob data to be downloaded.
- * @param {string} fileName - The name of the file to be downloaded.
+ * @param type The MIME type of the blob.
- * @returns {Promise<void>} - A promise that resolves when the download is complete.
+ * @param fileName The name of the file to be downloaded.
+ * @returns A promise that resolves when the download is successful, or rejects with an error if the download fails.
  */
-export default function downloadBlob(blob: Blob, fileName: string): Promise<void> {
+export function downloadBlob(blobPart: BlobPart, type: MIMETypeKey, fileName: string): Promise<void> {
     return new Promise((resolve, reject) => {
+        const blob: Blob = new Blob([blobPart], { type: MIMEType[type] });
         const url = URL.createObjectURL(blob);
         const link = document.createElement('a');
 

src/views/components/calendar/utils.ts

@@ -1,5 +1,6 @@
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
 import type { UserSchedule } from '@shared/types/UserSchedule';
+import { downloadBlob } from '@shared/util/downloadBlob';
 import type { Serialized } from 'chrome-extension-toolkit';
 import { toPng } from 'html-to-image';
 
@@ -37,22 +38,6 @@ export const formatToHHMMSS = (minutes: number) => {
     return `${hours}${mins}00`;
 };
 
-/**
- * Downloads an ICS file with the given data.
- *
- * @param data - The data to be included in the ICS file.
- */
-const downloadICS = (data: BlobPart) => {
-    const blob: Blob = new Blob([data], { type: 'text/calendar' });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = 'schedule.ics';
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-};
-
 /**
  * Saves the current schedule as a calendar file in the iCalendar format (ICS).
  * Fetches the current active schedule and converts it into an ICS string.
@@ -98,11 +83,13 @@ export const saveAsCal = async () => {
 
     icsString += 'END:VCALENDAR';
 
-    downloadICS(icsString);
+    downloadBlob(icsString, 'CALENDAR', 'schedule.ics');
 };
 
 /**
  * Saves the calendar as a PNG image.
+ *
+ * @param calendarRef - The reference to the calendar component.
  */
 export const saveCalAsPng = (calendarRef: React.RefObject<HTMLDivElement>) => {
     if (calendarRef.current) {