[frontend] manage users online status (#248)

usatie · Feb 7, 2024 · 82e4d7d · 82e4d7d
1 parent 0812304
commit 82e4d7d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 31 deletions.
diff --git a/frontend/app/lib/actions.ts b/frontend/app/lib/actions.ts
@@ -890,10 +890,3 @@ export async function createUserWithOauth(
     redirect("/login");
   }
 }
-
-export const isOnline = async (userId: number) =>
-  fetch(`${process.env.API_URL}/chat/${userId}/online`, {
-    headers: {
-      Authorization: "Bearer " + getAccessToken(),
-    },
-  }).then((res) => (res.ok ? res.json() : Promise.reject(res)));
diff --git a/frontend/app/lib/client-socket-provider.tsx b/frontend/app/lib/client-socket-provider.tsx
@@ -3,7 +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 { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useAuthContext } from "./client-auth";
 import {
   DenyEvent,
@@ -93,6 +93,18 @@ export default function SocketProvider() {
     });
   };
 
+  const [onlineStatus, setOnlineStatus] = useState<{ [key: number]: number }>(
+    {},
+  );
+  const handleOnlineStatus = (users: { userId: number; status: number }[]) => {
+    console.log("users", users);
+    users.forEach((u) => {
+      console.log("FOO! u", u);
+      setOnlineStatus((prev) => ({ ...prev, [u.userId]: u.status }));
+    });
+    console.log("online-status", onlineStatus); // TODO: この時点では変更されていない?
+  };
+
   const showMessageToast = (message: MessageEvent) => {
     // TODO: If sender is me, don't show toast
     toast({
@@ -133,7 +145,6 @@ export default function SocketProvider() {
   };
 
   useEffect(() => {
-    chatSocket.connect();
     const handler = (event: string, data: any) => {
       if (event === "message") {
         showMessageToast(data);
@@ -151,11 +162,14 @@ export default function SocketProvider() {
         showDenyPongToast(data);
       } else if (event === "error-pong") {
         showErrorPongToast(data);
+      } else if (event === "online-status") {
+        handleOnlineStatus(data);
       } else {
         showNotificationToast(data);
       }
     };
     chatSocket.onAny(handler);
+    chatSocket.connect();
     return () => {
       chatSocket.offAny(handler);
       chatSocket.disconnect();

diff --git a/frontend/app/ui/user/user-list.tsx b/frontend/app/ui/user/user-list.tsx
@@ -4,7 +4,6 @@ import type { PublicUserEntity } from "@/app/lib/dtos";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Avatar, AvatarSize } from "./avatar";
 import { useEffect, useState } from "react";
-import { isOnline } from "@/app/lib/actions";
 
 export default function UserList({
   users,
@@ -13,26 +12,6 @@ export default function UserList({
   users: PublicUserEntity[];
   avatarSize: AvatarSize;
 }) {
-  const [onlineStatus, setOnlineStatus] = useState<{ [key: string]: boolean }>(
-    {},
-  );
-
-  const fetchOnlineStatus = async () => {
-    try {
-      users.forEach(async (u) => {
-        const body = await isOnline(u.id);
-        const online = body.isOnline;
-        setOnlineStatus((prev) => ({ ...prev, [u.name]: online }));
-      });
-    } catch (error) {
-      console.error("Error fetching online status:", error);
-    }
-  };
-
-  useEffect(() => {
-    fetchOnlineStatus();
-  }, []);
-
   return (
     <TooltipProvider delayDuration={0}>
       <div className="flex flex-wrap gap-2">
@@ -43,7 +22,7 @@ export default function UserList({
             size={avatarSize}
             href={`/user/${u.id}`}
             alt={u.name}
-            online={onlineStatus[u.name]}
+            online={true}
             key={u.id}
           />
         ))}