Client: display activity date with user timezone - #11

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