initial actions/reducers

Author: Matt

client/src/App.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
-import LoginForm from 'components/LoginForm'
+import LoginContainer from 'components/Login/LoginContainer'
 import ProtectedContainer from 'components/Protected/ProtectedContainer'
 import HomeContainer from 'components/Home/HomeContainer'
 import 'App.css'
@@ -23,7 +23,7 @@ export const App = () => (
       <hr />
 
       <Route exact path="/" component={HomeContainer} />
-      <Route path="/login" component={LoginForm} />
+      <Route path="/login" component={LoginContainer} />
       <Route path="/protected" component={ProtectedContainer} />
     </div>
   </Router>

client/src/actions/appActions.js

@@ -0,0 +1,42 @@
+import { SET_AUTH, CHANGE_FORM, SENDING_REQUEST, SET_ERROR_MESSAGE } from '../constants/AppConstants'
+
+export function login(username, password) {
+  return dispatch => {
+    dispatch(sendingRequest(true))
+    fetch('/api/login', {
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      method: 'POST',
+      body: JSON.stringify({ username, password })
+    })
+      .then(res => {
+        if (res.ok) return res.json()
+        else throw new Error(res.statusText)
+      })
+      .then(data => {
+        dispatch(sendingRequest(false))
+        dispatch(setAuthState(true))
+      })
+      .catch(error => {
+        dispatch(sendingRequest(false))
+        dispatch(setErrorMessage('Login failed'))
+      })
+  }
+}
+
+export function setAuthState(newState) {
+  return { type: SET_AUTH, newState }
+}
+
+export function sendingRequest(sending) {
+  return { type: SENDING_REQUEST, sending }
+}
+
+function setErrorMessage(message) {
+  return { type: SET_ERROR_MESSAGE, message }
+}
+
+export function changeForm(newState) {
+  return { type: CHANGE_FORM, newState }
+}

client/src/components/Login/LoginContainer.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { withRouter, Redirect } from 'react-router-dom'
+
+import LoginForm from 'components/Login/LoginForm'
+import { login, changeForm } from 'actions/appActions'
+
+class LoginContainer extends React.Component {
+  render() {
+    const { loggedIn, handleSubmit, currentlySending, formState, handleChange } = this.props
+
+    return (
+      <div>
+        {loggedIn ? (
+          <Redirect to="/home" />
+        ) : (
+          <LoginForm
+            handleSubmit={handleSubmit}
+            currentlySending={currentlySending}
+            formState={formState}
+            handleChange={handleChange}
+          />
+        )}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  loggedIn: state.loggedIn,
+  currentlySending: state.currentlySending,
+  formState: state.formState
+})
+
+const mapDispatchToProps = dispatch => ({
+  handleSubmit: (username, password) => dispatch(login(username, password)),
+  handleChange: event => {
+    const target = event.target
+    const value = target.value
+    const name = target.name
+
+    dispatch(changeForm({ [name]: value }))
+  }
+})
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(LoginContainer))

client/src/components/Login/LoginForm.js

@@ -0,0 +1,26 @@
+import React from 'react'
+
+const LoginForm = props => {
+  const { formState, handleSubmit, handleChange, currentlySending } = props
+
+  const submitForm = event => {
+    event.preventDefault()
+    handleSubmit(formState.email, formState.password)
+  }
+
+  return (
+    <form onSubmit={submitForm}>
+      <label>
+        Email:
+        <input type="text" name="email" value={formState.email} onChange={handleChange} />
+      </label>
+      <label>
+        Name:
+        <input type="password" name="password" value={formState.password} onChange={handleChange} />
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  )
+}
+
+export default LoginForm

client/src/components/LoginForm.js

@@ -15,7 +15,10 @@ export function homeReducer(state = initialState, action) {
     case CHANGE_FORM:
       return {
         ...state,
-        formState: action.newState
+        formState: {
+          ...state.formState,
+          ...action.newState
+        }
       }
     case SET_AUTH:
       return {