3 files changed, 23 insertions, 8 deletions
diff --git a/frontend/src/pages/Settings/Notifications/components.tsx b/frontend/src/pages/Settings/Notifications/components.tsx
index ba18ca658..8ad33ff46 100644
--- a/frontend/src/pages/Settings/Notifications/components.tsx
+++ b/frontend/src/pages/Settings/Notifications/components.tsx
@@ -14,12 +14,16 @@ import {
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { isObject } from "lodash";
-import { FunctionComponent, useMemo } from "react";
+import { FunctionComponent, useCallback, useMemo } from "react";
 import { useMutation } from "react-query";
 import { Card } from "../components";
 import { notificationsKey } from "../keys";
 import { useSettingValue, useUpdateArray } from "../utilities/hooks";
 
+const notificationHook = (notifications: Settings.NotificationInfo[]) => {
+  return notifications.map((info) => JSON.stringify(info));
+};
+
 interface Props {
   selections: readonly Settings.NotificationInfo[];
   payload: Settings.NotificationInfo | null;
@@ -122,6 +126,13 @@ export const NotificationView: FunctionComponent = () => {
     "name"
   );
 
+  const updateWrapper = useCallback(
+    (info: Settings.NotificationInfo) => {
+      update(info, notificationHook);
+    },
+    [update]
+  );
+
   const modals = useModals();
 
   const elements = useMemo(() => {
@@ -135,12 +146,12 @@ export const NotificationView: FunctionComponent = () => {
             modals.openContextModal(NotificationModal, {
               payload,
               selections: notifications,
-              onComplete: update,
+              onComplete: updateWrapper,
             })
           }
         ></Card>
       ));
-  }, [modals, notifications, update]);
+  }, [modals, notifications, updateWrapper]);
 
   return (
     <SimpleGrid cols={3}>
@@ -151,7 +162,7 @@ export const NotificationView: FunctionComponent = () => {
           modals.openContextModal(NotificationModal, {
             payload: null,
             selections: notifications ?? [],
-            onComplete: update,
+            onComplete: updateWrapper,
           })
         }
       ></Card>
diff --git a/frontend/src/pages/Settings/utilities/FormValues.ts b/frontend/src/pages/Settings/utilities/FormValues.ts
index 63dc28f97..2fbe54b93 100644
--- a/frontend/src/pages/Settings/utilities/FormValues.ts
+++ b/frontend/src/pages/Settings/utilities/FormValues.ts
@@ -57,7 +57,7 @@ export function useFormActions() {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-type HookType = (value: any) => unknown;
+export type HookType = (value: any) => unknown;
 
 export type FormKey = keyof FormValues;
 export type FormValues = {
diff --git a/frontend/src/pages/Settings/utilities/hooks.ts b/frontend/src/pages/Settings/utilities/hooks.ts
index 4da28959d..b5e3e1f61 100644
--- a/frontend/src/pages/Settings/utilities/hooks.ts
+++ b/frontend/src/pages/Settings/utilities/hooks.ts
@@ -1,7 +1,11 @@
 import { LOG } from "@/utilities/console";
 import { get, isNull, isUndefined, uniqBy } from "lodash";
 import { useCallback, useMemo, useRef } from "react";
-import { useFormActions, useStagedValues } from "../utilities/FormValues";
+import {
+  HookType,
+  useFormActions,
+  useStagedValues,
+} from "../utilities/FormValues";
 import { useSettings } from "../utilities/SettingsProvider";
 
 export interface BaseInput<T> {
@@ -94,9 +98,9 @@ export function useUpdateArray<T>(key: string, compare: keyof T) {
   }, [key, stagedValue]);
 
   return useCallback(
-    (v: T) => {
+    (v: T, hook?: HookType) => {
       const newArray = uniqBy([v, ...staged], compareRef.current);
-      setValue(newArray, key);
+      setValue(newArray, key, hook);
     },
     [staged, setValue, key]
   );