Loading institutions names from Cemaden in register screen

src/app/config/constants.js

@@ -0,0 +1,42 @@
+export default {
+  institutionMap: {
+    E: "Escola",
+    D: "Defesa Civil",
+    N: "Não governamental",
+    O: "Outra",
+    X: "Nenhuma",
+  },
+  roleMap: {
+    ROLE_CLIENT: "Não responsável",
+    ROLE_INSTITUTION: "Responsável",
+  },
+  statesMap: {
+    AC: "Acre",
+    AL: "Alagoas",
+    AM: "Amazonas",
+    AP: "Amapá",
+    BA: "Bahia",
+    CE: "Ceará",
+    DF: "Distrito Federal",
+    ES: "Espírito Santo",
+    GO: "Goiás",
+    MA: "Maranhão",
+    MG: "Minas Gerais",
+    MS: "Mato Grosso do Sul",
+    MT: "Mato Grosso",
+    PA: "Pará",
+    PB: "Paraíba",
+    PE: "Pernambuco",
+    PI: "Piauí",
+    PR: "Paraná",
+    RJ: "Rio de Janeiro",
+    RN: "Rio Grande do Norte",
+    RO: "Rondônia",
+    RR: "Roraima",
+    RS: "Rio Grande do Sul",
+    SC: "Santa Catarina",
+    SE: "Sergipe",
+    SP: "São Paulo",
+    TO: "Tocantins",
+  },
+};

src/app/screens/RegisterScreen.js

@@ -23,6 +23,7 @@ import moment from "moment";
 import { Shadow } from "react-native-shadow-2";
 import SearchablePicker from "../components/SearchablePicker";
 import { states, statesToCities } from "../assets/cities_states";
+import institutions from "../assets/institutions";
 import { useFormikContext } from "formik";
 import {
   signup,
@@ -35,6 +36,7 @@ import { AuthContext } from "../auth/context";
 import authStorage from "../auth/storage";
 import ConfirmationModal from "../components/ConfirmationModal";
 import PasswordFormField from "../components/forms/PasswordFormField";
+import constants from "../config/constants";
 
 const phoneRegex = RegExp(
   /^\(?[\(]?([0-9]{2,3})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/
@@ -190,6 +192,42 @@ function CityPicker({ name }) {
   );
 }
 
+function InstitutionNamePicker({ name }) {
+  const { values } = useFormikContext();
+  const state = values["state"];
+  const instType = values["institution"];
+  const [items, setItems] = useState([]);
+
+  useEffect(() => {
+    try {
+      if (state && instType) {
+        const insts = institutions[state] && institutions[state][instType];
+        console.log(insts);
+        insts ? setItems(insts) : setItems([]);
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  }, [state, instType]);
+
+  return (
+    <SearchablePicker
+      name={name}
+      items={items}
+      setItems={setItems}
+      formPlaceholder={"Selecione o nome da instituição"}
+      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..."}
+    />
+  );
+}
+
 function SecQuestionPicker({ name }) {
   const [items, setItems] = useState([
     { value: "Qual a sua cor predileta?", label: "Qual a sua cor predileta?" },
@@ -296,8 +334,10 @@ export default function RegisterScreen(props) {
         automaticLogin(form);
         break;
       default:
-        setShowLog({show: true, message: "Um erro inesperado ocorreu. Tente novamente mais tarde"})
-
+        setShowLog({
+          show: true,
+          message: "Um erro inesperado ocorreu. Tente novamente mais tarde",
+        });
     }
   };
 
@@ -317,9 +357,16 @@ export default function RegisterScreen(props) {
     }
 
     if (!ru.ok || !rn.ok)
-      setShowLog({show: true, message: "Um erro inesperado ocorreu. Tente novamente mais tarde"})
+      setShowLog({
+        show: true,
+        message: "Um erro inesperado ocorreu. Tente novamente mais tarde",
+      });
 
-    inUse && setShowLog({show: true, message: "Apelido de usuário ou telefone em uso"})
+    inUse &&
+      setShowLog({
+        show: true,
+        message: "Apelido de usuário ou telefone em uso",
+      });
 
     return !inUse;
   };
@@ -464,13 +511,7 @@ export default function RegisterScreen(props) {
             <Text style={styles.labelStyle}>Nome da instituição</Text>
             <View style={styles.iconField}>
               <MaterialCommunityIconsCustom name="bank" />
-              <FormField
-                flex={1}
-                maxLength={12}
-                name="institutionName"
-                placeholder="Digite o nome da instituição"
-                paddingRight={2}
-              />
+              <InstitutionNamePicker name="institutionName" />
             </View>
             <Text style={styles.labelStyle}>Vínculo institucional:</Text>
             <View style={[styles.iconField]}>