feat: refactor watcher for sync friend request

src/renderer/src/app.tsx

@@ -20,6 +20,7 @@ import {
   setUserDetails,
   setProfileBackground,
   setGameRunning,
+  setFriendRequestCount,
 } from "@renderer/features";
 import { useTranslation } from "react-i18next";
 import { UserFriendModal } from "./pages/shared-modals/user-friend-modal";
@@ -51,7 +52,6 @@ export function App() {
     isFriendsModalVisible,
     friendRequetsModalTab,
     friendModalUserId,
-    syncFriendRequests,
     hideFriendsModal,
     fetchUserDetails,
     updateUserDetails,
@@ -123,7 +123,7 @@ export function App() {
       .then((response) => {
         if (response) {
           updateUserDetails(response);
-          syncFriendRequests();
+          window.electron.syncFriendRequests();
         }
       })
       .finally(() => {
@@ -134,23 +134,27 @@ export function App() {
         $script.src = `${import.meta.env.RENDERER_VITE_EXTERNAL_RESOURCES_URL}/bundle.js?t=${Date.now()}`;
         document.head.appendChild($script);
       });
-  }, [fetchUserDetails, syncFriendRequests, updateUserDetails, dispatch]);
+  }, [fetchUserDetails, updateUserDetails, dispatch]);
 
   const onSignIn = useCallback(() => {
     fetchUserDetails().then((response) => {
       if (response) {
         updateUserDetails(response);
-        syncFriendRequests();
+        window.electron.syncFriendRequests();
         showSuccessToast(t("successfully_signed_in"));
       }
     });
-  }, [
-    fetchUserDetails,
-    syncFriendRequests,
-    t,
-    showSuccessToast,
-    updateUserDetails,
-  ]);
+  }, [fetchUserDetails, t, showSuccessToast, updateUserDetails]);
+
+  useEffect(() => {
+    const unsubscribe = window.electron.onSyncFriendRequests((result) => {
+      dispatch(setFriendRequestCount(result.friendRequestCount));
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [dispatch]);
 
   useEffect(() => {
     const unsubscribe = window.electron.onGamesRunning((gamesRunning) => {

src/renderer/src/components/sidebar/sidebar-profile.tsx

@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import { PeopleIcon } from "@primer/octicons-react";
 import { useAppSelector, useUserDetails } from "@renderer/hooks";
-import { useEffect, useMemo } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
@@ -9,19 +9,13 @@ import { Avatar } from "../avatar/avatar";
 import { AuthPage } from "@shared";
 import "./sidebar-profile.scss";
 
-const LONG_POLLING_INTERVAL = 120_000;
-
 export function SidebarProfile() {
   const navigate = useNavigate();
 
   const { t } = useTranslation("sidebar");
 
-  const {
-    userDetails,
-    friendRequestCount,
-    showFriendsModal,
-    syncFriendRequests,
-  } = useUserDetails();
+  const { userDetails, friendRequestCount, showFriendsModal } =
+    useUserDetails();
 
   const { gameRunning } = useAppSelector((state) => state.gameRunning);
 
@@ -34,16 +28,6 @@ export function SidebarProfile() {
     navigate(`/profile/${userDetails.id}`);
   };
 
-  useEffect(() => {
-    const pollingInterval = setInterval(() => {
-      syncFriendRequests();
-    }, LONG_POLLING_INTERVAL);
-
-    return () => {
-      clearInterval(pollingInterval);
-    };
-  }, [syncFriendRequests]);
-
   const friendsButton = useMemo(() => {
     if (!userDetails) return null;
 

src/renderer/src/declaration.d.ts

@@ -280,7 +280,10 @@ declare global {
       path: string
     ) => Promise<{ imagePath: string; mimeType: string }>;
     getFriendRequests: () => Promise<FriendRequest[]>;
-    syncFriendRequests: () => Promise<FriendRequestSync>;
+    syncFriendRequests: () => Promise<void>;
+    onSyncFriendRequests: (
+      cb: (friendRequests: FriendRequestSync) => void
+    ) => () => Electron.IpcRenderer;
     updateFriendRequest: (
       userId: string,
       action: FriendRequestAction

src/renderer/src/hooks/use-user-details.ts

@@ -6,7 +6,6 @@ import {
   setFriendRequests,
   setFriendsModalVisible,
   setFriendsModalHidden,
-  setFriendRequestCount,
 } from "@renderer/features";
 import type {
   FriendRequestAction,
@@ -88,24 +87,15 @@ export function useUserDetails() {
     ]
   );
 
-  const syncFriendRequests = useCallback(async () => {
-    return window.electron
-      .syncFriendRequests()
-      .then((sync) => {
-        dispatch(setFriendRequestCount(sync.friendRequestCount));
-      })
-      .catch(() => {});
-  }, [dispatch]);
-
   const fetchFriendRequests = useCallback(async () => {
     return window.electron
       .getFriendRequests()
       .then((friendRequests) => {
-        syncFriendRequests();
+        window.electron.syncFriendRequests();
         dispatch(setFriendRequests(friendRequests));
       })
       .catch(() => {});
-  }, [dispatch, syncFriendRequests]);
+  }, [dispatch]);
 
   const showFriendsModal = useCallback(
     (initialTab: UserFriendModalTab, userId: string) => {
@@ -167,7 +157,6 @@ export function useUserDetails() {
     patchUser,
     sendFriendRequest,
     fetchFriendRequests,
-    syncFriendRequests,
     updateFriendRequestState,
     blockUser,
     unblockUser,