Added navigation to application, internationalization, and sign in screen.

2020-08-11 16:42:26 -07:00
parent c7344dd7a2
commit 767233cea3
19 changed files with 1258 additions and 161 deletions
--- a/components/screen-sign-in/screen-sign-in.component.jsx
+++ b/components/screen-sign-in/screen-sign-in.component.jsx
@@ -0,0 +1,101 @@
+import { Formik } from "formik";
+import {
+  Input,
+  Header,
+  Item,
+  Label,
+  Form,
+  Button,
+  Text,
+  Container,
+  Content,
+} from "native-base";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { SafeAreaView, TextInput, View } from "react-native";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { emailSignInStart, signOutStart } from "../../redux/user/user.actions";
+import { selectCurrentUser } from "../../redux/user/user.selectors";
+import { StyleSheet } from "react-native";
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  emailSignInStart: (email, password) =>
+    dispatch(emailSignInStart({ email, password })),
+});
+
+export function SignIn({ emailSignInStart }) {
+  const { t } = useTranslation();
+
+  const formSubmit = (values) => {
+    const { email, password } = values;
+    emailSignInStart(email, password);
+  };
+
+  return (
+    <Container>
+      <Content
+        padder
+        contentContainerStyle={styles.contentContainer}
+        style={styles.content}
+      >
+        <Formik
+          initialValues={{ email: "", password: "" }}
+          onSubmit={formSubmit}
+        >
+          {({ handleChange, handleBlur, handleSubmit, values }) => (
+            <View>
+              <Form>
+                <Item>
+                  <Label>{t("signin.fields.email")}</Label>
+                  <Input
+                    autoCapitalize="none"
+                    keyboardType="email-address"
+                    onChangeText={handleChange("email")}
+                    onBlur={handleBlur("email")}
+                    value={values.email}
+                  />
+                </Item>
+
+                <Item>
+                  <Label>{t("signin.fields.password")}</Label>
+                  <Input
+                    secureTextEntry={true}
+                    onChangeText={handleChange("password")}
+                    onBlur={handleBlur("password")}
+                    value={values.password}
+                  />
+                </Item>
+
+                <Button full onPress={handleSubmit}>
+                  <Text>{t("signin.actions.signin")}</Text>
+                </Button>
+              </Form>
+            </View>
+          )}
+        </Formik>
+      </Content>
+    </Container>
+  );
+}
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    justifyContent: "center",
+    flex: 1,
+  },
+  content: {
+    paddingBottom: 150,
+    // flex: 1,
+    // backgroundColor: "#fff",
+    // alignItems: "center",
+    //justifyContent: "space-between",
+    // //justifyContent: "center",
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(SignIn);