fix(ui): new Map because Map is immutable (#818)

keephq · Feb 11, 2024 · a851905 · a851905
1 parent e087a7a
commit a851905
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/keep-ui/app/alerts/alert-assignee.tsx b/keep-ui/app/alerts/alert-assignee.tsx
@@ -15,14 +15,15 @@ export default function AlertAssignee({ assignee }: Props) {
   }
 
   const user = users.find((user) => user.email === assignee);
+  const userName = user?.name || "Keep";
 
   return !imageError ? (
     // eslint-disable-next-line @next/next/no-img-element
     <img
       className="h-8 w-8 rounded-full"
       src={
         user?.picture ||
-        `https://ui-avatars.com/api/?name=${user?.name}&background=random`
+        `https://ui-avatars.com/api/?name=${userName}&background=random`
       }
       height={24}
       width={24}
@@ -32,7 +33,7 @@ export default function AlertAssignee({ assignee }: Props) {
     />
   ) : (
     <NameInitialsAvatar
-      name={user?.name || "Unknown User"}
+      name={userName}
       bgColor="orange"
       borderWidth="1px"
       textColor="white"

diff --git a/keep-ui/app/settings/webhook-settings.tsx b/keep-ui/app/settings/webhook-settings.tsx
@@ -20,6 +20,7 @@ import useSWR from "swr";
 import { getApiURL } from "utils/apiUrl";
 import { fetcher } from "utils/fetcher";
 import { toast } from "react-toastify";
+import { v4 as uuidv4 } from "uuid";
 
 interface Webhook {
   webhookApi: string;
@@ -53,6 +54,8 @@ export default function WebhookSettings({ accessToken, selectedTab }: Props) {
     {
       ...example,
       lastReceived: new Date().toISOString(),
+      id: uuidv4(),
+      fingerprint: uuidv4(),
     },
     null,
     2

diff --git a/keep-ui/utils/hooks/useAlerts.ts b/keep-ui/utils/hooks/useAlerts.ts
@@ -35,7 +35,7 @@ const getFormatAndMergePusherWithEndpointAlerts = (
     }
 
     return newAlertsMap;
-  }, alertsMap);
+  }, new Map(alertsMap));
 
 export const getDefaultSubscriptionObj = (
   isAsyncLoading: boolean = false,
@@ -101,7 +101,7 @@ export const useAlerts = () => {
       alertSubscription;
 
     useEffect(() => {
-      const alertsMap = new Map<string, AlertDto>(
+      const newAlertsMap = new Map<string, AlertDto>(
         alertsFromEndpoint.map((alertFromEndpoint) => [
           alertFromEndpoint.fingerprint,
           {
@@ -113,7 +113,7 @@ export const useAlerts = () => {
         ])
       );
 
-      setAlertsMap(alertsMap);
+      setAlertsMap(newAlertsMap);
     }, [alertsFromEndpoint]);
 
     useEffect(() => {
@@ -133,7 +133,7 @@ export const useAlerts = () => {
     }, [alertsFromPusher]);
 
     return {
-      data: [...alertsMap.values()],
+      data: Array.from(alertsMap.values()),
       ...restOfAlertSubscription,
       ...restOfAllAlerts,
     };