From dcdbe939ef4991cc88cfdb45ff35363c3be0aa78 Mon Sep 17 00:00:00 2001
From: kotto5 <kotto555555@gmail.com>
Date: Wed, 14 Feb 2024 18:07:45 +0900
Subject: [PATCH 1/2] =?UTF-8?q?[frontend]=20set-onlineStatus=20=E5=87=A6?=
 =?UTF-8?q?=E7=90=86=E3=82=92client=20socket=20provider=20=E3=81=8B?=
 =?UTF-8?q?=E3=82=89=20useOnlineStatus=20=E3=81=AB=E7=A7=BB=E8=AD=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/app/lib/client-socket-provider.tsx | 20 ++---------------
 frontend/app/lib/hooks/useOnlineStatus.ts   | 24 +++++++++++++++++----
 frontend/app/onlineProviders.tsx            |  8 +++----
 3 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/frontend/app/lib/client-socket-provider.tsx b/frontend/app/lib/client-socket-provider.tsx
index 90b2b8aa..44243e22 100644
--- a/frontend/app/lib/client-socket-provider.tsx
+++ b/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),
diff --git a/frontend/app/lib/hooks/useOnlineStatus.ts b/frontend/app/lib/hooks/useOnlineStatus.ts
index 3758080d..d378559a 100644
--- a/frontend/app/lib/hooks/useOnlineStatus.ts
+++ b/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;
 }
diff --git a/frontend/app/onlineProviders.tsx b/frontend/app/onlineProviders.tsx
index 11d64384..ae6e2cc4 100644
--- a/frontend/app/onlineProviders.tsx
+++ b/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>
     </>
   );

From 06dd1c5e9a0312903a2e03ff54bd133757292786 Mon Sep 17 00:00:00 2001
From: kotto5 <kotto555555@gmail.com>
Date: Wed, 14 Feb 2024 18:08:20 +0900
Subject: [PATCH 2/2] [frontend] make fmt

---
 frontend/app/lib/hooks/useOnlineStatus.ts | 4 ++--
 frontend/app/ui/user/user-list.tsx        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/app/lib/hooks/useOnlineStatus.ts b/frontend/app/lib/hooks/useOnlineStatus.ts
index d378559a..2b6e9840 100644
--- a/frontend/app/lib/hooks/useOnlineStatus.ts
+++ b/frontend/app/lib/hooks/useOnlineStatus.ts
@@ -7,11 +7,11 @@ export const OnlineContext = createContext<{ [key: number]: number }>({});
 
 export function useOnlineStatus(): { [key: number]: number } {
   const [onlineStatus, setOnlineStatus] = useState<{ [key: number]: number }>(
-    {}
+    {},
   );
   useEffect(() => {
     const handleOnlineStatus = (
-      users: { userId: number; status: number }[]
+      users: { userId: number; status: number }[],
     ) => {
       users.forEach((u) => {
         setOnlineStatus((prev) => ({ ...prev, [u.userId]: u.status }));
diff --git a/frontend/app/ui/user/user-list.tsx b/frontend/app/ui/user/user-list.tsx
index 6f37de49..26cc1347 100644
--- a/frontend/app/ui/user/user-list.tsx
+++ b/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({