loan/expert-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make a hook for getting provinces

Browse Source
This commit is contained in:
Mohammad Jalali
2023-09-12 17:10:27 +03:30
parent 45b919f0fc
commit 2b5a440ef6
4 changed files with 66 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/locales/fa/app.json
View File

@@ -355,6 +355,8 @@
"text_field_province_id": "استان",
"text_field_city_id": "شهر",
"text_field_role_id": "نقش",
"text_field_loading_provinces_list": "درحال دریافت شهر ها",
"text_field_error_fetching_provinces": "خطا در دریافت شهر ها",
"text_field_please_select_province": "ابتدا استان خود را انتخاب کنید",
"text_field_loading_cities_list": "درحال دریافت شهر ها",
"text_field_error_fetching_cities": "خطا در دریافت شهر ها",

37
src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx
View File

@@ -17,29 +17,17 @@ import {useFormik} from "formik";
import {useTranslations} from "next-intl";
import * as Yup from "yup";
import {useEffect, useState} from "react";
import {CREATE_EXPERT_MANAGEMENT, GET_CITY_LIST, GET_PROVINCE_LIST, GET_ROLE_LIST} from "@/core/data/apiRoutes";
import {CREATE_EXPERT_MANAGEMENT, GET_CITY_LIST, GET_ROLE_LIST} from "@/core/data/apiRoutes";
import useRequest from "@/lib/app/hooks/useRequest";
import useProvince from "@/lib/app/hooks/useProvince";
const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
const t = useTranslations();
const requestServer = useRequest()
const [provinceList, setProvinceList] = useState([]);
const [cityList, setCityList] = useState([]);
const [roleList, setRoleList] = useState([]);
const [cityTextField, setCityTextField] = useState(t("ExpertMangement.text_field_please_select_province"));
useEffect(() => {
requestServer(GET_PROVINCE_LIST, "get", {auth: true, notification: false})
.then(({data}) => {
const formattedData = data.map((province, index) => ({
id: index,
name: province.name,
value: province.id,
}));
setProvinceList(formattedData);
}).catch(() => {
});
}, []);
const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince();
useEffect(() => {
requestServer(GET_ROLE_LIST, "get", {auth: true, notification: false})
@@ -255,6 +243,7 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
<InputLabel>{t("ExpertMangement.text_field_province_id")}</InputLabel>
<Select
name="province_id"
disabled={isLoadingProvinceList || errorProvinceList}
label={t("ExpertMangement.text_field_province_id")}
value={formik.values.province_id}
onChange={(e) => {
@@ -265,11 +254,21 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
fullWidth
variant="outlined"
>
{provinceList.map((item) => (
<MenuItem key={item.value} value={item.value}>
{item.name}
{isLoadingProvinceList ? (
<MenuItem>
{t("ExpertMangement.text_field_loading_provinces_list")}
</MenuItem>
))}
) : errorProvinceList ? (
<MenuItem>
{t("ExpertMangement.text_field_error_fetching_provinces")}
</MenuItem>
) : (
provinceList.map((item) => (
<MenuItem key={item.id} value={item.id}>
{item.name}
</MenuItem>
))
)}
</Select>
<FormHelperText>
{formik.touched.province_id && formik.errors.province_id ? formik.errors.province_id : ""}

35
src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx
View File

@@ -19,28 +19,17 @@ import {useFormik} from "formik";
import {GET_CITY_LIST, GET_PROVINCE_LIST, GET_ROLE_LIST, UPDATE_EXPERT_MANAGEMENT} from "@/core/data/apiRoutes";
import * as Yup from "yup";
import useRequest from "@/lib/app/hooks/useRequest";
import useProvince from "@/lib/app/hooks/useProvince";
const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => {
const t = useTranslations();
const requestServer = useRequest();
const [provinceList, setProvinceList] = useState([]);
// const [provinceList, setProvinceList] = useState([]);
const [cityList, setCityList] = useState([]);
const [roleList, setRoleList] = useState([]);
const [cityTextField, setCityTextField] = useState(t("ExpertMangement.text_field_please_select_province"));
useEffect(() => {
requestServer(GET_PROVINCE_LIST, "get", {auth: true, notification: false})
.then(({data}) => {
const formattedData = data.map((province, index) => ({
id: index,
name: province.name,
value: province.id,
}));
setProvinceList(formattedData);
}).catch(() => {
});
}, []);
const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince();
useEffect(() => {
requestServer(GET_ROLE_LIST, "get", {auth: true, notification: false})
@@ -247,11 +236,21 @@ const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => {
fullWidth
variant="outlined"
>
{provinceList.map((item) => (
<MenuItem key={item.value} value={item.value}>
{item.name}
{isLoadingProvinceList ? (
<MenuItem>
{t("ExpertMangement.text_field_loading_provinces_list")}
</MenuItem>
))}
) : errorProvinceList ? (
<MenuItem>
{t("ExpertMangement.text_field_error_fetching_provinces")}
</MenuItem>
) : (
provinceList.map((item) => (
<MenuItem key={item.id} value={item.id}>
{item.name}
</MenuItem>
))
)}
</Select>
<FormHelperText>
{formik.touched.province_id && formik.errors.province_id ? formik.errors.province_id : ""}

29
src/lib/app/hooks/useProvince.jsx Normal file
View File

@@ -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;