API & Client: refactor (rename mpwo to fittrackee)
This commit is contained in:
Sam
79
fittrackee_client/src/components/User/Form.jsx
Normal file
79
fittrackee_client/src/components/User/Form.jsx
Normal file
@ -0,0 +1,79 @@
|
||||
import React from 'react'
|
||||
import { Helmet } from 'react-helmet'
|
||||
|
||||
export default function Form (props) {
|
||||
return (
|
||||
<div>
|
||||
<Helmet>
|
||||
<title>FitTrackee - {props.formType}</title>
|
||||
</Helmet>
|
||||
<h1 className="page-title">{props.formType}</h1>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-3" />
|
||||
<div className="col-md-6">
|
||||
<hr /><br />
|
||||
<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"
|
||||
name="email"
|
||||
placeholder="Enter an email address"
|
||||
required
|
||||
type="email"
|
||||
value={props.userForm.email}
|
||||
onChange={props.onHandleFormChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input
|
||||
className="form-control input-lg"
|
||||
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
|
||||
className="form-control input-lg"
|
||||
name="passwordConf"
|
||||
placeholder="Enter the password confirmation"
|
||||
required
|
||||
type="password"
|
||||
value={props.userForm.passwordConf}
|
||||
onChange={props.onHandleFormChange}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-primary btn-lg btn-block"
|
||||
value="Submit"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div className="col-md-3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
31
fittrackee_client/src/components/User/Logout.jsx
Normal file
31
fittrackee_client/src/components/User/Logout.jsx
Normal file
@ -0,0 +1,31 @@
|
||||
import React from 'react'
|
||||
import { connect } from 'react-redux'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
import { logout } from '../../actions/user'
|
||||
|
||||
class Logout extends React.Component {
|
||||
componentDidMount() {
|
||||
this.props.UserLogout()
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<p className="App-center">
|
||||
You are now logged out.
|
||||
Click <Link to="/login">here</Link> to log back in.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(
|
||||
state => ({
|
||||
user: state.user,
|
||||
}),
|
||||
dispatch => ({
|
||||
UserLogout: () => {
|
||||
dispatch(logout())
|
||||
}
|
||||
})
|
||||
)(Logout)
|
||||
102
fittrackee_client/src/components/User/Profile.jsx
Normal file
102
fittrackee_client/src/components/User/Profile.jsx
Normal file
@ -0,0 +1,102 @@
|
||||
import { format } from 'date-fns'
|
||||
import React from 'react'
|
||||
import { Helmet } from 'react-helmet'
|
||||
import { connect } from 'react-redux'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
import { deletePicture, uploadPicture } from '../../actions/user'
|
||||
import { apiUrl } from '../../utils'
|
||||
|
||||
function Profile ({ message, onDeletePicture, onUploadPicture, user }) {
|
||||
return (
|
||||
<div>
|
||||
<Helmet>
|
||||
<title>FitTrackee - {user.username} - Profile</title>
|
||||
</Helmet>
|
||||
{ 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} {' '}
|
||||
<Link
|
||||
to={{
|
||||
pathname: '/profile/edit',
|
||||
}}
|
||||
>
|
||||
<i className="fa fa-pencil-square-o" aria-hidden="true" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<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>
|
||||
<p>Location: {user.location}</p>
|
||||
<p>Bio: {user.bio}</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>
|
||||
)}
|
||||
<form
|
||||
encType="multipart/form-data"
|
||||
onSubmit={event => onUploadPicture(event)}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
name="picture"
|
||||
accept=".png,.jpg,.gif"
|
||||
/>
|
||||
<br />
|
||||
<button type="submit">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default connect(
|
||||
state => ({
|
||||
message: state.message,
|
||||
user: state.user,
|
||||
}),
|
||||
dispatch => ({
|
||||
onDeletePicture: () => {
|
||||
dispatch(deletePicture())
|
||||
},
|
||||
onUploadPicture: event => {
|
||||
dispatch(uploadPicture(event))
|
||||
},
|
||||
})
|
||||
)(Profile)
|
||||
197
fittrackee_client/src/components/User/ProfileEdit.jsx
Normal file
197
fittrackee_client/src/components/User/ProfileEdit.jsx
Normal file
@ -0,0 +1,197 @@
|
||||
import React from 'react'
|
||||
import { Helmet } from 'react-helmet'
|
||||
import { connect } from 'react-redux'
|
||||
|
||||
import {
|
||||
initProfileForm,
|
||||
updateProfileFormData,
|
||||
handleProfileFormSubmit
|
||||
} from '../../actions/user'
|
||||
import { history } from '../../index'
|
||||
|
||||
|
||||
class ProfileEdit extends React.Component {
|
||||
componentDidMount() {
|
||||
this.props.initForm(this.props.user)
|
||||
}
|
||||
render () {
|
||||
const { formProfile,
|
||||
onHandleFormChange,
|
||||
onHandleProfileFormSubmit,
|
||||
message,
|
||||
user
|
||||
} = this.props
|
||||
return (
|
||||
<div>
|
||||
<Helmet>
|
||||
<title>FitTrackee - {user.username} - 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>
|
||||
<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"
|
||||
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>
|
||||
<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>
|
||||
<div className="col-md-2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default connect(
|
||||
state => ({
|
||||
formProfile: state.formProfile.formProfile,
|
||||
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))
|
||||
},
|
||||
})
|
||||
)(ProfileEdit)
|
||||
84
fittrackee_client/src/components/User/UserForm.jsx
Normal file
84
fittrackee_client/src/components/User/UserForm.jsx
Normal file
@ -0,0 +1,84 @@
|
||||
import React from 'react'
|
||||
import { connect } from 'react-redux'
|
||||
import { Redirect } from 'react-router-dom'
|
||||
|
||||
import Form from './Form'
|
||||
import {
|
||||
emptyForm,
|
||||
handleFormChange,
|
||||
handleUserFormSubmit
|
||||
} from '../../actions/user'
|
||||
import { isLoggedIn } from '../../utils'
|
||||
|
||||
class UserForm extends React.Component {
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (
|
||||
(prevProps.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 =>
|
||||
onHandleUserFormSubmit(event, formType)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
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))
|
||||
},
|
||||
})
|
||||
)(UserForm)
|
||||
Reference in New Issue
Block a user