Add react-i18next integration

frontend/src/App.tsx

@@ -227,7 +227,7 @@ const App = connect((state) => ({login: state.login}))(function App({login}) {
                       target="_blank"
                       rel="noreferrer"
                     >
-                      {apiVersion ? t('App.footer.version', {apiVersion}) : t('App.footer.versionLoading')}
+                      Version {apiVersion ? t('App.footer.version', {apiVersion}) : t('App.footer.versionLoading')}
                     </a>
                   </List.Item>
                 </List>

frontend/src/pages/HomePage.tsx

@@ -14,23 +14,26 @@ import styles from './HomePage.module.less'
 function MostRecentTrack() {
   const {t} = useTranslation()
 
-  const tracks: Track[] | null = useObservable(
+  const track: Track | null = useObservable(
     () =>
       of(null).pipe(
-        switchMap(() => from(api.fetch("/tracks?limit=3"))),
+        switchMap(() => from(api.fetch('/tracks?limit=1'))),
-        map((response) => response?.tracks)
+        map((response) => response?.tracks?.[0])
       ),
     null,
     []
-  );
+  )
 
+  const {t} = useTranslation()
   return (
     <>
-      <Header as="h2">{t('HomePage.mostRecentTrack')}</Header>
+      <Header as="h2">Most recent tracks</Header>
-      <Loader active={track === null} />
+      <Loader active={tracks === null} />
-      {track === undefined ? (
+      {tracks?.length === 0 ? (
-        <NoPublicTracksMessage />
+        <Message>
-      ) : track ? (
+          No public tracks yet. <Link to="/upload">Upload the first!</Link>
+        </Message>
+      ) : tracks ? (
         <Item.Group>
           {tracks.map((track) => (
             <TrackListItem key={track.id} track={track} />
@@ -38,7 +41,7 @@ function MostRecentTrack() {
         </Item.Group>
       ) : null}
     </>
-  );
+  )
 }
 
 export default function HomePage() {
@@ -48,13 +51,13 @@ export default function HomePage() {
         <Grid.Row>
           <Grid.Column width={8}>
             <Stats />
-            <MostRecentTrack />
           </Grid.Column>
           <Grid.Column width={8}>
+            <MostRecentTrack />
             <RegionStats />
           </Grid.Column>
         </Grid.Row>
       </Grid>
     </Page>
-  );
+  )
 }