Fix translation interpolation

frontend/src/App.tsx

@@ -213,7 +213,6 @@ const App = connect((state) => ({login: state.login}))(function App({login}) {
                   <List.Item>
                     <a href={config?.privacyPolicyUrl} target="_blank" rel="noreferrer">
                       {t('App.footer.privacyPolicy')}
-                      Privacy policy
                     </a>
                   </List.Item>
                   <List.Item>

frontend/src/components/FormattedDate.tsx

@@ -1,4 +1,5 @@
 import {DateTime} from 'luxon'
+import {useTranslation} from 'react-i18next'
 
 export default function FormattedDate({date, relative = false}) {
   if (date == null) {
@@ -10,11 +11,15 @@ export default function FormattedDate({date, relative = false}) {
 
   let str
 
+  const {i18n} = useTranslation()
+  const locale = i18n.language
+
   if (relative) {
-    str = dateTime.toRelative()
+    str = dateTime.setLocale(locale).toRelative()
   } else {
-    str = dateTime.toLocaleString(DateTime.DATETIME_MED)
+    str = dateTime.setLocale(locale).toLocaleString(DateTime.DATETIME_MED)
   }
 
-  return <span title={dateTime.toISO()}>{str}</span>
+  const iso = dateTime.toISO()
+  return <time dateTime={iso} title={iso}>{str}</time>
 }

frontend/src/pages/TracksPage.tsx

@@ -9,7 +9,7 @@ import _ from 'lodash'
 import {useTranslation, Trans as Translate} from 'react-i18next'
 
 import type {Track} from 'types'
-import {Avatar, Page, StripMarkdown} from 'components'
+import {Avatar, Page, StripMarkdown, FormattedDate} from 'components'
 import api from 'api'
 import {useQueryParam} from 'query'
 
@@ -104,9 +104,10 @@ export function TrackListItem({track, privateTracks = false}) {
           {track.title || t('general.unnamedTrack')}
         </Item.Header>
         <Item.Meta>
-          <Translate i18nKey="TracksPage.createdBy">
-            Created by <span style={{margin: 0}}>{{author: track.author.username}}</span> on <span style={{margin: 0}}>{{date: track.createdAt}}</span>
-          </Translate>
+          {privateTracks ? null : <span>{t('TracksPage.createdBy', {author: track.author.username})}</span>}
+          <span>
+            <FormattedDate date={track.createdAt} />
+          </span>
         </Item.Meta>
         <Item.Description>
           <StripMarkdown>{maxLength(track.description, 200)}</StripMarkdown>

frontend/src/translations/de.yaml

@@ -20,7 +20,7 @@ App:
     thisInstallation: Diese Installation
     privacyPolicy: Datenschutz
     imprint: Impressum
-    version: Version v{apiVersion}
+    version: Version v{{apiVersion}}
     versionLoading: Version lädt...
 
     changeLanguage: Sprache wechseln
@@ -57,7 +57,7 @@ TracksPage:
   titlePublic: Öffentliche Fahrten
   titleUser: Meine Fahrten
   noPublicTracks: Es gibt noch keine öffentlichen Fahrten. <1>Lade die erste hoch!</1>
-  createdBy:  Erstellt von <1>{{author}}</1> am <1>{{date}}</1>
+  createdBy: Erstellt von {{author}}
   upload: Hochladen
 
   processing:
@@ -93,7 +93,7 @@ ExportPage:
     label: Geografischer Bereich
 
 UploadPage:
-  uploadProgress: Lade hoch {progress}%
+  uploadProgress: Lade hoch {{progress}}%
   processing: Verarbeiten...
 
   table:
@@ -109,7 +109,7 @@ FileUploadField:
 
 LoginRedirectPage:
   loginError: Login error
-  loginErrorText: "The login server reported: {error}"
+  loginErrorText: "The login server reported: {{error}}"
 
   loggingIn: Logging you in
   hangTight: Hang tight...

frontend/src/translations/en.yaml

@@ -24,7 +24,7 @@ App:
     thisInstallation: This installation
     privacyPolicy: Privacy policy
     imprint: Imprint
-    version: Version v{apiVersion}
+    version: Version v{{apiVersion}}
     versionLoading: Fetching version...
 
     changeLanguage: Change language
@@ -61,7 +61,7 @@ TracksPage:
   titlePublic: Public tracks
   titleUser: My tracks
   noPublicTracks: No public tracks yet. <1>Upload the first!</1>
-  createdBy:  Created by <1>{author}</1> on <1>{date}</1>
+  createdBy: Created by {{author}}
   upload: Upload
 
   processing:
@@ -98,7 +98,7 @@ ExportPage:
     label: Bounding Box
 
 UploadPage:
-  uploadProgress: Uploading {progress}%
+  uploadProgress: Uploading {{progress}}%
   processing: Processing...
 
   table:
@@ -114,7 +114,7 @@ FileUploadField:
 
 LoginRedirectPage:
   loginError: Loginfehler
-  loginErrorText: "Der Login-Server meldet: {error}"
+  loginErrorText: "Der Login-Server meldet: {{error}}"
 
   loggingIn: Du wirst eingeloggt
   hangTight: Bitte warten...