[frontend] use context in UserList

usatie · Feb 11, 2024 · 15990b6 · 15990b6
1 parent 8299309
commit 15990b6
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/frontend/app/lib/hooks/useOnlineStatus.ts b/frontend/app/lib/hooks/useOnlineStatus.ts
@@ -0,0 +1,10 @@
+"use client";
+
+import { useState } from "react";
+
+export function useOnlineStatus() {
+  const [onlineStatus, setOnlineStatus] = useState<{ [key: number]: number }>(
+    {}
+  );
+  return { onlineStatus, setOnlineStatus };
+}
diff --git a/frontend/app/ui/user/user-list.tsx b/frontend/app/ui/user/user-list.tsx
@@ -3,7 +3,8 @@
 import type { PublicUserEntity } from "@/app/lib/dtos";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Avatar, AvatarSize } from "./avatar";
-import { useEffect, useState } from "react";
+import { OnlineContext } from "@/app/lib/client-socket-provider";
+import { useContext } from "react";
 
 export default function UserList({
   users,
@@ -12,6 +13,7 @@ export default function UserList({
   users: PublicUserEntity[];
   avatarSize: AvatarSize;
 }) {
+  const onlineStatus = useContext(OnlineContext);
   return (
     <TooltipProvider delayDuration={0}>
       <div className="flex flex-wrap gap-2">
@@ -22,7 +24,7 @@ export default function UserList({
             size={avatarSize}
             href={`/user/${u.id}`}
             alt={u.name}
-            online={true}
+            online={onlineStatus[u.id] === 1}
             key={u.id}
           />
         ))}