From f9a1768e6449a0d56f0458863a317dfe9f07d08f Mon Sep 17 00:00:00 2001
From: SamR1 <sam@samr1.net>
Date: Sun, 14 Jan 2018 19:56:04 +0100
Subject: [PATCH] Client: empty form when location change

---
 mpwo_client/src/actions/index.js             |  4 +
 mpwo_client/src/components/User/Form.jsx     | 20 +++--
 mpwo_client/src/components/User/UserForm.jsx | 91 ++++++++++++--------
 mpwo_client/src/reducers/index.js            |  3 +
 4 files changed, 76 insertions(+), 42 deletions(-)

diff --git a/mpwo_client/src/actions/index.js b/mpwo_client/src/actions/index.js
index 8429a323..4ef0424a 100644
--- a/mpwo_client/src/actions/index.js
+++ b/mpwo_client/src/actions/index.js
@@ -31,6 +31,10 @@ function initProfileFormData(user) {
   return { type: 'INIT_PROFILE_FORM', user }
 }
 
+export const emptyForm = () => ({
+  type: 'EMPTY_USER_FORMDATA'
+})
+
 export const handleFormChange = (target, value) => ({
   type: 'UPDATE_USER_FORMDATA',
   target,
diff --git a/mpwo_client/src/components/User/Form.jsx b/mpwo_client/src/components/User/Form.jsx
index ba4e46a2..7e959cc1 100644
--- a/mpwo_client/src/components/User/Form.jsx
+++ b/mpwo_client/src/components/User/Form.jsx
@@ -19,43 +19,47 @@ export default function Form (props) {
             {props.formType === 'Register' &&
             <div className="form-group">
               <input
-                name="username"
                 className="form-control input-lg"
-                type="text"
+                name="username"
                 placeholder="Enter a username"
                 required
+                type="text"
+                value={props.userForm.username}
                 onChange={props.onHandleFormChange}
               />
             </div>
             }
             <div className="form-group">
               <input
-                name="email"
                 className="form-control input-lg"
-                type="email"
+                name="email"
                 placeholder="Enter an email address"
                 required
+                type="email"
+                value={props.userForm.email}
                 onChange={props.onHandleFormChange}
               />
             </div>
             <div className="form-group">
               <input
-                name="password"
                 className="form-control input-lg"
-                type="password"
+                name="password"
                 placeholder="Enter a password"
                 required
+                type="password"
+                value={props.userForm.password}
                 onChange={props.onHandleFormChange}
               />
             </div>
             {props.formType === 'Register' &&
             <div className="form-group">
               <input
-                name="passwordConf"
                 className="form-control input-lg"
-                type="password"
+                name="passwordConf"
                 placeholder="Enter the password confirmation"
                 required
+                type="password"
+                value={props.userForm.passwordConf}
                 onChange={props.onHandleFormChange}
               />
             </div>
diff --git a/mpwo_client/src/components/User/UserForm.jsx b/mpwo_client/src/components/User/UserForm.jsx
index 5c828993..b206855a 100644
--- a/mpwo_client/src/components/User/UserForm.jsx
+++ b/mpwo_client/src/components/User/UserForm.jsx
@@ -3,49 +3,72 @@ import { connect } from 'react-redux'
 import { Redirect } from 'react-router-dom'
 
 import Form from './Form'
-import { handleFormChange, handleUserFormSubmit } from '../../actions'
+import { emptyForm, handleFormChange, handleUserFormSubmit } from '../../actions'
 import { isLoggedIn } from '../../utils'
 
-function UserForm(props) {
-  return (
-    <div>
-      {isLoggedIn() ? (
-        <Redirect to="/" />
-      ) : (
-        <div>
-          { props.message !== '' && (
-            <code>{props.message}</code>
-          )}
-          { props.messages.length > 0 && (
-            <code>
-              <ul>
-                {props.messages.map(msg => (
-                  <li key={msg.id}>
-                    {msg.value}
-                  </li>
-                ))}
-              </ul>
-            </code>
-          )}
-          <Form
-            formType={props.formType}
-            userForm={props.formData}
-            onHandleFormChange={event => props.onHandleFormChange(event)}
-            handleUserFormSubmit={(event, formType) =>
-              props.onHandleUserFormSubmit(event, formType)}
-          />
-        </div>
-      )}
-    </div>
-  )
+class UserForm extends React.Component {
+
+  componentWillReceiveProps(nextProps) {
+    if (
+      (nextProps.location.pathname !== this.props.location.pathname)
+    ) {
+      this.props.onEmptyForm()
+    }
+  }
+
+  render() {
+    const {
+      formData,
+      formType,
+      message,
+      messages,
+      onHandleFormChange,
+      onHandleUserFormSubmit
+    } = this.props
+    return (
+      <div>
+        {isLoggedIn() ? (
+          <Redirect to="/" />
+        ) : (
+          <div>
+            {message !== '' && (
+              <code>{message}</code>
+            )}
+            {messages.length > 0 && (
+              <code>
+                <ul>
+                  {messages.map(msg => (
+                    <li key={msg.id}>
+                      {msg.value}
+                    </li>
+                  ))}
+                </ul>
+              </code>
+            )}
+            <Form
+              formType={formType}
+              userForm={formData}
+              onHandleFormChange={event => onHandleFormChange(event)}
+              handleUserFormSubmit={(event, formType) =>
+              onHandleUserFormSubmit(event, formType)}
+            />
+          </div>
+        )}
+      </div>
+    )
+  }
 }
 export default connect(
   state => ({
-    formData: state.formData,
+    formData: state.formData.formData,
+    location: state.router.location,
     message: state.message,
     messages: state.messages,
   }),
   dispatch => ({
+    onEmptyForm: () => {
+      dispatch(emptyForm())
+    },
     onHandleFormChange: event => {
       dispatch(handleFormChange(event.target.name, event.target.value))
     },
diff --git a/mpwo_client/src/reducers/index.js b/mpwo_client/src/reducers/index.js
index 54814d98..32a46597 100644
--- a/mpwo_client/src/reducers/index.js
+++ b/mpwo_client/src/reducers/index.js
@@ -1,4 +1,5 @@
 import { format } from 'date-fns'
+import { routerReducer } from 'react-router-redux'
 import { combineReducers } from 'redux'
 
 import initial from './initial'
@@ -13,6 +14,7 @@ const formData = (state = initial.formData, action) => {
         },
       }
     case 'PROFILE_SUCCESS':
+    case 'EMPTY_USER_FORMDATA':
       return initial.formData
     default:
       return state
@@ -120,6 +122,7 @@ const reducers = combineReducers({
   formProfile,
   message,
   messages,
+  router: routerReducer,
   user,
 })