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 }
}
export const emptyForm = () => ({
type: 'EMPTY_USER_FORMDATA'
})
export const handleFormChange = (target, value) => ({
type: 'UPDATE_USER_FORMDATA',
target,

View File

@ -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>

View File

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

View File

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