upd: login screen refactor

src/screens/LoginScreen/index.tsx

@@ -1,6 +1,8 @@
 import { FC, useState } from 'react';
 import { View } from 'react-native';
 import { NavigationProp } from '@react-navigation/native';
+import { Formik } from 'formik';
+import * as yup from 'yup';
 
 import { Header, Input, Button, BigText, PageWrapper } from '../../components';
 
@@ -14,6 +16,11 @@ type Props = {
   navigation: NavigationProp<any>;
 };
 
+const LoginSchema = yup.object({
+  login: yup.string().required(),
+  pass: yup.string().required()
+});
+
 const LoginScreen: FC<Props> = ({ navigation }) => {
   const [login, setLogin] = useState('');
   const [pass, setPass] = useState('');
@@ -23,36 +30,61 @@ const LoginScreen: FC<Props> = ({ navigation }) => {
   if (data) {
     if (data.token) {
       storageSet('token', data.token);
+      // TODO: navigate to app
     }
   }
 
   return (
     <PageWrapper>
       <Header label={'Login'} />
-      <View style={{ gap: 15 }}>
-        <BigText>Welcome back</BigText>
-        <Input
-          header={'Email address'}
-          placeholder={'Email or login'}
-          inputMode={'email'}
-          onChange={(e) => setLogin(e)}
-        />
-        <Input
-          header={'Password'}
-          isPrivate={true}
-          placeholder={'Login'}
-          onChange={(e) => setPass(e)}
-        />
-      </View>
-      <View style={{ gap: 30, marginTop: '5%' }}>
-        <Button
-          variant={ButtonVariants.TEXT}
-          onPress={() => navigation.navigate(NAVIGATION_PAGES.RESET_PASSWORD)}
-        >
-          Forgot password
-        </Button>
-        <Button onPress={() => refetch()}>Login</Button>
-      </View>
+      <Formik
+        initialValues={{
+          login: '',
+          pass: ''
+        }}
+        onSubmit={(values) => {
+          setLogin(values.login);
+          setPass(values.pass);
+
+          refetch();
+        }}
+        validationSchema={LoginSchema}
+      >
+        {(props) => (
+          <>
+            <View style={{ gap: 15 }}>
+              <BigText>Welcome back</BigText>
+              <Input
+                header={'Email address'}
+                placeholder={'Email or login'}
+                inputMode={'email'}
+                onChange={props.handleChange('login')}
+                value={props.values.login}
+                onBlur={props.handleBlur('login')}
+                formikError={props.touched.login && props.errors.login}
+              />
+              <Input
+                header={'Password'}
+                isPrivate={true}
+                placeholder={'Login'}
+                onChange={props.handleChange('pass')}
+                value={props.values.pass}
+                onBlur={props.handleBlur('pass')}
+                formikError={props.touched.pass && props.errors.pass}
+              />
+            </View>
+            <View style={{ gap: 30, marginTop: '5%' }}>
+              <Button
+                variant={ButtonVariants.TEXT}
+                onPress={() => navigation.navigate(NAVIGATION_PAGES.RESET_PASSWORD)}
+              >
+                Forgot password
+              </Button>
+              <Button onPress={props.handleSubmit}>Login</Button>
+            </View>
+          </>
+        )}
+      </Formik>
     </PageWrapper>
   );
 };