Refactor page title translation

RodBrowning · Jul 27, 2022 · 531ee80 · 531ee80
1 parent 2373f83
commit 531ee80
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -4,25 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title></title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
-    <script>
-      const userLocale = () => {
-        return navigator && navigator.languages && navigator.languages.length
-          ? navigator.languages[0]
-          : navigator.language;
-      };
-      const isPortuguese = () => {
-        return userLocale() === 'pt-BR';
-      };
-      if (isPortuguese()) {
-        document.title = 'Conversor de moedas';
-      } else {
-        document.title = 'Currency converter';
-      }
-    </script>
   </body>
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,5 @@
 import './App.scss';
+import './App-mobile.scss';
 
 import React, { useEffect, useRef, useState } from 'react';
 
@@ -7,6 +8,7 @@ import Flag from './Components/Flags';
 import { ILatest } from './Types/Latest';
 import { ISymbols } from './Types/Symbols';
 import fetchFrom from './Utils/fetch';
+import getTranslatedTitle from './Utils/translatedTitles';
 
 export interface ICurrenciesInfo {
   symbols: ISymbols;
@@ -46,6 +48,10 @@ const App: React.FC = () => {
     }
   };
 
+  useEffect(() => {
+    document.title = getTranslatedTitle();
+  }, []);
+
   useEffect(() => {
     if (!firstRender.current) return;
     fetchCurrenciesAPI();

diff --git a/src/Utils/translatedTitles.ts b/src/Utils/translatedTitles.ts
@@ -0,0 +1,22 @@
+const TranslatedTitles: { [language: string]: string } = {
+  pt: 'Conversor de moedas',
+  es: 'Convertidor de moneda',
+  en: 'Currency converter',
+};
+
+const userLocale = () => {
+  const lang =
+    navigator && navigator.languages && navigator.languages.length ? navigator.languages[0] : navigator.language;
+  return lang.split('-')[0];
+};
+
+const hasTranslation = () => {
+  return TranslatedTitles[userLocale()] !== undefined;
+};
+
+const getTranslatedTitle = () => {
+  if (!hasTranslation()) return TranslatedTitles.en;
+  return TranslatedTitles[userLocale()];
+};
+
+export default getTranslatedTitle;