refactor: login to functional component

Author: Sven

src/routes/Login/components/Login.js

@@ -1,36 +1,21 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Redirect } from 'react-router-dom'
 import { Button, Container } from 'reactstrap'
 
-export default class Login extends Component {
-  static propTypes = {
-    authenticateWithCb: PropTypes.func.isRequired,
-    location: PropTypes.object.isRequired,
-    isAuthenticated: PropTypes.bool.isRequired,
-  }
-
-  login = () => {
-    this.props.authenticateWithCb(() => {
-      localStorage.setItem('LoginState', 'true')
-    })
-  }
-
-  render() {
-    const { from } = this.props.location.state || { from: { pathname: '/' } }
-    const { isAuthenticated } = this.props
-
-    if (isAuthenticated) {
-      return (
-        <Redirect to={from} />
-      )
-    }
+Login.propTypes = {
+  authenticateWithCb: PropTypes.func.isRequired,
+  location: PropTypes.object.isRequired,
+  isAuthenticated: PropTypes.bool.isRequired,
+}
 
-    return (
+export default function Login({ location, isAuthenticated, authenticateWithCb }) {
+  const { from } = location.state || { from: { pathname: '/' } }
+  return isAuthenticated ? <Redirect to={from} />
+    : (
       <Container className="text-center page-layout__viewport">
         <p>You must log in to view the page at {from.pathname}</p>
-        <Button color="primary" onClick={this.login}>Log in</Button>
+        <Button color="primary" onClick={authenticateWithCb}>Log in</Button>
       </Container>
     )
-  }
 }

src/store/fakeAuth.js

@@ -7,10 +7,10 @@ function authenticate() {
   }
 }
 
-export function authenticateWithCb(cb) {
+export function authenticateWithCb() {
   return (dispatch) => {
     dispatch(authenticate())
-    setTimeout(cb, 100)
+    localStorage.setItem('LoginState', 'true')
   }
 }