diff --git a/apps/app/components/notifications/notification-popover.tsx b/apps/app/components/notifications/notification-popover.tsx index 6e495d875..0e57c472c 100644 --- a/apps/app/components/notifications/notification-popover.tsx +++ b/apps/app/components/notifications/notification-popover.tsx @@ -45,6 +45,7 @@ export const NotificationPopover = () => { isLoadingMore, hasMore, isRefreshing, + setFetchNotifications, } = useUserNotification(); // theme context @@ -66,130 +67,134 @@ export const NotificationPopover = () => { }} /> - {({ open: isActive, close: closePopover }) => ( - <> - - - - {sidebarCollapse ? null : Notifications} - {totalNotificationCount && totalNotificationCount > 0 ? ( - - {getNumberCount(totalNotificationCount)} - - ) : null} - - - - - + {({ open: isActive, close: closePopover }) => { + if (isActive) setFetchNotifications(true); - {notifications ? ( - notifications.length > 0 ? ( -
-
- {notifications.map((notification) => ( - - ))} -
- {isLoadingMore && ( -
-
- - Loading... -
-

Loading notifications

+ return ( + <> + + + + {sidebarCollapse ? null : Notifications} + {totalNotificationCount && totalNotificationCount > 0 ? ( + + {getNumberCount(totalNotificationCount)} + + ) : null} + + + + + + + {notifications ? ( + notifications.length > 0 ? ( +
+
+ {notifications.map((notification) => ( + + ))}
- )} - {hasMore && !isLoadingMore && ( - - )} -
+ {isLoadingMore && ( +
+
+ + Loading... +
+

Loading notifications

+
+ )} + {hasMore && !isLoadingMore && ( + + )} +
+ ) : ( +
+ +
+ ) ) : ( -
- -
- ) - ) : ( - - - - - - - - )} - - - - )} + + + + + + + + )} + + + + ); + }} ); diff --git a/apps/app/hooks/use-user-notifications.tsx b/apps/app/hooks/use-user-notifications.tsx index e7880dadf..53e155032 100644 --- a/apps/app/hooks/use-user-notifications.tsx +++ b/apps/app/hooks/use-user-notifications.tsx @@ -25,6 +25,7 @@ const useUserNotification = () => { const [snoozed, setSnoozed] = useState(false); const [archived, setArchived] = useState(false); const [readNotification, setReadNotification] = useState(false); + const [fetchNotifications, setFetchNotifications] = useState(false); const [selectedNotificationForSnooze, setSelectedNotificationForSnooze] = useState( null ); @@ -49,7 +50,7 @@ const useUserNotification = () => { isValidating, mutate: notificationMutate, } = useSWRInfinite( - workspaceSlug + fetchNotifications && workspaceSlug ? (index, prevData) => getPaginatedNotificationKey(index, prevData, workspaceSlug.toString(), params) : () => null, @@ -282,6 +283,7 @@ const useUserNotification = () => { isLoadingMore, hasMore, isRefreshing, + setFetchNotifications, }; };