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