[frontend] refactor online status provider

frontend/app/lib/client-socket-provider.tsx

@@ -3,14 +3,7 @@ import { ToastAction } from "@/components/ui/toast";
 import { useToast } from "@/components/ui/use-toast";
 import { chatSocket } from "@/socket";
 import Link from "next/link";
-import {
-  Dispatch,
-  SetStateAction,
-  createContext,
-  useCallback,
-  useEffect,
-  useState,
-} from "react";
+import { useCallback, useEffect } from "react";
 import { useAuthContext } from "./client-auth";
 import {
   DenyEvent,
@@ -26,13 +19,7 @@ import { chatSocket as socket } from "@/socket";
 import { useRouter } from "next/navigation";
 import { usePathname } from "next/navigation";
 
-export const OnlineContext = createContext<{ [key: number]: number }>({});
-
-export default function SocketProvider({
-  setOnlineStatus,
-}: {
-  setOnlineStatus: Dispatch<SetStateAction<{ [key: number]: number }>>;
-}) {
+export default function SocketProvider() {
   const { toast } = useToast();
   const { currentUser } = useAuthContext();
   const pathName = usePathname();
@@ -131,9 +118,6 @@ export default function SocketProvider({
   };
 
   const handleOnlineStatus = (users: { userId: number; status: number }[]) => {
-    users.forEach((u) => {
-      setOnlineStatus((prev) => ({ ...prev, [u.userId]: u.status }));
-    });
     toast({
       title: "online-status",
       description: JSON.stringify(users),

frontend/app/lib/hooks/useOnlineStatus.ts

@@ -1,10 +1,26 @@
 "use client";
 
-import { useState } from "react";
+import { createContext, useEffect, useState } from "react";
+import { chatSocket } from "@/socket";
 
-export function useOnlineStatus() {
+export const OnlineContext = createContext<{ [key: number]: number }>({});
+
+export function useOnlineStatus(): { [key: number]: number } {
   const [onlineStatus, setOnlineStatus] = useState<{ [key: number]: number }>(
     {},
   );
-  return { onlineStatus, setOnlineStatus };
+  useEffect(() => {
+    const handleOnlineStatus = (
+      users: { userId: number; status: number }[],
+    ) => {
+      users.forEach((u) => {
+        setOnlineStatus((prev) => ({ ...prev, [u.userId]: u.status }));
+      });
+    };
+    chatSocket.on("online-status", handleOnlineStatus);
+    return () => {
+      chatSocket.off("online-status", handleOnlineStatus);
+    };
+  });
+  return onlineStatus;
 }

frontend/app/onlineProviders.tsx

@@ -1,15 +1,15 @@
 "use client";
 
-import { useOnlineStatus } from "./lib/hooks/useOnlineStatus";
-import SocketProvider, { OnlineContext } from "./lib/client-socket-provider";
+import { OnlineContext, useOnlineStatus } from "./lib/hooks/useOnlineStatus";
+import SocketProvider from "./lib/client-socket-provider";
 
 export function OnlineProviders({ children }: { children: React.ReactNode }) {
-  const { onlineStatus, setOnlineStatus } = useOnlineStatus();
+  const onlineStatus = useOnlineStatus();
   return (
     <>
       <OnlineContext.Provider value={onlineStatus}>
         {children}
-        <SocketProvider setOnlineStatus={setOnlineStatus} />
+        <SocketProvider />
       </OnlineContext.Provider>
     </>
   );

frontend/app/ui/user/user-list.tsx

@@ -3,7 +3,7 @@
 import type { PublicUserEntity } from "@/app/lib/dtos";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Avatar, AvatarSize } from "./avatar";
-import { OnlineContext } from "@/app/lib/client-socket-provider";
+import { OnlineContext } from "@/app/lib/hooks/useOnlineStatus";
 import { useContext } from "react";
 
 export default function UserList({