Merge branch 'main' into fix/dashboard-event-organizer-gatekeeper-form-crash

Author: WaDadidou

api/zenao/v1/zenao.proto

@@ -48,6 +48,8 @@ service ZenaoService {
       returns (GetCommunityAdministratorsResponse);
   rpc JoinCommunity(JoinCommunityRequest) returns (JoinCommunityResponse);
   rpc LeaveCommunity(LeaveCommunityRequest) returns (LeaveCommunityResponse);
+  rpc RemoveCommunityMember(RemoveCommunityMemberRequest)
+      returns (RemoveCommunityMemberResponse);
   rpc AddEventToCommunity(AddEventToCommunityRequest)
       returns (AddEventToCommunityResponse);
   rpc RemoveEventFromCommunity(RemoveEventFromCommunityRequest)
@@ -703,6 +705,12 @@ message JoinCommunityResponse {}
 message LeaveCommunityRequest { string community_id = 1; }
 message LeaveCommunityResponse {}
 
+message RemoveCommunityMemberRequest {
+  string community_id = 1;
+  string user_id = 2;
+}
+message RemoveCommunityMemberResponse {}
+
 message AddEventToCommunityRequest {
   string community_id = 1;
   string event_id = 2;

app/(dashboard)/dashboard/community/[id]/members/columns.tsx

@@ -1,61 +1,114 @@
 import { ColumnDef } from "@tanstack/react-table";
+import { Trash2 } from "lucide-react";
 import { useMemo } from "react";
 import { useTranslations } from "next-intl";
+import { Button } from "@/components/shadcn/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/shadcn/tooltip";
 import { UserAvatarWithName } from "@/components/features/user/user";
 import { SafeCommunityEntityWithRoles } from "@/types/schemas";
 import { DataTableColumnHeader } from "@/components/widgets/data-table/data-table-column-header";
 
-export const useMembersColumns =
-  (): ColumnDef<SafeCommunityEntityWithRoles>[] => {
-    const t = useTranslations("dashboard.membersTable");
+interface UseMembersColumnsProps {
+  onDelete?: (userId: string) => void;
+}
 
-    const columns = useMemo<ColumnDef<SafeCommunityEntityWithRoles>[]>(
-      () => [
-        {
-          id: "name",
-          header: ({ column }) => (
-            <DataTableColumnHeader column={column} title={t("name-column")} />
-          ),
-          cell: ({ row }) => {
-            if (row.original.entityType !== "user") {
-              return <div className="px-4">Unknown Entity</div>;
-            }
+export const useMembersColumns = (
+  props?: UseMembersColumnsProps,
+): ColumnDef<SafeCommunityEntityWithRoles>[] => {
+  const t = useTranslations("dashboard.membersTable");
 
-            return (
-              <div className="px-4">
-                <UserAvatarWithName
-                  userId={row.original.entityId}
-                  className="h-10"
-                  linkToProfile
-                />
-              </div>
-            );
-          },
-          enableHiding: false,
-          enableSorting: true,
-        },
-        {
-          accessorKey: "Roles",
-          header: ({ column }) => (
-            <DataTableColumnHeader column={column} title={t("roles-column")} />
-          ),
-          cell: ({ row }) => (
-            <div className="flex flex-wrap gap-1">
-              {row.original.roles.map((role) => (
-                <span
-                  key={role}
-                  className="rounded-md bg-secondary px-2 py-1 text-xs font-medium text-secondary-color"
-                >
-                  {role}
-                </span>
-              ))}
+  const columns = useMemo<ColumnDef<SafeCommunityEntityWithRoles>[]>(
+    () => [
+      {
+        id: "name",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title={t("name-column")} />
+        ),
+        cell: ({ row }) => {
+          if (row.original.entityType !== "user") {
+            return <div className="px-4">Unknown Entity</div>;
+          }
+
+          return (
+            <div className="px-4">
+              <UserAvatarWithName
+                userId={row.original.entityId}
+                className="h-10"
+                linkToProfile
+              />
             </div>
-          ),
-          enableSorting: true,
+          );
         },
-      ],
-      [t],
-    );
+        enableHiding: false,
+        enableSorting: true,
+      },
+      {
+        accessorKey: "Roles",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title={t("roles-column")} />
+        ),
+        cell: ({ row }) => (
+          <div className="flex flex-wrap gap-1">
+            {row.original.roles.map((role) => (
+              <span
+                key={role}
+                className="rounded-md bg-secondary px-2 py-1 text-xs font-medium text-secondary-color"
+              >
+                {role}
+              </span>
+            ))}
+          </div>
+        ),
+        enableSorting: true,
+      },
+      ...(props?.onDelete
+        ? [
+            {
+              id: "actions",
+              header: () => <div>{t("actions-column")}</div>,
+              cell: ({
+                row,
+              }: {
+                row: { original: SafeCommunityEntityWithRoles };
+              }) => {
+                if (row.original.roles.includes("administrator")) {
+                  return null;
+                }
+                return (
+                  <Tooltip delayDuration={300}>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        className="p-0 size-8"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          props.onDelete!(row.original.entityId);
+                        }}
+                      >
+                        <Trash2 className="text-muted-foreground w-4 h-4" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      {t("action-tooltip-delete")}
+                    </TooltipContent>
+                  </Tooltip>
+                );
+              },
+              enableHiding: false,
+              enableSorting: false,
+              meta: {
+                className: "flex justify-end items-center px-4",
+              },
+            } satisfies ColumnDef<SafeCommunityEntityWithRoles>,
+          ]
+        : []),
+    ],
+    [t, props],
+  );
 
-    return columns;
-  };
+  return columns;
+};

app/(dashboard)/dashboard/community/[id]/members/members-table.tsx

@@ -3,6 +3,8 @@
 import { parseAsInteger, useQueryStates } from "nuqs";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { useTranslations } from "next-intl";
+import { useCallback, useState } from "react";
+import { useAuth } from "@clerk/nextjs";
 import { useMembersColumns } from "./columns";
 import { DataTable as DataTableNew } from "@/components/widgets/data-table/data-table";
 import { useDataTableInstance } from "@/hooks/use-data-table-instance";
@@ -13,14 +15,59 @@ import {
 import Text from "@/components/widgets/texts/text";
 import { DataTablePagination } from "@/components/widgets/data-table/data-table-pagination";
 import { useDashboardCommunityContext } from "@/components/providers/dashboard-community-context-provider";
+import { useRemoveCommunityMember } from "@/lib/mutations/community-remove-member";
+import { useToast } from "@/hooks/use-toast";
+import { captureException } from "@/lib/report";
+import ConfirmationDialog from "@/components/dialogs/confirmation-dialog";
 
 export default function MembersTable() {
   const t = useTranslations("dashboard.communityDetails.members");
-  const { communityId } = useDashboardCommunityContext();
+  const { communityId, roles } = useDashboardCommunityContext();
+  const { getToken } = useAuth();
+  const { toast } = useToast();
+
+  const isAdmin = roles.includes("administrator");
+
   const { data: members } = useSuspenseQuery(
     communityUsersWithRoles(communityId, ["member"]),
   );
 
+  const { removeCommunityMember, isPending } = useRemoveCommunityMember();
+  const [pendingDeleteUserId, setPendingDeleteUserId] = useState<string | null>(
+    null,
+  );
+
+  const onDelete = useCallback((userId: string) => {
+    setPendingDeleteUserId(userId);
+  }, []);
+
+  const handleConfirmDelete = useCallback(async () => {
+    if (!pendingDeleteUserId) return;
+    try {
+      await removeCommunityMember({
+        communityId,
+        userId: pendingDeleteUserId,
+        getToken,
+      });
+      toast({ title: t("toast-remove-member-success") });
+    } catch (err) {
+      captureException(err);
+      toast({
+        variant: "destructive",
+        title: t("toast-remove-member-error"),
+      });
+    } finally {
+      setPendingDeleteUserId(null);
+    }
+  }, [
+    communityId,
+    getToken,
+    pendingDeleteUserId,
+    removeCommunityMember,
+    t,
+    toast,
+  ]);
+
   const [tablePagination, setTablePagination] = useQueryStates(
     {
       page: parseAsInteger.withDefault(1),
@@ -32,7 +79,7 @@ export default function MembersTable() {
     },
   );
 
-  const columns = useMembersColumns();
+  const columns = useMembersColumns(isAdmin ? { onDelete } : undefined);
   const table = useDataTableInstance({
     data: members,
     columns,
@@ -88,6 +135,15 @@ export default function MembersTable() {
         }}
         table={table}
       />
+      <ConfirmationDialog
+        open={!!pendingDeleteUserId}
+        onOpenChange={(open) => !open && setPendingDeleteUserId(null)}
+        title={t("confirm-remove-member-title")}
+        description={t("confirm-remove-member-description")}
+        confirmText={t("confirm-remove-member-confirm")}
+        onConfirm={handleConfirmDelete}
+        isPending={isPending}
+      />
     </div>
   );
 }

app/gen/zenao/v1/zenao_pb.ts

@@ -836,7 +836,9 @@
     },
     "membersTable": {
       "name-column": "Name",
-      "roles-column": "Roles"
+      "roles-column": "Roles",
+      "actions-column": "Actions",
+      "action-tooltip-delete": "Remove member"
     },
     "eventsTable": {
       "events": "Events",
@@ -896,7 +898,12 @@
         }
       },
       "members": {
-        "no-members": "No members yet."
+        "no-members": "No members yet.",
+        "toast-remove-member-success": "Member removed successfully!",
+        "toast-remove-member-error": "Error while removing member!",
+        "confirm-remove-member-title": "Remove member",
+        "confirm-remove-member-description": "Are you sure you want to remove this member from the community?",
+        "confirm-remove-member-confirm": "Remove"
       },
       "events": {
         "no-events": "No events yet."

app/i18n/messages/en.json

@@ -835,7 +835,9 @@
     },
     "membersTable": {
       "name-column": "Nombre",
-      "roles-column": "Roles"
+      "roles-column": "Roles",
+      "actions-column": "Acciones",
+      "action-tooltip-delete": "Eliminar miembro"
     },
     "eventsTable": {
       "events": "Eventos",
@@ -895,7 +897,12 @@
         }
       },
       "members": {
-        "no-members": "Aún no hay miembros."
+        "no-members": "Aún no hay miembros.",
+        "toast-remove-member-success": "¡Miembro eliminado con éxito!",
+        "toast-remove-member-error": "¡Error al eliminar el miembro!",
+        "confirm-remove-member-title": "Eliminar miembro",
+        "confirm-remove-member-description": "¿Estás seguro de que deseas eliminar este miembro de la comunidad?",
+        "confirm-remove-member-confirm": "Eliminar"
       },
       "events": {
         "no-events": "Aún no hay eventos."

app/i18n/messages/es.json

@@ -836,7 +836,9 @@
     },
     "membersTable": {
       "name-column": "Nom",
-      "roles-column": "Rôles"
+      "roles-column": "Rôles",
+      "actions-column": "Actions",
+      "action-tooltip-delete": "Retirer le membre"
     },
     "eventsTable": {
       "events": "Événements",
@@ -896,7 +898,12 @@
         }
       },
       "members": {
-        "no-members": "Aucun membre pour le moment."
+        "no-members": "Aucun membre pour le moment.",
+        "toast-remove-member-success": "Membre retiré avec succès !",
+        "toast-remove-member-error": "Erreur lors du retrait du membre !",
+        "confirm-remove-member-title": "Retirer le membre",
+        "confirm-remove-member-description": "Êtes-vous sûr de vouloir retirer ce membre de la communauté ?",
+        "confirm-remove-member-confirm": "Retirer"
       },
       "events": {
         "no-events": "Aucun événement pour le moment."