fix: payload at sign in accept (#7)

* feat: add SignUpForm component

* feat: add working sign up screen

* fix: remove alias webpack

* feat: add sign in screen

* fix: fix payload at submit

Author: Benjamín Thomas Kramm Pino

src/App.js

@@ -3,7 +3,7 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom'
 
 import './styles/App.css'
 
-import { Home, SignUp, NotFound } from './screens'
+import { Home, SignIn, SignUp, NotFound } from './screens'
 import Navbar from './components/Navbar/Navbar'
 
 const App = () => {
@@ -14,6 +14,7 @@ const App = () => {
         <BrowserRouter>
           <Switch>
             <Route exact path="/" component={Home} />
+            <Route exact path="/sign-in" component={SignIn} />
             <Route exact path="/sign-up" component={SignUp} />
             <Route component={NotFound} />
           </Switch>

src/components/authentication/SignInForm/index.js

@@ -1,94 +1,79 @@
-import React, { Component } from 'react'
-import { StyleSheet } from 'react-native'
+import React from 'react'
 import PropTypes from 'prop-types'
 
-import Layout from '../../constants/Layout'
+// Components
+import { Button, FormControl, Input, InputLabel } from '@material-ui/core'
 
-class SignInForm extends Component {
+class SignInForm extends React.Component {
   constructor(props) {
     super(props)
+
     this.state = {
       email: '',
       password: '',
-      inputValidity: true,
+
+      validity: { email: false },
     }
 
-    this.onChangePassword = this.onChangePassword.bind(this)
     this.onChangeEmail = this.onChangeEmail.bind(this)
+    this.onChangePassword = this.onChangePassword.bind(this)
+
+    this.getValidity = this.getValidity.bind(this)
   }
 
-  onChangeEmail(email) {
+  onChangeEmail({ target: { value: email } }) {
     const validity = email.match(
       // eslint-disable-next-line no-useless-escape
       /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
     )
-    this.setState({ email, inputValidity: validity })
+
+    this.setState(oldState => ({
+      email,
+      validity: { ...oldState.validity, email: !!validity },
+    }))
   }
 
-  onChangePassword(password) {
+  onChangePassword({ target: { value: password } }) {
     this.setState({ password })
   }
 
+  getValidity() {
+    return this.state.validity.email
+  }
+
   render() {
+    const { onSubmit } = this.props
+    const { email, password } = this.state
+
     return (
-      <Form style={styles.form}>
-        <Item inlineLabel regular style={styles.item}>
-          <Input
-            placeholder="Email"
-            style={styles.input}
-            onChangeText={this.onChangeEmail}
-            keyboardType="email-address"
-            autoCapitalize="none"
-            value={this.state.email}
-          />
-        </Item>
-        <Item inlineLabel last regular style={styles.item}>
+      <FormControl>
+        <FormControl>
+          <InputLabel>E-mail</InputLabel>
+          <Input type="email" value={email} onChange={this.onChangeEmail} />
+        </FormControl>
+
+        <FormControl>
+          <InputLabel>Contraseña</InputLabel>
           <Input
-            placeholder="Contraseña"
-            style={styles.input}
-            onChangeText={this.onChangePassword}
-            secureTextEntry
-            value={this.state.password}
+            type="password"
+            value={password}
+            onChange={this.onChangePassword}
           />
-        </Item>
+        </FormControl>
+
         <Button
-          block
-          borderRadius={10}
-          style={styles.button}
-          disabled={!this.state.inputValidity}
-          onPress={() =>
-            this.props.onSend(this.state.email, this.state.password)
-          }
+          disabled={!this.getValidity()}
+          onClick={() => onSubmit({ email, password })}
         >
-          <Text>Entrar</Text>
+          Ingresar
         </Button>
-      </Form>
+      </FormControl>
     )
   }
 }
 
 SignInForm.propTypes = {
-  onSend: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
 }
 
-const styles = StyleSheet.create({
-  button: {
-    backgroundColor: '#0000FF',
-    marginTop: 20,
-  },
-  form: {
-    alignItems: 'center',
-    height: 250,
-    margin: 15,
-  },
-  input: {
-    width: Layout.window.width * 0.85,
-  },
-  item: {
-    borderRadius: 10,
-    marginBottom: 20,
-    paddingHorizontal: 10,
-  },
-})
-
 export default SignInForm

src/components/index.js

@@ -1 +1,2 @@
+export { default as SignInForm } from './authentication/SignInForm/index'
 export { default as SignUpForm } from './authentication/SignUpForm/index'

src/screens/SignIn/index.js

@@ -0,0 +1,72 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import './style.sass'
+
+import cookies from 'js-cookie'
+
+// Store
+import { connect } from 'react-redux'
+import { loginUser } from '../../redux/actions/user'
+
+// Components
+import { SignInForm } from '../../components/index'
+import { CircularProgress } from '@material-ui/core'
+
+const MESSAGE =
+  'Hubo un problema iniciando sesión. Por favor intentalo de nuevo.'
+
+class SignInScreen extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      loading: false,
+    }
+
+    this.onSubmit = this.onSubmit.bind(this)
+  }
+
+  async onSubmit(payload) {
+    const { signIn } = this.props
+
+    this.setState({ loading: true })
+
+    const user = await signIn(payload)
+
+    this.setState({ loading: false })
+
+    if (user.error || !user.payload.data.email) return alert(MESSAGE)
+
+    cookies.set('@userToken', user.token)
+    cookies.set('@userId', user.user_id)
+  }
+
+  render() {
+    const { loading } = this.state
+
+    return (
+      <div className="sign-up">
+        <SignInForm onSubmit={this.onSubmit} />
+
+        {loading && <CircularProgress />}
+      </div>
+    )
+  }
+}
+
+SignInScreen.propTypes = {
+  signIn: PropTypes.func.isRequired,
+}
+
+const mapStateToProps = state => ({
+  user: state.user,
+})
+
+const mapDispatchToProps = dispatch => ({
+  signIn: payload => dispatch(loginUser(payload.name, payload.password)),
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(SignInScreen)

src/screens/SignIn/style.sass

@@ -1,4 +1,5 @@
 export { default as Home } from './Home/index'
+export { default as SignIn } from './SignIn/index'
 export { default as SignUp } from './SignUp/index'
 
 export { default as NotFound } from './NotFound'