[#] added alert when importing events with error

src/features/Calendars/CalendarSlice.ts

@@ -39,7 +39,7 @@ export const getCalendarDetailAsync = createAsyncThunk<
   const events: CalendarEvent[] = calendar._embedded["dav:item"].map(
     (eventdata: any) => {
       const datas = eventdata.data[2][0][1];
-      return parseCalendarEvent(datas, color);
+      return parseCalendarEvent(datas, color, calId);
     }
   );
 

src/features/Events/EventsTypes.ts

@@ -15,5 +15,6 @@ export interface CalendarEvent {
   stamp?: Date;
   sequence?: Number;
   color?: string;
-  allday?:Boolean
+  allday?: Boolean;
+  error?: string;
 }

src/features/Events/ImportAlert.tsx

@@ -0,0 +1,40 @@
+import { Alert, Collapse } from "@mui/material";
+import { useState } from "react";
+import { useAppSelector } from "../../app/hooks";
+
+export default function ImportAlert() {
+  const [visibleAlerts, setVisibleAlerts] = useState<Record<string, boolean>>(
+    {}
+  );
+  const calendars = useAppSelector((state) => state.calendars.list);
+
+  const toggleEventAlert = (eventId: string) => {
+    setVisibleAlerts((prev) => ({
+      ...prev,
+      [eventId]: false,
+    }));
+  };
+
+  return (
+    <>
+      {Object.keys(calendars).map((calendarId) =>
+        calendars[calendarId].events
+          .filter((event) => event.error)
+          .map((event) => {
+            const isVisible = visibleAlerts[event.uid] ?? true; // default to visible
+
+            return (
+              <Collapse in={isVisible} key={event.uid}>
+                <Alert
+                  severity="error"
+                  onClose={() => toggleEventAlert(event.uid)}
+                >
+                  {event.error}
+                </Alert>
+              </Collapse>
+            );
+          })
+      )}
+    </>
+  );
+}

src/features/Events/eventUtils.ts

@@ -5,7 +5,8 @@ type RawEntry = [string, Record<string, string>, string, any];
 
 export function parseCalendarEvent(
   data: RawEntry[],
-  color: string
+  color: string,
+  calendarid: string
 ): CalendarEvent {
   const event: Partial<CalendarEvent> = { color, attendee: [] };
 
@@ -64,7 +65,11 @@ export function parseCalendarEvent(
   }
 
   if (!event.uid || !event.start) {
-    throw new Error(`Missing required event fields`);
+    console.error(
+      `missing crucial event param in calendar ${calendarid} `,
+      data
+    );
+    event.error = `missing crucial event param in calendar ${calendarid} `;
   }
 
   return event as CalendarEvent;