[frontend] mute user in room (#219)

* Add function to actions that calls mute API * Add mute ui to sidebar-item
usatie · Jan 20, 2024 · dd17284 · dd17284
1 parent 7ae0df0
commit dd17284
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 3 deletions.
diff --git a/frontend/app/lib/actions.ts b/frontend/app/lib/actions.ts
@@ -734,6 +734,66 @@ export async function twoFactorAuthenticate(
   }
 }
 
+export async function muteUser(
+  roomId: number,
+  userId: number,
+  durationSec?: number,
+) {
+  if (durationSec && durationSec < 0) {
+    throw new Error("Duration must be positive");
+  }
+  const res = await fetch(
+    `${process.env.API_URL}/room/${roomId}/mutes/${userId}`,
+    {
+      method: "PUT",
+      headers: {
+        Authorization: "Bearer " + getAccessToken(),
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ duration: durationSec }),
+    },
+  );
+  if (!res.ok) {
+    console.error("muteUser error: ", await res.json());
+    return "Error";
+  } else {
+    return "Success";
+  }
+}
+
+export async function getMutedUsers(roomId: number) {
+  const res = await fetch(`${process.env.API_URL}/room/${roomId}/mutes`, {
+    headers: {
+      Authorization: "Bearer " + getAccessToken(),
+    },
+  });
+  if (!res.ok) {
+    console.error("getMutedUsers error: ", await res.json());
+    return null;
+  } else {
+    const mutedUsers = res.json();
+    return mutedUsers;
+  }
+}
+
+export async function unmuteUser(roomId: number, userId: number) {
+  const res = await fetch(
+    `${process.env.API_URL}/room/${roomId}/mutes/${userId}`,
+    {
+      method: "DELETE",
+      headers: {
+        Authorization: "Bearer " + getAccessToken(),
+      },
+    },
+  );
+  if (!res.ok) {
+    console.error("unmuteUser error: ", await res.json());
+    return "Error";
+  } else {
+    return "Success";
+  }
+}
+
 export async function banUser(roomId: number, userId: number) {
   const res = await fetch(
     `${process.env.API_URL}/room/${roomId}/bans/${userId}`,
@@ -761,7 +821,7 @@ export async function getBannedUsers(roomId: number) {
   });
   if (!res.ok) {
     console.error("getBannedUsers error: ", await res.json());
-    return "Error";
+    return null;
   } else {
     const bannedUsers = res.json();
     return bannedUsers;

diff --git a/frontend/app/room/[id]/room-detail.tsx b/frontend/app/room/[id]/room-detail.tsx
@@ -1,4 +1,8 @@
-import { getBannedUsers, getBlockingUsers } from "@/app/lib/actions";
+import {
+  getBannedUsers,
+  getBlockingUsers,
+  getMutedUsers,
+} from "@/app/lib/actions";
 import type {
   PublicUserEntity,
   RoomEntity,
@@ -24,6 +28,7 @@ export default async function RoomDetail({ room, users, allUsers }: Props) {
   }
   const bannedUsers = (await getBannedUsers(room.id)) ?? [];
   const blockingUsers = (await getBlockingUsers()) ?? [];
+  const mutedUsers = (await getMutedUsers(room.id)) ?? [];
   return (
     <div className="overflow-y-auto shrink-0 basis-36 pb-4 flex flex-col gap-2">
       {room.accessLevel !== "DIRECT" && (
@@ -43,6 +48,7 @@ export default async function RoomDetail({ room, users, allUsers }: Props) {
             user={user}
             me={me}
             blockingUsers={blockingUsers}
+            mutedUsers={mutedUsers}
             key={user.userId}
           />
         ))}

diff --git a/frontend/app/room/[id]/sidebar-item.tsx b/frontend/app/room/[id]/sidebar-item.tsx
@@ -5,6 +5,8 @@ import {
   kickUserOnRoom,
   unblockUser,
   updateRoomUser,
+  muteUser,
+  unmuteUser,
 } from "@/app/lib/actions";
 import type {
   PublicUserEntity,
@@ -18,6 +20,9 @@ import {
   ContextMenuItem,
   ContextMenuSeparator,
   ContextMenuTrigger,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
 } from "@/components/ui/context-menu";
 import { chatSocket as socket } from "@/socket";
 import { useRouter } from "next/navigation";
@@ -50,17 +55,22 @@ export default function SidebarItem({
   user,
   me,
   blockingUsers,
+  mutedUsers,
 }: {
   room: RoomEntity;
   user: UserOnRoomEntity;
   me: UserOnRoomEntity;
   blockingUsers: PublicUserEntity[];
+  mutedUsers: PublicUserEntity[];
 }) {
   const router = useRouter();
   const [isBlocked, setIsBlocked] = useState(
     blockingUsers.some((u: PublicUserEntity) => u.id === user.userId),
   );
   const [isKicked, setIsKicked] = useState(false);
+  const [isMuted, setIsMuted] = useState(
+    mutedUsers?.some((u: PublicUserEntity) => u.id === user.userId),
+  );
   useEffect(() => {
     const handleLeftEvent = (data: LeaveEvent) => {
       if (Number(data.userId) === me.userId) {
@@ -101,6 +111,18 @@ export default function SidebarItem({
       setIsBlocked(false);
     }
   };
+  const mute = async (duration?: number) => {
+    const res = await muteUser(room.id, user.userId, duration);
+    if (res === "Success") {
+      setIsMuted(true);
+    }
+  };
+  const unmute = async () => {
+    const res = await unmuteUser(room.id, user.userId);
+    if (res === "Success") {
+      setIsMuted(false);
+    }
+  };
   const kick = () => kickUserOnRoom(room.id, user.userId);
   const updateUserRole = isUserAdmin
     ? () => updateRoomUser("MEMBER", room.id, user.userId)
@@ -130,7 +152,44 @@ export default function SidebarItem({
                 </ContextMenuItem>
                 {isMeAdminOrOwner && !isUserOwner && (
                   <>
-                    <ContextMenuItem disabled={isUserOwner} onSelect={kick}>
+                    {!isMuted && (
+                      <ContextMenuSub>
+                        <ContextMenuSubTrigger>Mute</ContextMenuSubTrigger>
+                        <ContextMenuSubContent className="w-46">
+                          <ContextMenuItem onSelect={() => mute(60)}>
+                            For 5 minutes
+                          </ContextMenuItem>
+                          <ContextMenuItem onSelect={() => mute(15 * 60)}>
+                            For 15 minutes
+                          </ContextMenuItem>
+                          <ContextMenuItem onSelect={() => mute(60 * 60)}>
+                            For 1 Hour
+                          </ContextMenuItem>
+                          <ContextMenuItem onSelect={() => mute(180 * 60)}>
+                            For 3 Hours
+                          </ContextMenuItem>
+                          <ContextMenuItem onSelect={() => mute(480 * 60)}>
+                            For 8 Hours
+                          </ContextMenuItem>
+                          <ContextMenuItem onSelect={() => mute(1440 * 60)}>
+                            For 24 Hours
+                          </ContextMenuItem>
+                          <ContextMenuItem onSelect={() => mute()}>
+                            Indefinite
+                          </ContextMenuItem>
+                        </ContextMenuSubContent>
+                      </ContextMenuSub>
+                    )}
+                    {isMuted && (
+                      <ContextMenuItem onSelect={unmute}>
+                        Unmute
+                      </ContextMenuItem>
+                    )}
+                    <ContextMenuItem
+                      className="text-primary"
+                      disabled={isUserOwner}
+                      onSelect={kick}
+                    >
                       Kick
                     </ContextMenuItem>
                     <ContextMenuItem onSelect={updateUserRole}>