Translate HomePage, Stats

frontend/src/components/Stats/index.tsx

@@ -5,6 +5,7 @@ import {useObservable} from 'rxjs-hooks'
 import {of, from, concat, combineLatest} from 'rxjs'
 import {map, switchMap, distinctUntilChanged} from 'rxjs/operators'
 import {Duration, DateTime} from 'luxon'
+import {useTranslation} from 'react-i18next'
 
 import api from 'api'
 
@@ -17,6 +18,7 @@ function formatDuration(seconds) {
 }
 
 export default function Stats({user = null}: {user?: null | string}) {
+  const {t} = useTranslation()
   const [timeframe, setTimeframe] = useState('all_time')
   const onClick = useCallback((_e, {name}) => setTimeframe(name), [setTimeframe])
 
@@ -63,35 +65,37 @@ export default function Stats({user = null}: {user?: null | string}) {
     [timeframe, user]
   )
 
+  const placeholder = t('Stats.placeholder')
+
   return (
     <>
-      <Header as="h2">{user && 'My '}Statistics</Header>
+      <Header as="h2">{user ? t('Stats.titleUser') : t('Stats.title')}</Header>
 
       <div>
         <Segment attached="top">
           <Loader active={stats == null} />
           <Statistic.Group widths={2} size="tiny">
             <Statistic>
-              <Statistic.Value>{stats ? `${Number(stats?.trackLength / 1000).toFixed(1)} km` : '...'}</Statistic.Value>
+              <Statistic.Value>{stats ? `${Number(stats?.trackLength / 1000).toFixed(1)} km` : placeholder}</Statistic.Value>
-              <Statistic.Label>Total track length</Statistic.Label>
+              <Statistic.Label>{t('Stats.totalTrackLength')}</Statistic.Label>
             </Statistic>
             <Statistic>
-              <Statistic.Value>{stats ? formatDuration(stats?.trackDuration) : '...'}</Statistic.Value>
+              <Statistic.Value>{stats ? formatDuration(stats?.trackDuration) : placeholder}</Statistic.Value>
-              <Statistic.Label>Time recorded</Statistic.Label>
+              <Statistic.Label>{t('Stats.timeRecorded')}</Statistic.Label>
             </Statistic>
             <Statistic>
-              <Statistic.Value>{stats?.numEvents ?? '...'}</Statistic.Value>
+              <Statistic.Value>{stats?.numEvents ?? placeholder}</Statistic.Value>
-              <Statistic.Label>Events confirmed</Statistic.Label>
+              <Statistic.Label>{t('Stats.eventsConfirmed')}</Statistic.Label>
             </Statistic>
             {user ? (
               <Statistic>
-                <Statistic.Value>{stats?.trackCount ?? '...'}</Statistic.Value>
+                <Statistic.Value>{stats?.trackCount ?? placeholder}</Statistic.Value>
-                <Statistic.Label>Tracks recorded</Statistic.Label>
+                <Statistic.Label>{t('Stats.tracksRecorded')}</Statistic.Label>
               </Statistic>
             ) : (
               <Statistic>
-                <Statistic.Value>{stats?.userCount ?? '...'}</Statistic.Value>
+                <Statistic.Value>{stats?.userCount ?? placeholder}</Statistic.Value>
-                <Statistic.Label>Members joined</Statistic.Label>
+                <Statistic.Label>{t('Stats.membersJoined')}</Statistic.Label>
               </Statistic>
             )}
           </Statistic.Group>
@@ -99,13 +103,13 @@ export default function Stats({user = null}: {user?: null | string}) {
 
         <Menu widths={3} attached="bottom" size="small">
           <Menu.Item name="this_month" active={timeframe === 'this_month'} onClick={onClick}>
-            This month
+            {t('Stats.thisMonth')}
           </Menu.Item>
           <Menu.Item name="this_year" active={timeframe === 'this_year'} onClick={onClick}>
-            This year
+            {t('Stats.thisYear')}
           </Menu.Item>
           <Menu.Item name="all_time" active={timeframe === 'all_time'} onClick={onClick}>
-            All time
+            {t('Stats.allTime')}
           </Menu.Item>
         </Menu>
       </div>

frontend/src/pages/HomePage.tsx

@@ -4,7 +4,7 @@ import {Message, Grid, Loader, Header, Item} from 'semantic-ui-react'
 import {useObservable} from 'rxjs-hooks'
 import {of, from} from 'rxjs'
 import {map, switchMap} from 'rxjs/operators'
-import {useTranslation} from 'react-i18next'
+import {useTranslation, Trans as Translate} from 'react-i18next'
 
 import api from 'api'
 import {Stats, Page, Map} from 'components'
@@ -13,6 +13,8 @@ import {TrackListItem} from './TracksPage'
 import styles from './HomePage.module.less'
 
 function MostRecentTrack() {
+  const {t} = useTranslation()
+
   const track: Track | null = useObservable(
     () =>
       of(null).pipe(
@@ -23,14 +25,15 @@ function MostRecentTrack() {
     []
   )
 
-  const {t} = useTranslation()
   return (
     <>
       <Header as="h2">{t('HomePage.mostRecentTrack')}</Header>
       <Loader active={track === null} />
       {track === undefined ? (
         <Message>
+          <Translate i18nKey="HomePage.noPublicTracks">
             No public tracks yet. <Link to="/upload">Upload the first!</Link>
+          </Translate>
         </Message>
       ) : track ? (
         <Item.Group>

frontend/src/translations/de.yaml

@@ -1,6 +1,3 @@
-HomePage:
-  mostRecentTrack: Neueste Aufzeichnung
-
 App:
   footer:
     aboutTheProject: Über das Projekt
@@ -29,3 +26,20 @@ App:
 
 LoginButton:
   login: Anmelden
+
+HomePage:
+  mostRecentTrack: Neueste Fahrt
+  noPublicTracks: Es gibt noch keine öffentlichen Fahrten. <1>Lade die erste hoch!</1>
+
+Stats:
+  title: Statistik
+  titleUser: Meine Statistik
+  placeholder: "..."
+  totalTrackLength: Gesamtfahrstrecke
+  timeRecorded: Aufzeichnungszeit
+  eventsConfirmed: Bestätigte Vorgänge
+  tracksRecorded: Aufgezeichnete Fahrten
+  membersJoined: Neue Mitglieder
+  thisMonth: Dieser Monat
+  thisYear: Dieses Jahr
+  allTime: Immer

frontend/src/translations/en.yaml

@@ -1,6 +1,3 @@
-HomePage:
-  mostRecentTrack: Most recent track
-
 locales:
   en: English
   de: Deutsch
@@ -33,3 +30,20 @@ App:
 
 LoginButton:
   login: Login
+
+HomePage:
+  mostRecentTrack: Most recent track
+  noPublicTracks: No public tracks yet. <1>Upload the first!</1>
+
+Stats:
+  title: Statistics
+  titleUser: My Statistic
+  placeholder: "..."
+  totalTrackLength: Total track length
+  timeRecorded: Time recorded
+  eventsConfirmed: Events confirmed
+  tracksRecorded: Tracks recorded
+  membersJoined: Members joined
+  thisMonth: This month
+  thisYear: This year
+  allTime: All time