Week 4: Homework (#9)

* Week 4: Homework (Forms)

* Add user fetching and store state

* Connect components to store, add logout

* Fix header links and move compnents to styled

* Redirect unauthenticated to login

* Rename user to customer

* Refactor named exports and actions

* Store customer in localStorage

Author: apedroferreira

src/App.js

@@ -7,9 +7,15 @@ import { ProductList } from './pages/ProductList'
 import { ProductDetail } from './pages/ProductDetail'
 import { Cart } from './pages/Cart'
 import { SignUp } from './pages/SignUp'
+import { LogIn } from './pages/LogIn'
 import { Account } from './pages/Account'
 import { PrivateRoute } from './components/PrivateRoute'
-import store from './store'
+import { getCustomer } from './utils/customer'
+import { configureStore } from './store'
+
+const store = configureStore({
+  customer: getCustomer(),
+})
 
 class App extends Component {
   render() {
@@ -21,6 +27,7 @@ class App extends Component {
             <Route path="/" exact component={ProductList} />
             <Route path="/cart" component={Cart} />
             <Route path="/signup" component={SignUp} />
+            <Route path="/login" component={LogIn} />
             <PrivateRoute path="/account" component={Account} />
             <Route path="/:productId" component={ProductDetail} />
           </Switch>

src/api/customers/create-customer.js

@@ -1,6 +1,5 @@
 import { api } from '../api-client'
-import config from '../../config'
-import { setToken } from '../../utils/token'
+import { getCustomerToken } from './get-customer-token'
 
 export const createCustomer = async ({ email, password, firstName }) => {
   const requestBody = {
@@ -26,20 +25,11 @@ export const createCustomer = async ({ email, password, firstName }) => {
       data: { attributes },
     } = response
 
-    const { access_token } = await api('/oauth/token', {
-      method: 'POST',
-      body: JSON.stringify({
-        grant_type: 'password',
-        username: email,
-        password: password,
-        client_id: config.clientId,
-      }),
-    })
-
-    setToken(access_token)
+    const { ownerId } = await getCustomerToken({ username: email, password })
 
     return {
-      email: attributes.email,
+      ownerId,
+      username: attributes.email,
       firstName: attributes.metadata.firstName,
     }
   } else {

src/api/customers/get-customer-token.js

@@ -0,0 +1,31 @@
+import config from '../../config'
+import { setToken } from '../../utils/token'
+
+export const getCustomerToken = async ({ username, password }) => {
+  const response = await fetch(`${config.apiUrl}/oauth/token`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      grant_type: 'password',
+      client_id: config.clientId,
+      scope: config.scope,
+      username,
+      password,
+    }),
+  })
+
+  switch (response.status) {
+    case 200: {
+      const { owner_id, access_token } = await response.json()
+      setToken(access_token)
+
+      return { ownerId: owner_id, access_token }
+    }
+    case 401:
+      throw new Error('Email or password are incorrect')
+    default:
+      throw new Error('Unexpected error')
+  }
+}

src/api/customers/get-customer.js

@@ -0,0 +1,8 @@
+import { api } from '../api-client'
+import { setCustomer } from '../../utils/customer'
+
+export const getCustomer = async id => {
+  const { data } = await api(`/api/customers/${id}`)
+  setCustomer(data)
+  return data
+}

src/components/Layout/index.js

@@ -1,36 +1,44 @@
 import React, { Component, Fragment } from 'react'
-import { Link } from 'react-router-dom'
-import styled from 'styled-components'
+import { withRouter } from 'react-router-dom'
+import { connect } from 'react-redux'
 
-const Wrapper = styled.div`
-  padding: 2rem;
-`
-
-const Header = styled.header`
-  display: flex;
-  border-bottom: 0.1rem solid gainsboro;
-  justify-content: space-between;
-  padding: 3rem;
-`
-
-const HeaderSection = styled.div``
-
-const StyledLink = styled(Link)`
-  margin: 0 1rem;
-`
+import * as customerActions from '../../store/customer/actions'
+import { removeToken } from '../../utils/token'
+import { removeCustomer } from '../../utils/customer'
+import { Wrapper, Header, HeaderSection, HeaderLink } from './styled'
 
 class Layout extends Component {
+  handleLogout = () => {
+    this.props.logout()
+    removeToken()
+    removeCustomer()
+    this.props.history.push('/')
+  }
+
   render() {
+    const { isAuthenticated } = this.props
+
     return (
       <Fragment>
         <Header>
           <HeaderSection>
-            <StyledLink to="/">All Products</StyledLink>
+            <HeaderLink to="/">All Products</HeaderLink>
           </HeaderSection>
           <HeaderSection>
-            <StyledLink to="/cart">My Cart</StyledLink>|
-            <StyledLink to="/account">My Account</StyledLink>|
-            <StyledLink to="/signup">Sign Up</StyledLink>
+            <HeaderLink to="/cart">My Cart</HeaderLink>|
+            {isAuthenticated ? (
+              <>
+                <HeaderLink to="/account">My Account</HeaderLink>|
+                <HeaderLink as="button" onClick={this.handleLogout}>
+                  Logout
+                </HeaderLink>
+              </>
+            ) : (
+              <>
+                <HeaderLink to="/login">Log In</HeaderLink> |
+                <HeaderLink to="/signup">Sign Up</HeaderLink>
+              </>
+            )}
           </HeaderSection>
         </Header>
         <Wrapper>{this.props.children}</Wrapper>
@@ -39,4 +47,17 @@ class Layout extends Component {
   }
 }
 
-export default Layout
+const mapStateToProps = state => ({
+  isAuthenticated: Object.keys(state.customer).length !== 0,
+})
+
+const mapDispatchToProps = {
+  logout: customerActions.logout,
+}
+
+export default withRouter(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(Layout)
+)

src/components/Layout/styled.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+import { Link } from 'react-router-dom'
+
+export const Wrapper = styled.div`
+  padding: 2rem;
+`
+
+export const Header = styled.header`
+  display: flex;
+  border-bottom: 0.1rem solid gainsboro;
+  justify-content: space-between;
+  padding: 3rem;
+`
+
+export const HeaderSection = styled.div``
+
+export const HeaderLink = styled(Link)`
+  margin: 0 1rem;
+`

src/components/PrivateRoute/index.js

@@ -1,22 +1,23 @@
 import React from 'react'
 import { Route, Redirect } from 'react-router-dom'
+import { connect } from 'react-redux'
 
-// TODO: connect to global state
-const isAuthenticated = false
-
-const PrivateRoute = ({ component: Component, ...rest }) => {
+const PrivateRouteComponent = ({
+  isAuthenticated,
+  component: Component,
+  ...rest
+}) => {
   return (
     <Route
       {...rest}
       render={routeProps => {
         if (isAuthenticated) {
           return <Component {...routeProps} />
         }
-
         return (
           <Redirect
             to={{
-              pathname: '/signup',
+              pathname: '/login',
               state: {
                 from: routeProps.location.pathname,
               },
@@ -28,4 +29,8 @@ const PrivateRoute = ({ component: Component, ...rest }) => {
   )
 }
 
-export { PrivateRoute }
+const mapStateToProps = state => ({
+  isAuthenticated: Object.keys(state.customer).length !== 0,
+})
+
+export const PrivateRoute = connect(mapStateToProps)(PrivateRouteComponent)

src/pages/Account/index.js

@@ -1,16 +1,17 @@
-import React, { Component } from 'react'
+import React from 'react'
+import { connect } from 'react-redux'
 
 import Layout from '../../components/Layout'
 import { H1 } from '../../components/Typography'
 
-class Account extends Component {
-  render() {
-    return (
-      <Layout>
-        <H1>My Account</H1>
-      </Layout>
-    )
-  }
-}
+const AccountPage = ({ customer }) => (
+  <Layout>
+    <H1>Welcome {customer.attributes.metadata.firstName}</H1>
+  </Layout>
+)
 
-export { Account }
+const mapStateToProps = state => ({
+  customer: state.customer,
+})
+
+export const Account = connect(mapStateToProps)(AccountPage)

src/pages/LogIn/index.js

@@ -0,0 +1,79 @@
+import React, { Component } from 'react'
+import { Formik } from 'formik'
+import { connect } from 'react-redux'
+
+import Layout from '../../components/Layout'
+import { H1 } from '../../components/Typography'
+import { Form, GlobalFormError } from '../../components/Form'
+import { Input } from '../../components/Input'
+import Button from '../../components/Button'
+import * as customerActions from '../../store/customer/actions'
+import { getCustomerToken } from '../../api/customers/get-customer-token'
+import { getCustomer } from '../../api/customers/get-customer'
+import { schema } from './schema'
+
+class LogInPage extends Component {
+  state = {
+    globalError: '',
+  }
+
+  initialValues = {
+    email: '',
+    password: '',
+  }
+
+  handleSubmit = async ({ email, password }, { setSubmitting }) => {
+    try {
+      setSubmitting(true)
+      const { ownerId } = await getCustomerToken({
+        username: email,
+        password,
+      })
+      const customer = await getCustomer(ownerId)
+      this.props.login(customer)
+      this.props.history.push('/account')
+    } catch (error) {
+      this.setState({
+        globalError: error.message,
+      })
+    }
+    setSubmitting(false)
+  }
+
+  render() {
+    const { globalError } = this.state
+
+    return (
+      <Layout>
+        <H1 textAlign="center">Log In</H1>
+        <Formik
+          initialValues={this.initialValues}
+          validationSchema={schema}
+          onSubmit={this.handleSubmit}
+        >
+          {({ handleSubmit, isSubmitting }) => (
+            <Form onSubmit={handleSubmit}>
+              {Boolean(globalError) && (
+                <GlobalFormError>{globalError}</GlobalFormError>
+              )}
+              <Input name="email" type="email" label="Email address" />
+              <Input name="password" type="password" label="Password" />
+              <Button disabled={isSubmitting}>
+                {isSubmitting ? 'Logging In...' : 'Log In'}
+              </Button>
+            </Form>
+          )}
+        </Formik>
+      </Layout>
+    )
+  }
+}
+
+const mapDispatchToProps = {
+  login: customerActions.login,
+}
+
+export const LogIn = connect(
+  null,
+  mapDispatchToProps
+)(LogInPage)

src/pages/LogIn/schema.js

@@ -0,0 +1,8 @@
+import { object, string } from 'yup'
+
+export const schema = object().shape({
+  email: string()
+    .email('Email is not valid')
+    .required('Email is required'),
+  password: string().required('Password is required'),
+})