Client - reformat js files w/ prettier
This commit is contained in:
Sam
@ -4,19 +4,21 @@ import { Link } from 'react-router-dom'
|
||||
|
||||
import { apiUrl, getDateWithTZ } from '../../utils'
|
||||
|
||||
export default function ActivityCard (props) {
|
||||
export default function ActivityCard(props) {
|
||||
const { activity, sports, user } = props
|
||||
|
||||
return (
|
||||
<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)} -{' '}
|
||||
{format(
|
||||
getDateWithTZ(activity.activity_date, user.timezone),
|
||||
'dd/MM/yyyy HH:mm'
|
||||
)}
|
||||
{sports
|
||||
.filter(sport => sport.id === activity.sport_id)
|
||||
.map(sport => sport.label)}{' '}
|
||||
-{' '}
|
||||
{format(
|
||||
getDateWithTZ(activity.activity_date, user.timezone),
|
||||
'dd/MM/yyyy HH:mm'
|
||||
)}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
@ -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>
|
||||
|
||||
@ -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 => ` ${
|
||||
recordsLabels.filter(
|
||||
r => r.record_type === rec.record_type
|
||||
)[0].label
|
||||
}`)}
|
||||
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)
|
||||
|
||||
@ -3,67 +3,59 @@ import { Link } from 'react-router-dom'
|
||||
|
||||
import { formatRecord } from '../../utils/activities'
|
||||
|
||||
export default function RecordsCard (props) {
|
||||
export default function RecordsCard(props) {
|
||||
const { records, sports, user } = props
|
||||
const recordsBySport = records.reduce((sportList, record) => {
|
||||
const sport = sports.find(s => s.id === record.sport_id)
|
||||
if (sportList[sport.label] === void 0) {
|
||||
sportList[sport.label] = {
|
||||
img: sport.img,
|
||||
records: [],
|
||||
}
|
||||
const sport = sports.find(s => s.id === record.sport_id)
|
||||
if (sportList[sport.label] === void 0) {
|
||||
sportList[sport.label] = {
|
||||
img: sport.img,
|
||||
records: [],
|
||||
}
|
||||
sportList[sport.label].records.push(formatRecord(record, user.timezone))
|
||||
return sportList
|
||||
}
|
||||
sportList[sport.label].records.push(formatRecord(record, user.timezone))
|
||||
return sportList
|
||||
}, {})
|
||||
|
||||
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 => (
|
||||
<table
|
||||
className="table table-borderless table-sm record-table"
|
||||
key={sportLabel}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan="3">
|
||||
<img
|
||||
alt={`${sportLabel} logo`}
|
||||
className="record-logo"
|
||||
src={recordsBySport[sportLabel].img}
|
||||
/>
|
||||
{sportLabel}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{recordsBySport[sportLabel].records.map(rec => (
|
||||
<tr key={rec.id}>
|
||||
<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}
|
||||
</Link>
|
||||
</td>
|
||||
: Object.keys(recordsBySport).map(sportLabel => (
|
||||
<table
|
||||
className="table table-borderless table-sm record-table"
|
||||
key={sportLabel}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan="3">
|
||||
<img
|
||||
alt={`${sportLabel} logo`}
|
||||
className="record-logo"
|
||||
src={recordsBySport[sportLabel].img}
|
||||
/>
|
||||
{sportLabel}
|
||||
</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>))
|
||||
)
|
||||
}
|
||||
</thead>
|
||||
<tbody>
|
||||
{recordsBySport[sportLabel].records.map(rec => (
|
||||
<tr key={rec.id}>
|
||||
<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}
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React from 'react'
|
||||
|
||||
|
||||
export default function UserStatistics (props) {
|
||||
export default function UserStatistics(props) {
|
||||
const { user } = props
|
||||
const days = user.total_duration.match(/day/g)
|
||||
? `${user.total_duration.split(',')[0]},`
|
||||
|
||||
@ -25,11 +25,17 @@ 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
|
||||
? activities[activities.length - 1].previous_activity === null
|
||||
: true
|
||||
const paginationEnd =
|
||||
activities.length > 0
|
||||
? activities[activities.length - 1].previous_activity === null
|
||||
: true
|
||||
const { page } = this.state
|
||||
return (
|
||||
<div>
|
||||
@ -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">
|
||||
@ -51,23 +58,24 @@ class DashBoard extends React.Component {
|
||||
<Calendar />
|
||||
{activities.length > 0 ? (
|
||||
activities.map(activity => (
|
||||
<ActivityCard
|
||||
activity={activity}
|
||||
key={activity.id}
|
||||
sports={sports}
|
||||
user={user}
|
||||
/>)
|
||||
)) : (
|
||||
<ActivityCard
|
||||
activity={activity}
|
||||
key={activity.id}
|
||||
sports={sports}
|
||||
user={user}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<div className="card text-center">
|
||||
<div className="card-body">
|
||||
No workouts. {' '}
|
||||
No workouts.{' '}
|
||||
<Link to={{ pathname: '/activities/add' }}>
|
||||
Upload one !
|
||||
</Link>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user