diff --git a/.eslintrc.json b/.eslintrc.json index 113aae57..5bbb54c8 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -417,6 +417,16 @@ "node": { "extensions": [".js", ".jsx"] } - } + }, + "react": { + "createClass": "createReactClass", + "pragma": "React", + "version": "16.6" + }, + "propWrapperFunctions": [ + "forbidExtraProps", + {"property": "freeze", "object": "Object"}, + {"property": "myFavoriteWrapper"} + ] } } diff --git a/fittrackee_client/src/components/Dashboard/Statistics.jsx b/fittrackee_client/src/components/Dashboard/Statistics.jsx index 2980a502..3f39aa18 100644 --- a/fittrackee_client/src/components/Dashboard/Statistics.jsx +++ b/fittrackee_client/src/components/Dashboard/Statistics.jsx @@ -91,7 +91,7 @@ class Statistics extends React.Component { tickFormatter={value => displayedData === 'distance' ? `${value} km` : displayedData === 'duration' - ? format(formatDuration(value), 'HH:mm') + ? formatDuration(value) : value } /> diff --git a/fittrackee_client/src/components/Others/CustomTooltip.jsx b/fittrackee_client/src/components/Others/CustomTooltip.jsx index 565c6474..b0d90bd3 100644 --- a/fittrackee_client/src/components/Others/CustomTooltip.jsx +++ b/fittrackee_client/src/components/Others/CustomTooltip.jsx @@ -1,10 +1,9 @@ import React from 'react' -import { format } from 'date-fns' import { formatDuration } from '../../utils' const formatValue = (displayedData, value) => displayedData === 'duration' - ? format(formatDuration(value), 'HH:mm') + ? formatDuration(value, true) : displayedData === 'distance' ? value.toFixed(3) : value diff --git a/fittrackee_client/src/reducers/index.js b/fittrackee_client/src/reducers/index.js index 7a570859..24a0cde9 100644 --- a/fittrackee_client/src/reducers/index.js +++ b/fittrackee_client/src/reducers/index.js @@ -123,7 +123,7 @@ const user = (state = initial.user, action) => { const statistics = (state = initial.statistics, action) => handleDataAndError(state, 'statistics', action) -export default (history) => combineReducers({ +export default history => combineReducers({ activities, calendarActivities, chartData, diff --git a/fittrackee_client/src/utils.js b/fittrackee_client/src/utils.js index bb95dc39..a5f495d0 100644 --- a/fittrackee_client/src/utils.js +++ b/fittrackee_client/src/utils.js @@ -1,11 +1,11 @@ import togeojson from '@mapbox/togeojson' -import { addDays, format, parse, startOfWeek, subHours } from 'date-fns' +import { addDays, format, parse, startOfWeek } from 'date-fns' import { DateTime } from 'luxon' export const apiUrl = `${process.env.REACT_APP_API_URL}/api/` export const thunderforestApiKey = `${ process.env.REACT_APP_THUNDERFOREST_API_KEY -}` + }` export const gpxLimit = `${process.env.REACT_APP_GPX_LIMIT_IMPORT}` export const activityColors = [ '#55a8a3', @@ -123,10 +123,24 @@ export const formatRecord = (record, tz) => { } } -export const formatDuration = seconds => { - let newDate = new Date(0) - newDate = subHours(newDate.setSeconds(seconds), 1) - return newDate.getTime() +export const formatDuration = (totalSeconds, formatWithDay = false) => { + let days = '0' + if (formatWithDay) { + days = String(Math.floor(totalSeconds / 86400)) + totalSeconds %= 86400 + } + const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0') + totalSeconds %= 3600 + const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0') + const seconds = String(totalSeconds % 60).padStart(2, '0') + if (formatWithDay) { + return `${ + days === '0' ? '' : `${days}d:` + }${ + hours === '00' ? '' : `${hours}h:` + }${minutes}m:${seconds}s` + } + return `${hours === '00' ? '' : `${hours}:`}${minutes}:${seconds}` } export const formatChartData = chartData => {