Done on function Ban and Unban User with reason and expiration date

2026-01-21 20:28:04 +07:00
parent e02564b5cd
commit a8745327d6
23 changed files with 511 additions and 239 deletions
--- a/src/components/user/ban-user-confirm-dialog.tsx
+++ b/src/components/user/ban-user-confirm-dialog.tsx
@@ -0,0 +1,98 @@
+import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus';
+import { m } from '@/paraglide/messages';
+import { usersQueries } from '@/service/queries';
+import { banUser } from '@/service/user.api';
+import { ReturnError } from '@/types/common';
+import { ShieldWarningIcon } from '@phosphor-icons/react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { UserWithRole } from 'better-auth/plugins';
+import { toast } from 'sonner';
+import DisplayBreakLineMessage from '../DisplayBreakLineMessage';
+import { Button } from '../ui/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog';
+import { useBanContext } from './ban-user-dialog';
+
+type BanConfirmProps = {
+  data: UserWithRole;
+};
+
+const BanUserConfirm = ({ data }: BanConfirmProps) => {
+  const { openConfirm, setOpenConfirm, submitData } = useBanContext();
+  const queryClient = useQueryClient();
+  const prevent = usePreventAutoFocus();
+
+  const { mutate: banUserMutation } = useMutation({
+    mutationFn: banUser,
+    onSuccess: () => {
+      queryClient.refetchQueries({
+        queryKey: usersQueries.all,
+      });
+      setOpenConfirm(false);
+      toast.success(m.users_page_message_banned_success({ name: data.name }), {
+        richColors: true,
+      });
+    },
+    onError: (error: ReturnError) => {
+      console.error(error);
+      toast.error(m.backend_message({ code: error.code }), {
+        richColors: true,
+      });
+    },
+  });
+
+  const onConfirm = () => {
+    banUserMutation({ data: submitData });
+  };
+
+  return (
+    <Dialog open={openConfirm} onOpenChange={setOpenConfirm}>
+      <DialogContent
+        showCloseButton={false}
+        {...prevent}
+        onPointerDownOutside={(e) => e.preventDefault()}
+      >
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-3 text-lg font-bold text-red-500">
+            <div className="rounded-full bg-red-100 p-3">
+              <ShieldWarningIcon size={30} />
+            </div>
+            {m.users_page_ui_dialog_alert_ban_title()}
+          </DialogTitle>
+          <DialogDescription className="sr-only">
+            {m.users_page_ui_dialog_alert_ban_title()}
+          </DialogDescription>
+        </DialogHeader>
+        <DisplayBreakLineMessage>
+          {m.users_page_ui_dialog_alert_description({
+            name: data.name,
+            email: data.email,
+          })}
+          {m.users_page_ui_dialog_alert_description_2({
+            reason: submitData.banReason,
+            exp: m.exp_time({ time: submitData.banExp }),
+          })}
+        </DisplayBreakLineMessage>
+        <DialogFooter className="bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4">
+          <DialogClose asChild>
+            <Button variant="outline" type="button">
+              {m.ui_cancel_btn()}
+            </Button>
+          </DialogClose>
+          <Button variant="destructive" type="button" onClick={onConfirm}>
+            {m.ui_confirm_btn()}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default BanUserConfirm;