Client: empty form when location change

This commit is contained in:
SamR1 2018-01-14 19:56:04 +01:00
parent 4f5de32eed
commit f9a1768e64
4 changed files with 76 additions and 42 deletions

View File

@ -31,6 +31,10 @@ function initProfileFormData(user) {
return { type: 'INIT_PROFILE_FORM', user } return { type: 'INIT_PROFILE_FORM', user }
} }
export const emptyForm = () => ({
type: 'EMPTY_USER_FORMDATA'
})
export const handleFormChange = (target, value) => ({ export const handleFormChange = (target, value) => ({
type: 'UPDATE_USER_FORMDATA', type: 'UPDATE_USER_FORMDATA',
target, target,

View File

@ -19,43 +19,47 @@ export default function Form (props) {
{props.formType === 'Register' && {props.formType === 'Register' &&
<div className="form-group"> <div className="form-group">
<input <input
name="username"
className="form-control input-lg" className="form-control input-lg"
type="text" name="username"
placeholder="Enter a username" placeholder="Enter a username"
required required
type="text"
value={props.userForm.username}
onChange={props.onHandleFormChange} onChange={props.onHandleFormChange}
/> />
</div> </div>
} }
<div className="form-group"> <div className="form-group">
<input <input
name="email"
className="form-control input-lg" className="form-control input-lg"
type="email" name="email"
placeholder="Enter an email address" placeholder="Enter an email address"
required required
type="email"
value={props.userForm.email}
onChange={props.onHandleFormChange} onChange={props.onHandleFormChange}
/> />
</div> </div>
<div className="form-group"> <div className="form-group">
<input <input
name="password"
className="form-control input-lg" className="form-control input-lg"
type="password" name="password"
placeholder="Enter a password" placeholder="Enter a password"
required required
type="password"
value={props.userForm.password}
onChange={props.onHandleFormChange} onChange={props.onHandleFormChange}
/> />
</div> </div>
{props.formType === 'Register' && {props.formType === 'Register' &&
<div className="form-group"> <div className="form-group">
<input <input
name="passwordConf"
className="form-control input-lg" className="form-control input-lg"
type="password" name="passwordConf"
placeholder="Enter the password confirmation" placeholder="Enter the password confirmation"
required required
type="password"
value={props.userForm.passwordConf}
onChange={props.onHandleFormChange} onChange={props.onHandleFormChange}
/> />
</div> </div>

View File

@ -3,23 +3,41 @@ import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom' import { Redirect } from 'react-router-dom'
import Form from './Form' import Form from './Form'
import { handleFormChange, handleUserFormSubmit } from '../../actions' import { emptyForm, handleFormChange, handleUserFormSubmit } from '../../actions'
import { isLoggedIn } from '../../utils' 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 ( return (
<div> <div>
{isLoggedIn() ? ( {isLoggedIn() ? (
<Redirect to="/" /> <Redirect to="/" />
) : ( ) : (
<div> <div>
{ props.message !== '' && ( {message !== '' && (
<code>{props.message}</code> <code>{message}</code>
)} )}
{ props.messages.length > 0 && ( {messages.length > 0 && (
<code> <code>
<ul> <ul>
{props.messages.map(msg => ( {messages.map(msg => (
<li key={msg.id}> <li key={msg.id}>
{msg.value} {msg.value}
</li> </li>
@ -28,24 +46,29 @@ function UserForm(props) {
</code> </code>
)} )}
<Form <Form
formType={props.formType} formType={formType}
userForm={props.formData} userForm={formData}
onHandleFormChange={event => props.onHandleFormChange(event)} onHandleFormChange={event => onHandleFormChange(event)}
handleUserFormSubmit={(event, formType) => handleUserFormSubmit={(event, formType) =>
props.onHandleUserFormSubmit(event, formType)} onHandleUserFormSubmit(event, formType)}
/> />
</div> </div>
)} )}
</div> </div>
) )
}
} }
export default connect( export default connect(
state => ({ state => ({
formData: state.formData, formData: state.formData.formData,
location: state.router.location,
message: state.message, message: state.message,
messages: state.messages, messages: state.messages,
}), }),
dispatch => ({ dispatch => ({
onEmptyForm: () => {
dispatch(emptyForm())
},
onHandleFormChange: event => { onHandleFormChange: event => {
dispatch(handleFormChange(event.target.name, event.target.value)) dispatch(handleFormChange(event.target.name, event.target.value))
}, },

View File

@ -1,4 +1,5 @@
import { format } from 'date-fns' import { format } from 'date-fns'
import { routerReducer } from 'react-router-redux'
import { combineReducers } from 'redux' import { combineReducers } from 'redux'
import initial from './initial' import initial from './initial'
@ -13,6 +14,7 @@ const formData = (state = initial.formData, action) => {
}, },
} }
case 'PROFILE_SUCCESS': case 'PROFILE_SUCCESS':
case 'EMPTY_USER_FORMDATA':
return initial.formData return initial.formData
default: default:
return state return state
@ -120,6 +122,7 @@ const reducers = combineReducers({
formProfile, formProfile,
message, message,
messages, messages,
router: routerReducer,
user, user,
}) })