fix role not found

src/components/Select.tsx

@@ -17,30 +17,54 @@ type Props = {
 } & SelectHTMLAttributes<HTMLSelectElement>
 
 const Select: FC<Props> = (props: Props) => {
+    const {
+        className,
+        items,
+        error_text,
+        placeholder,
+        label,
+        isNotRequired,
+        value,
+        ...selectProps
+    } = props
+
+    const hasMatchingItem =
+        value !== undefined &&
+        value !== '' &&
+        items?.some((item) => String(item.value) === String(value))
+
+    const selectValue =
+        !value || hasMatchingItem || !items?.length
+            ? (value ?? '')
+            : ''
+
     return (
         <div className='w-full relative'>
             {
-                props.label &&
+                label &&
                 <div className='flex items-center gap-1'>
                     <label className='text-sm'>
-                        {props.label}
+                        {label}
                     </label>
-                    {props.isNotRequired && (
+                    {isNotRequired && (
                         <span className='text-xs text-description'>(اختیاری)</span>
                     )}
                 </div>
             }
-            <select {...props} className={clx(
+            <select
+                {...selectProps}
+                value={selectValue}
+                className={clx(
                 'w-full text-black block border appearance-none border-border !bg-white px-2.5 h-10 text-sm rounded-[10px] bg-gray',
-                props.className,
-                props.label && 'mt-1'
+                className,
+                label && 'mt-1'
             )}>
                 {
-                    props.placeholder &&
-                    <option value="" disabled selected>{props.placeholder}</option>
+                    placeholder &&
+                    <option value="" disabled>{placeholder}</option>
                 }
                 {
-                    props.items?.map((item) => {
+                    items?.map((item) => {
                         return (
                             <option key={item.value} value={item.value}>
                                 {item.label}
@@ -51,12 +75,12 @@ const Select: FC<Props> = (props: Props) => {
             </select>
             <ArrowDown2 size={16} color='black' className={clx(
                 'absolute z-0 top-3 left-2',
-                props.label && 'top-10'
+                label && 'top-10'
             )} />
             {
-                props.error_text && props.error_text !== '' ?
+                error_text && error_text !== '' ?
                     <Error
-                        errorText={props.error_text}
+                        errorText={error_text}
                     />
                     : null
             }

src/pages/admin/Update.tsx

@@ -1,156 +1,148 @@
-import { type FC, useEffect } from 'react'
-import { useFormik } from 'formik'
-import * as Yup from 'yup'
-import { TickCircle } from 'iconsax-react'
-import { toast } from 'react-toastify'
-import { useNavigate, useParams } from 'react-router-dom'
-import Button from '@/components/Button'
-import Input from '@/components/Input'
-import Select from '@/components/Select'
-import { useGetAdminById, useUpdateAdmin } from './hooks/useAdminData'
-import { useGetRoles } from '@/pages/roles/hooks/useRolesData'
-import type { CreateAdminType } from './types/Types'
-import { Pages } from '@/config/Pages'
-import type { ErrorType } from '@/helpers/types'
-import { extractErrorMessage } from '@/config/func'
+import Button from "@/components/Button";
+import Input from "@/components/Input";
+import Select from "@/components/Select";
+import { extractErrorMessage } from "@/config/func";
+import { Pages } from "@/config/Pages";
+import type { ErrorType } from "@/helpers/types";
+import { useGetRoles } from "@/pages/roles/hooks/useRolesData";
+import { useFormik } from "formik";
+import { TickCircle } from "iconsax-react";
+import { type FC, useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { toast } from "react-toastify";
+import * as Yup from "yup";
+import { useGetAdminById, useUpdateAdmin } from "./hooks/useAdminData";
+import type { CreateAdminType } from "./types/Types";
 
 const UpdateAdmin: FC = () => {
-    const navigate = useNavigate()
-    const { id } = useParams()
-    const { data: adminData, isLoading } = useGetAdminById(id!)
-    const { mutate: updateAdmin, isPending } = useUpdateAdmin()
-    const { data: rolesData } = useGetRoles()
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const { data: adminData, isLoading } = useGetAdminById(id!);
+  const { mutate: updateAdmin, isPending } = useUpdateAdmin();
+  const { data: rolesData } = useGetRoles();
 
-    const roles = rolesData?.data?.map(role => ({
-        label: role.name,
-        value: role.id
-    })) || []
+  const roles =
+    rolesData?.data?.map((role) => ({
+      label: role.name,
+      value: role.id,
+    })) || [];
 
-    const admin = adminData?.data
+  const admin = adminData?.data;
 
-    const formik = useFormik<CreateAdminType>({
-        initialValues: {
-            phone: '',
-            firstName: '',
-            lastName: '',
-            roleId: '',
+  const formik = useFormik<CreateAdminType>({
+    initialValues: {
+      phone: "",
+      firstName: "",
+      lastName: "",
+      roleId: "",
+    },
+    validationSchema: Yup.object().shape({
+      phone: Yup.string().required("شماره تلفن الزامی است"),
+      firstName: Yup.string().required("نام الزامی است"),
+      lastName: Yup.string().required("نام خانوادگی الزامی است"),
+      roleId: Yup.string().required("نقش الزامی است"),
+    }),
+    onSubmit: (values) => {
+      if (!id) {
+        toast.error("شناسه مدیر یافت نشد");
+        return;
+      }
+
+      updateAdmin(
+        { id, params: values },
+        {
+          onSuccess: () => {
+            toast.success("مدیر با موفقیت به‌روزرسانی شد");
+            navigate(Pages.admins.list);
+          },
+          onError: (error: ErrorType) => {
+            toast.error(extractErrorMessage(error));
+          },
         },
-        validationSchema: Yup.object().shape({
-            phone: Yup.string().required('شماره تلفن الزامی است'),
-            firstName: Yup.string().required('نام الزامی است'),
-            lastName: Yup.string().required('نام خانوادگی الزامی است'),
-            roleId: Yup.string().required('نقش الزامی است'),
-        }),
-        onSubmit: (values) => {
-            if (!id) {
-                toast.error('شناسه مدیر یافت نشد')
-                return
-            }
+      );
+    },
+  });
 
-            updateAdmin({ id, params: values }, {
-                onSuccess: () => {
-                    toast.success('مدیر با موفقیت به‌روزرسانی شد')
-                    navigate(Pages.admins.list)
-                },
-                onError: (error: ErrorType) => {
-                    toast.error(extractErrorMessage(error))
-                },
-            })
-        },
-    })
-
-    useEffect(() => {
-        if (admin) {
-            formik.setValues({
-                phone: admin.phone || '',
-                firstName: admin.firstName || '',
-                lastName: admin.lastName || '',
-                roleId: admin.roles?.[0]?.role?.id || '',
-            })
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [admin])
-
-    if (isLoading) {
-        return (
-            <div className='w-full mt-4 flex justify-center items-center'>
-                <div>در حال بارگذاری...</div>
-            </div>
-        )
-    }
-
-    if (!admin) {
-        return (
-            <div className='w-full mt-4 flex justify-center items-center'>
-                <div>مدیر یافت نشد</div>
-            </div>
-        )
+  useEffect(() => {
+    if (admin) {
+      formik.setValues({
+        phone: admin.phone || "",
+        firstName: admin.firstName || "",
+        lastName: admin.lastName || "",
+        roleId: admin.role?.id || "",
+      });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [admin]);
 
+  if (isLoading) {
     return (
-        <div className='mt-5'>
-            <div className='flex w-full justify-between items-center'>
-                <div className='text-lg font-light'>
-                    ویرایش مدیر
-                </div>
-                <div>
-                    <Button
-                        className='px-5'
-                        onClick={() => formik.handleSubmit()}
-                        isloading={isPending}
-                    >
-                        <div className='flex gap-2 items-center'>
-                            <TickCircle className='size-5' color='white' />
-                            <div>ذخیره تغییرات</div>
-                        </div>
-                    </Button>
-                </div>
-            </div>
+      <div className="w-full mt-4 flex justify-center items-center">
+        <div>در حال بارگذاری...</div>
+      </div>
+    );
+  }
 
-            <div className='mt-6'>
-                <div className='bg-white rounded-3xl p-6'>
-                    <div className='mb-4'>
-                        <Input
-                            label='نام'
-                            name='firstName'
-                            value={formik.values.firstName}
-                            onChange={formik.handleChange}
-                            error_text={formik.touched.firstName && formik.errors.firstName ? formik.errors.firstName : ''}
-                        />
-                    </div>
-                    <div className='mt-6'>
-                        <Input
-                            label='نام خانوادگی'
-                            name='lastName'
-                            value={formik.values.lastName}
-                            onChange={formik.handleChange}
-                            error_text={formik.touched.lastName && formik.errors.lastName ? formik.errors.lastName : ''}
-                        />
-                    </div>
-                    <div className='mt-6'>
-                        <Input
-                            label='شماره تلفن'
-                            name='phone'
-                            value={formik.values.phone}
-                            onChange={formik.handleChange}
-                            error_text={formik.touched.phone && formik.errors.phone ? formik.errors.phone : ''}
-                        />
-                    </div>
-                    <div className='mt-6'>
-                        <Select
-                            label='نقش'
-                            name='roleId'
-                            value={formik.values.roleId}
-                            onChange={formik.handleChange}
-                            items={roles}
-                            placeholder='نقش را انتخاب کنید'
-                            error_text={formik.touched.roleId && formik.errors.roleId ? formik.errors.roleId : ''}
-                        />
-                    </div>
-                </div>
+  if (!admin) {
+    return (
+      <div className="w-full mt-4 flex justify-center items-center">
+        <div>مدیر یافت نشد</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-5">
+      <div className="flex w-full justify-between items-center">
+        <div className="text-lg font-light">ویرایش مدیر</div>
+        <div>
+          <Button className="px-5" onClick={() => formik.handleSubmit()} isloading={isPending}>
+            <div className="flex gap-2 items-center">
+              <TickCircle className="size-5" color="white" />
+              <div>ذخیره تغییرات</div>
             </div>
+          </Button>
         </div>
-    )
-}
+      </div>
 
-export default UpdateAdmin
+      <div className="mt-6">
+        <div className="bg-white rounded-3xl p-6">
+          <div className="mb-4">
+            <Input
+              label="نام"
+              name="firstName"
+              value={formik.values.firstName}
+              onChange={formik.handleChange}
+              error_text={formik.touched.firstName && formik.errors.firstName ? formik.errors.firstName : ""}
+            />
+          </div>
+          <div className="mt-6">
+            <Input
+              label="نام خانوادگی"
+              name="lastName"
+              value={formik.values.lastName}
+              onChange={formik.handleChange}
+              error_text={formik.touched.lastName && formik.errors.lastName ? formik.errors.lastName : ""}
+            />
+          </div>
+          <div className="mt-6">
+            <Input label="شماره تلفن" name="phone" value={formik.values.phone} onChange={formik.handleChange} error_text={formik.touched.phone && formik.errors.phone ? formik.errors.phone : ""} />
+          </div>
+          <div className="mt-6">
+            <Select
+              label="نقش"
+              name="roleId"
+              value={formik.values.roleId}
+              onChange={formik.handleChange}
+              items={roles}
+              placeholder="نقش را انتخاب کنید"
+              error_text={formik.touched.roleId && formik.errors.roleId ? formik.errors.roleId : ""}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UpdateAdmin;

src/pages/admin/types/Types.ts

@@ -28,6 +28,7 @@ export type Admin = {
   lastName: string;
   phone: string;
   roles: AdminRole[];
+  role: RoleDetail;
 };
 
 export type GetAdminsParams = {