make a hook for getting provinces

This commit is contained in:
2023-09-12 17:10:27 +03:30
parent 45b919f0fc
commit 2b5a440ef6
4 changed files with 66 additions and 37 deletions

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 : ""}

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 : ""}