Translate region frontend

frontend/src/components/RegionStats/index.tsx

@@ -1,46 +1,36 @@
-import React, { useState, useCallback } from "react";
-import { pickBy } from "lodash";
-import {
-  Loader,
-  Statistic,
-  Pagination,
-  Segment,
-  Header,
-  Menu,
-  Table,
-  Icon,
-} from "semantic-ui-react";
-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 React, {useState, useCallback} from 'react'
+import {pickBy} from 'lodash'
+import {Loader, Statistic, Pagination, Segment, Header, Menu, Table, Icon} from 'semantic-ui-react'
+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 api from "api";
+import api from 'api'
+import {useTranslation} from 'react-i18next'
 
 function formatDuration(seconds) {
   return (
     Duration.fromMillis((seconds ?? 0) * 1000)
-      .as("hours")
-      .toFixed(1) + " h"
-  );
+      .as('hours')
+      .toFixed(1) + ' h'
+  )
 }
 
 export default function Stats() {
-  const [page, setPage] = useState(1);
-  const PER_PAGE = 10;
+  const {t} = useTranslation()
+  const [page, setPage] = useState(1)
+  const PER_PAGE = 10
   const stats = useObservable(
-    () =>
-      of(null).pipe(
-        switchMap(() => concat(of(null), from(api.get("/stats/regions"))))
-      ),
+    () => of(null).pipe(switchMap(() => concat(of(null), from(api.get('/stats/regions'))))),
     null
-  );
+  )
 
-  const pageCount = stats ? Math.ceil(stats.length / PER_PAGE) : 1;
+  const pageCount = stats ? Math.ceil(stats.length / PER_PAGE) : 1
 
   return (
     <>
-      <Header as="h2">Top Regions</Header>
+      <Header as="h2">{t('RegionStats.title')}</Header>
 
       <div>
         <Loader active={stats == null} />
@@ -48,36 +38,36 @@ export default function Stats() {
         <Table celled>
           <Table.Header>
             <Table.Row>
-              <Table.HeaderCell>Region name</Table.HeaderCell>
-              <Table.HeaderCell>Event count</Table.HeaderCell>
+              <Table.HeaderCell> {t('RegionStats.regionName')}</Table.HeaderCell>
+              <Table.HeaderCell>{t('RegionStats.eventCount')}</Table.HeaderCell>
             </Table.Row>
           </Table.Header>
 
           <Table.Body>
-            {stats
-              ?.slice((page - 1) * PER_PAGE, page * PER_PAGE)
-              ?.map((area) => (
-                <Table.Row key={area.id}>
-                  <Table.Cell>{area.name}</Table.Cell>
-                  <Table.Cell>{area.overtaking_event_count}</Table.Cell>
-                </Table.Row>
-              ))}
+            {stats?.slice((page - 1) * PER_PAGE, page * PER_PAGE)?.map((area) => (
+              <Table.Row key={area.id}>
+                <Table.Cell>{area.name}</Table.Cell>
+                <Table.Cell>{area.overtaking_event_count}</Table.Cell>
+              </Table.Row>
+            ))}
           </Table.Body>
 
-    {pageCount > 1 && <Table.Footer>
-            <Table.Row>
-              <Table.HeaderCell colSpan="2">
-                <Pagination
-                  floated="right"
-                  activePage={page}
-                  totalPages={pageCount}
-                  onPageChange={(e, data) => setPage(data.activePage as number)}
-                />
-              </Table.HeaderCell>
-            </Table.Row>
-          </Table.Footer>}
+          {pageCount > 1 && (
+            <Table.Footer>
+              <Table.Row>
+                <Table.HeaderCell colSpan="2">
+                  <Pagination
+                    floated="right"
+                    activePage={page}
+                    totalPages={pageCount}
+                    onPageChange={(e, data) => setPage(data.activePage as number)}
+                  />
+                </Table.HeaderCell>
+              </Table.Row>
+            </Table.Footer>
+          )}
         </Table>
       </div>
     </>
-  );
+  )
 }

frontend/src/pages/MapPage/LayerSidebar.tsx

@@ -72,12 +72,12 @@ function LayerSidebar({
             onChange={() => setMapConfigFlag('obsRegions.show', !showRegions)}
           />
           <label htmlFor="obsRegions.show">
-            <Header as="h4">Regions</Header>
+            <Header as="h4">{t('MapPage.sidebar.obsRegions.title')}</Header>
           </label>
         </List.Item>
         {showRegions && (
           <>
-            <List.Item>Color regions based on event count</List.Item>
+            <List.Item>{t('MapPage.sidebar.obsRegions.colorByEventCount')}</List.Item>
             <List.Item>
               <ColorMapLegend
                 twoTicks

frontend/src/pages/MapPage/RegionInfo.tsx

@@ -1,15 +1,16 @@
-import React, { useState, useCallback } from "react";
-import { createPortal } from "react-dom";
-import _ from "lodash";
-import { List, Header, Icon, Button } from "semantic-ui-react";
+import React from 'react'
+import {createPortal} from 'react-dom'
+import {useTranslation} from 'react-i18next'
+import {List, Header, Icon, Button} from 'semantic-ui-react'
 
-import styles from "./styles.module.less";
+import styles from './styles.module.less'
 
-export default function RegionInfo({ region, mapInfoPortal, onClose }) {
+export default function RegionInfo({region, mapInfoPortal, onClose}) {
+  const {t} = useTranslation()
   const content = (
     <>
       <div className={styles.closeHeader}>
-        <Header as="h3">{region.properties.name || "Unnamed region"}</Header>
+        <Header as="h3">{region.properties.name || t('MapPage.regionInfo.unnamedRegion')}</Header>
         <Button primary icon onClick={onClose}>
           <Icon name="close" />
         </Button>
@@ -17,17 +18,14 @@ export default function RegionInfo({ region, mapInfoPortal, onClose }) {
 
       <List>
         <List.Item>
-          <List.Header>Number of events</List.Header>
+          <List.Header>{t('MapPage.regionInfo.eventCount')}</List.Header>
           <List.Content>{region.properties.overtaking_event_count ?? 0}</List.Content>
         </List.Item>
       </List>
     </>
-  );
+  )
 
   return content && mapInfoPortal
-    ? createPortal(
-        <div className={styles.mapInfoBox}>{content}</div>,
-        mapInfoPortal
-      )
-    : null;
+    ? createPortal(<div className={styles.mapInfoBox}>{content}</div>, mapInfoPortal)
+    : null
 }

frontend/src/translations/de.yaml

@@ -158,6 +158,10 @@ MapPage:
     obsEvents:
       title: Überholvorgänge
 
+    obsRegions:
+      title: Regionen
+      colorByEventCount: Regionen eingefärbt nach Anzahl Überholungen
+
     filters:
       title: Filter
       needsLogin: Filter sind ohne Login nicht verfügbar.
@@ -203,6 +207,10 @@ MapPage:
       west: westwärts
       northWest: nordwestwärts
 
+  regionInfo:
+    unnamedRegion: Unbenannte Region
+    eventCount: Anzahl Überholungen
+
 SettingsPage:
   title: Einstellungen
 
@@ -343,3 +351,8 @@ TrackEditor:
       vorhanden bleiben.
 
       **Nutze diese Funktion mit Bedacht und auf dein eigenes Risiko.**
+
+RegionStats:
+  title: Top-Regionen
+  regionName: Region
+  eventCount: Anzahl Überholungen

frontend/src/translations/en.yaml

@@ -164,6 +164,10 @@ MapPage:
     obsEvents:
       title: Event points
 
+    obsRegions:
+      title: Regions
+      colorByEventCount: Color regions are based on event count
+
     filters:
       title: Filters
       needsLogin: No filters available without login.
@@ -208,6 +212,10 @@ MapPage:
       west: west bound
       northWest: north-west bound
 
+  regionInfo:
+    unnamedRegion: Unnamed region
+    eventCount: Event count
+
 SettingsPage:
   title: Settings
 
@@ -342,3 +350,8 @@ TrackEditor:
       later.
 
       **Use at your own risk.**
+
+RegionStats:
+  title: Top regions
+  regionName: Region name
+  eventCount: Event count

frontend/src/translations/fr.yaml

@@ -164,6 +164,10 @@ MapPage:
     obsEvents:
       title: Points d'événement
 
+    obsRegions:
+      title: Régions
+      colorByEventCount: Couleurs des régions sont basées sur le nombre d'événements
+
     filters:
       title: Filtres
       needsLogin: Aucun filtre disponible sans être connecté.
@@ -208,6 +212,10 @@ MapPage:
       west: Ouest
       northWest: Nord-Ouest
 
+  regionInfo:
+    unnamedRegion: Région sans nom
+    eventCount: Nombre de dépassements
+
 SettingsPage:
   title: Paramètres
 
@@ -343,3 +351,8 @@ TrackEditor:
       ou les rendez anonymes plus tard.
 
       **Utilisation à vos risques et périls.**
+
+RegionStats:
+  title: Top régions
+  regionName: Nom de la région
+  eventCount: Nombre de dépassements