From 2b5a440ef66e27732054db93cad82a58eedd9069 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Tue, 12 Sep 2023 17:10:27 +0330 Subject: [PATCH] make a hook for getting provinces --- public/locales/fa/app.json | 2 + .../Form/CreateForm/CreateContent.jsx | 37 +++++++++---------- .../Form/UpdateForm/UpdateContent.jsx | 35 +++++++++--------- src/lib/app/hooks/useProvince.jsx | 29 +++++++++++++++ 4 files changed, 66 insertions(+), 37 deletions(-) create mode 100644 src/lib/app/hooks/useProvince.jsx diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index fde5626..ec9cd67 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -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": "خطا در دریافت شهر ها", diff --git a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx index 82d8a58..80795ae 100644 --- a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx +++ b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx @@ -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}) => { {t("ExpertMangement.text_field_province_id")} {formik.touched.province_id && formik.errors.province_id ? formik.errors.province_id : ""} diff --git a/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx b/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx index 39a8a6b..3fa43a9 100644 --- a/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx +++ b/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx @@ -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) => ( - - {item.name} + {isLoadingProvinceList ? ( + + {t("ExpertMangement.text_field_loading_provinces_list")} - ))} + ) : errorProvinceList ? ( + + {t("ExpertMangement.text_field_error_fetching_provinces")} + + ) : ( + provinceList.map((item) => ( + + {item.name} + + )) + )} {formik.touched.province_id && formik.errors.province_id ? formik.errors.province_id : ""} diff --git a/src/lib/app/hooks/useProvince.jsx b/src/lib/app/hooks/useProvince.jsx new file mode 100644 index 0000000..d0fbda0 --- /dev/null +++ b/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; \ No newline at end of file