Rename JSX to JS.

2022-01-12 14:22:13 -08:00
parent 37bede677a
commit d019f35d4a
35 changed files with 566 additions and 454 deletions
--- a/components/screen-sign-in/screen-sign-in.component.js
+++ b/components/screen-sign-in/screen-sign-in.component.js
@@ -0,0 +1,102 @@
+import { Formik } from "formik";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Image, StyleSheet, Text, View } from "react-native";
+import { Button, TextInput, Title } from "react-native-paper";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import Logo from "../../assets/logo192.png";
+import { emailSignInStart } from "../../redux/user/user.actions";
+import {
+  selectCurrentUser,
+  selectSigningIn,
+} from "../../redux/user/user.selectors";
+import SignInErrorAlertComponent from "../sign-in-error-alert/sign-in-error-alert.component";
+import Constants from "expo-constants";
+import * as Updates from "expo-updates";
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  signingIn: selectSigningIn,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  emailSignInStart: (email, password) =>
+    dispatch(emailSignInStart({ email, password })),
+});
+
+export function SignIn({ emailSignInStart, signingIn }) {
+  const { t } = useTranslation();
+
+  const formSubmit = (values) => {
+    const { email, password } = values;
+    emailSignInStart(email, password);
+  };
+
+  return (
+    <View style={localStyles.content}>
+      <View
+        style={{
+          display: "flex",
+
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-evenly",
+        }}
+      >
+        <Image style={localStyles.logo} source={Logo} />
+        <Title>{t("app.title")}</Title>
+      </View>
+      <Formik initialValues={{ email: "", password: "" }} onSubmit={formSubmit}>
+        {({ handleChange, handleBlur, handleSubmit, values }) => (
+          <View>
+            <TextInput
+              label={t("signin.fields.email")}
+              mode="outlined"
+              autoCapitalize="none"
+              keyboardType="email-address"
+              onChangeText={handleChange("email")}
+              onBlur={handleBlur("email")}
+              value={values.email}
+              style={[localStyles.input]}
+            />
+
+            <TextInput
+              label={t("signin.fields.password")}
+              mode="outlined"
+              secureTextEntry={true}
+              onChangeText={handleChange("password")}
+              onBlur={handleBlur("password")}
+              value={values.password}
+              style={[localStyles.input]}
+            />
+
+            <SignInErrorAlertComponent />
+            <Button mode="outlined" loading={signingIn} onPress={handleSubmit}>
+              <Text>{t("signin.actions.signin")}</Text>
+            </Button>
+            <Text>
+              {t("settings.labels.version", {
+                number: Constants.manifest.version,
+              })}
+              {`${process.env.NODE_ENV || ""} ${Updates.releaseChannel || ""}`}
+            </Text>
+          </View>
+        )}
+      </Formik>
+    </View>
+  );
+}
+
+const localStyles = StyleSheet.create({
+  content: {
+    display: "flex",
+    flex: 1,
+  },
+  logo: { width: 100, height: 100 },
+  input: {
+    margin: 12,
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(SignIn);