Client - handle date string format depending on language

fittrackee_client/src/utils/dates.ts

@@ -11,6 +11,11 @@ import {
 } from 'date-fns'
 import { utcToZonedTime } from 'date-fns-tz'
 
+import createI18n from '@/i18n'
+import { localeFromLanguage } from '@/utils/locales'
+
+const { locale } = createI18n.global
+
 export const getStartDate = (
   duration: string,
   day: Date,
@@ -70,22 +75,70 @@ export const formatWorkoutDate = (
   if (!dateFormat) {
     dateFormat = 'yyyy/MM/dd'
   }
+  dateFormat = getDateFormat(dateFormat, locale.value)
   if (!timeFormat) {
     timeFormat = 'HH:mm'
   }
   return {
-    workout_date: format(dateTime, dateFormat),
+    workout_date: format(dateTime, dateFormat, {
+      locale: localeFromLanguage[locale.value],
+    }),
     workout_time: format(dateTime, timeFormat),
   }
 }
 
+const availableDateFormats = [
+  'dd/MM/yyyy',
+  'MM/dd/yyyy',
+  'yyyy-MM-dd',
+  'date_string',
+]
+const dateStringFormats: Record<string, string> = {
+  de: 'd MMM yyyy',
+  en: 'MMM. do, yyyy',
+  fr: 'd MMM yyyy',
+}
+
+export const getDateFormat = (dateFormat: string, language: string): string => {
+  return dateFormat === 'date_string' ? dateStringFormats[language] : dateFormat
+}
+
 export const formatDate = (
   dateString: string,
   timezone: string,
   dateFormat: string,
-  withTime = true
-): string =>
-  format(
+  withTime = true,
+  language: string | null = null
+): string => {
+  if (!language) {
+    language = locale.value
+  }
+  return format(
     getDateWithTZ(dateString, timezone),
-    `${dateFormat}${withTime ? ' HH:mm' : ''}`
+    `${getDateFormat(dateFormat, language)}${withTime ? ' HH:mm' : ''}`,
+    { locale: localeFromLanguage[language] }
   )
+}
+
+export const availableDateFormatOptions = (
+  inputDate: string,
+  timezone: string,
+  language: string | null = null
+) => {
+  const l: string = language ? language : locale.value
+  const options: Record<string, string>[] = []
+  availableDateFormats.map((df) => {
+    const dateFormat = getDateFormat(df, l)
+    options.push({
+      label: `${dateFormat} - ${formatDate(
+        inputDate,
+        timezone,
+        dateFormat,
+        false,
+        l
+      )}`,
+      value: df,
+    })
+  })
+  return options
+}

fittrackee_client/src/utils/records.ts

@@ -1,9 +1,12 @@
+import createI18n from '@/i18n'
 import { ITranslatedSport } from '@/types/sports'
 import { TUnit } from '@/types/units'
 import { ICardRecord, IRecord, IRecordsBySports } from '@/types/workouts'
-import { formatWorkoutDate, getDateWithTZ } from '@/utils/dates'
+import { formatDate, getDateFormat } from '@/utils/dates'
 import { convertDistance, units } from '@/utils/units'
 
+const { locale } = createI18n.global
+
 export const formatRecord = (
   record: IRecord,
   tz: string,
@@ -54,8 +57,7 @@ export const formatRecord = (
       )
   }
   return {
-    workout_date: formatWorkoutDate(getDateWithTZ(record.workout_date, tz), date_format)
-      .workout_date,
+    workout_date: formatDate(record.workout_date, tz, date_format, false),
     workout_id: record.workout_id,
     id: record.id,
     record_type: record.record_type,
@@ -76,8 +78,9 @@ export const getRecordsBySports = (
   useImperialUnits: boolean,
   display_ascent: boolean,
   date_format: string
-): IRecordsBySports =>
-  records
+): IRecordsBySports => {
+  date_format = getDateFormat(date_format, locale.value)
+  return records
     .filter((r) => (display_ascent ? true : r.record_type !== 'HA'))
     .reduce((sportList: IRecordsBySports, record) => {
       const sport = translatedSports.find((s) => s.id === record.sport_id)
@@ -95,3 +98,4 @@ export const getRecordsBySports = (
       }
       return sportList
     }, {})
+}