feat(UpdateUserInfoScreen): set institutions filter by UF, City and Type

src/app/api/fetchInstutions.js

@@ -8,21 +8,29 @@ function transformData(institutions) {
     const transformedData = {};
   
     institutions.forEach((institution) => {
-      let { uf, type, name } = institution;
+      let { uf, type, name, cidade } = institution;
       
       if (!uf) {
         uf = "DF";
       }
+
+      if (!cidade) {
+        cidade = "Brasília";
+      }
       
       if (!transformedData[uf]) {
         transformedData[uf] = {};
       }
 
-      if (!transformedData[uf][type]) {
-        transformedData[uf][type] = [];
+      if (!transformedData[uf][cidade]) {
+        transformedData[uf][cidade] = {};
+      }
+
+      if (!transformedData[uf][cidade][type]) {
+        transformedData[uf][cidade][type] = [];
       }
   
-      transformedData[uf][type].push({ value: name, label: name });
+      transformedData[uf][cidade][type].push({ value: name, label: name });
     });
   
     return transformedData;

src/app/screens/RegisterScreen.js

@@ -190,6 +190,7 @@ function CityPicker({ name }) {
 function InstitutionNamePicker({ name }) {
   const { values } = useFormikContext();
   const state = values["state"];
+  const city = values["city"];
   const instType = values["institution"];
   const [items, setItems] = useState([]);
   const [institutions, setInstitutions] = useState([]);
@@ -205,14 +206,14 @@ function InstitutionNamePicker({ name }) {
 
   useEffect(() => {
     try {
-      if (state && instType) {
-        const insts = institutions[state] && institutions[state][instType];
+      if (state && city && instType) {
+        const insts = institutions[state] && institutions[state][city] && institutions[state][city][instType];
         insts ? setItems(insts) : setItems([]);
       }
     } catch (e) {
       console.log(e);
     }
-  }, [state, instType]);
+  }, [state,city, instType, institutions]);
 
   return (
     <SearchablePicker
@@ -222,11 +223,11 @@ function InstitutionNamePicker({ name }) {
       formPlaceholder={"Selecione o nome da instituição"}
       doubleItemLine={true}
       nothingToShow={
-        institutions?.state?.instType
+        institutions?.state?.city?.instType
           ? "Não encontramos nada com esse termo"
-          : state && instType
-            ? `Nenhuma instituição do tipo ${constants.institutionMap[instType]} no ${constants.statesMap[state]}`
-            : "Selecione o Estado e o tipo da instituição primeiro"
+          : (state && instType) || state || instType
+            ? "Selecione uma cidade"
+            :  state && instType && city ? `Nenhuma instituição do tipo ${constants.institutionMap[instType]} em ${city} (${constants.statesMap[state]})` : "Selecione o Estado, Cidade e o tipo da instituição primeiro"
       }
       searchPlaceholder={"Busca..."}
     />
@@ -384,7 +385,6 @@ export default function RegisterScreen(props) {
   };
 
   const copnfirmations = (form, actions) => {
-    console.log(form);
     var current_mask =
       form.number.length >= 11 ? "(99) 99999-9999" : "(99) 9999-9999";
 

src/app/screens/UpdateUserInfoScreen.js

@@ -25,10 +25,11 @@ import { getInstitutions } from "../api/fetchInstutions";
 function InstitutionNamePicker({ name }) {
     const { values } = useFormikContext();
     const state = values["state"];
+    const city = values["city"];
     const instType = values["institution"];
     const [items, setItems] = useState([]);
     const [institutions, setInstitutions] = useState([]);
-
+  
     useEffect(() => {
       getInstitutions().then((data) => {
         setInstitutions(data);
@@ -37,37 +38,37 @@ function InstitutionNamePicker({ name }) {
           console.error(error);
       });
     }, []);
-
+  
     useEffect(() => {
-        try {
-            if (state && instType) {
-                const insts = institutions[state] && institutions[state][instType];
-                insts ? setItems(insts) : setItems([]);
-            }
-        } catch (e) {
-            console.log(e);
+      try {
+        if (state && city && instType) {
+          const insts = institutions[state] && institutions[state][city] && institutions[state][city][instType];
+          insts ? setItems(insts) : setItems([]);
         }
-    }, [state, instType]);
-
+      } catch (e) {
+        console.log(e);
+      }
+    }, [state,city, instType, institutions]);
+  
     return (
-        <SearchablePicker
-            name={name}
-            items={items}
-            setItems={setItems}
-            formPlaceholder={"Selecione o nome da instituição"}
-            doubleItemLine={true}
-            nothingToShow={
-                institutions?.state?.instType
-                    ? "Não encontramos nada com esse termo"
-                    : state && instType
-                        ? `Nenhuma instituição do tipo ${constants.institutionMap[instType]} no ${constants.statesMap[state]}`
-                        : "Selecione o Estado e o tipo da instituição primeiro"
-            }
-            searchPlaceholder={"Busca..."}
-        />
+      <SearchablePicker
+        name={name}
+        items={items}
+        setItems={setItems}
+        formPlaceholder={"Selecione o nome da instituição"}
+        doubleItemLine={true}
+        nothingToShow={
+          institutions?.state?.city?.instType
+            ? "Não encontramos nada com esse termo"
+            : (state && instType) || state || instType
+              ? "Selecione uma cidade"
+              :  state && instType && city ? `Nenhuma instituição do tipo ${constants.institutionMap[instType]} em ${city} (${constants.statesMap[state]})` : "Selecione o Estado, Cidade e o tipo da instituição primeiro"
+        }
+        searchPlaceholder={"Busca..."}
+      />
     );
-}
-
+  }
+  
 function RolePicker({ name }) {
     const [items, setItems] = useState([
         { value: "ROLE_INSTITUTION", label: "Responsável" },