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

Client: display activity date with user timezone - #11

Browse Source
This commit is contained in:
Sam 2018-06-11 15:24:34 +02:00
parent fe91040370
commit 31d23da473
11 changed files with 69 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
fittrackee_client/src/components/Activities/ActivitiesList.jsx
View File

@ -2,8 +2,10 @@ import { format } from 'date-fns'
import React from 'react'
import { Link } from 'react-router-dom'
import { getDateWithTZ } from '../../utils'
export default function ActivitiesList (props) {
const { activities, sports } = props
const { activities, sports, user } = props
return (
<div className="card">
<div className="card-body">
@ -36,7 +38,12 @@ export default function ActivitiesList (props) {
{activity.title}
</Link>
</td>
<td>{format(activity.activity_date, 'DD/MM/YYYY HH:mm')}</td>
<td>
{format(
getDateWithTZ(activity.activity_date, user.timezone),
'DD/MM/YYYY HH:mm'
)}
</td>
<td className="text-right">
{Number(activity.distance).toFixed(2)} km
</td>

4
fittrackee_client/src/components/Activities/index.jsx
View File

@ -36,7 +36,7 @@ class Activities extends React.Component {
}
render() {
const {
activities, loadActivities, loadMoreActivities, message, sports
activities, loadActivities, loadMoreActivities, message, sports, user
} = this.props
const { params } = this.state
const paginationEnd = activities.length > 0
@ -63,6 +63,7 @@ class Activities extends React.Component {
<ActivitiesList
activities={activities}
sports={sports}
user={user}
/>
{!paginationEnd &&
<input
@ -100,6 +101,7 @@ export default connect(
activities: state.activities.data,
message: state.message,
sports: state.sports.data,
user: state.user,
}),
dispatch => ({
loadActivities: params => {

8
fittrackee_client/src/components/Activity/ActivityDisplay/ActivityCardHeader.jsx
View File

@ -1,13 +1,15 @@
import React from 'react'
import { Link } from 'react-router-dom'
import { formatActivityDate } from '../../../utils'
import { formatActivityDate, getDateWithTZ } from '../../../utils'
export default function ActivityCardHeader(props) {
const { activity, displayModal, sport, title } = props
const { activity, displayModal, sport, title, user } = props
const activityDate = activity
? formatActivityDate(activity.activity_date)
? formatActivityDate(
getDateWithTZ(activity.activity_date, user.timezone)
)
: null
return (
<div className="container">

3
fittrackee_client/src/components/Activity/ActivityDisplay/index.jsx
View File

@ -34,7 +34,7 @@ class ActivityDisplay extends React.Component {
}
render() {
const { activities, message, onDeleteActivity, sports } = this.props
const { activities, message, onDeleteActivity, sports, user } = this.props
const { displayModal } = this.state
const [activity] = activities
const title = activity ? activity.title : 'Activity'
@ -71,6 +71,7 @@ class ActivityDisplay extends React.Component {
activity={activity}
sport={sport}
title={title}
user={user}
displayModal={() => this.displayModal(true)}
/>
</div>

9
fittrackee_client/src/components/Dashboard/ActivityCard.jsx
View File

@ -2,10 +2,10 @@ import { format } from 'date-fns'
import React from 'react'
import { Link } from 'react-router-dom'
import { apiUrl } from '../../utils'
import { apiUrl, getDateWithTZ } from '../../utils'
export default function ActivityCard (props) {
const { activity, sports } = props
const { activity, sports, user } = props
return (
<div className="card activity-card text-center">
@ -13,7 +13,10 @@ export default function ActivityCard (props) {
<Link to={`/activities/${activity.id}`}>
{sports.filter(sport => sport.id === activity.sport_id)
.map(sport => sport.label)} -{' '}
{format(activity.activity_date, 'DD/MM/YYYY HH:mm')}
{format(
getDateWithTZ(activity.activity_date, user.timezone),
'DD/MM/YYYY HH:mm'
)}
</Link>
</div>
<div className="card-body">

4
fittrackee_client/src/components/Dashboard/Records.jsx
View File

@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'
import { formatRecord } from '../../utils'
export default function RecordsCard (props) {
const { records, sports } = 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) {
@ -13,7 +13,7 @@ export default function RecordsCard (props) {
records: [],
}
}
sportList[sport.label].records.push(formatRecord(record))
sportList[sport.label].records.push(formatRecord(record, user.timezone))
return sportList
}, {})

3
fittrackee_client/src/components/Dashboard/index.jsx
View File

@ -45,7 +45,7 @@ class DashBoard extends React.Component {
<div className="row">
<div className="col-md-4">
<Statistics />
<Records records={records} sports={sports} />
<Records records={records} sports={sports} user={user} />
</div>
<div className="col-md-8">
<Calendar />
@ -55,6 +55,7 @@ class DashBoard extends React.Component {
activity={activity}
key={activity.id}
sports={sports}
user={user}
/>)
)) : (
<div className="card text-center">

12
fittrackee_client/src/components/Others/Calendar.jsx
View File

@ -6,6 +6,7 @@ import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import { getMonthActivities } from '../../actions/activities'
import { getDateWithTZ } from '../../utils'
const getStartAndEndMonth = date => {
const monthStart = dateFns.startOfMonth(date)
@ -73,10 +74,13 @@ class Calendar extends React.Component {
}
filterActivities(day) {
const { activities } = this.props
const { activities, user } = this.props
if (activities) {
return activities
.filter(act => dateFns.isSameDay(act.activity_date, day))
.filter(act => dateFns.isSameDay(
getDateWithTZ(act.activity_date, user.timezone),
day
))
}
return []
}
@ -108,11 +112,12 @@ class Calendar extends React.Component {
{dayActivities.map(act => (
<Link key={act.id} to={`/activities/${act.id}`}>
<img
alt="activity sport logo"
className={`activity-sport ${isDisabled}`}
src={sports
.filter(s => s.id === act.sport_id)
.map(s => s.img)}
alt="activity sport logo"
title={act.title}
/>
</Link>
))}
@ -167,6 +172,7 @@ export default connect(
state => ({
activities: state.calendarActivities.data,
sports: state.sports.data,
user: state.user,
}),
dispatch => ({
loadMonthActivities: (start, end) => {

40
fittrackee_client/src/utils.js
View File

@ -1,5 +1,6 @@
import togeojson from '@mapbox/togeojson'
import { addDays, format, parse, startOfWeek, subHours } from 'date-fns'
import { DateTime } from 'luxon'
export const apiUrl = `${process.env.REACT_APP_API_URL}/api/`
export const thunderforestApiKey = `${
@ -63,24 +64,33 @@ export const getGeoJson = gpxContent => {
return { jsonData }
}
export const formatActivityDate = (activityDateTime, dateFormat = null) => {
if (activityDateTime) {
const dateTime = parse(activityDateTime)
return {
activity_date: format(
dateTime,
dateFormat ? dateFormat : 'DD/MM/YYYY'
),
activity_time: activityDateTime.match(/[0-2][0-9]:[0-5][0-9]/)[0]
}
export const getDateWithTZ = (date, tz) => {
if (!date) {
return ''
}
const dt = DateTime.fromISO(format(date)).setZone(tz)
return parse(dt.toFormat('yyyy-MM-dd HH:mm:ss'))
}
export const formatActivityDate = (
dateTime,
dateFormat = null,
timeFormat = null,
) => {
if (!dateFormat) {
dateFormat = 'DD/MM/YYYY'
}
if (!timeFormat) {
timeFormat = 'HH:mm'
}
return {
activity_date: null,
activity_time: null,
activity_date: dateTime ? format(dateTime, dateFormat) : null,
activity_time: dateTime ? format(dateTime, timeFormat) : null,
}
}
export const formatRecord = record => {
export const formatRecord = (record, tz) => {
let value, recordType = null
switch (record.record_type) {
case 'AS':
@ -97,7 +107,9 @@ export const formatRecord = record => {
recordType = 'Longest duration'
}
return {
activity_date: formatActivityDate(record.activity_date).activity_date,
activity_date: formatActivityDate(
getDateWithTZ(record.activity_date, tz)
).activity_date,
activity_id: record.activity_id,
id: record.id,
record_type: recordType,

1
package.json
View File

@ -8,6 +8,7 @@
"date-fns": "^1.29.0",
"history": "^4.7.2",
"leaflet": "^1.3.1",
"luxon": "^1.2.1",
"object-hash": "^1.3.0",
"react": "^16.4.0",
"react-dom": "^16.4.0",

4
yarn.lock
View File

@ -5669,6 +5669,10 @@ lru-cache@^3.2.0:
dependencies:
pseudomap "^1.0.1"
luxon@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.2.1.tgz#5c4948d141939c2b2820f0c3a99276932245efb1"
macaddress@^0.2.8:
version "0.2.8"
resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"