Client: refactor (wip)
This commit is contained in:
Sam
@ -19,7 +19,7 @@ function Admin (props) {
|
||||
<title>FitTrackee - Admin</title>
|
||||
</Helmet>
|
||||
{isLoggedIn() ? (
|
||||
user.isAdmin ? (
|
||||
user.admin ? (
|
||||
<Switch>
|
||||
<Route exact path="/admin" component={AdminMenu} />
|
||||
<Route exact path="/admin/sports" component={AdminSports} />
|
||||
|
||||
@ -3,12 +3,12 @@ import React from 'react'
|
||||
|
||||
export default function UserStatistics (props) {
|
||||
const { user } = props
|
||||
const days = user.totalDuration.match(/day/g)
|
||||
? `${user.totalDuration.split(',')[0]},`
|
||||
const days = user.total_duration.match(/day/g)
|
||||
? `${user.total_duration.split(',')[0]},`
|
||||
: '0 days,'
|
||||
let duration = user.totalDuration.match(/day/g)
|
||||
? user.totalDuration.split(', ')[1]
|
||||
: user.totalDuration
|
||||
let duration = user.total_duration.match(/day/g)
|
||||
? user.total_duration.split(', ')[1]
|
||||
: user.total_duration
|
||||
duration = `${duration.split(':')[0]}h ${duration.split(':')[1]}min`
|
||||
return (
|
||||
<div className="row">
|
||||
@ -20,7 +20,7 @@ export default function UserStatistics (props) {
|
||||
</div>
|
||||
<div className="col-9 text-right">
|
||||
<div className="huge">{user.nbActivities}</div>
|
||||
<div>{`workout${user.nbActivities === 1 ? '' : 's'}`}</div>
|
||||
<div>{`workout${user.nb_activities === 1 ? '' : 's'}`}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -33,7 +33,7 @@ export default function UserStatistics (props) {
|
||||
</div>
|
||||
<div className="col-9 text-right">
|
||||
<div className="huge">
|
||||
{Number(user.totalDistance).toFixed(2)}
|
||||
{Number(user.total_distance).toFixed(2)}
|
||||
</div>
|
||||
<div>km</div>
|
||||
</div>
|
||||
@ -60,8 +60,8 @@ export default function UserStatistics (props) {
|
||||
<i className="fa fa-tags fa-3x fa-color" />
|
||||
</div>
|
||||
<div className="col-9 text-right">
|
||||
<div className="huge">{user.nbSports}</div>
|
||||
<div>{`sport${user.nbSports === 1 ? '' : 's'}`}</div>
|
||||
<div className="huge">{user.nb_sports}</div>
|
||||
<div>{`sport${user.nb_sports === 1 ? '' : 's'}`}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -58,7 +58,7 @@ function NavBar(props) {
|
||||
</Link>
|
||||
</li>
|
||||
)}
|
||||
{props.user.isAdmin && (
|
||||
{props.user.admin && (
|
||||
<li className="nav-item">
|
||||
<Link
|
||||
className="nav-link"
|
||||
|
||||
@ -55,11 +55,11 @@ export default function Form (props) {
|
||||
<div className="form-group">
|
||||
<input
|
||||
className="form-control input-lg"
|
||||
name="passwordConf"
|
||||
name="password_conf"
|
||||
placeholder="Enter the password confirmation"
|
||||
required
|
||||
type="password"
|
||||
value={props.userForm.passwordConf}
|
||||
value={props.userForm.password_conf}
|
||||
onChange={props.onHandleFormChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -11,7 +11,7 @@ function Profile ({ message, onDeletePicture, onUploadPicture, user }) {
|
||||
return (
|
||||
<div>
|
||||
<Helmet>
|
||||
<title>FitTrackee - {user.username} - Profile</title>
|
||||
<title>FitTrackee - Profile</title>
|
||||
</Helmet>
|
||||
{ message !== '' && (
|
||||
<code>{message}</code>
|
||||
@ -36,11 +36,16 @@ function Profile ({ message, onDeletePicture, onUploadPicture, user }) {
|
||||
<div className="col-md-8">
|
||||
<p>Email: {user.email}</p>
|
||||
<p>Registration Date: {
|
||||
format(new Date(user.createdAt), 'DD/MM/YYYY HH:mm')
|
||||
}</p>
|
||||
<p>First Name: {user.firstName}</p>
|
||||
<p>Last Name: {user.lastName}</p>
|
||||
<p>Birth Date: {user.birthDate}</p>
|
||||
format(new Date(user.created_at), 'DD/MM/YYYY HH:mm')
|
||||
}
|
||||
</p>
|
||||
<p>First Name: {user.first_name}</p>
|
||||
<p>Last Name: {user.last_name}</p>
|
||||
<p>Birth Date: {user.birth_date
|
||||
? format(new Date(user.birth_date), 'DD/MM/YYYY')
|
||||
: ''
|
||||
}
|
||||
</p>
|
||||
<p>Location: {user.location}</p>
|
||||
<p>Bio: {user.bio}</p>
|
||||
<p>Time zone: {user.timezone}</p>
|
||||
|
||||
@ -1,198 +1,223 @@
|
||||
import { format } from 'date-fns'
|
||||
import React from 'react'
|
||||
import { Helmet } from 'react-helmet'
|
||||
import { connect } from 'react-redux'
|
||||
import TimezonePicker from 'react-timezone'
|
||||
|
||||
import {
|
||||
initProfileForm,
|
||||
updateProfileFormData,
|
||||
handleProfileFormSubmit
|
||||
} from '../../actions/user'
|
||||
import { handleProfileFormSubmit } from '../../actions/user'
|
||||
import { history } from '../../index'
|
||||
|
||||
|
||||
class ProfileEdit extends React.Component {
|
||||
componentDidMount() {
|
||||
this.props.initForm(this.props.user)
|
||||
constructor(props, context) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
formData: {}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.initForm()
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (prevProps.user !== this.props.user) {
|
||||
this.initForm()
|
||||
}
|
||||
}
|
||||
|
||||
initForm() {
|
||||
const { user } = this.props
|
||||
const formData = {}
|
||||
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])
|
||||
this.setState({ formData })
|
||||
}
|
||||
|
||||
handleFormChange(e) {
|
||||
const { formData } = this.state
|
||||
formData[e.target.name] = e.target.value
|
||||
this.setState(formData)
|
||||
}
|
||||
|
||||
render () {
|
||||
const { formProfile,
|
||||
onHandleFormChange,
|
||||
onHandleProfileFormSubmit,
|
||||
message,
|
||||
user
|
||||
} = this.props
|
||||
const { onHandleProfileFormSubmit, message, user } = this.props
|
||||
const { formData } = this.state
|
||||
return (
|
||||
<div>
|
||||
<Helmet>
|
||||
<title>FitTrackee - {user.username} - Edit Profile</title>
|
||||
<title>FitTrackee - Edit Profile</title>
|
||||
</Helmet>
|
||||
{ message !== '' && (
|
||||
<code>{message}</code>
|
||||
)}
|
||||
<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">
|
||||
<div className="card-header">
|
||||
{user.username}
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<form onSubmit={event =>
|
||||
onHandleProfileFormSubmit(event)}
|
||||
>
|
||||
<div className="form-group">
|
||||
<label>Email:
|
||||
<input
|
||||
name="email"
|
||||
className="form-control input-lg"
|
||||
type="text"
|
||||
value={user.email}
|
||||
readOnly
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>
|
||||
Registration Date:
|
||||
<input
|
||||
name="createdAt"
|
||||
className="form-control input-lg"
|
||||
type="text"
|
||||
value={user.createdAt}
|
||||
readOnly
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>
|
||||
Password:
|
||||
<input
|
||||
name="password"
|
||||
className="form-control input-lg"
|
||||
type="password"
|
||||
onChange={onHandleFormChange}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
{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">
|
||||
<div className="card-header">
|
||||
{user.username}
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<form onSubmit={event => {
|
||||
event.preventDefault()
|
||||
onHandleProfileFormSubmit(formData)
|
||||
}}
|
||||
>
|
||||
<div className="form-group">
|
||||
<label>
|
||||
Password Confirmation:
|
||||
<input
|
||||
name="passwordConf"
|
||||
className="form-control input-lg"
|
||||
type="password"
|
||||
onChange={onHandleFormChange}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<hr />
|
||||
<div className="form-group">
|
||||
<label>
|
||||
First Name:
|
||||
<input
|
||||
name="firstName"
|
||||
<label>Email:
|
||||
<input
|
||||
name="email"
|
||||
className="form-control input-lg"
|
||||
type="text"
|
||||
value={formProfile.firstName}
|
||||
onChange={onHandleFormChange}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>
|
||||
Last Name:
|
||||
<input
|
||||
name="lastName"
|
||||
className="form-control input-lg"
|
||||
type="text"
|
||||
value={formProfile.lastName}
|
||||
onChange={onHandleFormChange}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>
|
||||
Birth Date
|
||||
<input
|
||||
name="birthDate"
|
||||
className="form-control input-lg"
|
||||
type="date"
|
||||
value={formProfile.birthDate}
|
||||
onChange={onHandleFormChange}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>
|
||||
Location:
|
||||
<input
|
||||
name="location"
|
||||
className="form-control input-lg"
|
||||
type="text"
|
||||
value={formProfile.location}
|
||||
onChange={onHandleFormChange}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>
|
||||
Bio:
|
||||
<textarea
|
||||
name="bio"
|
||||
className="form-control input-lg"
|
||||
maxLength="200"
|
||||
type="text"
|
||||
value={formProfile.bio}
|
||||
onChange={onHandleFormChange}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>
|
||||
Timezone:
|
||||
<TimezonePicker
|
||||
className="form-control"
|
||||
onChange={tz => {
|
||||
const e = { target:
|
||||
{
|
||||
name: 'timezone',
|
||||
value: tz ? tz : 'Europe/Paris'
|
||||
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 />
|
||||
<div className="form-group">
|
||||
<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"
|
||||
type="text"
|
||||
value={formData.bio}
|
||||
onChange={e => this.handleFormChange(e)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>
|
||||
Timezone:
|
||||
<TimezonePicker
|
||||
className="form-control"
|
||||
onChange={tz => {
|
||||
const e = { target:
|
||||
{
|
||||
name: 'timezone',
|
||||
value: tz ? tz : 'Europe/Paris'
|
||||
}
|
||||
}
|
||||
}
|
||||
onHandleFormChange(e)
|
||||
}}
|
||||
value={formProfile.timezone
|
||||
? formProfile.timezone
|
||||
: 'Europe/Paris'
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
this.handleFormChange(e)
|
||||
}}
|
||||
value={formData.timezone}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-2" />
|
||||
</div>
|
||||
<div className="col-md-2" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -201,19 +226,13 @@ class ProfileEdit extends React.Component {
|
||||
|
||||
export default connect(
|
||||
state => ({
|
||||
formProfile: state.formProfile.formProfile,
|
||||
location: state.router.location,
|
||||
message: state.message,
|
||||
user: state.user,
|
||||
}),
|
||||
dispatch => ({
|
||||
initForm: () => {
|
||||
dispatch(initProfileForm())
|
||||
},
|
||||
onHandleFormChange: event => {
|
||||
dispatch(updateProfileFormData(event.target.name, event.target.value))
|
||||
},
|
||||
onHandleProfileFormSubmit: event => {
|
||||
dispatch(handleProfileFormSubmit(event))
|
||||
onHandleProfileFormSubmit: formData => {
|
||||
dispatch(handleProfileFormSubmit(formData))
|
||||
},
|
||||
})
|
||||
)(ProfileEdit)
|
||||
|
||||
@ -3,32 +3,48 @@ import { connect } from 'react-redux'
|
||||
import { Redirect } from 'react-router-dom'
|
||||
|
||||
import Form from './Form'
|
||||
import {
|
||||
emptyForm,
|
||||
handleFormChange,
|
||||
handleUserFormSubmit
|
||||
} from '../../actions/user'
|
||||
import { handleUserFormSubmit } from '../../actions/user'
|
||||
import { isLoggedIn } from '../../utils'
|
||||
|
||||
class UserForm extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
formData: {
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
password_conf: '',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (
|
||||
(prevProps.location.pathname !== this.props.location.pathname)
|
||||
) {
|
||||
this.props.onEmptyForm()
|
||||
if (prevProps.location.pathname !== this.props.location.pathname) {
|
||||
this.emptyForm()
|
||||
}
|
||||
}
|
||||
|
||||
emptyForm() {
|
||||
const { formData } = this.state
|
||||
Object.keys(formData).map(k => formData[k] = '')
|
||||
this.setState(formData)
|
||||
}
|
||||
|
||||
onHandleFormChange(e) {
|
||||
const { formData } = this.state
|
||||
formData[e.target.name] = e.target.value
|
||||
this.setState(formData)
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
formData,
|
||||
formType,
|
||||
message,
|
||||
messages,
|
||||
onHandleFormChange,
|
||||
onHandleUserFormSubmit
|
||||
} = this.props
|
||||
const { formData } = this.state
|
||||
return (
|
||||
<div>
|
||||
{isLoggedIn() ? (
|
||||
@ -52,10 +68,11 @@ class UserForm extends React.Component {
|
||||
<Form
|
||||
formType={formType}
|
||||
userForm={formData}
|
||||
onHandleFormChange={event => onHandleFormChange(event)}
|
||||
handleUserFormSubmit={event =>
|
||||
onHandleUserFormSubmit(event, formType)
|
||||
}
|
||||
onHandleFormChange={event => this.onHandleFormChange(event)}
|
||||
handleUserFormSubmit={event => {
|
||||
event.preventDefault()
|
||||
onHandleUserFormSubmit(formData, formType)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@ -65,20 +82,13 @@ class UserForm extends React.Component {
|
||||
}
|
||||
export default connect(
|
||||
state => ({
|
||||
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))
|
||||
},
|
||||
onHandleUserFormSubmit: (event, formType) => {
|
||||
dispatch(handleUserFormSubmit(event, formType))
|
||||
onHandleUserFormSubmit: (formData, formType) => {
|
||||
dispatch(handleUserFormSubmit(formData, formType))
|
||||
},
|
||||
})
|
||||
)(UserForm)
|
||||
|
||||
Reference in New Issue
Block a user