Initial error handling in password recovery

src/app/screens/PasswordRecoveryScreen.js

@@ -14,8 +14,7 @@ import { dimensions } from "../config/dimensions";
 import assets from "../config/assets";
 import PhoneNumberFormField from "../components/forms/PhoneNumberFormField";
 import SearchablePicker from "../components/SearchablePicker";
-
-
+import ConfirmationModal from "../components/ConfirmationModal";
 
 function SecQuestionPicker({ name }) {
   const [items, setItems] = useState([
@@ -73,8 +72,22 @@ const validationSchema = Yup.object().shape({
 });
 
 export default function PasswordRecovery({ navigation }) {
+  const [confirmatioModalData, setConfirmatioModalData] = useState({
+    show: false,
+    message: "",
+  });
+
   return (
     <View>
+      <ConfirmationModal
+        show={confirmatioModalData.show}
+        description={confirmatioModalData.message}
+        confirmationLabel="OK"
+        onConfirm={() =>
+          setConfirmatioModalData({ ...confirmatioModalData, show: false })
+        }
+      />
+
       <Form
         validationSchema={validationSchema}
         initialValues={{
@@ -83,14 +96,41 @@ export default function PasswordRecovery({navigation}) {
           secQuestion: "",
         }}
         onSubmit={() => {
+          // FIXME: This should be replaced by the proper api call in future
+          const apiReturnTest = 200;
+
+          switch (apiReturnTest) {
+            case 200:
+              console.log("ir pra proxima tela....");
               navigation.navigate("PasswordRecoveryChangePswd")
+              break;
+            case 404:
+              setConfirmatioModalData({
+                message: "Número de telefone inválido",
+                show: true,
+              });
+              break;
+            case 422:
+              setConfirmatioModalData({
+                message: "Pergunta de segurança ou senha incorretos",
+                show: true,
+              });
+              break;
+            default:
+              setConfirmatioModalData({
+                message: "Algo deu errado, tente novamente mais tarde",
+                show: true,
+              });
+              break;
+          }
         }}
       >
-
         <View style={{ padding: 16 }}>
           <Text style={styles.textHeader}>Recuperação de senha</Text>
-        <Text style={styles.textSubtitle}>Responda à pergunta de segurança, isso ajuda a mostrar que
-        essa conta realmente pertence a você</Text>
+          <Text style={styles.textSubtitle}>
+            Responda à pergunta de segurança, isso ajuda a mostrar que essa
+            conta realmente pertence a você
+          </Text>
         </View>
 
         <View>
@@ -102,14 +142,11 @@ export default function PasswordRecovery({navigation}) {
           />
         </View>
 
-
         <View style={{ marginTop: 24 }}>
           <Text style={styles.labelStyle}>Pergunta*:</Text>
           <SecQuestionPicker name="secQuestion" />
-
         </View>
 
-
         <View style={{ marginVertical: 24 }}>
           <Text style={styles.labelStyle}>Resposta*:</Text>
           <FormField
@@ -119,12 +156,7 @@ export default function PasswordRecovery({navigation}) {
           />
         </View>
 
-
-        <SubmitButton
-          title="próximo"
-          backgroundColor={colors.primary}
-        />
-
+        <SubmitButton title="próximo" backgroundColor={colors.primary} />
       </Form>
     </View>
   );
@@ -142,11 +174,11 @@ const styles = StyleSheet.create({
   textHeader: {
     textAlign: "center",
     fontWeight: "bold",
-    fontSize: 22
+    fontSize: 22,
   },
   textSubtitle: {
     textAlign: "center",
     fontSize: dimensions.text.secondary,
     marginVertical: 22,
-  }
+  },
 });