make a hook for getting provinces
This commit is contained in:
@@ -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 : ""}
|
||||
|
||||
@@ -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 : ""}
|
||||
|
||||
Reference in New Issue
Block a user