Client: empty form when location change
This commit is contained in:
parent
4f5de32eed
commit
f9a1768e64
@ -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,
|
||||
|
@ -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>
|
||||
|
@ -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))
|
||||
},
|
||||
|
@ -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,
|
||||
})
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user