From 123eb18a81ff54fbfdf5b27f0f56e8a3ad9caa49 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Wed, 13 Sep 2023 15:48:11 +0330 Subject: [PATCH] debug getting cities make a role hook and debug getting data from row in update --- public/locales/fa/app.json | 2 + .../Form/CreateForm/CreateContent.jsx | 36 ++++++------ .../Form/UpdateForm/UpdateContent.jsx | 56 +++++++++---------- src/lib/app/hooks/useRole.jsx | 29 ++++++++++ 4 files changed, 74 insertions(+), 49 deletions(-) create mode 100644 src/lib/app/hooks/useRole.jsx diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index ec9cd67..60482e2 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -357,6 +357,8 @@ "text_field_role_id": "نقش", "text_field_loading_provinces_list": "درحال دریافت شهر ها", "text_field_error_fetching_provinces": "خطا در دریافت شهر ها", + "text_field_loading_roles_list": "درحال دریافت نقش ها", + "text_field_error_fetching_roles": "خطا در دریافت نقش ها", "text_field_please_select_province": "ابتدا استان خود را انتخاب کنید", "text_field_loading_cities_list": "درحال دریافت شهر ها", "text_field_error_fetching_cities": "خطا در دریافت شهر ها", diff --git a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx index 80795ae..f2e43cb 100644 --- a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx +++ b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx @@ -20,29 +20,15 @@ import {useEffect, useState} from "react"; 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"; +import useRole from "@/lib/app/hooks/useRole"; const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => { const t = useTranslations(); const requestServer = useRequest() const [cityList, setCityList] = useState([]); - const [roleList, setRoleList] = useState([]); const [cityTextField, setCityTextField] = useState(t("ExpertMangement.text_field_please_select_province")); const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince(); - - useEffect(() => { - requestServer(GET_ROLE_LIST, "get", {auth: true, notification: false}) - .then(({data}) => { - const result = data.data; - const formattedData = result.map((role, index) => ({ - id: index, - name: role.name, - name_fa: role.name_fa, - value: role.id, - })); - setRoleList(formattedData); - }).catch(() => { - }); - }, []); + const {roleList, isLoadingRoleList, errorRoleList} = useRole(); function getCities(province_id) { formik.setFieldTouched("city_id", false, false); @@ -336,11 +322,21 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => { fullWidth variant="outlined" > - {roleList.map((item) => ( - - {item.name_fa} + {isLoadingRoleList ? ( + + {t("ExpertMangement.text_field_loading_roles_list")} - ))} + ) : errorRoleList ? ( + + {t("ExpertMangement.text_field_error_fetching_roles")} + + ) : ( + roleList.map((item) => ( + + {item.name_fa} + + )) + )} {formik.touched.role_id && formik.errors.role_id ? formik.errors.role_id : ""} diff --git a/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx b/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx index 3fa43a9..45edcde 100644 --- a/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx +++ b/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx @@ -20,6 +20,7 @@ import {GET_CITY_LIST, GET_PROVINCE_LIST, GET_ROLE_LIST, UPDATE_EXPERT_MANAGEMEN import * as Yup from "yup"; import useRequest from "@/lib/app/hooks/useRequest"; import useProvince from "@/lib/app/hooks/useProvince"; +import useRole from "@/lib/app/hooks/useRole"; const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => { @@ -27,28 +28,14 @@ const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => { const requestServer = useRequest(); // const [provinceList, setProvinceList] = useState([]); const [cityList, setCityList] = useState([]); - const [roleList, setRoleList] = useState([]); + const [citiesExist, setCitiesExist] = useState(false); const [cityTextField, setCityTextField] = useState(t("ExpertMangement.text_field_please_select_province")); const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince(); - - useEffect(() => { - requestServer(GET_ROLE_LIST, "get", {auth: true, notification: false}) - .then(({data}) => { - const result = data.data; - const formattedData = result.map((role, index) => ({ - id: index, - name: role.name, - name_fa: role.name_fa, - value: role.id, - })); - setRoleList(formattedData); - }).catch(() => { - }); - }, []); + const {roleList, isLoadingRoleList, errorRoleList} = useRole(); function getCities(province_id) { formik.setFieldTouched("city_id", false, false); - // formik.setFieldValue("city_id", "") + citiesExist && formik.setFieldValue("city_id", "") setCityTextField(t("ExpertMangement.text_field_loading_cities_list")) requestServer(`${GET_CITY_LIST}?province_id=${province_id}`, "get", {auth: true, notification: false}) .then(({data}) => { @@ -58,6 +45,7 @@ const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => { name: city.name, value: city.id, })); + setCitiesExist(true); setCityList(formattedData); setCityTextField(t("ExpertMangement.text_field_city_id")) }).catch(() => { @@ -65,7 +53,6 @@ const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => { }); } - const validationSchema = Yup.object().shape({ name: Yup.string().required(t("ExpertMangement.error_message_name")), username: Yup.string().required(t("ExpertMangement.error_message_username")), @@ -113,6 +100,10 @@ const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => { }, }); + useEffect(() => { + getCities(formik.values.province_id); + }, [formik.values.province_id]); + return ( <> @@ -227,11 +218,8 @@ const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => { { {formik.touched.role_id && formik.errors.role_id ? formik.errors.role_id : ""} diff --git a/src/lib/app/hooks/useRole.jsx b/src/lib/app/hooks/useRole.jsx new file mode 100644 index 0000000..fc3dd18 --- /dev/null +++ b/src/lib/app/hooks/useRole.jsx @@ -0,0 +1,29 @@ +import {GET_ROLE_LIST} from "@/core/data/apiRoutes"; +import useRequest from "@/lib/app/hooks/useRequest"; +import useSWR from "swr"; + +const useRole = () => { + const requestServer = useRequest({auth: true, notification: false}) + + //swr config + const fetcher = (...args) => { + return requestServer(args, 'get').then(({data}) => { + return data.data; + }).catch(() => { + }) + }; + + const {data, isLoading} = useSWR(GET_ROLE_LIST, fetcher, { + revalidateIfStale: false, + revalidateOnFocus: false, + revalidateOnReconnect: false + }); + + return { + roleList: data, + isLoadingRoleList: isLoading, + errorRoleList: !data + } +}; + +export default useRole; \ No newline at end of file