Move notification settings draft from React state to Redux (#204)

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: dkhalife <[email protected]>

Author: Copilot

src/store/userSlice.ts

@@ -12,6 +12,10 @@ export interface UserState {
   status: SyncState
   lastFetched: number | null
   error: string | null
+  draftNotificationSettings: {
+    provider: NotificationType
+    triggers: NotificationTriggerOptions
+  }
 }
 
 const initialState: UserState = {
@@ -31,6 +35,16 @@ const initialState: UserState = {
   status: 'loading',
   lastFetched: null,
   error: null,
+  draftNotificationSettings: {
+    provider: {
+      provider: 'none'
+    },
+    triggers: {
+      pre_due: false,
+      due_date: false,
+      overdue: false,
+    },
+  },
 }
 
 export const fetchUser = createAsyncThunk('user/fetchUser', async () => {
@@ -55,6 +69,19 @@ const userSlice = createSlice({
     ) {
       state.profile.notifications.provider = action.payload.provider
       state.profile.notifications.triggers = action.payload.triggers
+      // Keep draft in sync when updated via websocket
+      state.draftNotificationSettings.provider = action.payload.provider
+      state.draftNotificationSettings.triggers = action.payload.triggers
+    },
+    setNotificationSettingsDraft(
+      state,
+      action: PayloadAction<{
+        provider: NotificationType
+        triggers: NotificationTriggerOptions
+      }>,
+    ) {
+      state.draftNotificationSettings.provider = action.payload.provider
+      state.draftNotificationSettings.triggers = action.payload.triggers
     },
   },
   extraReducers: builder => {
@@ -68,6 +95,9 @@ const userSlice = createSlice({
         state.profile = action.payload
         state.lastFetched = Date.now()
         state.error = null
+        // Initialize draft with the fetched profile's notification settings
+        state.draftNotificationSettings.provider = action.payload.notifications.provider
+        state.draftNotificationSettings.triggers = action.payload.notifications.triggers
       })
       .addCase(fetchUser.rejected, (state, action) => {
         state.status = 'failed'
@@ -96,6 +126,8 @@ const userSlice = createSlice({
   },
 })
 
+export const { setNotificationSettingsDraft } = userSlice.actions
+
 export const userReducer = userSlice.reducer
 
 const { notificationSettingsUpdated } = userSlice.actions

src/views/Notifications/NotificationOptions.tsx

@@ -33,6 +33,14 @@ export class NotificationOptions extends React.Component<
     }
   }
 
+  componentDidUpdate(prevProps: NotificationOptionsProps) {
+    if (prevProps.notification !== this.props.notification) {
+      this.setState({
+        notification: this.props.notification,
+      })
+    }
+  }
+
   private onNotificationOptionChange = (item: NotificationTriggerOption) => {
     const { notification } = this.state
 

src/views/Notifications/NotificationSettings.tsx

@@ -22,20 +22,19 @@ import {
 } from '@/models/notifications'
 import { RootState, AppDispatch } from '@/store/store'
 import { connect } from 'react-redux'
-import { updateNotificationSettings } from '@/store/userSlice'
+import { updateNotificationSettings, setNotificationSettingsDraft } from '@/store/userSlice'
 
 type NotificationSettingProps = {
-  initialType: NotificationType
-  initialOptions: NotificationTriggerOptions
+  draftType: NotificationType
+  draftOptions: NotificationTriggerOptions
 
+  setNotificationSettingsDraft: (provider: NotificationType, triggers: NotificationTriggerOptions) => void
   updateNotificationSettings: (type: NotificationType, options: NotificationTriggerOptions) => Promise<any>
 }
 
 interface NotificationSettingState {
   saved: boolean
-  type: NotificationType
   error: string
-  options: NotificationTriggerOptions
 }
 
 class NotificationSettingsImpl extends React.Component<
@@ -48,8 +47,6 @@ class NotificationSettingsImpl extends React.Component<
     this.state = {
       saved: true,
       error: '',
-      type: props.initialType,
-      options: props.initialOptions,
     }
   }
 
@@ -60,9 +57,9 @@ class NotificationSettingsImpl extends React.Component<
     const provider = option as NotificationProvider
     const type = getDefaultTypeForProvider(provider)
 
+    this.props.setNotificationSettingsDraft(type, this.props.draftOptions)
     this.setState({
       saved: false,
-      type,
     })
   }
 
@@ -71,56 +68,65 @@ class NotificationSettingsImpl extends React.Component<
     option: SelectValue<string, false>,
   ) => {
     const method = option as WebhookMethod
-    const type = this.state.type as NotificationTypeWebhook
+    const type = this.props.draftType as NotificationTypeWebhook
 
-    this.setState({
-      saved: false,
-      type: {
+    this.props.setNotificationSettingsDraft(
+      {
         ...type,
         method,
       },
+      this.props.draftOptions
+    )
+    this.setState({
+      saved: false,
     })
   }
 
   private onURLChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
     const url = e.target.value
 
-    const type = this.state.type as
+    const type = this.props.draftType as
       | NotificationTypeWebhook
       | NotificationTypeGotify
 
-    this.setState({
-      saved: false,
-      type: {
+    this.props.setNotificationSettingsDraft(
+      {
         ...type,
         url,
       },
+      this.props.draftOptions
+    )
+    this.setState({
+      saved: false,
     })
   }
 
   private onGotifyTokenChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
     const token = e.target.value
 
-    const type = this.state.type as NotificationTypeGotify
+    const type = this.props.draftType as NotificationTypeGotify
 
-    this.setState({
-      saved: false,
-      type: {
+    this.props.setNotificationSettingsDraft(
+      {
         ...type,
         token,
       },
+      this.props.draftOptions
+    )
+    this.setState({
+      saved: false,
     })
   }
 
   private onTriggersChanged = (options: NotificationTriggerOptions) => {
+    this.props.setNotificationSettingsDraft(this.props.draftType, options)
     this.setState({
       saved: false,
-      options,
     })
   }
 
   private onSaveClicked = async () => {
-    const { type, options } = this.state
+    const { draftType: type, draftOptions: options } = this.props
     if (type.provider === 'webhook') {
       const isValidURL = type.url.match(/^https?:\/\/[^\s/$.?#].[^\s]*$/i)
       if (!isValidURL) {
@@ -152,7 +158,8 @@ class NotificationSettingsImpl extends React.Component<
   }
 
   render(): React.ReactNode {
-    const { error, type, options, saved } = this.state
+    const { error, saved } = this.state
+    const { draftType: type, draftOptions: options } = this.props
 
     const placeholderURL =
       type.provider === 'webhook'
@@ -254,15 +261,15 @@ class NotificationSettingsImpl extends React.Component<
 }
 
 const mapStateToProps = (state: RootState) => {
-  const userNotifications = state.user.profile.notifications
-
   return {
-    initialType: userNotifications.provider,
-    initialOptions: userNotifications.triggers,
+    draftType: state.user.draftNotificationSettings.provider,
+    draftOptions: state.user.draftNotificationSettings.triggers,
   }
 }
 
 const mapDispatchToProps = (dispatch: AppDispatch) => ({
+  setNotificationSettingsDraft: (provider: NotificationType, triggers: NotificationTriggerOptions) =>
+    dispatch(setNotificationSettingsDraft({ provider, triggers })),
   updateNotificationSettings: (type: NotificationType, options: NotificationTriggerOptions) =>
     dispatch(updateNotificationSettings({ type, options })),
 })