2018-06-12 11:47:01 +02:00
|
|
|
import { format } from 'date-fns'
|
2018-01-01 16:59:46 +01:00
|
|
|
import React from 'react'
|
|
|
|
import { Helmet } from 'react-helmet'
|
|
|
|
import { connect } from 'react-redux'
|
2018-06-11 15:10:18 +02:00
|
|
|
import TimezonePicker from 'react-timezone'
|
2018-01-01 16:59:46 +01:00
|
|
|
|
2018-06-12 11:47:01 +02:00
|
|
|
import { handleProfileFormSubmit } from '../../actions/user'
|
2018-05-01 13:03:40 +02:00
|
|
|
import { history } from '../../index'
|
2018-01-01 16:59:46 +01:00
|
|
|
|
|
|
|
class ProfileEdit extends React.Component {
|
2018-06-12 11:47:01 +02:00
|
|
|
constructor(props, context) {
|
|
|
|
super(props, context)
|
|
|
|
this.state = {
|
2019-08-28 15:35:22 +02:00
|
|
|
formData: {},
|
2018-06-12 11:47:01 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-01-01 16:59:46 +01:00
|
|
|
componentDidMount() {
|
2018-06-12 11:47:01 +02:00
|
|
|
this.initForm()
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidUpdate(prevProps) {
|
|
|
|
if (prevProps.user !== this.props.user) {
|
|
|
|
this.initForm()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
initForm() {
|
|
|
|
const { user } = this.props
|
|
|
|
const formData = {}
|
2019-08-28 15:35:22 +02:00
|
|
|
Object.keys(user).map(k =>
|
|
|
|
user[k] === null
|
|
|
|
? (formData[k] = '')
|
|
|
|
: k === 'birth_date'
|
|
|
|
? (formData[k] = format(new Date(user[k]), 'yyyy-MM-DD'))
|
|
|
|
: (formData[k] = user[k])
|
|
|
|
)
|
2018-06-12 11:47:01 +02:00
|
|
|
this.setState({ formData })
|
2018-01-01 16:59:46 +01:00
|
|
|
}
|
2018-06-12 11:47:01 +02:00
|
|
|
|
|
|
|
handleFormChange(e) {
|
|
|
|
const { formData } = this.state
|
2019-08-31 16:48:29 +02:00
|
|
|
if (e.target.name === 'weekm') {
|
|
|
|
formData.weekm = e.target.value === 'Monday'
|
|
|
|
} else {
|
|
|
|
formData[e.target.name] = e.target.value
|
|
|
|
}
|
2018-06-12 11:47:01 +02:00
|
|
|
this.setState(formData)
|
|
|
|
}
|
|
|
|
|
2019-08-28 15:35:22 +02:00
|
|
|
render() {
|
2018-06-12 11:47:01 +02:00
|
|
|
const { onHandleProfileFormSubmit, message, user } = this.props
|
|
|
|
const { formData } = this.state
|
2018-01-01 16:59:46 +01:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<Helmet>
|
2018-06-12 11:47:01 +02:00
|
|
|
<title>FitTrackee - Edit Profile</title>
|
2018-01-01 16:59:46 +01:00
|
|
|
</Helmet>
|
2019-08-28 15:35:22 +02:00
|
|
|
{message !== '' && <code>{message}</code>}
|
2018-06-12 11:47:01 +02:00
|
|
|
{formData.isAuthenticated && (
|
|
|
|
<div className="container">
|
|
|
|
<h1 className="page-title">Profile Edition</h1>
|
|
|
|
<div className="row">
|
|
|
|
<div className="col-md-2" />
|
|
|
|
<div className="col-md-8">
|
|
|
|
<div className="card">
|
2019-08-28 15:35:22 +02:00
|
|
|
<div className="card-header">{user.username}</div>
|
2018-06-12 11:47:01 +02:00
|
|
|
<div className="card-body">
|
|
|
|
<div className="row">
|
|
|
|
<div className="col-md-12">
|
2019-08-28 15:35:22 +02:00
|
|
|
<form
|
|
|
|
onSubmit={event => {
|
|
|
|
event.preventDefault()
|
|
|
|
onHandleProfileFormSubmit(formData)
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<div className="form-group">
|
|
|
|
<label>
|
|
|
|
Email:
|
|
|
|
<input
|
|
|
|
name="email"
|
|
|
|
className="form-control input-lg"
|
|
|
|
type="text"
|
|
|
|
value={formData.email}
|
|
|
|
readOnly
|
|
|
|
/>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
|
|
<label>
|
|
|
|
Registration Date:
|
|
|
|
<input
|
|
|
|
name="createdAt"
|
|
|
|
className="form-control input-lg"
|
|
|
|
type="text"
|
|
|
|
value={formData.created_at}
|
|
|
|
disabled
|
|
|
|
/>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
|
|
<label>
|
|
|
|
Password:
|
|
|
|
<input
|
|
|
|
name="password"
|
|
|
|
className="form-control input-lg"
|
|
|
|
type="password"
|
|
|
|
onChange={e => this.handleFormChange(e)}
|
|
|
|
/>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
|
|
<label>
|
|
|
|
Password Confirmation:
|
|
|
|
<input
|
|
|
|
name="password_conf"
|
|
|
|
className="form-control input-lg"
|
|
|
|
type="password"
|
|
|
|
onChange={e => this.handleFormChange(e)}
|
|
|
|
/>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<hr />
|
2018-06-12 11:47:01 +02:00
|
|
|
<div className="form-group">
|
2019-08-28 15:35:22 +02:00
|
|
|
<label>
|
|
|
|
First Name:
|
|
|
|
<input
|
|
|
|
name="first_name"
|
|
|
|
className="form-control input-lg"
|
|
|
|
type="text"
|
|
|
|
value={formData.first_name}
|
|
|
|
onChange={e => this.handleFormChange(e)}
|
|
|
|
/>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
|
|
<label>
|
|
|
|
Last Name:
|
|
|
|
<input
|
|
|
|
name="last_name"
|
|
|
|
className="form-control input-lg"
|
|
|
|
type="text"
|
|
|
|
value={formData.last_name}
|
|
|
|
onChange={e => this.handleFormChange(e)}
|
|
|
|
/>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
|
|
<label>
|
|
|
|
Birth Date
|
|
|
|
<input
|
|
|
|
name="birth_date"
|
|
|
|
className="form-control input-lg"
|
|
|
|
type="date"
|
|
|
|
value={formData.birth_date}
|
|
|
|
onChange={e => this.handleFormChange(e)}
|
|
|
|
/>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
|
|
<label>
|
|
|
|
Location:
|
|
|
|
<input
|
|
|
|
name="location"
|
|
|
|
className="form-control input-lg"
|
|
|
|
type="text"
|
|
|
|
value={formData.location}
|
|
|
|
onChange={e => this.handleFormChange(e)}
|
|
|
|
/>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
|
|
<label>
|
|
|
|
Bio:
|
|
|
|
<textarea
|
|
|
|
name="bio"
|
|
|
|
className="form-control input-lg"
|
|
|
|
maxLength="200"
|
|
|
|
value={formData.bio}
|
|
|
|
onChange={e => this.handleFormChange(e)}
|
|
|
|
/>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
|
|
<label>
|
|
|
|
Timezone:
|
|
|
|
<TimezonePicker
|
|
|
|
className="form-control timezone-custom-height"
|
|
|
|
onChange={tz => {
|
|
|
|
const e = {
|
|
|
|
target: {
|
|
|
|
name: 'timezone',
|
|
|
|
value: tz ? tz : 'Europe/Paris',
|
|
|
|
},
|
2018-06-12 11:47:01 +02:00
|
|
|
}
|
2019-08-28 15:35:22 +02:00
|
|
|
this.handleFormChange(e)
|
|
|
|
}}
|
|
|
|
value={formData.timezone}
|
|
|
|
/>
|
|
|
|
</label>
|
|
|
|
</div>
|
2019-08-31 16:48:29 +02:00
|
|
|
<div className="form-group">
|
|
|
|
<label>
|
|
|
|
First day of week:
|
|
|
|
<select
|
|
|
|
name="weekm"
|
|
|
|
className="form-control input-lg"
|
|
|
|
value={formData.weekm ? 'Monday' : 'Sunday'}
|
|
|
|
onChange={e => this.handleFormChange(e)}
|
|
|
|
>
|
|
|
|
<option value="Sunday">Sunday</option>
|
|
|
|
<option value="Monday">Monday</option>
|
|
|
|
</select>
|
|
|
|
</label>
|
|
|
|
</div>
|
2019-08-28 15:35:22 +02:00
|
|
|
<input
|
|
|
|
type="submit"
|
|
|
|
className="btn btn-primary btn-lg btn-block"
|
|
|
|
value="Submit"
|
|
|
|
/>
|
|
|
|
<input
|
|
|
|
type="submit"
|
|
|
|
className="btn btn-secondary btn-lg btn-block"
|
|
|
|
onClick={() => history.push('/profile')}
|
|
|
|
value="Cancel"
|
|
|
|
/>
|
|
|
|
</form>
|
2018-06-11 15:10:18 +02:00
|
|
|
</div>
|
2018-01-01 16:59:46 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2018-06-12 11:47:01 +02:00
|
|
|
<div className="col-md-2" />
|
2018-01-01 16:59:46 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
2018-06-12 11:47:01 +02:00
|
|
|
)}
|
2018-01-01 16:59:46 +01:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default connect(
|
|
|
|
state => ({
|
2018-06-12 11:47:01 +02:00
|
|
|
location: state.router.location,
|
2018-01-01 17:50:12 +01:00
|
|
|
message: state.message,
|
2018-01-01 16:59:46 +01:00
|
|
|
user: state.user,
|
|
|
|
}),
|
|
|
|
dispatch => ({
|
2018-06-12 11:47:01 +02:00
|
|
|
onHandleProfileFormSubmit: formData => {
|
|
|
|
dispatch(handleProfileFormSubmit(formData))
|
2018-01-01 16:59:46 +01:00
|
|
|
},
|
|
|
|
})
|
|
|
|
)(ProfileEdit)
|