Client - reformat js files w/ prettier

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

View File

@ -29,8 +29,8 @@ export const setChartData = chartData => ({
chartData,
})
export const addActivity = form => dispatch => FitTrackeeGenericApi
.addDataWithFile('activities', form)
export const addActivity = form => dispatch =>
FitTrackeeGenericApi.addDataWithFile('activities', form)
.then(ret => {
if (ret.status === 'created') {
if (ret.data.activities.length === 0) {
@ -38,7 +38,8 @@ export const addActivity = form => dispatch => FitTrackeeGenericApi
} else if (ret.data.activities.length === 1) {
dispatch(loadProfile())
history.push(`/activities/${ret.data.activities[0].id}`)
} else { // ret.data.activities.length > 1
} else {
// ret.data.activities.length > 1
dispatch(loadProfile())
history.push('/')
}
@ -49,9 +50,8 @@ export const addActivity = form => dispatch => FitTrackeeGenericApi
})
.catch(error => dispatch(setError(`activities: ${error}`)))
export const addActivityWithoutGpx = form => dispatch => FitTrackeeGenericApi
.addData('activities/no_gpx', form)
export const addActivityWithoutGpx = form => dispatch =>
FitTrackeeGenericApi.addData('activities/no_gpx', form)
.then(ret => {
if (ret.status === 'created') {
dispatch(loadProfile())
@ -62,11 +62,9 @@ export const addActivityWithoutGpx = form => dispatch => FitTrackeeGenericApi
})
.catch(error => dispatch(setError(`activities: ${error}`)))
export const getActivityGpx = activityId => dispatch => {
if (activityId) {
return FitTrackeeGenericApi
.getData(`activities/${activityId}/gpx`)
return FitTrackeeGenericApi.getData(`activities/${activityId}/gpx`)
.then(ret => {
if (ret.status === 'success') {
dispatch(setGpx(ret.data.gpx))
@ -81,8 +79,9 @@ export const getActivityGpx = activityId => dispatch => {
export const getSegmentGpx = (activityId, segmentId) => dispatch => {
if (activityId) {
return FitTrackeeGenericApi
.getData(`activities/${activityId}/gpx/segment/${segmentId}`)
return FitTrackeeGenericApi.getData(
`activities/${activityId}/gpx/segment/${segmentId}`
)
.then(ret => {
if (ret.status === 'success') {
dispatch(setGpx(ret.data.gpx))
@ -95,11 +94,9 @@ export const getSegmentGpx = (activityId, segmentId) => dispatch => {
dispatch(setGpx(null))
}
export const getActivityChartData = activityId => dispatch => {
if (activityId) {
return FitTrackeeGenericApi
.getData(`activities/${activityId}/chart_data`)
return FitTrackeeGenericApi.getData(`activities/${activityId}/chart_data`)
.then(ret => {
if (ret.status === 'success') {
dispatch(setChartData(formatChartData(ret.data.chart_data)))
@ -114,8 +111,9 @@ export const getActivityChartData = activityId => dispatch => {
export const getSegmentChartData = (activityId, segmentId) => dispatch => {
if (activityId) {
return FitTrackeeGenericApi
.getData(`activities/${activityId}/chart_data/segment/${segmentId}`)
return FitTrackeeGenericApi.getData(
`activities/${activityId}/chart_data/segment/${segmentId}`
)
.then(ret => {
if (ret.status === 'success') {
dispatch(setChartData(formatChartData(ret.data.chart_data)))
@ -128,23 +126,21 @@ export const getSegmentChartData = (activityId, segmentId) => dispatch => {
dispatch(setChartData(null))
}
export const deleteActivity = id => dispatch => FitTrackeeGenericApi
.deleteData('activities', id)
export const deleteActivity = id => dispatch =>
FitTrackeeGenericApi.deleteData('activities', id)
.then(ret => {
if (ret.status === 204) {
Promise.resolve(dispatch(removeActivity(id))).then(() =>
dispatch(loadProfile())
).then(() => history.push('/'))
Promise.resolve(dispatch(removeActivity(id)))
.then(() => dispatch(loadProfile()))
.then(() => history.push('/'))
} else {
dispatch(setError(`activities: ${ret.status}`))
}
})
.catch(error => dispatch(setError(`activities: ${error}`)))
export const editActivity = form => dispatch => FitTrackeeGenericApi
.updateData('activities', form)
export const editActivity = form => dispatch =>
FitTrackeeGenericApi.updateData('activities', form)
.then(ret => {
if (ret.status === 'success') {
dispatch(loadProfile())
@ -156,9 +152,8 @@ export const editActivity = form => dispatch => FitTrackeeGenericApi
})
.catch(error => dispatch(setError(`activities: ${error}`)))
export const getMoreActivities = params => dispatch => FitTrackeeGenericApi
.getData('activities', params)
export const getMoreActivities = params => dispatch =>
FitTrackeeGenericApi.getData('activities', params)
.then(ret => {
if (ret.status === 'success') {
if (ret.data.activities.length > 0) {
@ -171,8 +166,12 @@ export const getMoreActivities = params => dispatch => FitTrackeeGenericApi
.catch(error => dispatch(setError(`activities: ${error}`)))
export const getMonthActivities = (from, to) => dispatch =>
FitTrackeeGenericApi
.getData('activities', { from, to, order: 'asc', per_page: 100 })
FitTrackeeGenericApi.getData('activities', {
from,
to,
order: 'asc',
per_page: 100,
})
.then(ret => {
if (ret.status === 'success') {
dispatch(updateCalendar(ret.data.activities))

View File

@ -1,7 +1,6 @@
import FitTrackeeApi from '../fitTrackeeApi/index'
import { history } from '../index'
export const setData = (target, data) => ({
type: 'SET_DATA',
data,
@ -15,7 +14,7 @@ export const setError = message => ({
export const setLoading = loading => ({
type: 'SET_LOADING',
loading
loading,
})
export const getOrUpdateData = (action, target, data) => dispatch => {
@ -33,8 +32,8 @@ export const getOrUpdateData = (action, target, data) => dispatch => {
.catch(error => dispatch(setError(`${target}: ${error}`)))
}
export const addData = (target, data) => dispatch => FitTrackeeApi
.addData(target, data)
export const addData = (target, data) => dispatch =>
FitTrackeeApi.addData(target, data)
.then(ret => {
if (ret.status === 'created') {
history.push(`/admin/${target}`)
@ -48,8 +47,7 @@ export const deleteData = (target, id) => dispatch => {
if (isNaN(id)) {
return dispatch(setError(target, `${target}: Incorrect id`))
}
return FitTrackeeApi
.deleteData(target, id)
return FitTrackeeApi.deleteData(target, id)
.then(ret => {
if (ret.status === 204) {
history.push(`/admin/${target}`)

View File

@ -1,8 +1,8 @@
import FitTrackeeGenericApi from '../fitTrackeeApi'
import { setData, setError } from './index'
export const getStats = (userId, type, data) => dispatch => FitTrackeeGenericApi
.getData(`stats/${userId}/${type}`, data)
export const getStats = (userId, type, data) => dispatch =>
FitTrackeeGenericApi.getData(`stats/${userId}/${type}`, data)
.then(ret => {
if (ret.status === 'success') {
dispatch(setData('statistics', ret.data))

View File

@ -4,7 +4,6 @@ import { history } from '../index'
import { generateIds } from '../utils'
import { getOrUpdateData } from './index'
const AuthError = message => ({ type: 'AUTH_ERROR', message })
const AuthErrors = messages => ({ type: 'AUTH_ERRORS', messages })
@ -16,7 +15,8 @@ const ProfileSuccess = profil => ({ type: 'PROFILE_SUCCESS', profil })
const ProfileError = message => ({ type: 'PROFILE_ERROR', message })
const ProfileUpdateError = message => ({
type: 'PROFILE_UPDATE_ERROR', message
type: 'PROFILE_UPDATE_ERROR',
message,
})
export const logout = () => ({ type: 'LOGOUT' })
@ -28,8 +28,8 @@ export const loadProfile = () => dispatch => {
return { type: 'LOGOUT' }
}
export const getProfile = () => dispatch => FitTrackeeGenericApi
.getData('auth/profile')
export const getProfile = () => dispatch =>
FitTrackeeGenericApi.getData('auth/profile')
.then(ret => {
if (ret.status === 'success') {
dispatch(getOrUpdateData('getData', 'sports'))
@ -42,8 +42,8 @@ export const getProfile = () => dispatch => FitTrackeeGenericApi
throw error
})
export const loginOrRegister = (target, formData) => dispatch => FitTrackeeApi
.loginOrRegister(target, formData)
export const loginOrRegister = (target, formData) => dispatch =>
FitTrackeeApi.loginOrRegister(target, formData)
.then(ret => {
if (ret.status === 'success') {
window.localStorage.setItem('authToken', ret.auth_token)
@ -61,7 +61,7 @@ const RegisterFormControl = formData => {
errMsg.push('Username: 3 to 12 characters required.')
}
if (formData.password !== formData.password_conf) {
errMsg.push('Password and password confirmation don\'t match.')
errMsg.push("Password and password confirmation don't match.")
}
if (formData.password.length < 8) {
errMsg.push('Password: 8 characters required.')
@ -81,13 +81,12 @@ export const handleUserFormSubmit = (formData, formType) => dispatch => {
export const handleProfileFormSubmit = formData => dispatch => {
if (!formData.password === formData.password_conf) {
return dispatch(ProfileUpdateError(
'Password and password confirmation don\'t match.'
))
return dispatch(
ProfileUpdateError("Password and password confirmation don't match.")
)
}
delete formData.id
return FitTrackeeGenericApi
.postData('auth/profile/edit', formData)
return FitTrackeeGenericApi.postData('auth/profile/edit', formData)
.then(ret => {
if (ret.status === 'success') {
dispatch(getProfile())
@ -105,8 +104,7 @@ export const uploadPicture = event => dispatch => {
const form = new FormData()
form.append('file', event.target.picture.files[0])
event.target.reset()
return FitTrackeeGenericApi
.addDataWithFile('auth/picture', form)
return FitTrackeeGenericApi.addDataWithFile('auth/picture', form)
.then(ret => {
if (ret.status === 'success') {
return dispatch(getProfile())
@ -118,8 +116,8 @@ export const uploadPicture = event => dispatch => {
})
}
export const deletePicture = () => dispatch => FitTrackeeApi
.deletePicture()
export const deletePicture = () => dispatch =>
FitTrackeeApi.deletePicture()
.then(ret => {
if (ret.status === 204) {
return dispatch(getProfile())

View File

@ -23,7 +23,8 @@ export default class ActivitiesList extends React.PureComponent {
</tr>
</thead>
<tbody>
{sports && activities.map((activity, idx) => (
{sports &&
activities.map((activity, idx) => (
// eslint-disable-next-line react/no-array-index-key
<tr key={idx}>
<td>

View File

@ -8,7 +8,6 @@ import ActivitiesList from './ActivitiesList'
import { getOrUpdateData } from '../../actions'
import { getMoreActivities } from '../../actions/activities'
class Activities extends React.Component {
constructor(props, context) {
super(props, context)
@ -36,10 +35,16 @@ class Activities extends React.Component {
}
render() {
const {
activities, loadActivities, loadMoreActivities, message, sports, user
activities,
loadActivities,
loadMoreActivities,
message,
sports,
user,
} = this.props
const { params } = this.state
const paginationEnd = activities.length > 0
const paginationEnd =
activities.length > 0
? activities[activities.length - 1].previous_activity === null
: true
return (
@ -65,7 +70,7 @@ class Activities extends React.Component {
sports={sports}
user={user}
/>
{!paginationEnd &&
{!paginationEnd && (
<input
type="submit"
className="btn btn-default btn-md btn-block"
@ -76,7 +81,7 @@ class Activities extends React.Component {
this.setState(params)
}}
/>
}
)}
{activities.length === 0 && (
<div className="card text-center">
<div className="card-body">

View File

@ -3,24 +3,17 @@ import { connect } from 'react-redux'
import ActivityAddOrEdit from './ActivityAddOrEdit'
function ActivityAdd(props) {
const { message, sports } = props
return (
<div>
<ActivityAddOrEdit
activity={null}
message={message}
sports={sports}
/>
<ActivityAddOrEdit activity={null} message={message} sports={sports} />
</div>
)
}
export default connect(
state => ({
export default connect(state => ({
message: state.message,
sports: state.sports.data,
user: state.user,
}),
)(ActivityAdd)
}))(ActivityAdd)

View File

@ -17,7 +17,8 @@ class ActivityAddEdit extends React.Component {
this.setState({
withGpx:
changeEvent.target.name === 'withGpx'
? changeEvent.target.value : !changeEvent.target.value
? changeEvent.target.value
: !changeEvent.target.value,
})
}
@ -27,15 +28,13 @@ class ActivityAddEdit extends React.Component {
return (
<div>
<Helmet>
<title>FitTrackee - {activity
? 'Edit a workout'
: 'Add a workout'}
<title>
FitTrackee - {activity ? 'Edit a workout' : 'Add a workout'}
</title>
</Helmet>
<br /><br />
{message && (
<code>{message}</code>
)}
<br />
<br />
{message && <code>{message}</code>}
<div className="container">
<div className="row">
<div className="col-md-2" />
@ -63,7 +62,9 @@ class ActivityAddEdit extends React.Component {
name="withGpx"
disabled={loading}
checked={withGpx}
onChange={event => this.handleRadioChange(event)}
onChange={event =>
this.handleRadioChange(event)
}
/>
with gpx file
</label>
@ -76,7 +77,9 @@ class ActivityAddEdit extends React.Component {
name="withoutGpx"
disabled={loading}
checked={!withGpx}
onChange={event => this.handleRadioChange(event)}
onChange={event =>
this.handleRadioChange(event)
}
/>
without gpx file
</label>
@ -101,8 +104,6 @@ class ActivityAddEdit extends React.Component {
}
}
export default connect(
state => ({
loading: state.loading
}),
)(ActivityAddEdit)
export default connect(state => ({
loading: state.loading,
}))(ActivityAddEdit)

View File

@ -4,18 +4,22 @@ import { Link } from 'react-router-dom'
import { getDateWithTZ } from '../../../utils'
import { formatActivityDate } from '../../../utils/activities'
export default function ActivityCardHeader(props) {
const {
activity, dataType, displayModal, segmentId, sport, title, user
activity,
dataType,
displayModal,
segmentId,
sport,
title,
user,
} = props
const activityDate = activity
? formatActivityDate(
getDateWithTZ(activity.activity_date, user.timezone)
)
? formatActivityDate(getDateWithTZ(activity.activity_date, user.timezone))
: null
const previousUrl = dataType === 'segment' && segmentId !== 1
const previousUrl =
dataType === 'segment' && segmentId !== 1
? `/activities/${activity.id}/segment/${segmentId - 1}`
: dataType === 'activity' && activity.previous_activity
? `/activities/${activity.previous_activity}`
@ -32,10 +36,7 @@ export default function ActivityCardHeader(props) {
<div className="row">
<div className="col-auto">
{previousUrl ? (
<Link
className="unlink"
to={previousUrl}
>
<Link className="unlink" to={previousUrl}>
<i
className="fa fa-chevron-left"
aria-hidden="true"
@ -51,20 +52,13 @@ export default function ActivityCardHeader(props) {
)}
</div>
<div className="col-auto col-activity-logo">
<img
className="sport-img-medium"
src={sport.img}
alt="sport logo"
/>
<img className="sport-img-medium" src={sport.img} alt="sport logo" />
</div>
<div className="col">
{dataType === 'activity' ? (
<>
{title}{' '}
<Link
className="unlink"
to={`/activities/${activity.id}/edit`}
>
<Link className="unlink" to={`/activities/${activity.id}/edit`}>
<i
className="fa fa-edit custom-fa"
aria-hidden="true"
@ -80,6 +74,7 @@ export default function ActivityCardHeader(props) {
</>
) : (
<>
{/* prettier-ignore */}
<Link
to={`/activities/${activity.id}`}
>
@ -97,10 +92,7 @@ export default function ActivityCardHeader(props) {
</div>
<div className="col-auto">
{nextUrl ? (
<Link
className="unlink"
to={nextUrl}
>
<Link className="unlink" to={nextUrl}>
<i
className="fa fa-chevron-right"
aria-hidden="true"

View File

@ -2,20 +2,26 @@ import { format } from 'date-fns'
import React from 'react'
import { connect } from 'react-redux'
import {
Area, ComposedChart, Line, ResponsiveContainer, Tooltip, XAxis, YAxis
Area,
ComposedChart,
Line,
ResponsiveContainer,
Tooltip,
XAxis,
YAxis,
} from 'recharts'
import {
getActivityChartData, getSegmentChartData
getActivityChartData,
getSegmentChartData,
} from '../../../actions/activities'
class ActivityCharts extends React.Component {
constructor(props, context) {
super(props, context)
this.state = {
displayDistance: true,
dataToHide: []
dataToHide: [],
}
}
@ -28,13 +34,15 @@ class ActivityCharts extends React.Component {
}
componentDidUpdate(prevProps) {
if (this.props.dataType === 'activity' && (
prevProps.activity.id !== this.props.activity.id)
if (
this.props.dataType === 'activity' &&
prevProps.activity.id !== this.props.activity.id
) {
this.props.loadActivityData(this.props.activity.id)
}
if (this.props.dataType === 'segment' && (
prevProps.segmentId !== this.props.segmentId)
if (
this.props.dataType === 'segment' &&
prevProps.segmentId !== this.props.segmentId
) {
this.props.loadSegmentData(this.props.activity.id, this.props.segmentId)
}
@ -49,7 +57,7 @@ class ActivityCharts extends React.Component {
displayDistance:
changeEvent.target.name === 'distance'
? changeEvent.target.value
: !changeEvent.target.value
: !changeEvent.target.value,
})
}
@ -141,22 +149,27 @@ class ActivityCharts extends React.Component {
label={{ value: xDataKey, offset: 0, position: 'bottom' }}
scale={xScale}
interval={xInterval}
tickFormatter={value => displayDistance
? value
: format(value, 'HH:mm:ss')}
tickFormatter={value =>
displayDistance ? value : format(value, 'HH:mm:ss')
}
type="number"
/>
<YAxis
label={{
value: 'speed (km/h)', angle: -90, position: 'left'
value: 'speed (km/h)',
angle: -90,
position: 'left',
}}
yAxisId="left"
/>
<YAxis
label={{
value: 'altitude (m)', angle: -90, position: 'right'
value: 'altitude (m)',
angle: -90,
position: 'right',
}}
yAxisId="right" orientation="right"
yAxisId="right"
orientation="right"
/>
{this.displayData('elevation') && (
<Area
@ -181,9 +194,11 @@ class ActivityCharts extends React.Component {
/>
)}
<Tooltip
labelFormatter={value => displayDistance
labelFormatter={value =>
displayDistance
? `distance: ${value} km`
: `duration: ${format(value, 'HH:mm:ss')}`}
: `duration: ${format(value, 'HH:mm:ss')}`
}
/>
</ComposedChart>
</ResponsiveContainer>
@ -202,7 +217,7 @@ class ActivityCharts extends React.Component {
export default connect(
state => ({
chartData: state.chartData
chartData: state.chartData,
}),
dispatch => ({
loadActivityData: activityId => {

View File

@ -8,18 +8,12 @@ export default function ActivityDetails(props) {
return (
<div className="activity-details">
<p>
<i
className="fa fa-clock-o custom-fa"
aria-hidden="true"
/>
<i className="fa fa-clock-o custom-fa" aria-hidden="true" />
Duration: {activity.moving}
{activity.records && activity.records.find(r => r.record_type === 'LD'
) && (
{activity.records &&
activity.records.find(r => r.record_type === 'LD') && (
<sup>
<i
className="fa fa-trophy custom-fa"
aria-hidden="true"
/>
<i className="fa fa-trophy custom-fa" aria-hidden="true" />
</sup>
)}
{withPauses && (
@ -30,45 +24,30 @@ export default function ActivityDetails(props) {
)}
</p>
<p>
<i
className="fa fa-road custom-fa"
aria-hidden="true"
/>
<i className="fa fa-road custom-fa" aria-hidden="true" />
Distance: {activity.distance} km
{activity.records && activity.records.find(r => r.record_type === 'FD'
) && (
{activity.records &&
activity.records.find(r => r.record_type === 'FD') && (
<sup>
<i
className="fa fa-trophy custom-fa"
aria-hidden="true"
/>
<i className="fa fa-trophy custom-fa" aria-hidden="true" />
</sup>
)}
</p>
<p>
<i
className="fa fa-tachometer custom-fa"
aria-hidden="true"
/>
<i className="fa fa-tachometer custom-fa" aria-hidden="true" />
Average speed: {activity.ave_speed} km/h
{activity.records && activity.records.find(r => r.record_type === 'AS'
) && (
{activity.records &&
activity.records.find(r => r.record_type === 'AS') && (
<sup>
<i
className="fa fa-trophy custom-fa"
aria-hidden="true"
/>
<i className="fa fa-trophy custom-fa" aria-hidden="true" />
</sup>
)}
<br />
Max speed : {activity.max_speed} km/h
{activity.records && activity.records.find(r => r.record_type === 'MS'
) && (
{activity.records &&
activity.records.find(r => r.record_type === 'MS') && (
<sup>
<i
className="fa fa-trophy custom-fa"
aria-hidden="true"
/>
<i className="fa fa-trophy custom-fa" aria-hidden="true" />
</sup>
)}
</p>

View File

@ -8,7 +8,6 @@ import { thunderforestApiKey } from '../../../utils'
import { getGeoJson } from '../../../utils/activities'
class ActivityMap extends React.Component {
constructor(props, context) {
super(props, context)
this.state = {
@ -25,13 +24,15 @@ class ActivityMap extends React.Component {
}
componentDidUpdate(prevProps) {
if (this.props.dataType === 'activity' && (
prevProps.activity.id !== this.props.activity.id)
if (
this.props.dataType === 'activity' &&
prevProps.activity.id !== this.props.activity.id
) {
this.props.loadActivityGpx(this.props.activity.id)
}
if (this.props.dataType === 'segment' && (
prevProps.segmentId !== this.props.segmentId)
if (
this.props.dataType === 'segment' &&
prevProps.segmentId !== this.props.segmentId
) {
this.props.loadSegmentGpx(this.props.activity.id, this.props.segmentId)
}
@ -42,13 +43,11 @@ class ActivityMap extends React.Component {
}
render() {
const {
activity, coordinates, gpxContent
} = this.props
const { activity, coordinates, gpxContent } = this.props
const { jsonData } = getGeoJson(gpxContent)
const bounds = [
[activity.bounds[0], activity.bounds[1]],
[activity.bounds[2], activity.bounds[3]]
[activity.bounds[2], activity.bounds[3]],
]
return (
@ -78,14 +77,13 @@ class ActivityMap extends React.Component {
</Map>
)}
</div>
)
}
}
export default connect(
state => ({
gpxContent: state.gpx
gpxContent: state.gpx,
}),
dispatch => ({
loadActivityGpx: activityId => {

View File

@ -1,9 +1,5 @@
import React from 'react'
export default function ActivityNoMap() {
return (
<div className="activity-no-map text-center">
No Map
</div>
)
return <div className="activity-no-map text-center">No Map</div>
}

View File

@ -8,9 +8,7 @@ export default function ActivityNotes(props) {
<div className="card activity-card">
<div className="card-body">
Notes
<div className="activity-notes">
{notes ? notes : 'No notes'}
</div>
<div className="activity-notes">{notes ? notes : 'No notes'}</div>
</div>
</div>
</div>

View File

@ -18,8 +18,8 @@ export default function ActivitySegments(props) {
key={`segment-${index}`}
>
<Link
to={`/activities/${
segment.activity_id}/segment/${index + 1}`}
to={`/activities/${segment.activity_id}/segment/${index +
1}`}
>
segment {index + 1}
</Link>{' '}

View File

@ -5,9 +5,7 @@ export default function ActivityWeather(props) {
return (
<div className="container">
{activity.weather_start && activity.weather_end && (
<table
className="table table-borderless weather-table text-center"
>
<table className="table table-borderless weather-table text-center">
<thead>
<tr>
<th />
@ -42,12 +40,8 @@ export default function ActivityWeather(props) {
alt="Temperatures"
/>
</td>
<td>
{Number(activity.weather_start.temperature).toFixed(1)}°C
</td>
<td>
{Number(activity.weather_end.temperature).toFixed(1)}°C
</td>
<td>{Number(activity.weather_start.temperature).toFixed(1)}°C</td>
<td>{Number(activity.weather_end.temperature).toFixed(1)}°C</td>
</tr>
<tr>
<td>
@ -60,9 +54,7 @@ export default function ActivityWeather(props) {
<td>
{Number(activity.weather_start.humidity * 100).toFixed(1)}%
</td>
<td>
{Number(activity.weather_end.humidity * 100).toFixed(1)}%
</td>
<td>{Number(activity.weather_end.humidity * 100).toFixed(1)}%</td>
</tr>
<tr>
<td>
@ -72,12 +64,8 @@ export default function ActivityWeather(props) {
alt="Temperatures"
/>
</td>
<td>
{Number(activity.weather_start.wind).toFixed(1)}m/s
</td>
<td>
{Number(activity.weather_end.wind).toFixed(1)}m/s
</td>
<td>{Number(activity.weather_start.wind).toFixed(1)}m/s</td>
<td>{Number(activity.weather_end.wind).toFixed(1)}m/s</td>
</tr>
</tbody>
</table>

View File

@ -30,8 +30,9 @@ class ActivityDisplay extends React.Component {
}
componentDidUpdate(prevProps) {
if (prevProps.match.params.activityId !==
this.props.match.params.activityId) {
if (
prevProps.match.params.activityId !== this.props.match.params.activityId
) {
this.props.loadActivity(this.props.match.params.activityId)
}
}
@ -39,12 +40,13 @@ class ActivityDisplay extends React.Component {
displayModal(value) {
this.setState(prevState => ({
...prevState,
displayModal: value
displayModal: value,
}))
}
updateCoordinates(activePayload) {
const coordinates = (activePayload && activePayload.length > 0)
const coordinates =
activePayload && activePayload.length > 0
? {
latitude: activePayload[0].payload.latitude,
longitude: activePayload[0].payload.longitude,
@ -55,7 +57,7 @@ class ActivityDisplay extends React.Component {
}
this.setState(prevState => ({
...prevState,
coordinates
coordinates,
}))
}
@ -68,9 +70,7 @@ class ActivityDisplay extends React.Component {
? sports.filter(s => s.id === activity.sport_id)
: []
const segmentId = parseInt(this.props.match.params.segmentId)
const dataType = segmentId >= 0
? 'segment'
: 'activity'
const dataType = segmentId >= 0 ? 'segment' : 'activity'
return (
<div className="activity-page">
<Helmet>
@ -80,7 +80,7 @@ class ActivityDisplay extends React.Component {
<code>{message}</code>
) : (
<div className="container">
{displayModal &&
{displayModal && (
<CustomModal
title="Confirmation"
text="Are you sure you want to delete this activity?"
@ -89,7 +89,8 @@ class ActivityDisplay extends React.Component {
this.displayModal(false)
}}
close={() => this.displayModal(false)}
/>}
/>
)}
{activity && sport && activities.length === 1 && (
<div>
<div className="row">
@ -122,9 +123,11 @@ class ActivityDisplay extends React.Component {
</div>
<div className="col">
<ActivityDetails
activity={dataType === 'activity'
activity={
dataType === 'activity'
? activity
: activity.segments[segmentId - 1]}
: activity.segments[segmentId - 1]
}
/>
</div>
</div>
@ -144,8 +147,8 @@ class ActivityDisplay extends React.Component {
activity={activity}
dataType={dataType}
segmentId={segmentId}
updateCoordinates={
e => this.updateCoordinates(e)
updateCoordinates={e =>
this.updateCoordinates(e)
}
/>
</div>

View File

@ -4,12 +4,9 @@ import { connect } from 'react-redux'
import ActivityAddOrEdit from './ActivityAddOrEdit'
import { getOrUpdateData } from '../../actions'
class ActivityEdit extends React.Component {
componentDidMount() {
this.props.loadActivity(
this.props.match.params.activityId
)
this.props.loadActivity(this.props.match.params.activityId)
}
render() {

View File

@ -6,11 +6,8 @@ import { addActivity, editActivity } from '../../../actions/activities'
import { history } from '../../../index'
import { gpxLimit } from '../../../utils'
function FormWithGpx(props) {
const {
activity, loading, onAddActivity, onEditActivity, sports
} = props
const { activity, loading, onAddActivity, onEditActivity, sports } = props
const sportId = activity ? activity.sport_id : ''
return (
<form
@ -52,9 +49,10 @@ function FormWithGpx (props) {
) : (
<div className="form-group">
<label>
<strong>gpx</strong> file or <strong>zip</strong>{' '}
file containing <strong>gpx</strong> (no folder inside, {
gpxLimit} files max):
{/* prettier-ignore */}
<strong>gpx</strong> file or <strong>zip</strong> file containing
{/* prettier-ignore */}
<strong> gpx</strong> (no folder inside, {gpxLimit} files max):
<input
accept=".gpx, .zip"
className="form-control form-control-file gpx-file"
@ -85,10 +83,8 @@ function FormWithGpx (props) {
<input
type="submit"
className="btn btn-primary btn-lg btn-block"
onClick={
event => activity
? onEditActivity(event, activity)
: onAddActivity(event)
onClick={event =>
activity ? onEditActivity(event, activity) : onAddActivity(event)
}
value="Submit"
/>
@ -106,13 +102,14 @@ function FormWithGpx (props) {
export default connect(
state => ({
loading: state.loading
loading: state.loading,
}),
dispatch => ({
onAddActivity: e => {
dispatch(setLoading(true))
const form = new FormData()
form.append('file', e.target.form.gpxFile.files[0])
/* prettier-ignore */
form.append(
'data',
`{"sport_id": ${e.target.form.sport.value
@ -121,12 +118,14 @@ export default connect(
dispatch(addActivity(form))
},
onEditActivity: (e, activity) => {
dispatch(editActivity({
dispatch(
editActivity({
id: activity.id,
notes: e.target.form.notes.value,
sport_id: +e.target.form.sport.value,
title: e.target.form.title.value,
}))
})
)
},
})
)(FormWithGpx)

View File

@ -2,14 +2,17 @@ import React from 'react'
import { connect } from 'react-redux'
import {
addActivityWithoutGpx, editActivity
addActivityWithoutGpx,
editActivity,
} from '../../../actions/activities'
import { history } from '../../../index'
import { formatActivityDate } from '../../../utils/activities'
function FormWithoutGpx(props) {
const { activity, onAddOrEdit, sports } = props
let activityDate, activityTime, sportId = ''
let activityDate,
activityTime,
sportId = ''
if (activity) {
const activityDateTime = formatActivityDate(
activity.activity_date,
@ -21,9 +24,7 @@ function FormWithoutGpx (props) {
}
return (
<form
onSubmit={event => event.preventDefault()}
>
<form onSubmit={event => event.preventDefault()}>
<div className="form-group">
<label>
Title:
@ -137,6 +138,7 @@ export default connect(
const d = e.target.form.duration.value.split(':')
const duration = +d[0] * 60 * 60 + +d[1] * 60 + +d[2]
/* prettier-ignore */
const activityDate = `${e.target.form.activity_date.value
} ${ e.target.form.activity_time.value}`

View File

@ -19,11 +19,13 @@ function Activity () {
<Switch>
<Route exact path="/activities/add" component={ActivityAdd} />
<Route
exact path="/activities/:activityId"
exact
path="/activities/:activityId"
component={ActivityDisplay}
/>
<Route
exact path="/activities/:activityId/edit"
exact
path="/activities/:activityId/edit"
component={ActivityEdit}
/>
<Route
@ -32,13 +34,13 @@ function Activity () {
/>
<Route component={NotFound} />
</Switch>
) : (<Redirect to="/login" />)}
) : (
<Redirect to="/login" />
)}
</div>
)
}
export default connect(
state => ({
export default connect(state => ({
user: state.user,
})
)(Activity)
}))(Activity)

View File

@ -17,10 +17,7 @@ class AdminSports extends React.Component {
return (
<div>
<AdminDetail
results={sports}
target="sports"
/>
<AdminDetail results={sports} target="sports" />
</div>
)
}

View File

@ -13,10 +13,7 @@ class AdminSports extends React.Component {
return (
<div>
<AdminPage
data={sports}
target="sports"
/>
<AdminPage data={sports} target="sports" />
</div>
)
}

View File

@ -16,25 +16,17 @@ class AdminSportsAdd extends React.Component {
<Helmet>
<title>FitTrackee - Admin - Add Sport</title>
</Helmet>
<h1 className="page-title">
Administration - Sport
</h1>
{message && (
<code>{message}</code>
)}
<h1 className="page-title">Administration - Sport</h1>
{message && <code>{message}</code>}
<div className="container">
<div className="row">
<div className="col-md-2" />
<div className="col-md-8">
<div className="card">
<div className="card-header">
Add a sport
</div>
<div className="card-header">Add a sport</div>
<div className="card-body">
<form onSubmit={event =>
event.preventDefault()}
>
<form onSubmit={event => event.preventDefault()}>
<div className="form-group">
<label>
Label:

View File

@ -6,7 +6,6 @@ import { deleteData, getOrUpdateData } from '../../../actions/index'
import { history } from '../../../index'
class AdminDetail extends React.Component {
constructor(props, context) {
super(props, context)
this.state = {
@ -15,13 +14,7 @@ class AdminDetail extends React.Component {
}
render() {
const {
message,
onDataUpdate,
onDataDelete,
results,
target,
} = this.props
const { message, onDataUpdate, onDataDelete, results, target } = this.props
const { isInEdition } = this.state
const title = target.charAt(0).toUpperCase() + target.slice(1)
@ -30,9 +23,7 @@ class AdminDetail extends React.Component {
<Helmet>
<title>FitTrackee - Admin</title>
</Helmet>
<h1 className="page-title">
Administration - {title}
</h1>
<h1 className="page-title">Administration - {title}</h1>
{message ? (
<code>{message}</code>
) : (
@ -42,9 +33,7 @@ class AdminDetail extends React.Component {
<div className="col-md-2" />
<div className="col-md-8 card">
<div className="card-body">
<form onSubmit={event =>
event.preventDefault()}
>
<form onSubmit={event => event.preventDefault()}>
{Object.keys(results[0])
.filter(key => key.charAt(0) !== '_')
.map(key => (
@ -53,9 +42,11 @@ class AdminDetail extends React.Component {
{key}:
{key === 'img' ? (
<img
src={results[0][key]
src={
results[0][key]
? results[0][key]
: '/img/photo.png'}
: '/img/photo.png'
}
alt="property"
/>
) : (
@ -68,8 +59,7 @@ class AdminDetail extends React.Component {
)}
</label>
</div>
))
}
))}
{isInEdition ? (
<div>
<input
@ -78,8 +68,7 @@ class AdminDetail extends React.Component {
onClick={event => {
onDataUpdate(event, target)
this.setState({ isInEdition: false })
}
}
}}
value="Submit"
/>
<input
@ -105,9 +94,11 @@ class AdminDetail extends React.Component {
className="btn btn-danger btn-lg btn-block"
disabled={!results[0]._can_be_deleted}
onClick={event => onDataDelete(event, target)}
title={results[0]._can_be_deleted
title={
results[0]._can_be_deleted
? ''
: 'Can\'t be deleted, associated data exist'}
: "Can't be deleted, associated data exist"
}
value="Delete"
/>
<input

View File

@ -5,7 +5,6 @@ import { Link } from 'react-router-dom'
import { history } from '../../../index'
export default function AdminPage(props) {
const { data, target } = props
const { error } = data
const results = data.data
@ -22,9 +21,7 @@ export default function AdminPage(props) {
<Helmet>
<title>FitTrackee - Admin</title>
</Helmet>
<h1 className="page-title">
Administration - {title}
</h1>
<h1 className="page-title">Administration - {title}</h1>
{error ? (
<code>{error}</code>
) : (
@ -36,9 +33,11 @@ export default function AdminPage(props) {
<table className="table">
<thead>
<tr>
{tbKeys.map(
tbKey => <th key={tbKey} scope="col">{tbKey}</th>
)}
{tbKeys.map(tbKey => (
<th key={tbKey} scope="col">
{tbKey}
</th>
))}
</tr>
</thead>
<tbody>
@ -57,19 +56,22 @@ export default function AdminPage(props) {
</th>
)
} else if (key === 'img') {
return (<td key={key}>
return (
<td key={key}>
<img
className="admin-img"
src={result[key]
src={
result[key]
? result[key]
: '/img/photo.png'}
: '/img/photo.png'
}
alt="logo"
/>
</td>)
</td>
)
}
return <td key={key}>{result[key]}</td>
})
}
})}
</tr>
))}
</tbody>

View File

@ -23,26 +23,20 @@ function Admin (props) {
<Switch>
<Route exact path="/admin" component={AdminMenu} />
<Route exact path="/admin/sports" component={AdminSports} />
<Route
exact path="/admin/sports/add"
component={AdminSportsAdd}
/>
<Route
exact path="/admin/sports/:sportId"
component={AdminSport}
/>
<Route exact path="/admin/sports/add" component={AdminSportsAdd} />
<Route exact path="/admin/sports/:sportId" component={AdminSport} />
<Route component={NotFound} />
</Switch>
) : (
<AccessDenied />
)
) : (<Redirect to="/login" />)}
) : (
<Redirect to="/login" />
)}
</div>
)
}
export default connect(
state => ({
export default connect(state => ({
user: state.user,
})
)(Admin)
}))(Admin)

View File

@ -17,7 +17,6 @@ import UserForm from './User/UserForm'
import { isLoggedIn } from '../utils'
export default class App extends React.Component {
constructor(props) {
super(props)
this.props = props
@ -29,72 +28,51 @@ export default class App extends React.Component {
<NavBar />
<Switch>
<Route
exact path="/"
render={() => (
isLoggedIn() ? (
<Dashboard />
) : (
<Redirect to="/login" />
)
)}
exact
path="/"
render={() =>
isLoggedIn() ? <Dashboard /> : <Redirect to="/login" />
}
/>
<Route
exact path="/register"
render={() => (
exact
path="/register"
render={() =>
isLoggedIn() ? (
<Redirect to="/" />
) : (
<UserForm
formType={'register'}
/>
<UserForm formType={'register'} />
)
)}
}
/>
<Route
exact path="/login"
render={() => (
exact
path="/login"
render={() =>
isLoggedIn() ? (
<Redirect to="/" />
) : (
<UserForm
formType={'login'}
/>
<UserForm formType={'login'} />
)
)}
}
/>
<Route exact path="/logout" component={Logout} />
<Route
exact path="/profile/edit"
render={() => (
isLoggedIn() ? (
<ProfileEdit />
) : (
<UserForm
formType={'login'}
/>
)
)}
exact
path="/profile/edit"
render={() =>
isLoggedIn() ? <ProfileEdit /> : <UserForm formType={'login'} />
}
/>
<Route
exact path="/profile"
render={() => (
isLoggedIn() ? (
<Profile />
) : (
<UserForm
formType={'login'}
/>
)
)}
/>
<Route
exact path="/activities/history"
component={Activities}
/>
<Route
exact path="/activities/statistics"
component={Statistics}
exact
path="/profile"
render={() =>
isLoggedIn() ? <Profile /> : <UserForm formType={'login'} />
}
/>
<Route exact path="/activities/history" component={Activities} />
<Route exact path="/activities/statistics" component={Statistics} />
<Route path="/activities" component={Activity} />
{/* <Route path="/admin" component={Admin} /> */}
<Route component={NotFound} />

View File

@ -2,13 +2,13 @@ import React from 'react'
import { formatDuration } from '../../../utils/stats'
const formatValue = (displayedData, value) => displayedData === 'duration'
const formatValue = (displayedData, value) =>
displayedData === 'duration'
? formatDuration(value, true)
: displayedData === 'distance'
? value.toFixed(2)
: value
/**
* @return {null}
*/
@ -17,19 +17,17 @@ export default function CustomTooltip (props) {
if (active) {
const { displayedData, payload, label } = props
let total = 0
payload.map(p => total += p.value)
payload.map(p => (total += p.value))
return (
<div className="custom-tooltip">
<p className="custom-tooltip-label">{label}</p>
{payload.map(p => (
<p key={p.name} style={{ color: p.fill }}>
{p.name}: {formatValue(displayedData, p.value)} {p.unit}
</p>))
}
{payload.length > 0 && (
<p>
Total: {formatValue(displayedData, total)}
</p>
))}
{payload.length > 0 && (
<p>Total: {formatValue(displayedData, total)}</p>
)}
</div>
)

View File

@ -1,6 +1,11 @@
import React from 'react'
import {
Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis
Bar,
BarChart,
ResponsiveContainer,
Tooltip,
XAxis,
YAxis,
} from 'recharts'
import { activityColors } from '../../../utils/activities'
@ -8,17 +13,16 @@ import { formatValue } from '../../../utils/stats'
import CustomTooltip from './CustomTooltip'
import CustomLabel from './CustomLabel'
export default class StatsCharts extends React.PureComponent {
constructor(props, context) {
super(props, context)
this.state = {
displayedData: 'distance'
displayedData: 'distance',
}
}
handleRadioChange(changeEvent) {
this.setState({
displayedData: changeEvent.target.name
displayedData: changeEvent.target.name,
})
}
@ -60,22 +64,14 @@ export default class StatsCharts extends React.PureComponent {
</label>
</div>
<ResponsiveContainer height={300}>
<BarChart
data={stats[displayedData]}
margin={{ top: 15, bottom: 0 }}
>
<BarChart data={stats[displayedData]} margin={{ top: 15, bottom: 0 }}>
<XAxis
dataKey="date"
interval={0} // to force to display all ticks
/>
<YAxis
tickFormatter={value => formatValue(displayedData, value)}
/>
<Tooltip content={
<CustomTooltip
displayedData={displayedData}
/>
}
<YAxis tickFormatter={value => formatValue(displayedData, value)} />
<Tooltip
content={<CustomTooltip displayedData={displayedData} />}
/>
{sports.map((s, i) => (
<Bar
@ -86,9 +82,12 @@ export default class StatsCharts extends React.PureComponent {
dataKey={s.label}
stackId="a"
fill={activityColors[i]}
label={i === sports.length - 1
? <CustomLabel displayedData={displayedData} />
: ''
label={
i === sports.length - 1 ? (
<CustomLabel displayedData={displayedData} />
) : (
''
)
}
/>
))}

View File

@ -6,14 +6,14 @@ import { getStats } from '../../../actions/stats'
import { formatStats } from '../../../utils/stats'
import StatsChart from './StatsChart'
class Statistics extends React.PureComponent {
componentDidMount() {
this.updateData()
}
componentDidUpdate(prevProps) {
if ((this.props.user.id && (this.props.user.id !== prevProps.user.id)) ||
if (
(this.props.user.id && this.props.user.id !== prevProps.user.id) ||
this.props.statsParams !== prevProps.statsParams
) {
this.updateData()
@ -22,22 +22,23 @@ class Statistics extends React.PureComponent {
updateData() {
if (this.props.user.id) {
this.props.loadActivities(
this.props.user.id,
this.props.statsParams,
)
this.props.loadActivities(this.props.user.id, this.props.statsParams)
}
}
render() {
const {
displayedSports, sports, statistics, statsParams, displayEmpty
displayedSports,
sports,
statistics,
statsParams,
displayEmpty,
} = this.props
if (!displayEmpty && Object.keys(statistics).length === 0) {
return 'No workouts'
}
const stats = formatStats(statistics, sports, statsParams, displayedSports)
return (<StatsChart sports={sports} stats={stats} />)
return <StatsChart sports={sports} stats={stats} />
}
}
@ -53,7 +54,7 @@ export default connect(
const params = {
from: format(data.start, dateFormat),
to: format(data.end, dateFormat),
time: data.duration
time: data.duration,
}
dispatch(getStats(userId, data.type, params))
},

View File

@ -11,8 +11,10 @@ export default function ActivityCard (props) {
<div className="card activity-card text-center">
<div className="card-header">
<Link to={`/activities/${activity.id}`}>
{sports.filter(sport => sport.id === activity.sport_id)
.map(sport => sport.label)} -{' '}
{sports
.filter(sport => sport.id === activity.sport_id)
.map(sport => sport.label)}{' '}
-{' '}
{format(
getDateWithTZ(activity.activity_date, user.timezone),
'dd/MM/yyyy HH:mm'
@ -25,15 +27,14 @@ export default function ActivityCard (props) {
<div className="col">
<img
alt="Map"
src={`${apiUrl}activities/map/${activity.map}` +
`?${Date.now()}`}
src={
`${apiUrl}activities/map/${activity.map}` + `?${Date.now()}`
}
className="img-fluid"
/>
<div className="map-attribution text-right">
<div>
<span className="map-attribution-text">
©
</span>
<span className="map-attribution-text">©</span>
<a
className="map-attribution-text"
href="http://www.openstreetmap.org/copyright"
@ -48,15 +49,18 @@ export default function ActivityCard (props) {
)}
<div className="col">
<p>
<i className="fa fa-clock-o" aria-hidden="true" />{' '}
Duration: {activity.moving}
<i className="fa fa-clock-o" aria-hidden="true" /> Duration:{' '}
{activity.moving}
{activity.map ? (
<span><br /><br /></span>
<span>
<br />
<br />
</span>
) : (
' - '
)}
<i className="fa fa-road" aria-hidden="true" />{' '}
Distance: {activity.distance} km
<i className="fa fa-road" aria-hidden="true" /> Distance:{' '}
{activity.distance} km
</p>
</div>
</div>

View File

@ -1,8 +1,16 @@
// eslint-disable-next-line max-len
// source: https://blog.flowandform.agency/create-a-custom-calendar-in-react-3df1bfd0b728
import {
addDays, addMonths, endOfMonth, endOfWeek, format, isSameDay, isSameMonth,
startOfMonth, startOfWeek, subMonths
addDays,
addMonths,
endOfMonth,
endOfWeek,
format,
isSameDay,
isSameMonth,
startOfMonth,
startOfWeek,
subMonths,
} from 'date-fns'
import React, { Fragment } from 'react'
import { connect } from 'react-redux'
@ -21,7 +29,6 @@ const getStartAndEndMonth = date => {
}
}
class Calendar extends React.Component {
constructor(props, context) {
super(props, context)
@ -42,21 +49,13 @@ class Calendar extends React.Component {
return (
<div className="header row flex-middle">
<div className="col col-start" onClick={() => this.handlePrevMonth()}>
<i
className="fa fa-chevron-left"
aria-hidden="true"
/>
<i className="fa fa-chevron-left" aria-hidden="true" />
</div>
<div className="col col-center">
<span>
{format(this.state.currentMonth, dateFormat)}
</span>
<span>{format(this.state.currentMonth, dateFormat)}</span>
</div>
<div className="col col-end" onClick={() => this.handleNextMonth()}>
<i
className="fa fa-chevron-right"
aria-hidden="true"
/>
<i className="fa fa-chevron-right" aria-hidden="true" />
</div>
</div>
)
@ -80,11 +79,9 @@ class Calendar extends React.Component {
filterActivities(day) {
const { activities, user } = this.props
if (activities) {
return activities
.filter(act => isSameDay(
getDateWithTZ(act.activity_date, user.timezone),
day
))
return activities.filter(act =>
isSameDay(getDateWithTZ(act.activity_date, user.timezone), day)
)
}
return []
}
@ -104,14 +101,9 @@ class Calendar extends React.Component {
for (let i = 0; i < 7; i++) {
formattedDate = format(day, dateFormat)
const dayActivities = this.filterActivities(day)
const isDisabled = isSameMonth(day, currentMonth)
? ''
: 'disabled'
const isDisabled = isSameMonth(day, currentMonth) ? '' : 'disabled'
days.push(
<div
className={`col cell img-${isDisabled}`}
key={day}
>
<div className={`col cell img-${isDisabled}`} key={day}>
<span className="number">{formattedDate}</span>
{dayActivities.map(act => (
<Link key={act.id} to={`/activities/${act.id}`}>
@ -129,11 +121,14 @@ class Calendar extends React.Component {
<i
className="fa fa-trophy custom-fa-small"
aria-hidden="true"
title={act.records.map(rec => ` ${
title={act.records.map(
rec =>
` ${
recordsLabels.filter(
r => r.record_type === rec.record_type
)[0].label
}`)}
}`
)}
/>
</sup>
)}
@ -196,10 +191,9 @@ export default connect(
dispatch => ({
loadMonthActivities: (start, end) => {
const dateFormat = 'yyyy-MM-dd'
dispatch(getMonthActivities(
format(start, dateFormat),
format(end, dateFormat),
))
dispatch(
getMonthActivities(format(start, dateFormat), format(end, dateFormat))
)
},
})
)(Calendar)

View File

@ -19,13 +19,11 @@ export default function RecordsCard (props) {
return (
<div className="card activity-card">
<div className="card-header">
Personal records
</div>
<div className="card-header">Personal records</div>
<div className="card-body">
{Object.keys(recordsBySport).length === 0
? 'No records'
: (Object.keys(recordsBySport).map(sportLabel => (
: Object.keys(recordsBySport).map(sportLabel => (
<table
className="table table-borderless table-sm record-table"
key={sportLabel}
@ -45,12 +43,8 @@ export default function RecordsCard (props) {
<tbody>
{recordsBySport[sportLabel].records.map(rec => (
<tr key={rec.id}>
<td>
{rec.record_type}
</td>
<td className="text-right">
{rec.value}
</td>
<td>{rec.record_type}</td>
<td className="text-right">{rec.value}</td>
<td className="text-right">
<Link to={`/activities/${rec.activity_id}`}>
{rec.activity_date}
@ -59,11 +53,9 @@ export default function RecordsCard (props) {
</tr>
))}
</tbody>
</table>))
)
}
</table>
))}
</div>
</div>
)
}

View File

@ -3,7 +3,6 @@ import React from 'react'
import Stats from '../Common/Stats'
export default class Statistics extends React.Component {
constructor(props, context) {
super(props, context)
@ -19,9 +18,7 @@ export default class Statistics extends React.Component {
render() {
return (
<div className="card activity-card">
<div className="card-header">
This month
</div>
<div className="card-header">This month</div>
<div className="card-body">
<Stats displayEmpty={false} statsParams={this.state} />
</div>

View File

@ -1,6 +1,5 @@
import React from 'react'
export default function UserStatistics(props) {
const { user } = props
const days = user.total_duration.match(/day/g)

View File

@ -25,9 +25,15 @@ class DashBoard extends React.Component {
render() {
const {
activities, loadMoreActivities, message, records, sports, user
activities,
loadMoreActivities,
message,
records,
sports,
user,
} = this.props
const paginationEnd = activities.length > 0
const paginationEnd =
activities.length > 0
? activities[activities.length - 1].previous_activity === null
: true
const { page } = this.state
@ -39,7 +45,8 @@ class DashBoard extends React.Component {
{message ? (
<code>{message}</code>
) : (
(activities && sports.length > 0) && (
activities &&
sports.length > 0 && (
<div className="container dashboard">
<UserStatistics user={user} />
<div className="row">
@ -56,8 +63,9 @@ class DashBoard extends React.Component {
key={activity.id}
sports={sports}
user={user}
/>)
)) : (
/>
))
) : (
<div className="card text-center">
<div className="card-body">
No workouts.{' '}
@ -67,7 +75,7 @@ class DashBoard extends React.Component {
</div>
</div>
)}
{!paginationEnd &&
{!paginationEnd && (
<input
type="submit"
className="btn btn-default btn-md btn-block"
@ -77,7 +85,7 @@ class DashBoard extends React.Component {
this.setState({ page: page + 1 })
}}
/>
}
)}
</div>
</div>
</div>

View File

@ -13,7 +13,8 @@ export default function Footer() {
rel="noopener noreferrer"
>
source code
</a> under{' '}
</a>{' '}
under{' '}
<a
href="https://choosealicense.com/licenses/gpl-3.0/"
target="_blank"
@ -33,4 +34,3 @@ export default function Footer() {
</footer>
)
}

View File

@ -115,8 +115,7 @@ class NavBar extends React.PureComponent {
{picture === true && (
<img
alt="Avatar"
src={`${apiUrl}users/${id}/picture` +
`?${Date.now()}`}
src={`${apiUrl}users/${id}/picture` + `?${Date.now()}`}
className="img-fluid App-nav-profile-img"
/>
)}
@ -153,11 +152,9 @@ class NavBar extends React.PureComponent {
}
}
export default connect(
({ user }) => ({
export default connect(({ user }) => ({
id: user.id,
isAuthenticated: user.isAuthenticated,
picture: user.picture,
username: user.username,
})
)(NavBar)
}))(NavBar)

View File

@ -9,7 +9,7 @@ export default function AccessDenied () {
</Helmet>
<h1 className="page-title">Access denied</h1>
<p className="App-center">
{'You don\'t have permissions to access this page.'}
{"You don't have permissions to access this page."}
</p>
</div>
)

View File

@ -10,7 +10,7 @@ import {
addYears,
subMonths,
subWeeks,
subYears
subYears,
} from 'date-fns'
import React from 'react'
import { Helmet } from 'react-helmet'
@ -32,7 +32,7 @@ class Statistics extends React.Component {
end: endOfMonth(date),
duration: 'month',
type: 'by_time',
}
},
}
}
@ -51,26 +51,26 @@ class Statistics extends React.Component {
const duration = e.target.name
const date = new Date()
const start = duration === 'year'
const start =
duration === 'year'
? startOfYear(subYears(date, 9))
: duration === 'week'
? startOfMonth(subMonths(date, 2))
: startOfMonth(subMonths(date, 11))
const end = duration === 'year'
const end =
duration === 'year'
? endOfYear(date)
: duration === 'week'
? endOfWeek(date)
: endOfMonth(date)
this.setState({ statsParams:
{ duration, end, start, type: 'by_time' }
})
this.setState({ statsParams: { duration, end, start, type: 'by_time' } })
}
handleOnChangeSports(sportId) {
const { displayedSports } = this.state
if (displayedSports.includes(sportId)) {
this.setState({
displayedSports: displayedSports.filter(s => s !== sportId)
displayedSports: displayedSports.filter(s => s !== sportId),
})
} else {
this.setState({ displayedSports: displayedSports.concat([sportId]) })
@ -81,30 +81,34 @@ class Statistics extends React.Component {
const { start, end, duration } = this.state.statsParams
let newStart, newEnd
if (forward) {
newStart = duration === 'year'
newStart =
duration === 'year'
? startOfYear(subYears(start, 1))
: duration === 'week'
? startOfWeek(subWeeks(start, 1))
: startOfMonth(subMonths(start, 1))
newEnd = duration === 'year'
newEnd =
duration === 'year'
? endOfYear(subYears(end, 1))
: duration === 'week'
? endOfWeek(subWeeks(end, 1))
: endOfMonth(subMonths(end, 1))
} else {
newStart = duration === 'year'
newStart =
duration === 'year'
? startOfYear(addYears(start, 1))
: duration === 'week'
? startOfWeek(addWeeks(start, 1))
: startOfMonth(addMonths(start, 1))
newEnd = duration === 'year'
newEnd =
duration === 'year'
? endOfYear(addYears(end, 1))
: duration === 'week'
? endOfWeek(addWeeks(end, 1))
: endOfMonth(addMonths(end, 1))
}
this.setState({ statsParams:
{ duration, end: newEnd, start: newStart, type: 'by_time' }
this.setState({
statsParams: { duration, end: newEnd, start: newStart, type: 'by_time' },
})
}
@ -118,9 +122,7 @@ class Statistics extends React.Component {
</Helmet>
<div className="container dashboard">
<div className="card activity-card">
<div className="card-header">
Statistics
</div>
<div className="card-header">Statistics</div>
<div className="card-body">
<div className="chart-filters row">
<div className="col chart-arrows">
@ -186,8 +188,6 @@ class Statistics extends React.Component {
}
}
export default connect(
state => ({
export default connect(state => ({
sports: state.sports.data,
})
)(Statistics)
}))(Statistics)

View File

@ -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,15 +27,18 @@ 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)}
<form
onSubmit={event =>
props.handleUserFormSubmit(event, props.formType)
}
>
{props.formType === 'register' &&
{props.formType === 'register' && (
<div className="form-group">
<input
className="form-control input-lg"
@ -46,7 +50,7 @@ export default function Form (props) {
onChange={props.onHandleFormChange}
/>
</div>
}
)}
<div className="form-group">
<input
className="form-control input-lg"
@ -69,7 +73,7 @@ export default function Form (props) {
onChange={props.onHandleFormChange}
/>
</div>
{props.formType === 'register' &&
{props.formType === 'register' && (
<div className="form-group">
<input
className="form-control input-lg"
@ -81,7 +85,7 @@ export default function Form (props) {
onChange={props.onHandleFormChange}
/>
</div>
}
)}
<input
type="submit"
className="btn btn-primary btn-lg btn-block"

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)

View File

@ -13,9 +13,7 @@ function Profile ({ message, onDeletePicture, onUploadPicture, user }) {
<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">
@ -35,16 +33,17 @@ 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>
@ -55,18 +54,18 @@ function Profile ({ message, onDeletePicture, onUploadPicture, user }) {
<div>
<img
alt="Profile"
src={`${apiUrl}users/${user.id}/picture` +
`?${Date.now()}`}
src={
`${apiUrl}users/${user.id}/picture` +
`?${Date.now()}`
}
className="img-fluid App-profile-img-small"
/>
<br />
<button
type="submit"
onClick={() => onDeletePicture()}
>
<button type="submit" onClick={() => onDeletePicture()}>
Delete picture
</button>
<br /><br />
<br />
<br />
</div>
)}
<form

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] = ''
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])
? (formData[k] = format(new Date(user[k]), 'yyyy-MM-DD'))
: (formData[k] = user[k])
)
this.setState({ formData })
}
@ -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,19 +60,19 @@ 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 => {
<form
onSubmit={event => {
event.preventDefault()
onHandleProfileFormSubmit(formData)
}}
>
<div className="form-group">
<label>Email:
<label>
Email:
<input
name="email"
className="form-control input-lg"
@ -184,11 +183,11 @@ class ProfileEdit extends React.Component {
<TimezonePicker
className="form-control timezone-custom-height"
onChange={tz => {
const e = { target:
{
const e = {
target: {
name: 'timezone',
value: tz ? tz : 'Europe/Paris'
}
value: tz ? tz : 'Europe/Paris',
},
}
this.handleFormChange(e)
}}
@ -220,7 +219,6 @@ class ProfileEdit extends React.Component {
</div>
)
}
}
export default connect(

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>

View File

@ -1,14 +1,13 @@
import { createApiRequest } from '../utils'
export default class FitTrackeeApi {
static getData(target, data = {}) {
let url = target
if (data.id) {
url = `${url}/${data.id}`
} else if (Object.keys(data).length > 0) {
url += '?'
Object.keys(data).map(key => url += `&${key}=${data[key]}`)
Object.keys(data).map(key => (url += `&${key}=${data[key]}`))
}
const params = {
url: url,

View File

@ -1,7 +1,6 @@
import { createApiRequest } from '../utils'
export default class FitTrackeeApi {
static loginOrRegister(target, data) {
const params = {
url: `auth/${target}`,

View File

@ -128,7 +128,8 @@ const user = (state = initial.user, action) => {
const statistics = (state = initial.statistics, action) =>
handleDataAndError(state, 'statistics', action)
export default history => combineReducers({
export default history =>
combineReducers({
activities,
calendarActivities,
chartData,

View File

@ -32,7 +32,7 @@ export const getGeoJson = gpxContent => {
export const formatActivityDate = (
dateTime,
dateFormat = null,
timeFormat = null,
timeFormat = null
) => {
if (!dateFormat) {
dateFormat = 'yyyy/MM/dd'
@ -70,16 +70,16 @@ export const formatRecord = (record, tz) => {
case 'FD':
value = `${record.value} km`
break
default: // 'LD'
default:
// 'LD'
value = record.value // eslint-disable-line prefer-destructuring
}
const [recordType] = recordsLabels.filter(
r => r.record_type === record.record_type
)
return {
activity_date: formatActivityDate(
getDateWithTZ(record.activity_date, tz)
).activity_date,
activity_date: formatActivityDate(getDateWithTZ(record.activity_date, tz))
.activity_date,
activity_id: record.activity_id,
id: record.id,
record_type: recordType.label,

View File

@ -3,6 +3,7 @@ import { DateTime } from 'luxon'
export const version = '0.2.1-beta' // version stored in 'utils' for now
export const apiUrl = `${process.env.REACT_APP_API_URL}/api/`
/* prettier-ignore */
export const thunderforestApiKey = `${
process.env.REACT_APP_THUNDERFOREST_API_KEY
}`
@ -21,12 +22,10 @@ export const generateIds = arr => {
})
}
export const createApiRequest = params => {
const headers = {}
if (!params.noAuthorization) {
headers.Authorization = `Bearer ${
window.localStorage.getItem('authToken')}`
headers.Authorization = `Bearer ${window.localStorage.getItem('authToken')}`
}
if (params.type) {
headers['Content-Type'] = params.type
@ -42,22 +41,23 @@ export const createApiRequest = params => {
}
const request = new Request(`${apiUrl}${params.url}`, requestParams)
return fetch(request)
.then(response => params.method === 'DELETE'
? response
: response.json())
.then(response => (params.method === 'DELETE' ? response : response.json()))
.catch(error => {
console.error(error)
return new Error('An error occurred. Please contact the administrator.')
})
}
export const getDateWithTZ = (date, tz) => {
if (!date) {
return ''
}
const dt = DateTime.fromISO(
format(new Date(date), "yyyy-MM-dd'T'HH:mm:ss.SSSxxx")).setZone(tz)
format(new Date(date), "yyyy-MM-dd'T'HH:mm:ss.SSSxxx")
).setZone(tz)
return parse(
dt.toFormat('yyyy-MM-dd HH:mm:ss'), 'yyyy-MM-dd HH:mm:ss', new Date())
dt.toFormat('yyyy-MM-dd HH:mm:ss'),
'yyyy-MM-dd HH:mm:ss',
new Date()
)
}

View File

@ -1,12 +1,13 @@
import {
addDays,
addMonths,
addYears, format, startOfMonth,
addYears,
format,
startOfMonth,
startOfWeek,
startOfYear
startOfYear,
} from 'date-fns'
const xAxisFormats = [
{ duration: 'week', dateFormat: 'yyyy-MM-dd', xAxis: 'dd/MM' },
{ duration: 'month', dateFormat: 'yyyy-MM', xAxis: 'MM/yyyy' },
@ -24,16 +25,15 @@ export const formatDuration = (totalSeconds, formatWithDay = false) => {
const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0')
const seconds = String(totalSeconds % 60).padStart(2, '0')
if (formatWithDay) {
return `${
days === '0' ? '' : `${days}d:`
}${
return `${days === '0' ? '' : `${days}d:`}${
hours === '00' ? '' : `${hours}h:`
}${minutes}m:${seconds}s`
}
return `${hours === '00' ? '' : `${hours}:`}${minutes}:${seconds}`
}
export const formatValue = (displayedData, value) => value === 0
export const formatValue = (displayedData, value) =>
value === 0
? ''
: displayedData === 'distance'
? `${value.toFixed(2)} km`
@ -65,14 +65,13 @@ const startDate = (duration, day) => {
}
}
export const formatStats = (
stats, sports, params, displayedSports
) => {
export const formatStats = (stats, sports, params, displayedSports) => {
const nbActivitiesStats = []
const distanceStats = []
const durationStats = []
for (let day = startDate(params.duration, params.start);
for (
let day = startDate(params.duration, params.start);
day <= params.end;
day = dateIncrement(params.duration, day)
) {
@ -86,9 +85,11 @@ export const formatStats = (
const dataDuration = { date: xAxis }
if (stats[date]) {
Object.keys(stats[date]).filter(
sportId => displayedSports ? displayedSports.includes(+sportId) : true
).map(sportId => {
Object.keys(stats[date])
.filter(sportId =>
displayedSports ? displayedSports.includes(+sportId) : true
)
.map(sportId => {
const sportLabel = sports.filter(s => s.id === +sportId)[0].label
dataNbActivities[sportLabel] = stats[date][sportId].nb_activities
dataDistance[sportLabel] = stats[date][sportId].total_distance
@ -104,6 +105,6 @@ export const formatStats = (
return {
activities: nbActivitiesStats,
distance: distanceStats,
duration: durationStats
duration: durationStats,
}
}