Apply review comments and fix storybook tests

BrunoQuaresma · BrunoQuaresma · commit 281dadfaf1ba · 2025-03-18T18:03:58.000Z
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -139,8 +139,14 @@ export const watchInboxNotifications = (
 	);
 
 	socket.addEventListener("message", (event) => {
-		const res = JSON.parse(event.data) as TypesGen.GetInboxNotificationResponse;
-		onNewNotification(res);
+		try {
+			const res = JSON.parse(
+				event.data,
+			) as TypesGen.GetInboxNotificationResponse;
+			onNewNotification(res);
+		} catch (error) {
+			console.warn("Error parsing inbox notification: ", error);
+		}
 	});
 
 	socket.addEventListener("error", (event) => {
diff --git a/site/src/modules/dashboard/Navbar/NavbarView.tsx b/site/src/modules/dashboard/Navbar/NavbarView.tsx
@@ -69,7 +69,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
 
 				<NotificationsInbox
 					fetchNotifications={API.getInboxNotifications}
-					markAllAsRead={(): Promise<void> => {
+					markAllAsRead={() => {
 						throw new Error("Function not implemented.");
 					}}
 					markNotificationAsRead={(notificationId) =>
diff --git a/site/src/modules/notifications/NotificationsInbox/NotificationsInbox.stories.tsx b/site/src/modules/notifications/NotificationsInbox/NotificationsInbox.stories.tsx
@@ -134,7 +134,13 @@ export const MarkNotificationAsRead: Story = {
 			notifications: MockNotifications,
 			unread_count: 2,
 		})),
-		markNotificationAsRead: fn(),
+		markNotificationAsRead: fn(async () => ({
+			unread_count: 1,
+			notification: {
+				...MockNotifications[1],
+				read_at: new Date().toISOString(),
+			},
+		})),
 	},
 	play: async ({ canvasElement }) => {
 		const body = within(canvasElement.ownerDocument.body);
diff --git a/site/src/modules/notifications/NotificationsInbox/NotificationsInbox.tsx b/site/src/modules/notifications/NotificationsInbox/NotificationsInbox.tsx
@@ -8,6 +8,7 @@ import { displayError } from "components/GlobalSnackbar/utils";
 import { type FC, useEffect, useRef } from "react";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { InboxPopover } from "./InboxPopover";
+import { useEffectEvent } from "hooks/hookPolyfills";
 
 const NOTIFICATIONS_QUERY_KEY = ["notifications"];
 
@@ -37,10 +38,29 @@ export const NotificationsInbox: FC<NotificationsInboxProps> = ({
 		queryFn: fetchNotifications,
 	});
 
+	const updateNotificationsCache = useEffectEvent(
+		async (
+			callback: (
+				res: ListInboxNotificationsResponse,
+			) => ListInboxNotificationsResponse,
+		) => {
+			await queryClient.cancelQueries(NOTIFICATIONS_QUERY_KEY);
+			queryClient.setQueryData<ListInboxNotificationsResponse>(
+				NOTIFICATIONS_QUERY_KEY,
+				(prev) => {
+					if (!prev) {
+						return { notifications: [], unread_count: 0 };
+					}
+					return callback(prev);
+				},
+			);
+		},
+	);
+
 	useEffect(() => {
 		const socket = watchInboxNotifications(
 			(res) => {
-				safeUpdateNotificationsCache((prev) => {
+				updateNotificationsCache((prev) => {
 					return {
 						unread_count: res.unread_count,
 						notifications: [res.notification, ...prev.notifications],
@@ -53,17 +73,18 @@ export const NotificationsInbox: FC<NotificationsInboxProps> = ({
 		return () => {
 			socket.close();
 		};
-	}, []);
+	}, [updateNotificationsCache]);
 
 	const markAllAsReadMutation = useMutation({
 		mutationFn: markAllAsRead,
 		onSuccess: () => {
-			safeUpdateNotificationsCache((prev) => {
+			updateNotificationsCache((prev) => {
+				console.log("PREV", prev);
 				return {
 					unread_count: 0,
 					notifications: prev.notifications.map((n) => ({
 						...n,
-						read_status: "read",
+						read_at: new Date().toISOString(),
 					})),
 				};
 			});
@@ -79,7 +100,7 @@ export const NotificationsInbox: FC<NotificationsInboxProps> = ({
 	const markNotificationAsReadMutation = useMutation({
 		mutationFn: markNotificationAsRead,
 		onSuccess: (res) => {
-			safeUpdateNotificationsCache((prev) => {
+			updateNotificationsCache((prev) => {
 				return {
 					unread_count: res.unread_count,
 					notifications: prev.notifications.map((n) => {
@@ -99,23 +120,6 @@ export const NotificationsInbox: FC<NotificationsInboxProps> = ({
 		},
 	});
 
-	async function safeUpdateNotificationsCache(
-		callback: (
-			res: ListInboxNotificationsResponse,
-		) => ListInboxNotificationsResponse,
-	) {
-		await queryClient.cancelQueries(NOTIFICATIONS_QUERY_KEY);
-		queryClient.setQueryData<ListInboxNotificationsResponse>(
-			NOTIFICATIONS_QUERY_KEY,
-			(prev) => {
-				if (!prev) {
-					return { notifications: [], unread_count: 0 };
-				}
-				return callback(prev);
-			},
-		);
-	}
-
 	return (
 		<InboxPopover
 			defaultOpen={defaultOpen}
