Add remove participant from achievement

Author: nalves599

src/app/(authenticated)/sessions/[id]/participants/RemoveUser.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { Trash } from "lucide-react";
+
+interface RemoveUserProps {
+  userName: string;
+  userId: string;
+  handleRemoveUser(userId: string): Promise<void>;
+}
+
+export default function RemoveUser({
+  userName,
+  userId,
+  handleRemoveUser,
+}: RemoveUserProps) {
+  async function removeUser() {
+    if (window.confirm(`Do you really want to remove ${userName}?`)) {
+      await handleRemoveUser(userId);
+      window.location.reload();
+    }
+  }
+
+  return (
+    <button
+      onClick={removeUser}
+      className="size-8 flex items-center justify-center rounded-full shadow-md bg-red-800 text-white"
+    >
+      <Trash size={16} />
+    </button>
+  );
+}

src/app/(authenticated)/sessions/[id]/participants/page.tsx

@@ -6,6 +6,7 @@ import { AchievementService } from "@/services/AchievementService";
 import { SessionService } from "@/services/SessionService";
 import { UserService } from "@/services/UserService";
 import { getServerSession } from "next-auth";
+import RemoveUser from "./RemoveUser";
 
 interface SessionParticipantsParams {
   id: string;
@@ -24,20 +25,38 @@ export default async function SessionParticipants({
     return <BlankPageWithMessage message="Session not found!" />;
   }
 
-  const session = await getServerSession(authOptions);
+  const session = (await getServerSession(authOptions))!;
 
   const sessionAchievement = await AchievementService.getAchievementBySession(
-    session!.cannonToken,
-    sessionID
+    session.cannonToken,
+    sessionID,
   );
   if (!sessionAchievement) {
     return <BlankPageWithMessage message="Sesssion Achievement not found!" />;
   }
 
+  async function removeUser(userId: string) {
+    "use server";
+    await AchievementService.removeUser(
+      session.cannonToken,
+      sessionAchievement!.id,
+      userId,
+    );
+  }
+
   async function getUserTile(userId: string) {
     const user = await UserService.getUser(session!.cannonToken, userId);
     if (!user) return undefined;
-    return <UserTile key={user.id} user={user} />;
+    return (
+      <div className="flex items-center gap-x-2 w-full">
+        <UserTile key={user.id} user={user} />
+        <RemoveUser
+          userId={user.id}
+          userName={user.name}
+          handleRemoveUser={removeUser}
+        />
+      </div>
+    );
   }
 
   const unregisteredUsers = sessionAchievement.unregisteredUsers || 0;
@@ -52,7 +71,7 @@ export default async function SessionParticipants({
       >
         {sessionAchievement.users?.length ? (
           await Promise.all(
-            sessionAchievement.users.map((id) => getUserTile(id))
+            sessionAchievement.users.map((id) => getUserTile(id)),
           )
         ) : (
           <div>There are no registered users at this session</div>

src/components/ListCard.tsx

@@ -27,7 +27,7 @@ interface ConditionalLinkProps extends Partial<LinkProps> {
 function ConditionalLink({ children, href, ...props }: ConditionalLinkProps) {
   if (!href) return children;
   return (
-    <Link href={href} {...props}>
+    <Link href={href} className="grow" {...props}>
       {children}
     </Link>
   );
@@ -52,7 +52,7 @@ export default function ListCard({
   return (
     <ConditionalLink href={link} {...linkProps}>
       <div
-        className={`min-w-[340px] min-h-[74px] px-4 py-2 flex items-center justify-start gap-x-4 bg-white rounded-md shadow-md text-sm overflow-hidden hover:bg-slate-50 hover:shadow-sm active:bg-gray-200 active:shadow-none ${extraClassName || ""}`}
+        className={`min-w-[300px] min-h-[74px] px-4 py-2 flex items-center justify-start gap-x-4 bg-white rounded-md shadow-md text-sm overflow-hidden hover:bg-slate-50 hover:shadow-sm active:bg-gray-200 active:shadow-none ${extraClassName || ""}`}
       >
         {img && (
           <Image

src/services/AchievementService.ts

@@ -52,5 +52,33 @@ export const AchievementService = (() => {
     return false;
   };
 
-  return { getAchievements, getAchievementBySession, redeemSecretAchievement };
+  const removeUser = async (
+    cannonToken: string,
+    id: string,
+    userId: string,
+  ): Promise<Achievement | null> => {
+    try {
+      const resp = await fetch(
+        `${achievementsEndpoint}/${id}/users/${userId}`,
+        {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${cannonToken}`,
+          },
+        },
+      );
+      if (resp.ok) return (await resp.json()) as Achievement;
+    } catch (e) {
+      console.error(e);
+    }
+    return null;
+  };
+
+  return {
+    getAchievements,
+    getAchievementBySession,
+    redeemSecretAchievement,
+    removeUser,
+  };
 })();