[frontend] keep block status (#195)

* Add function to get users in block * Fixed to keep block state
usatie · Jan 9, 2024 · 0460583 · 0460583
1 parent 6212a67
commit 0460583
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 6 deletions.
diff --git a/frontend/app/lib/actions.ts b/frontend/app/lib/actions.ts
@@ -356,6 +356,23 @@ export async function updatePassword(
   }
 }
 
+export async function getBlockingUsers() {
+  const userId = await getCurrentUserId();
+  const res = await fetch(`${process.env.API_URL}/user/${userId}/block`, {
+    headers: {
+      Authorization: "Bearer " + getAccessToken(),
+      "Content-Type": "application/json",
+    },
+  });
+  if (!res.ok) {
+    console.error("getBlockingUsers error: ", await res.json());
+    throw new Error("getBlockingUsers error");
+  } else {
+    const blockingUsers = await res.json();
+    return blockingUsers;
+  }
+}
+
 export async function blockUser(blockedUserId: number) {
   const userId = await getCurrentUserId();
   const res = await fetch(`${process.env.API_URL}/user/${userId}/block`, {

diff --git a/frontend/app/room/[id]/sidebar-item.tsx b/frontend/app/room/[id]/sidebar-item.tsx
@@ -6,7 +6,7 @@ import {
   unblockUser,
   updateRoomUser,
 } from "@/app/lib/actions";
-import type { UserOnRoomEntity } from "@/app/lib/dtos";
+import type { PublicUserEntity, UserOnRoomEntity } from "@/app/lib/dtos";
 import { SmallAvatarSkeleton } from "@/app/ui/room/skeleton";
 import {
   ContextMenu,
@@ -16,6 +16,7 @@ import {
   ContextMenuTrigger,
 } from "@/components/ui/context-menu";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 
 function truncateString(str: string | undefined, num: number): string {
   if (!str) {
@@ -38,15 +39,20 @@ export default function SidebarItem({
   roomId,
   user,
   me,
+  blockingUsers,
 }: {
   roomId: number;
   user: UserOnRoomEntity;
   me: UserOnRoomEntity;
+  blockingUsers: PublicUserEntity[];
 }) {
+  const [isBlocked, setIsBlocked] = useState(
+    blockingUsers.some((u: PublicUserEntity) => u.id === user.userId),
+  );
   const isUserAdmin = user.role === "ADMINISTRATOR";
   const isUserOwner = user.role === "OWNER";
   const isMeAdminOrOwner = me.role === "ADMINISTRATOR" || me.role === "OWNER";
-  const isBlocked = false; // TODO: user.blockedBy.contains((u) => u.id === me.userId);
+
   const router = useRouter();
   const openProfile = () => {
     if (user.userId === me.userId) {
@@ -55,8 +61,18 @@ export default function SidebarItem({
       router.push(`/user/${user.userId}`);
     }
   };
-  const block = () => blockUser(user.userId);
-  const unblock = () => unblockUser(user.userId);
+  const block = async () => {
+    const res = await blockUser(user.userId);
+    if (res === "Success") {
+      setIsBlocked(true);
+    }
+  };
+  const unblock = async () => {
+    const res = await unblockUser(user.userId);
+    if (res === "Success") {
+      setIsBlocked(false);
+    }
+  };
   const kick = () => kickUserOnRoom(roomId, user.userId);
   const updateUserRole = isUserAdmin
     ? () => updateRoomUser("MEMBER", roomId, user.userId)

diff --git a/frontend/app/room/[id]/sidebar.tsx b/frontend/app/room/[id]/sidebar.tsx
@@ -3,7 +3,7 @@ import { getCurrentUserId } from "@/app/lib/session";
 import { Stack } from "@/components/layout/stack";
 import SidebarItem from "./sidebar-item";
 import { SidebarMenu } from "./sidebar-menu";
-import { getBannedUsers } from "@/app/lib/actions";
+import { getBannedUsers, getBlockingUsers } from "@/app/lib/actions";
 
 export async function Sidebar({
   roomId,
@@ -24,6 +24,7 @@ export async function Sidebar({
     throw new Error("User not found");
   }
   const bannedUsers = await getBannedUsers(roomId);
+  const blockingUsers = await getBlockingUsers();
   return (
     <div className="overflow-y-auto shrink-0 basis-36 pb-4">
       <SidebarMenu
@@ -36,7 +37,13 @@ export async function Sidebar({
       />
       <Stack space="space-y-2">
         {users.map((user) => (
-          <SidebarItem roomId={roomId} user={user} me={me} key={user.userId} />
+          <SidebarItem
+            roomId={roomId}
+            user={user}
+            me={me}
+            blockingUsers={blockingUsers}
+            key={user.userId}
+          />
         ))}
       </Stack>
     </div>