Client: empty form when location change

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,

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>

mpwo_client/src/components/User/UserForm.jsx

@@ -3,23 +3,41 @@ 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) {
+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>
-          { props.message !== '' && (
-            <code>{props.message}</code>
+            {message !== '' && (
+              <code>{message}</code>
             )}
-          { props.messages.length > 0 && (
+            {messages.length > 0 && (
               <code>
                 <ul>
-                {props.messages.map(msg => (
+                  {messages.map(msg => (
                     <li key={msg.id}>
                       {msg.value}
                     </li>
@@ -28,24 +46,29 @@ function UserForm(props) {
               </code>
             )}
             <Form
-            formType={props.formType}
-            userForm={props.formData}
-            onHandleFormChange={event => props.onHandleFormChange(event)}
+              formType={formType}
+              userForm={formData}
+              onHandleFormChange={event => onHandleFormChange(event)}
               handleUserFormSubmit={(event, formType) =>
-              props.onHandleUserFormSubmit(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))
     },

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,
 })