education and occupation inputs and their validation

src/lib/app/hooks/useCities.jsx

@@ -8,10 +8,12 @@ const useCities = () => {
     const [provinceID, setProvinceID] = useState(null)
     const [cityList, setCityList] = useState([]);
     const [cityTextField, setCityTextField] = useState(t("text_field_city_id"));
+    const [isLoadingCityList, setIsLoadingCityList] = useState(false)
     const requestServer = useRequest({auth: true, notification: false})
 
     useEffect(() => {
         if (provinceID === null) return
+        setIsLoadingCityList(true)
         setCityTextField(t("text_field_loading_cities_list"))
         requestServer(`${GET_CITIES_LIST}?province_id=${provinceID}`, "get", {auth: true, notification: false})
             .then(({data}) => {
@@ -22,13 +24,15 @@ const useCities = () => {
                     value: city.id,
                 }));
                 setCityList(formattedData);
+                setIsLoadingCityList(false)
                 setCityTextField(t("text_field_city_id"))
             }).catch(() => {
+            setIsLoadingCityList(false)
             setCityTextField(t("text_field_error_fetching_cities"))
         });
     }, [provinceID])
 
 
-    return {cityTextField, cityList, setProvinceID}
+    return {cityTextField, cityList, setProvinceID, isLoadingCityList}
 }
 export default useCities

src/lib/app/hooks/useEducations.jsx

@@ -11,13 +11,8 @@ const useEducations = () => {
     useEffect(() => {
         setIsLoadingEducationsList(true)
         requestServer(GET_EDUCATIONS_LIST, 'get', {auth: true, notification: false}).then(({data}) => {
-            const formattedData = data.map((province, index) => ({
-                id: index,
-                name: province.name,
-                value: province.id,
-            }));
             setIsLoadingEducationsList(false)
-            setEducationsList(formattedData);
+            setEducationsList(data.data);
         }).catch(() => {
             setIsLoadingEducationsList(false)
             setErrorEducationsList(true)

src/lib/app/hooks/useOccupations.jsx

@@ -11,13 +11,8 @@ const useOccupations = () => {
     useEffect(() => {
         setIsLoadingOccupationsList(true)
         requestServer(GET_OCCUPATIONS_LIST, 'get', {auth: true, notification: false}).then(({data}) => {
-            const formattedData = data.map((province, index) => ({
-                id: index,
-                name: province.name,
-                value: province.id,
-            }));
             setIsLoadingOccupationsList(false)
-            setOccupationsList(formattedData);
+            setOccupationsList(data.data);
         }).catch(() => {
             setIsLoadingOccupationsList(false)
             setErrorOccupationsList(true)