Client: display activity date with user timezone - #11

fittrackee_client/src/components/Activities/ActivitiesList.jsx

@@ -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>

fittrackee_client/src/components/Activities/index.jsx

@@ -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 => {

fittrackee_client/src/components/Activity/ActivityDisplay/ActivityCardHeader.jsx

@@ -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">

fittrackee_client/src/components/Activity/ActivityDisplay/index.jsx

@@ -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>

fittrackee_client/src/components/Dashboard/ActivityCard.jsx

@@ -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">

fittrackee_client/src/components/Dashboard/Records.jsx

@@ -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
   }, {})
 

fittrackee_client/src/components/Dashboard/index.jsx

@@ -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">

fittrackee_client/src/components/Others/Calendar.jsx

@@ -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) => {

fittrackee_client/src/utils.js

@@ -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) {
+export const getDateWithTZ = (date, tz) => {
-    const dateTime = parse(activityDateTime)
+  if (!date) {
-    return {
+    return ''
-      activity_date: format(
+  }
-        dateTime,
+  const dt = DateTime.fromISO(format(date)).setZone(tz)
-        dateFormat ? dateFormat : 'DD/MM/YYYY'
+  return parse(dt.toFormat('yyyy-MM-dd HH:mm:ss'))
-      ),
+}
-      activity_time: activityDateTime.match(/[0-2][0-9]:[0-5][0-9]/)[0]
+
-    }
+export const formatActivityDate = (
+  dateTime,
+  dateFormat = null,
+  timeFormat = null,
+) => {
+  if (!dateFormat) {
+    dateFormat = 'DD/MM/YYYY'
+  }
+  if (!timeFormat) {
+    timeFormat = 'HH:mm'
   }
   return {
-    activity_date: null,
+    activity_date: dateTime ? format(dateTime, dateFormat) : null,
-    activity_time: 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,

package.json

@@ -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",

yarn.lock

@@ -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"