Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - reformat js files w/ prettier

Browse Source
This commit is contained in:
Sam
2019-08-28 15:35:22 +02:00
parent c8ea44eecc
commit 2a52b9081d
57 changed files with 1148 additions and 1252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
fittrackee_client/src/components/User/Form.jsx
View File

@ -4,7 +4,7 @@ import { Helmet } from 'react-helmet'
import { history } from '../../index'
import { isRegistrationAllowed } from '../../utils'
export default function Form (props) {
export default function Form(props) {
return (
<div>
<Helmet>
@ -17,7 +17,8 @@ export default function Form (props) {
<div className="row">
<div className="col-md-3" />
<div className="col-md-6">
<hr /><br />
<hr />
<br />
{props.formType === 'register' && !isRegistrationAllowed ? (
<div className="card">
<div className="card-body">Registration is disabled.</div>
@ -26,27 +27,30 @@ export default function Form (props) {
type="submit"
className="btn btn-secondary btn-lg btn-block"
onClick={() => history.go(-1)}
>Back
>
Back
</button>
</div>
</div>
) : (
<form onSubmit={event =>
props.handleUserFormSubmit(event, props.formType)}
>
{props.formType === 'register' &&
<div className="form-group">
<input
className="form-control input-lg"
name="username"
placeholder="Enter a username"
required
type="text"
value={props.userForm.username}
onChange={props.onHandleFormChange}
/>
</div>
<form
onSubmit={event =>
props.handleUserFormSubmit(event, props.formType)
}
>
{props.formType === 'register' && (
<div className="form-group">
<input
className="form-control input-lg"
name="username"
placeholder="Enter a username"
required
type="text"
value={props.userForm.username}
onChange={props.onHandleFormChange}
/>
</div>
)}
<div className="form-group">
<input
className="form-control input-lg"
@ -69,19 +73,19 @@ export default function Form (props) {
onChange={props.onHandleFormChange}
/>
</div>
{props.formType === 'register' &&
<div className="form-group">
<input
className="form-control input-lg"
name="password_conf"
placeholder="Enter the password confirmation"
required
type="password"
value={props.userForm.password_conf}
onChange={props.onHandleFormChange}
/>
</div>
}
{props.formType === 'register' && (
<div className="form-group">
<input
className="form-control input-lg"
name="password_conf"
placeholder="Enter the password confirmation"
required
type="password"
value={props.userForm.password_conf}
onChange={props.onHandleFormChange}
/>
</div>
)}
<input
type="submit"
className="btn btn-primary btn-lg btn-block"

6
fittrackee_client/src/components/User/Logout.jsx
View File

@ -16,8 +16,8 @@ class Logout extends React.Component {
<div className="card col-8">
<div className="card-body">
<div className="text-center">
You are now logged out.
Click <Link to="/login">here</Link> to log back in.
You are now logged out. Click <Link to="/login">here</Link> to
log back in.
</div>
</div>
</div>
@ -35,6 +35,6 @@ export default connect(
dispatch => ({
UserLogout: () => {
dispatch(logout())
}
},
})
)(Logout)

61
fittrackee_client/src/components/User/Profile.jsx
View File

@ -7,22 +7,20 @@ import { Link } from 'react-router-dom'
import { deletePicture, uploadPicture } from '../../actions/user'
import { apiUrl } from '../../utils'
function Profile ({ message, onDeletePicture, onUploadPicture, user }) {
function Profile({ message, onDeletePicture, onUploadPicture, user }) {
return (
<div>
<Helmet>
<title>FitTrackee - Profile</title>
</Helmet>
{ message !== '' && (
<code>{message}</code>
)}
{message !== '' && <code>{message}</code>}
<div className="container">
<h1 className="page-title">Profile</h1>
<div className="row">
<div className="col-md-12">
<div className="card">
<div className="card-header userName">
{user.username} {' '}
{user.username}{' '}
<Link
to={{
pathname: '/profile/edit',
@ -35,48 +33,49 @@ function Profile ({ message, onDeletePicture, onUploadPicture, user }) {
<div className="row">
<div className="col-md-8">
<p>Email: {user.email}</p>
<p>Registration Date: {
format(new Date(user.created_at), 'dd/MM/yyyy HH:mm')
}
<p>
Registration Date:{' '}
{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
<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>
</div>
<div className="col-md-4">
{ user.picture === true && (
<div>
<img
alt="Profile"
src={`${apiUrl}users/${user.id}/picture` +
`?${Date.now()}`}
className="img-fluid App-profile-img-small"
/>
<br />
<button
type="submit"
onClick={() => onDeletePicture()}
>
Delete picture
</button>
<br /><br />
</div>
{user.picture === true && (
<div>
<img
alt="Profile"
src={
`${apiUrl}users/${user.id}/picture` +
`?${Date.now()}`
}
className="img-fluid App-profile-img-small"
/>
<br />
<button type="submit" onClick={() => onDeletePicture()}>
Delete picture
</button>
<br />
<br />
</div>
)}
<form
encType="multipart/form-data"
onSubmit={event => onUploadPicture(event)}
>
<input
type="file"
name="picture"
accept=".png,.jpg,.gif"
type="file"
name="picture"
accept=".png,.jpg,.gif"
/>
<br />
<button type="submit">Send</button>

306
fittrackee_client/src/components/User/ProfileEdit.jsx
View File

@ -7,12 +7,11 @@ import TimezonePicker from 'react-timezone'
import { handleProfileFormSubmit } from '../../actions/user'
import { history } from '../../index'
class ProfileEdit extends React.Component {
constructor(props, context) {
super(props, context)
this.state = {
formData: {}
formData: {},
}
}
@ -29,11 +28,13 @@ class ProfileEdit extends React.Component {
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])
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 })
}
@ -43,7 +44,7 @@ class ProfileEdit extends React.Component {
this.setState(formData)
}
render () {
render() {
const { onHandleProfileFormSubmit, message, user } = this.props
const { formData } = this.state
return (
@ -51,9 +52,7 @@ class ProfileEdit extends React.Component {
<Helmet>
<title>FitTrackee - Edit Profile</title>
</Helmet>
{ message !== '' && (
<code>{message}</code>
)}
{message !== '' && <code>{message}</code>}
{formData.isAuthenticated && (
<div className="container">
<h1 className="page-title">Profile Edition</h1>
@ -61,153 +60,153 @@ class ProfileEdit extends React.Component {
<div className="col-md-2" />
<div className="col-md-8">
<div className="card">
<div className="card-header">
{user.username}
</div>
<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>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>
<form
onSubmit={event => {
event.preventDefault()
onHandleProfileFormSubmit(formData)
}}
>
<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"
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'
<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 />
<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"
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',
},
}
}
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>
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>
</div>
</div>
@ -220,7 +219,6 @@ class ProfileEdit extends React.Component {
</div>
)
}
}
export default connect(

23
fittrackee_client/src/components/User/UserForm.jsx
View File

@ -15,7 +15,7 @@ class UserForm extends React.Component {
email: '',
password: '',
password_conf: '',
}
},
}
}
@ -27,7 +27,7 @@ class UserForm extends React.Component {
emptyForm() {
const { formData } = this.state
Object.keys(formData).map(k => formData[k] = '')
Object.keys(formData).map(k => (formData[k] = ''))
this.setState(formData)
}
@ -38,12 +38,7 @@ class UserForm extends React.Component {
}
render() {
const {
formType,
message,
messages,
onHandleUserFormSubmit
} = this.props
const { formType, message, messages, onHandleUserFormSubmit } = this.props
const { formData } = this.state
return (
<div>
@ -51,16 +46,12 @@ class UserForm extends React.Component {
<Redirect to="/" />
) : (
<div>
{message !== '' && (
<code>{message}</code>
)}
{message !== '' && <code>{message}</code>}
{messages.length > 0 && (
<code>
<ul>
{messages.map(msg => (
<li key={msg.id}>
{msg.value}
</li>
<li key={msg.id}>{msg.value}</li>
))}
</ul>
</code>
@ -70,8 +61,8 @@ class UserForm extends React.Component {
userForm={formData}
onHandleFormChange={event => this.onHandleFormChange(event)}
handleUserFormSubmit={event => {
event.preventDefault()
onHandleUserFormSubmit(formData, formType)
event.preventDefault()
onHandleUserFormSubmit(formData, formType)
}}
/>
</div>