[#] added alert when importing events with error

src/components/Calendar/Calendar.tsx

@@ -13,6 +13,8 @@ import CalendarPopover from "../../features/Calendars/CalendarModal";
 import { CalendarEvent } from "../../features/Events/EventsTypes";
 import CalendarSelection from "./CalendarSelection";
 import { getCalendarDetailAsync } from "../../features/Calendars/CalendarSlice";
+import ImportAlert from "../../features/Events/ImportAlert";
+import { Alert, Button, Collapse } from "@mui/material";
 
 export default function CalendarApp() {
   const calendarRef = useRef<CalendarApi | null>(null);
@@ -22,10 +24,10 @@ export default function CalendarApp() {
   const calendars = useAppSelector((state) => state.calendars.list);
   const pending = useAppSelector((state) => state.calendars.pending);
   const userId = useAppSelector((state) => state.user.userData.openpaasId);
+
   const [selectedCalendars, setSelectedCalendars] = useState<string[]>(
     Object.keys(calendars).filter((id) => id.split("/")[0] === userId)
   );
-
   const fetchedIdsRef = useRef<Set<string>>(new Set());
 
   let filteredEvents: CalendarEvent[] = [];
@@ -131,6 +133,7 @@ export default function CalendarApp() {
         <button onClick={() => setAnchorElCal(document.body)}>+</button>
       </div>
       <div className="calendar">
+        <ImportAlert />
         <FullCalendar
           ref={(ref) => {
             if (ref) {

src/components/Calendar/CalendarSelection.tsx

@@ -13,7 +13,6 @@ export default function CalendarSelection({
   const calendars = useAppSelector((state) => state.calendars.list);
 
   const handleCalendarToggle = (name: string) => {
-
     setSelectedCalendars((prev: string[]) =>
       prev.includes(name) ? prev.filter((n) => n !== name) : [...prev, name]
     );

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;