Bugfix/1832 different date formats in personal info

src/common/util/date.ts

@@ -3,12 +3,10 @@ import { bg, enUS } from 'date-fns/locale'
 
 export const formatDate = 'dd MMM yyyy'
 export const formatDatetime = 'dd MMM yyyy HH:mm:ss'
+export const dateViewFormat = 'dd.MM.yyyy'
 
-export const formatDateString = (dateString: string | Date, language?: string) => {
-  if (language) {
-    return Intl.DateTimeFormat(language).format(new Date(dateString))
-  }
-  return new Date(dateString).toLocaleDateString()
+export const formatDateString = (dateString: string | Date) => {
+  return format(new Date(dateString), 'dd.MM.yyyy')
 }
 
 const matchLocale = (language?: string): Locale => {

src/components/admin/modal/DetailsModal.tsx

@@ -47,7 +47,7 @@ function DetailsModal() {
                   <ListItem>
                     <ListItemText primary={row.row.person.email} secondary={row.row.person.phone} />
                   </ListItem>
-                  <ListItem>{formatDateString(row.row.createdAt, i18n?.language)}</ListItem>
+                  <ListItem>{formatDateString(row.row.createdAt)}</ListItem>
                   <ListItem>
                     <Typography variant="body2">{row.row.message || row.row.comment}</Typography>
                   </ListItem>

src/components/client/auth/profile/PersonalInfoTab.tsx

@@ -203,7 +203,7 @@ export default function PersonalInfoTab() {
               <p className={classes.bold}>{t('profile:personalInfo.birthday')}</p>
               <Typography sx={{ color: person?.birthday ? undefined : '#F22727' }}>
                 {person?.birthday
-                  ? formatDateString(person?.birthday, i18n?.language)
+                  ? formatDateString(person?.birthday)
                   : t('profile:personalInfo.noBirthday')}
               </Typography>
               <Box className={classes.editBox}>

src/components/client/blog/DateCreated.tsx

@@ -13,7 +13,7 @@ export default function DateCreated({ createdAt, showLabel = false }: Props) {
   if (!createdAt) return null
   return (
     <Typography variant="subtitle2" color={grey[600]}>
-      {showLabel && t('blog:created-on')} {formatDateString(createdAt, i18n?.language)}
+      {showLabel && t('blog:created-on')} {formatDateString(createdAt)}
     </Typography>
   )
 }

src/components/client/campaign-news/CampaignNewsList.tsx

@@ -111,7 +111,7 @@ export default function CampaignNewsList({ articles }: Props) {
                 <Grid container item gap={1} xs="auto">
                   <AvTimerIcon color="primary" />
                   <Typography className={classes.articlepublishedDate}>
-                    {formatDateString(article.publishedAt, i18n?.language)} &nbsp;
+                    {formatDateString(article.publishedAt)} &nbsp;
                     {dateToTime(article.publishedAt, i18n?.language)}
                   </Typography>
                 </Grid>

src/components/client/campaign-news/SingleArticlePage.tsx

@@ -96,7 +96,7 @@ export default function SingleArticlePage({ slug }: Props) {
             <Grid container item gap={1} xs="auto">
               <AvTimerIcon color="primary" />
               <Typography className={classes.articlepublishedDate}>
-                {formatDateString(article.publishedAt, i18n?.language)}
+                {formatDateString(article.publishedAt)}
               </Typography>
             </Grid>
             <Grid container item gap={1} xs="auto" style={{ maxWidth: '100%' }} wrap="nowrap">

src/components/client/campaign-news/secured/NewsAdminPage.tsx

@@ -87,7 +87,7 @@ export function NewsAdminPage({ slug, isAdmin }: Props) {
       flex: 1,
       minWidth: 140,
       renderCell: (params: GridRenderCellParams): React.ReactNode => {
-        return formatDateString(params.row.createdAt, i18n?.language)
+        return formatDateString(params.row.createdAt)
       },
     },
     {
@@ -99,15 +99,15 @@ export function NewsAdminPage({ slug, isAdmin }: Props) {
       minWidth: 200,
       renderCell: (params: GridRenderCellParams): React.ReactNode => {
         const date: Date = params.row.publishedAt
-        return date ? formatDateString(date, i18n?.language) : ''
+        return date ? formatDateString(date) : ''
       },
     },
     {
       field: 'editedAt',
       headerName: t('article.lastEdit'),
       headerClassName: classes.gridColumn,
       renderCell: (params: GridRenderCellParams): React.ReactNode => {
-        return params.row.editedAt ? formatDateString(params.row.editedAt, i18n?.language) : ''
+        return params.row.editedAt ? formatDateString(params.row.editedAt) : ''
       },
       minWidth: 200,
       flex: 1,

src/components/client/campaigns/CampaignNewsSection.tsx

@@ -199,7 +199,7 @@ export default function CampaignNewsSection({ campaign, canCreateArticle }: Prop
                         <Grid container item wrap="nowrap" gap={1}>
                           <AvTimerIcon color="action" />
                           <Typography className={classes.articlePublishedDate}>
-                            {`${formatDateString(article.publishedAt, i18n?.language)} ${dateToTime(
+                            {`${formatDateString(article.publishedAt)} ${dateToTime(
                               article.publishedAt,
                               i18n?.language,
                             )}`}
@@ -228,7 +228,7 @@ export default function CampaignNewsSection({ campaign, canCreateArticle }: Prop
                         <Grid container item gap={1} xs="auto">
                           <AvTimerIcon color="action" />
                           <Typography className={classes.articlePublishedDate}>
-                            {`${formatDateString(article.publishedAt, i18n?.language)} ${dateToTime(
+                            {`${formatDateString(article.publishedAt)} ${dateToTime(
                               article.publishedAt,
                               i18n?.language,
                             )}`}

src/components/common/form/FormDatePicker.tsx

@@ -2,9 +2,8 @@ import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers'
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
 import { format } from 'date-fns'
 import { useField, useFormikContext } from 'formik'
-import { useTranslation } from 'next-i18next'
 
-import { DATE_VALUE_FORMAT, getDateFormat } from 'common/util/date'
+import { DATE_VALUE_FORMAT, dateViewFormat } from 'common/util/date'
 
 /**
  * MUI date picker to be connected with Formik. Propagates updates to the passed Formik field name
@@ -15,9 +14,6 @@ import { DATE_VALUE_FORMAT, getDateFormat } from 'common/util/date'
 export default function FormDatePicker({ name, label }: { name: string; label: string }) {
   const [field] = useField(name)
   const { setFieldValue } = useFormikContext()
-  const { i18n } = useTranslation()
-
-  const dateViewFormat = getDateFormat(i18n?.language)
 
   const updateValue = (newValue: Date | null) => {
     let formattedValue

src/components/common/person/PersonInfo.tsx

@@ -56,7 +56,7 @@ function PersonInfo({ person }: Props) {
         </Typography>
         <Box className={classes.infoWrapper}>
           <Typography>
-            {t('person:info.createdAt')}: {formatDateString(person.createdAt, i18n?.language)}
+            {t('person:info.createdAt')}: {formatDateString(person.createdAt)}
           </Typography>
           <Typography>
             {t('person:info.company')}: {person.company.companyName}