Effects moved to callbacks

tolgee · Jan 28, 2025 · c57086f · c57086f
1 parent 348413d
commit c57086f
Showing 1 changed file with 32 additions and 29 deletions.
diff --git a/webapp/src/component/layout/Notifications/NotificationsPopup.tsx b/webapp/src/component/layout/Notifications/NotificationsPopup.tsx
@@ -12,6 +12,11 @@ import { BoxLoading } from 'tg.component/common/BoxLoading';
 import { PopoverProps } from '@mui/material/Popover';
 import { notificationComponents } from 'tg.component/layout/Notifications/NotificationTypeMap';
 import { NotificationsChanged } from 'tg.websocket-client/WebsocketClient';
+import { components } from 'tg.service/apiSchema.generated';
+import { InfiniteData } from 'react-query';
+
+type PagedModelNotificationModel =
+  components['schemas']['PagedModelNotificationModel'];
 
 const FETCH_NEXT_PAGE_SCROLL_THRESHOLD_IN_PIXELS = 100;
 
@@ -25,6 +30,14 @@ const StyledListItemHeader = styled(ListItem)`
   font-weight: bold;
 `;
 
+function getNotifications(
+  data: InfiniteData<PagedModelNotificationModel> | undefined
+) {
+  return data?.pages
+    .flatMap((it) => it?._embedded?.notificationModelList)
+    .filter((it) => it !== undefined);
+}
+
 type NotificationsPopupProps = {
   onClose: () => void;
   onNotificationsChanged: (event: NotificationsChanged) => void;
@@ -45,7 +58,10 @@ export const NotificationsPopup: React.FC<NotificationsPopupProps> = ({
     method: 'get',
     query: query,
     options: {
-      enabled: false,
+      enabled: !!anchorEl,
+      refetchOnMount: false,
+      staleTime: Infinity,
+      cacheTime: Infinity,
       getNextPageParam: (lastPage) => {
         if (
           lastPage.page &&
@@ -61,6 +77,18 @@ export const NotificationsPopup: React.FC<NotificationsPopupProps> = ({
           return null;
         }
       },
+      onSuccess(data) {
+        const markAsSeenIds = getNotifications(data)?.map((it) => it.id);
+        if (!markAsSeenIds) return;
+
+        markSeenMutation.mutate({
+          content: {
+            'application/json': {
+              notificationIds: markAsSeenIds,
+            },
+          },
+        });
+      },
     },
   });
 
@@ -69,33 +97,6 @@ export const NotificationsPopup: React.FC<NotificationsPopupProps> = ({
     method: 'put',
   });
 
-  const notifications = notificationsLoadable.data?.pages
-    .flatMap((it) => it?._embedded?.notificationModelList)
-    .filter((it) => it !== undefined);
-
-  useEffect(() => {
-    if (!anchorEl) return;
-
-    const data = notificationsLoadable.data;
-    if (!data) {
-      if (!notificationsLoadable.isFetching) {
-        notificationsLoadable.refetch();
-      }
-      return;
-    }
-
-    const markAsSeenIds = notifications?.map((it) => it.id);
-    if (!markAsSeenIds) return;
-
-    markSeenMutation.mutate({
-      content: {
-        'application/json': {
-          notificationIds: markAsSeenIds,
-        },
-      },
-    });
-  }, [notificationsLoadable.data, anchorEl]);
-
   useEffect(() => {
     if (client && user) {
       return client.subscribe(
@@ -110,6 +111,8 @@ export const NotificationsPopup: React.FC<NotificationsPopupProps> = ({
     }
   }, [user, client]);
 
+  const notifications = getNotifications(notificationsLoadable.data);
+
   return (
     <StyledMenu
       keepMounted
@@ -148,7 +151,7 @@ export const NotificationsPopup: React.FC<NotificationsPopupProps> = ({
         <StyledListItemHeader divider>
           <T keyName="notifications-header" />
         </StyledListItemHeader>
-        {notifications?.map((notification, i) => {
+        {notifications?.map((notification) => {
           const Component = notificationComponents[notification.type]!;
           return (
             <Component