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

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" },