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' &&
}
{props.formType === 'Register' &&
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 ( -
- {isLoggedIn() ? ( - - ) : ( -
- { props.message !== '' && ( - {props.message} - )} - { props.messages.length > 0 && ( - -
    - {props.messages.map(msg => ( -
  • - {msg.value} -
  • - ))} -
-
- )} -
props.onHandleFormChange(event)} - handleUserFormSubmit={(event, formType) => - props.onHandleUserFormSubmit(event, formType)} - /> -
- )} -
- ) +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 ( +
+ {isLoggedIn() ? ( + + ) : ( +
+ {message !== '' && ( + {message} + )} + {messages.length > 0 && ( + +
    + {messages.map(msg => ( +
  • + {msg.value} +
  • + ))} +
+
+ )} + onHandleFormChange(event)} + handleUserFormSubmit={(event, formType) => + onHandleUserFormSubmit(event, formType)} + /> +
+ )} +
+ ) + } } 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, })