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

src/components/form/admin-ban-user-form.tsx

@@ -1,13 +1,8 @@
 import { m } from '@/paraglide/messages';
-import { usersQueries } from '@/service/queries';
-import { banUser } from '@/service/user.api';
 import { userBanSchema } from '@/service/user.schema';
-import { ReturnError } from '@/types/common';
 import { WarningIcon } from '@phosphor-icons/react';
 import { useForm } from '@tanstack/react-form';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { UserWithRole } from 'better-auth/plugins';
-import { toast } from 'sonner';
 import { Alert, AlertDescription, AlertTitle } from '../ui/alert';
 import { Button } from '../ui/button';
 import { DialogClose, DialogFooter } from '../ui/dialog';
@@ -21,34 +16,14 @@ import {
   SelectValue,
 } from '../ui/select';
 import { Textarea } from '../ui/textarea';
+import { useBanContext } from '../user/ban-user-dialog';
 
 type FormProps = {
   data: UserWithRole;
-  onSubmit: (open: boolean) => void;
 };
 
-const BanUserForm = ({ data, onSubmit }: FormProps) => {
-  const queryClient = useQueryClient();
-
-  const banUserMutation = useMutation({
-    mutationFn: banUser,
-    onSuccess: () => {
-      queryClient.refetchQueries({
-        queryKey: usersQueries.all,
-      });
-      onSubmit(false);
-      toast.success(m.users_page_message_banned_success({ name: data.name }), {
-        richColors: true,
-      });
-    },
-    onError: (error: ReturnError) => {
-      console.error(error);
-      toast.error(
-        (m[`backend_${error.code}` as keyof typeof m] as () => string)(),
-        { richColors: true },
-      );
-    },
-  });
+const BanUserForm = ({ data }: FormProps) => {
+  const { setSubmitData, setOpen, setOpenConfirm } = useBanContext();
 
   const form = useForm({
     defaultValues: {
@@ -61,7 +36,11 @@ const BanUserForm = ({ data, onSubmit }: FormProps) => {
       onSubmit: userBanSchema,
     },
     onSubmit: async ({ value }) => {
-      banUserMutation.mutate({ data: value });
+      setSubmitData(value);
+      setOpen(false);
+      setTimeout(() => {
+        setOpenConfirm(true);
+      }, 100);
     },
   });
 
@@ -147,25 +126,25 @@ const BanUserForm = ({ data, onSubmit }: FormProps) => {
                   </SelectTrigger>
                   <SelectContent>
                     <SelectItem value="1">
-                      {m.exp_time({ time: '1d' })}
+                      {m.exp_time({ time: '1' })}
                     </SelectItem>
                     <SelectItem value="7">
-                      {m.exp_time({ time: '7d' })}
+                      {m.exp_time({ time: '7' })}
                     </SelectItem>
                     <SelectItem value="15">
-                      {m.exp_time({ time: '15d' })}
+                      {m.exp_time({ time: '15' })}
                     </SelectItem>
                     <SelectItem value="30">
-                      {m.exp_time({ time: '1m' })}
+                      {m.exp_time({ time: '30' })}
                     </SelectItem>
                     <SelectItem value="180">
-                      {m.exp_time({ time: '6m' })}
+                      {m.exp_time({ time: '180' })}
                     </SelectItem>
                     <SelectItem value="365">
-                      {m.exp_time({ time: '1y' })}
+                      {m.exp_time({ time: '365' })}
                     </SelectItem>
                     <SelectItem value="99999">
-                      {m.exp_time({ time: '0' })}
+                      {m.exp_time({ time: '99999' })}
                     </SelectItem>
                   </SelectContent>
                 </Select>
@@ -176,11 +155,11 @@ const BanUserForm = ({ data, onSubmit }: FormProps) => {
         <Field>
           <DialogFooter>
             <DialogClose asChild>
-              <Button variant="destructive" type="button">
+              <Button variant="outline" type="button">
                 {m.ui_cancel_btn()}
               </Button>
             </DialogClose>
-            <Button type="submit" variant="outline">
+            <Button type="submit" variant="destructive">
               {m.ui_ban_btn()}
             </Button>
           </DialogFooter>

src/components/form/admin-set-password-form.tsx

@@ -33,10 +33,9 @@ const AdminSetPasswordForm = ({ data, onSubmit }: FormProps) => {
     },
     onError: (error: ReturnError) => {
       console.error(error);
-      toast.error(
-        (m[`backend_${error.code}` as keyof typeof m] as () => string)(),
-        { richColors: true },
-      );
+      toast.error(m.backend_message({ code: error.code }), {
+        richColors: true,
+      });
     },
   });
 

src/components/form/admin-set-user-role-form.tsx

@@ -45,10 +45,9 @@ const AdminSetUserRoleForm = ({ data, onSubmit }: SetRoleFormProps) => {
     },
     onError: (error: ReturnError) => {
       console.error(error);
-      toast.error(
-        (m[`backend_${error.code}` as keyof typeof m] as () => string)(),
-        { richColors: true },
-      );
+      toast.error(m.backend_message({ code: error.code }), {
+        richColors: true,
+      });
     },
   });
 
@@ -111,7 +110,7 @@ const AdminSetUserRoleForm = ({ data, onSubmit }: SetRoleFormProps) => {
                 >
                   <SelectTrigger aria-invalid={isInvalid}>
                     <SelectValue
-                      placeholder={m.users_page_ui_select_placeholder_language()}
+                      placeholder={m.users_page_ui_select_placeholder_role()}
                     />
                   </SelectTrigger>
                   <SelectContent>

src/components/form/admin-update-user-info-form.tsx

@@ -33,10 +33,9 @@ const AdminUpdateUserInfoForm = ({ data, onSubmit }: UpdateUserFormProps) => {
     },
     onError: (error: ReturnError) => {
       console.error(error);
-      toast.error(
-        (m[`backend_${error.code}` as keyof typeof m] as () => string)(),
-        { richColors: true },
-      );
+      toast.error(m.backend_message({ code: error.code }), {
+        richColors: true,
+      });
     },
   });
   const form = useForm({

src/components/form/change-password-form.tsx

@@ -71,14 +71,9 @@ const ChangePasswordForm = () => {
           },
           onError: (ctx) => {
             console.error(ctx.error.code);
-            toast.error(
-              (
-                m[`backend_${ctx.error.code}` as keyof typeof m] as () => string
-              )(),
-              {
-                richColors: true,
-              },
-            );
+            toast.error(m.backend_message({ code: ctx.error.code }), {
+              richColors: true,
+            });
           },
         },
       );

src/components/form/profile-form.tsx

@@ -67,16 +67,9 @@ const ProfileForm = () => {
             },
             onError: (ctx) => {
               console.error(ctx.error.code);
-              toast.error(
-                (
-                  m[
-                    `backend_${ctx.error.code}` as keyof typeof m
-                  ] as () => string
-                )(),
-                {
-                  richColors: true,
-                },
-              );
+              toast.error(m.backend_message({ code: ctx.error.code }), {
+                richColors: true,
+              });
             },
           },
         );

src/components/form/settings-form.tsx

@@ -35,10 +35,9 @@ const SettingsForm = () => {
     },
     onError: (error: ReturnError) => {
       console.error(error);
-      toast.error(
-        (m[`backend_${error.code}` as keyof typeof m] as () => string)(),
-        { richColors: true },
-      );
+      toast.error(m.backend_message({ code: error.code }), {
+        richColors: true,
+      });
     },
   });
 

src/components/form/signin-form.tsx

@@ -52,14 +52,9 @@ const SignInForm = () => {
           },
           onError: (ctx) => {
             console.error(ctx.error.code);
-            toast.error(
-              (
-                m[`backend_${ctx.error.code}` as keyof typeof m] as () => string
-              )(),
-              {
-                richColors: true,
-              },
-            );
+            toast.error(m.backend_message({ code: ctx.error.code }), {
+              richColors: true,
+            });
           },
         },
       );

src/components/form/user-settings-form.tsx

@@ -43,10 +43,9 @@ const UserSettingsForm = () => {
     },
     onError: (error: ReturnError) => {
       console.error(error);
-      toast.error(
-        (m[`backend_${error.code}` as keyof typeof m] as () => string)(),
-        { richColors: true },
-      );
+      toast.error(m.backend_message({ code: error.code }), {
+        richColors: true,
+      });
     },
   });