retrigger notification query on effect rather than new query (#3573)

* retrigger notification query on effect rather than new query

* move unviewedObs refetch to effect

* fix test

* Remove trailing whitespaces

---------

Co-authored-by: Johannes Klein <johannes.t.klein@gmail.com>

src/components/Notifications/NotificationsTab.tsx

@@ -23,9 +23,6 @@ const NotificationsTab = ( { id, text }: TabComponentProps ) => {
     [
       "NotificationsTab",
       "notificationsCount",
-      // We want to check for notifications when the user views an
-      // observation, because that might make the indicator go away
-      observationMarkedAsViewedAt,
       id,
     ],
     ( optsWithAuth: ApiOpts ) => fetchUnviewedObservationUpdatesCount(
@@ -41,6 +38,10 @@ const NotificationsTab = ( { id, text }: TabComponentProps ) => {
     },
   );
 
+  useEffect( () => {
+    refetch();
+  }, [observationMarkedAsViewedAt, refetch] );
+
   useEffect( ( ) => {
     const listener = EventRegister.addEventListener(
       NOTIFICATIONS_REFRESHED,

src/navigation/BottomTabNavigator/NotificationsIconContainer.tsx

@@ -1,6 +1,6 @@
 import { fetchUnviewedObservationUpdatesCount } from "api/observations";
 import NotificationsIcon from "navigation/BottomTabNavigator/NotificationsIcon";
-import React from "react";
+import React, { useEffect } from "react";
 import {
   useAuthenticatedQuery,
   useCurrentUser,
@@ -23,12 +23,9 @@ const NotificationsIconContainer = ( {
 
   // TODO: enable fields if it makes sense
   // https://linear.app/inaturalist/issue/MOB-1362/enable-fields-for-unviewed-updates-count-in-notificationsicon
-  const { data: unviewedUpdatesCount } = useAuthenticatedQuery(
+  const { data: unviewedUpdatesCount, refetch } = useAuthenticatedQuery(
     [
       "notificationsCount",
-      // We want to check for notifications when the user views an
-      // observation, because that might make the indicator go away
-      observationMarkedAsViewedAt,
     ],
     optsWithAuth => fetchUnviewedObservationUpdatesCount( {}, optsWithAuth ),
     {
@@ -39,6 +36,10 @@ const NotificationsIconContainer = ( {
     },
   );
 
+  useEffect( () => {
+    refetch();
+  }, [observationMarkedAsViewedAt, refetch] );
+
   const hasUnread = ( unviewedUpdatesCount ?? 0 ) > 0;
 
   return (

tests/unit/components/BottomTabNavigator/CustomTabBar.test.js

@@ -27,6 +27,7 @@ jest.mock( "sharedHooks/useAuthenticatedQuery", () => ( {
   __esModule: true,
   default: () => ( {
     data: 0,
+    refetch: () => undefined,
   } ),
 } ) );