TF-102 fixed form in add-request-refahi

public/locales/fa/app.json

@@ -135,6 +135,8 @@
     "text_field_vehicle_type": "نام وسیله نقلیه",
     "text_field_enter_your_vehicle_type": "نام وسیله نقلیه خود را وارد کنید",
     "text_field_province": "استان",
+    "text_field_loading_provinces_list": "درحال دریافت استان ها",
+    "text_field_error_fetching_provinces": "خطا در دریافت استان ها",
     "text_field_enter_your_province": "استان خود را وارد کنید",
     "text_field_navgan_id": "شماره ناوگان",
     "text_field_enter_your_navgan_id": "شماره ناوگان خود را وارد کنید",

src/components/dashboard/refahi/add-request-loan/forms/AddForm.jsx

@@ -1,39 +1,30 @@
 import StyledForm from "@/core/components/StyledForm";
 import UploadSystem from "@/core/components/UploadSystem";
-import {GET_PROVINCE_LIST, SEND_LOAN_REQUEST_WELFARE} from "@/core/data/apiRoutes";
-import useDirection from "@/lib/app/hooks/useDirection";
-import useUser from "@/lib/app/hooks/useUser";
+import {SEND_LOAN_REQUEST_WELFARE} from "@/core/data/apiRoutes";
 import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
-import {Box, Button, Chip, Divider, Stack, TextField} from "@mui/material";
+import {
+    Box,
+    Button,
+    Chip,
+    Divider,
+    FormControl,
+    FormHelperText,
+    InputLabel,
+    MenuItem,
+    Select,
+    Stack,
+    TextField
+} from "@mui/material";
 import {Field, Formik} from "formik";
 import {useTranslations} from "next-intl";
-import {useEffect, useState} from "react";
 import * as Yup from "yup";
-import SelectBox from "@/core/components/SelectBox";
 import useRequest from "@/lib/app/hooks/useRequest";
+import useProvince from "@/lib/app/hooks/useProvince";
 
 const AddFormComponent = () => {
     const t = useTranslations();
-    const {directionApp} = useDirection();
-    const {token} = useUser();
     const requestServer = useRequest()
-
-    const [provinceList, setProvinceList] = useState([]);
-
-    // get province list
-    useEffect(() => {
-        requestServer(GET_PROVINCE_LIST, "get", {auth: true, notification: false})
-            .then(function ({data}) {
-                const formattedData = data.map((province, index) => ({
-                    id: index,
-                    name: province.name,
-                    value: province.id,
-                }));
-                setProvinceList(formattedData);
-            }).catch(() => {
-        })
-    }, []);
-    // end get province list
+    const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince()
 
     // initial values, validation and request action of form
     const initialValues = {
@@ -183,27 +174,48 @@ const AddFormComponent = () => {
                             <Box
                                 sx={{
                                     mx: {xs: 0, sm: 2},
-                                    my: 2,
+                                    mt: 0,
                                     width: "100%",
                                 }}
                             >
-                                <Field
-                                    name="province"
-                                    label={t("LoanRequest.text_field_province")} // t("LoanRequest.text_field_enter_your_province")
+                                <FormControl
+                                    error={props.touched.province && !!props.errors.province}
+                                    sx={{width: "100%", mt: 2}}
                                     size="small"
-                                    selectType="province"
-                                    component={SelectBox}
-                                    selectors={provinceList}
-                                    select={props.values.province}
-                                    setFieldValue={props.setFieldValue}
-                                    setFieldTouched={props.setFieldTouched}
-                                    error={
-                                        !!(props.touched.province && props.errors.province)
-                                    }
-                                    helperText={
-                                        props.touched.province ? props.errors.province : null
-                                    }
-                                />
+                                >
+                                    <InputLabel>{t("LoanRequest.text_field_province")}</InputLabel>
+                                    <Select
+                                        name="province"
+                                        disabled={isLoadingProvinceList || errorProvinceList}
+                                        label={t("LoanRequest.text_field_province")}
+                                        value={props.values.province}
+                                        onChange={(e) => {
+                                            props.setFieldValue("province", e.target.value);
+                                        }}
+                                        onBlur={props.handleBlur}
+                                        fullWidth
+                                        variant="outlined"
+                                    >
+                                        {isLoadingProvinceList ? (
+                                            <MenuItem>
+                                                {t("LoanRequest.text_field_loading_provinces_list")}
+                                            </MenuItem>
+                                        ) : errorProvinceList ? (
+                                            <MenuItem>
+                                                {t("LoanRequest.text_field_error_fetching_provinces")}
+                                            </MenuItem>
+                                        ) : (
+                                            provinceList.map((item) => (
+                                                <MenuItem key={item.id} value={item.id}>
+                                                    {item.name}
+                                                </MenuItem>
+                                            ))
+                                        )}
+                                    </Select>
+                                    <FormHelperText>
+                                        {props.touched.province && props.errors.province ? props.errors.province : ""}
+                                    </FormHelperText>
+                                </FormControl>
                             </Box>
                         </Box>
                         <Box

src/lib/app/hooks/useProvince.jsx

@@ -0,0 +1,29 @@
+import {GET_PROVINCE_LIST} from "@/core/data/apiRoutes";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useSWR from "swr";
+
+const useProvince = () => {
+    const requestServer = useRequest({auth: true, notification: false})
+
+    //swr config
+    const fetcher = (...args) => {
+        return requestServer(args, 'get').then(({data}) => {
+            return data;
+        }).catch(() => {
+        })
+    };
+
+    const {data, isLoading} = useSWR(GET_PROVINCE_LIST, fetcher, {
+        revalidateIfStale: false,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false
+    });
+
+    return {
+        provinceList: data,
+        isLoadingProvinceList: isLoading,
+        errorProvinceList: !data
+    }
+};
+
+export default useProvince;