fix: fix run duration

.releaserc

@@ -0,0 +1,26 @@
+{
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/changelog",
+    [
+      "@semantic-release/npm",
+      {
+        "tarballDir": "release"
+      }
+    ],
+    [
+      "@semantic-release/github",
+      {
+        "assets": "release/*.tgz"
+      }
+    ],
+    [
+      "@semantic-release/git",
+      {
+        "message": "chore: ${nextRelease.version}\n\n${nextRelease.notes} [skip ci]"
+      }
+    ]
+  ],
+  "preset": "angular"
+}

components/Header.js

@@ -16,6 +16,7 @@ const StyledHeader = styled(ContentLoader)(
     ${Text} {
       font-size: 56px;
       line-height: 56px;
+      margin-bottom: 8px;
     }
 
     ${MutedText} {
@@ -29,7 +30,7 @@ const Header = () => {
   const { data: totalDistance, error } = useSWR('/api/total-distance')
 
   return (
-    <StyledHeader isLoading={!totalDistance || error}>
+    <StyledHeader isLoading={Boolean(!totalDistance || error)}>
       <Text>{(totalDistance / 1000).toFixed(2)} km</Text>
       <MutedText>Total kilometers</MutedText>
     </StyledHeader>

components/Info.js

@@ -22,6 +22,7 @@ const StyledInfo = styled.div`
 
   ${Text} {
     font-size: 40px;
+    margin-bottom: 8px;
   }
 
   ${MutedText} {
@@ -39,7 +40,9 @@ const Info = () => {
   )
 
   const error = totalRunsError || averageDistanceError || averagePaceError
-  const isLoading = !totalRuns || !averageDistance || !averagePace || error
+  const isLoading = Boolean(
+    !totalRuns || !averageDistance || !averagePace || error,
+  )
 
   return (
     <StyledInfo>

components/Run.js

@@ -3,8 +3,9 @@ import styled, { css } from 'styled-components'
 import { down } from 'styled-breakpoints'
 
 import calculatePace from '../utils/calculatePace'
-import formatPace from '../utils/formatPace'
 import formatDate from '../utils/formatDate'
+import formatPace from '../utils/formatPace'
+import formatTime from '../utils/formatTime'
 
 import MutedText from './MutedText'
 import Text from './Text'
@@ -34,10 +35,6 @@ const StyledRun = styled.div(
 const Outline = styled(Column)`
   max-height: 164px;
 
-  svg {
-    height: 100%;
-  }
-
   ${down('sm')} {
     text-align: center;
   }
@@ -88,7 +85,7 @@ const Run = ({
             <MutedText>{formatPace(calculatePace(time, distance))}</MutedText>
           </Column>
           <Column>
-            <MutedText>{dayjs(date).format('HH:mm')}</MutedText>
+            <MutedText>{formatTime(time)}</MutedText>
           </Column>
         </Row>
       </Column>

package.json

@@ -10,6 +10,12 @@
   },
   "dependencies": {
     "@mapbox/polyline": "^1.1.1",
+    "@semantic-release/changelog": "^5.0.1",
+    "@semantic-release/commit-analyzer": "^8.0.1",
+    "@semantic-release/git": "^9.0.0",
+    "@semantic-release/github": "^7.1.1",
+    "@semantic-release/npm": "^7.0.6",
+    "@semantic-release/release-notes-generator": "^9.0.1",
     "@svgr/webpack": "^5.4.0",
     "dayjs": "^1.9.3",
     "mongoose": "^5.10.9",

utils/formatTime.js

@@ -1,9 +1,14 @@
 import dayjs from 'dayjs'
+import duration from 'dayjs/plugin/duration'
+import utc from 'dayjs/plugin/utc'
 
-const formatDate = date => {
-  if (dayjs().isSame(dayjs(date), 'day')) return 'Today'
-  if (dayjs().subtract(1, 'day').isSame(dayjs(date), 'day')) return 'Yesterday'
-  return dayjs(date).format('MMMM DD, YYYY')
+dayjs.extend(duration)
+dayjs.extend(utc)
+
+const formatTime = time => {
+  return dayjs
+    .utc(dayjs.duration(time, 'second').asMilliseconds())
+    .format('m:ss')
 }
 
-export default formatDate
+export default formatTime