Client - date formatting refactoring (WIP)

fittrackee_client/src/components/Administration/AdminUsers.vue

@@ -62,9 +62,10 @@
                     {{ $t('user.PROFILE.REGISTRATION_DATE') }}
                   </span>
                   {{
-                    format(
+                    formatDate(
-                      getDateWithTZ(user.created_at, authUser.timezone),
+                      user.created_at,
-                      `${authUser.date_format} HH:mm`
+                      authUser.timezone,
+                      authUser.date_format
                     )
                   }}
                 </td>
@@ -130,7 +131,6 @@
 </template>
 
 <script setup lang="ts">
-  import { format } from 'date-fns'
   import {
     ComputedRef,
     Ref,
@@ -152,7 +152,7 @@
   import { IAuthUserProfile, IUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
   import { getQuery, sortList } from '@/utils/api'
-  import { getDateWithTZ } from '@/utils/dates'
+  import { formatDate } from '@/utils/dates'
 
   const store = useStore()
   const route = useRoute()

fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue

@@ -130,6 +130,7 @@
   import { TAppConfig } from '@/types/application'
   import { IAuthUserProfile, IUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
+  import { formatDate } from '@/utils/dates'
 
   interface Props {
     user: IUserProfile
@@ -147,12 +148,16 @@
   )
   const registrationDate = computed(() =>
     props.user.created_at
-      ? format(new Date(props.user.created_at), `${props.user.date_format} HH:mm`)
+      ? formatDate(
+          props.user.created_at,
+          authUser.value.timezone,
+          authUser.value.date_format
+        )
       : ''
   )
   const birthDate = computed(() =>
     props.user.birth_date
-      ? format(new Date(props.user.birth_date), props.user.date_format)
+      ? format(new Date(props.user.birth_date), authUser.value.date_format)
       : ''
   )
   const isSuccess = computed(

fittrackee_client/src/components/User/ProfileEdition/UserInfosEdition.vue

@@ -65,11 +65,12 @@
   import { ComputedRef, computed, reactive, onMounted, onUnmounted } from 'vue'
 
   import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
-  import { IUserProfile, IUserPayload } from '@/types/user'
+  import { IUserProfile, IUserPayload, IAuthUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
+  import { formatDate } from '@/utils/dates'
 
   interface Props {
-    user: IUserProfile
+    user: IAuthUserProfile
   }
   const props = defineProps<Props>()
 
@@ -84,7 +85,11 @@
   })
   const registrationDate = computed(() =>
     props.user.created_at
-      ? format(new Date(props.user.created_at), `${props.user.date_format} HH:mm`)
+      ? formatDate(
+          props.user.created_at,
+          props.user.timezone,
+          props.user.date_format
+        )
       : ''
   )
   const loading = computed(

fittrackee_client/src/components/User/UserApps/UserApp.vue

@@ -50,9 +50,10 @@
         <dt>{{ capitalize($t('oauth2.APP.ISSUE_AT')) }}:</dt>
         <dd>
           {{
-            format(
+            formatDate(
-              getDateWithTZ(client.issued_at, authUser.timezone),
+              client.issued_at,
-              `${authUser.date_format} HH:mm`
+              authUser.timezone,
+              authUser.date_format
             )
           }}
         </dd>
@@ -105,7 +106,6 @@
 </template>
 
 <script setup lang="ts">
-  import { format } from 'date-fns'
   import {
     ComputedRef,
     Ref,
@@ -124,7 +124,7 @@
   import { IOAuth2Client } from '@/types/oauth'
   import { IAuthUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
-  import { getDateWithTZ } from '@/utils/dates'
+  import { formatDate } from '@/utils/dates'
 
   interface Props {
     authUser: IAuthUserProfile

fittrackee_client/src/components/User/UserApps/UserAppsList.vue

@@ -9,9 +9,10 @@
         <span class="app-issued-at">
           {{ $t('oauth2.APP.ISSUE_AT') }}
           {{
-            format(
+            formatDate(
-              getDateWithTZ(client.issued_at, authUser.timezone),
+              client.issued_at,
-              `${authUser.date_format} HH:mm`
+              authUser.timezone,
+              authUser.date_format
             )
           }}
         </span>
@@ -34,7 +35,6 @@
 </template>
 
 <script setup lang="ts">
-  import { format } from 'date-fns'
   import { ComputedRef, computed, onBeforeMount, toRefs, watch } from 'vue'
   import { LocationQuery, useRoute } from 'vue-router'
 
@@ -45,7 +45,7 @@
   import { IAuthUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
   import { defaultPage, getNumberQueryValue } from '@/utils/api'
-  import { getDateWithTZ } from '@/utils/dates'
+  import { formatDate } from '@/utils/dates'
 
   interface Props {
     authUser: IAuthUserProfile

fittrackee_client/src/components/Workout/WorkoutCard.vue

@@ -29,10 +29,7 @@
           class="workout-date"
           v-if="workout.workout_date && user"
           :title="
-            format(
+            formatDate(workout.workout_date, user.timezone, user.date_format)
-              getDateWithTZ(workout.workout_date, user.timezone),
-              `${user.date_format} HH:mm`
-            )
           "
         >
           {{
@@ -141,7 +138,7 @@
 </template>
 
 <script setup lang="ts">
-  import { Locale, format, formatDistance } from 'date-fns'
+  import { Locale, formatDistance } from 'date-fns'
   import { ComputedRef, computed, toRefs, withDefaults } from 'vue'
 
   import StaticMap from '@/components/Common/StaticMap.vue'
@@ -151,7 +148,7 @@
   import { IUserProfile } from '@/types/user'
   import { IWorkout } from '@/types/workouts'
   import { useStore } from '@/use/useStore'
-  import { getDateWithTZ } from '@/utils/dates'
+  import { formatDate } from '@/utils/dates'
 
   interface Props {
     user: IUserProfile

fittrackee_client/src/components/Workouts/WorkoutsList.vue

@@ -84,9 +84,10 @@
                   {{ $t('workouts.DATE') }}
                 </span>
                 {{
-                  format(
+                  formatDate(
-                    getDateWithTZ(workout.workout_date, user.timezone),
+                    workout.workout_date,
-                    `${user.date_format} HH:mm`
+                    user.timezone,
+                    user.date_format
                   )
                 }}
               </td>
@@ -162,7 +163,6 @@
 </template>
 
 <script setup lang="ts">
-  import { format } from 'date-fns'
   import {
     ComputedRef,
     Ref,
@@ -186,7 +186,7 @@
   import { IWorkout, TWorkoutsPayload } from '@/types/workouts'
   import { useStore } from '@/use/useStore'
   import { getQuery, sortList, workoutsPayloadKeys } from '@/utils/api'
-  import { getDateWithTZ } from '@/utils/dates'
+  import { formatDate } from '@/utils/dates'
   import { getSportColor, getSportLabel } from '@/utils/sports'
   import { convertDistance } from '@/utils/units'
   import { defaultOrder } from '@/utils/workouts'

fittrackee_client/src/utils/dates.ts

@@ -78,3 +78,14 @@ export const formatWorkoutDate = (
     workout_time: format(dateTime, timeFormat),
   }
 }
+
+export const formatDate = (
+  dateString: string,
+  timezone: string,
+  dateFormat: string,
+  withTime = true
+): string =>
+  format(
+    getDateWithTZ(dateString, timezone),
+    `${dateFormat}${withTime ? ' HH:mm' : ''}`
+  )

fittrackee_client/tests/unit/utils/dates.spec.ts

@@ -5,6 +5,7 @@ import {
   incrementDate,
   getStartDate,
   formatWorkoutDate,
+  formatDate,
 } from '@/utils/dates'
 
 describe('startDate (week starting Sunday)', () => {
@@ -240,3 +241,52 @@ describe('formatWorkoutDate', () => {
     })
   })
 })
+
+describe('formatDate', () => {
+  const dateString = 'Tue, 01 Nov 2022 00:00:00 GMT'
+
+  const testsParams = [
+    {
+      description:
+        'format date for "Europe/Paris" timezone and "dd/MM/yyyy" format (with time)',
+      inputParams: {
+        timezone: 'Europe/Paris',
+        dateFormat: 'dd/MM/yyyy',
+        withTime: true,
+      },
+      expectedDate: '01/11/2022 01:00',
+    },
+    {
+      description:
+        'format date for "America/New_York" timezone and "MM/dd/yyyy" format (w/o time)',
+      inputParams: {
+        timezone: 'America/New_York',
+        dateFormat: 'MM/dd/yyyy',
+        withTime: false,
+      },
+      expectedDate: '10/31/2022',
+    },
+  ]
+  testsParams.map((testParams) => {
+    it(testParams.description, () => {
+      assert.deepEqual(
+        formatDate(
+          dateString,
+          testParams.inputParams.timezone,
+          testParams.inputParams.dateFormat,
+          testParams.inputParams.withTime
+        ),
+        testParams.expectedDate
+      )
+    })
+  })
+})
+
+describe('formatDate (w/ default value)', () => {
+  it('format date for "Europe/Paris" timezone and "dd/MM/yyyy" format', () => {
+    assert.deepEqual(
+      formatDate('Tue, 01 Nov 2022 00:00:00 GMT', 'Europe/Paris', 'yyyy-MM-dd'),
+      '2022-11-01 01:00'
+    )
+  })
+})