fix language loading on landing page

client/src/components/landing_page.tsx

@@ -33,20 +33,12 @@ function GithubIcon({url='https://github.com'}) {
 }
 
 function Tile({gameId, data}: {gameId: string, data: GameTile|undefined}) {
-  let { t, i18n } = useTranslation()
+  let { t } = useTranslation()
   let navigate = useNavigate();
   const routeChange = () =>{
     navigate(gameId);
   }
 
-  // we use this to reload the tile 1x after the translation is loaded.
-  let [loadedTranslation, setLoadedTranslation] = React.useState(false)
-
-  // Load the namespace of the game
-  i18next.loadNamespaces(gameId).catch(err => {
-    console.warn(`translations for ${gameId} do not exist`)
-  }).then(() => {setLoadedTranslation(true)})
-
   if (typeof data === 'undefined') {
     return <></>
   }
@@ -105,8 +97,11 @@ function LandingPage() {
 
   const { t, i18n } = useTranslation()
 
-  let allTiles = lean4gameConfig.allGames.map((gameId) => {
+  // Load the namespaces of all games
+  // TODO: should `allGames` contain game-ids starting with `g/`?
+  i18next.loadNamespaces(lean4gameConfig.allGames.map(id => `g/${id}`))
 
+  let allTiles = lean4gameConfig.allGames.map((gameId) => {
     let q =  useGetGameInfoQuery({game: `g/${gameId}`})
 
     // if (q.isError) {
@@ -122,7 +117,6 @@ function LandingPage() {
     return q.data?.tile
   })
 
-
   return <div className="landing-page">
     <header style={{backgroundImage: `url(${bgImage})`}}>
       <nav className="landing-page-nav">

client/src/config.json

@@ -3,7 +3,6 @@
     "leanprover-community/nng4",
     "hhu-adam/robo",
     "djvelleman/stg4",
-    "miguelmarco/stg4",
     "trequetrum/lean4game-logic"
   ],
 

client/src/i18n.ts

@@ -3,13 +3,12 @@ import Backend from "i18next-http-backend"
 import { initReactI18next } from "react-i18next";
 
 i18n
-.use(initReactI18next) // passes i18n down to react-i18next
+.use(initReactI18next)
 .use(Backend)
 .init({
     ns: ['translation'],
     backend: {
-      // see https://github.com/i18next/i18next-http-backend
+      // > see https://github.com/i18next/i18next-http-backend
-
       loadPath: function(lngs, namespaces: Array<string>) {
         if (namespaces[0].startsWith("g/")) {
           return '/i18n/{{ns}}/{{lng}}/Game.json';
@@ -18,12 +17,18 @@ i18n
         }
       }
     },
-    lng: "en", // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
+    // > language to use, more information here:
-    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
+    // > https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
-    // if you're using a language detector, do not define the lng option
+    lng: "en",
+    // we use natural language keys, so we don't need a fallback language.
+    fallbackLng: false,
+    // > you can use the i18n.changeLanguage function to change the language manually:
+    // > https://www.i18next.com/overview/api#changelanguage
+    // > if you're using a language detector, do not define the lng option
     returnEmptyString: false,
     interpolation: {
-      escapeValue: false // react already safes from xss
+      // > react already safes from xss
+      escapeValue: false
     }
   });