[#340] show declined event in settings (#398)

* [#340] show declined event in settings


Co-authored-by: Camille Moussu <cmoussu@linagora.com>

src/features/Settings/SettingsPage.tsx

@@ -25,6 +25,7 @@ import {
   setLanguage as setSettingsLanguage,
   setTimeZone as setSettingsTimeZone,
   setIsBrowserDefaultTimeZone,
+  setHideDeclinedEvents,
 } from "./SettingsSlice";
 import {
   updateUserConfigurationsAsync,
@@ -68,6 +69,11 @@ export default function SettingsPage() {
   const alarmEmailsEnabled = useAppSelector(
     (state) => state.user?.alarmEmailsEnabled ?? true
   );
+
+  const hideDeclinedEvents = useAppSelector(
+    (state) => state.settings?.hideDeclinedEvents
+  );
+
   const [activeNavItem, setActiveNavItem] =
     useState<SidebarNavItem>("settings");
   const [activeSettingsSubTab, setActiveSettingsSubTab] =
@@ -75,6 +81,8 @@ export default function SettingsPage() {
   const [languageErrorOpen, setLanguageErrorOpen] = useState(false);
   const [timeZoneErrorOpen, setTimeZoneErrorOpen] = useState(false);
   const [alarmEmailsErrorOpen, setAlarmEmailsErrorOpen] = useState(false);
+  const [hideDeclinedEventsErrorOpen, setHideDeclinedEventsErrorOpen] =
+    useState(false);
 
   const handleBackClick = () => {
     dispatch(setView("calendar"));
@@ -168,6 +176,27 @@ export default function SettingsPage() {
     setTimeZoneErrorOpen(false);
   };
 
+  const handleHideDeclinedEvents = (doHideDeclinedEvents: boolean) => {
+    // Optimistic update - update UI immediately
+    dispatch(setHideDeclinedEvents(doHideDeclinedEvents));
+
+    // Call API in background, don't wait for it
+    dispatch(
+      updateUserConfigurationsAsync({
+        hideDeclinedEvents: doHideDeclinedEvents,
+      })
+    )
+      .unwrap()
+      .catch((error) => {
+        console.error("Failed to update hide declined event:", error);
+        dispatch(setHideDeclinedEvents(!doHideDeclinedEvents));
+        setHideDeclinedEventsErrorOpen(true);
+      });
+  };
+  const handleHideDeclinedEventsErrorClose = () => {
+    setHideDeclinedEventsErrorOpen(false);
+  };
+
   const handleAlarmEmailsToggle = (
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
@@ -315,6 +344,38 @@ export default function SettingsPage() {
                       </FormControl>
                     </Box>
                   </Box>
+                  <Box>
+                    <Typography variant="h6" sx={{ mb: 1 }}>
+                      {t("settings.calAndEvent")}
+                    </Typography>
+                    <Box
+                      sx={{
+                        mb: 6,
+                      }}
+                    >
+                      <FormControl size="small" sx={{ minWidth: 500 }}>
+                        <FormControlLabel
+                          control={
+                            <Switch
+                              checked={Boolean(!hideDeclinedEvents)}
+                              onChange={() =>
+                                handleHideDeclinedEvents(!hideDeclinedEvents)
+                              }
+                              aria-label={t("settings.showDeclinedEvent")}
+                            />
+                          }
+                          label={t("settings.showDeclinedEvent")}
+                          labelPlacement="start"
+                          sx={{
+                            minWidth: 400,
+                            justifyContent: "space-between",
+                            marginLeft: 0,
+                            mb: 2,
+                          }}
+                        />
+                      </FormControl>
+                    </Box>
+                  </Box>
                 </Box>
               )}
               {activeSettingsSubTab === "notifications" && (
@@ -381,6 +442,13 @@ export default function SettingsPage() {
           "Failed to update email notifications setting"
         }
       />
+
+      <Snackbar
+        open={hideDeclinedEventsErrorOpen}
+        autoHideDuration={4000}
+        onClose={handleHideDeclinedEventsErrorClose}
+        message={t("settings.hideDeclinedEventsUpdateError")}
+      />
     </main>
   );
 }

src/features/Settings/SettingsSlice.ts

@@ -6,6 +6,7 @@ export interface SettingsState {
   language: string;
   timeZone: string | null; // Allow null to represent browser default
   isBrowserDefaultTimeZone: boolean;
+  hideDeclinedEvents: boolean | null;
   view: "calendar" | "settings" | "search";
 }
 
@@ -21,6 +22,7 @@ const initialState: SettingsState = {
   language: defaultLang,
   timeZone: defaultTimeZone,
   isBrowserDefaultTimeZone: defaultTimeZone === null,
+  hideDeclinedEvents: null,
   view: "calendar",
 };
 
@@ -39,6 +41,9 @@ export const settingsSlice = createSlice({
     setIsBrowserDefaultTimeZone: (state, action: PayloadAction<boolean>) => {
       state.isBrowserDefaultTimeZone = action.payload;
     },
+    setHideDeclinedEvents: (state, action: PayloadAction<boolean | null>) => {
+      state.hideDeclinedEvents = action.payload;
+    },
     setView: (
       state,
       action: PayloadAction<"calendar" | "settings" | "search">
@@ -65,6 +70,16 @@ export const settingsSlice = createSlice({
         state.isBrowserDefaultTimeZone = true;
         localStorage.setItem("timeZone", browserDefaultTimeZone);
       }
+      const esnCalendarModule = action.payload.configurations?.modules?.find(
+        (module: any) => module.name === "linagora.esn.calendar"
+      );
+      const hideDeclinedEventsConfig = esnCalendarModule?.configurations?.find(
+        (config: any) => config.name === "hideDeclinedEvents"
+      );
+      state.hideDeclinedEvents =
+        typeof hideDeclinedEventsConfig?.value === "boolean"
+          ? hideDeclinedEventsConfig.value
+          : null;
     });
   },
 });
@@ -74,5 +89,6 @@ export const {
   setTimeZone,
   setView,
   setIsBrowserDefaultTimeZone,
+  setHideDeclinedEvents,
 } = settingsSlice.actions;
 export default settingsSlice.reducer;

src/features/User/userAPI.ts

@@ -40,6 +40,7 @@ export interface UserConfigurationUpdates {
   timezone?: string | null;
   previousConfig?: Record<string, any>;
   alarmEmails?: boolean;
+  hideDeclinedEvents?: boolean;
 }
 
 export async function updateUserConfigurations(
@@ -47,6 +48,7 @@ export async function updateUserConfigurations(
 ): Promise<Response | { status: number }> {
   const coreConfigs: Array<{ name: string; value: any }> = [];
   const calendarConfigs: Array<{ name: string; value: any }> = [];
+  const esnCalendarConfigs: Array<{ name: string; value: any }> = [];
 
   if (updates.language !== undefined) {
     coreConfigs.push({ name: "language", value: updates.language });
@@ -69,6 +71,12 @@ export async function updateUserConfigurations(
       value: updates.alarmEmails,
     });
   }
+  if (updates.hideDeclinedEvents !== undefined) {
+    esnCalendarConfigs.push({
+      name: "hideDeclinedEvents",
+      value: updates.hideDeclinedEvents,
+    });
+  }
 
   const modules: Array<{
     name: string;
@@ -88,6 +96,12 @@ export async function updateUserConfigurations(
       configurations: calendarConfigs,
     });
   }
+  if (esnCalendarConfigs.length > 0) {
+    modules.push({
+      name: "linagora.esn.calendar",
+      configurations: esnCalendarConfigs,
+    });
+  }
 
   if (modules.length === 0) {
     return Promise.resolve({ status: 204 });