Client - date formatting refactoring (WIP)

2022-11-01 08:03:47 +01:00 · 2022-11-01 08:03:47 +01:00 · 6fce510a0a
commit 6fce510a0a
parent 3777ac0a11
9 changed files with 99 additions and 31 deletions
--- a/fittrackee_client/src/components/Administration/AdminUsers.vue
+++ b/fittrackee_client/src/components/Administration/AdminUsers.vue
@ -62,9 +62,10 @@
                    {{ $t('user.PROFILE.REGISTRATION_DATE') }}
                  </span>
                  {{
-                    format(
-                      getDateWithTZ(user.created_at, authUser.timezone),
-                      `${authUser.date_format} HH:mm`
+                    formatDate(
+                      user.created_at,
+                      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()
--- a/fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue
+++ b/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(
--- a/fittrackee_client/src/components/User/ProfileEdition/UserInfosEdition.vue
+++ b/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(
--- a/fittrackee_client/src/components/User/UserApps/UserApp.vue
+++ b/fittrackee_client/src/components/User/UserApps/UserApp.vue
@ -50,9 +50,10 @@
        <dt>{{ capitalize($t('oauth2.APP.ISSUE_AT')) }}:</dt>
        <dd>
          {{
-            format(
-              getDateWithTZ(client.issued_at, authUser.timezone),
-              `${authUser.date_format} HH:mm`
+            formatDate(
+              client.issued_at,
+              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
--- a/fittrackee_client/src/components/User/UserApps/UserAppsList.vue
+++ b/fittrackee_client/src/components/User/UserApps/UserAppsList.vue
@ -9,9 +9,10 @@
        <span class="app-issued-at">
          {{ $t('oauth2.APP.ISSUE_AT') }}
          {{
-            format(
-              getDateWithTZ(client.issued_at, authUser.timezone),
-              `${authUser.date_format} HH:mm`
+            formatDate(
+              client.issued_at,
+              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
--- a/fittrackee_client/src/components/Workout/WorkoutCard.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutCard.vue
@ -29,10 +29,7 @@
          class="workout-date"
          v-if="workout.workout_date && user"
          :title="
-            format(
-              getDateWithTZ(workout.workout_date, user.timezone),
-              `${user.date_format} HH:mm`
-            )
+            formatDate(workout.workout_date, user.timezone, user.date_format)
          "
        >
          {{
@ -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
--- a/fittrackee_client/src/components/Workouts/WorkoutsList.vue
+++ b/fittrackee_client/src/components/Workouts/WorkoutsList.vue
@ -84,9 +84,10 @@
                  {{ $t('workouts.DATE') }}
                </span>
                {{
-                  format(
-                    getDateWithTZ(workout.workout_date, user.timezone),
-                    `${user.date_format} HH:mm`
+                  formatDate(
+                    workout.workout_date,
+                    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'
--- a/fittrackee_client/src/utils/dates.ts
+++ b/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' : ''}`
+  )
--- a/fittrackee_client/tests/unit/utils/dates.spec.ts
+++ b/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'
+    )
+  })
+})