Move language files to separate files.

src/App.js

@@ -40,84 +40,7 @@ import Japan from './Pages/Japan/Japan';
 import JapaneseMain from './Pages/Japan/JapaneseMain';
 import EquipmentPage from './Pages/Radio/equipmentPage';
 
-const languages = ['en', 'nl'];
+import { languages, getLanguage } from './Language/Language';
-
-export function getLanguage() {
-  const currentPath = window.location.pathname;
-  let language;
-  try {
-    const result = currentPath.split('/')[1];
-    if (languages.includes(result)) {
-      language = result;
-    } else {
-      throw new Error('Invalid language detected');
-    }
-  }
-  catch (error) {
-    language = 'en';
-  }
-  return language;
-}
-
-const languageStrings = {
-  en: {
-    // Common
-    and: 'and',
-    on: 'on',
-    // Titles
-    japanese: 'Japanese',
-    radio_amateur: 'Radio amateur',
-    software: 'Software',
-    // Education
-    certification: 'Certification',
-    completed: 'Completed',
-    courses: 'Courses',
-    education: 'Education',
-    issued: 'issued',
-    skills: 'Skills',
-    // Navigation
-    portal: 'Portal',
-    language: 'Language',
-    // Radio
-    equipment: 'Equipment',
-    fielddays: 'Field days',
-    nvisAntenna: 'NVIS Antenna',
-    // Footer
-    footer_contentparsed: 'Content is parsed by',
-    footer_madewith: 'This site was made with',
-  },
-  nl: {
-    // Common
-    and: 'en',
-    on: 'op',
-    // Titles
-    japanese: 'Japans',
-    radio_amateur: 'Radiozendamateur',
-    software: 'Software',
-    // Education
-    certification: 'Certificering',
-    completed: 'Voltooid',
-    courses: 'Cursussen',
-    education: 'Opleiding',
-    issued: 'uitgegeven',
-    skills: 'Vaardigheden',
-    // Navigation
-    portal: 'Portaal',
-    language: 'Taal',
-    // Radio
-    equipment: 'Apparatuur',
-    fielddays: 'Velddagen',
-    nvisAntenna: 'NVIS Antenne',
-    // Footer
-    footer_contentparsed: 'Inhoud is verwerkt door',
-    footer_madewith: 'Deze website is gemaakt met',
-  },
-};
-
-export function getString(key) {
-  const language = getLanguage();
-  return languageStrings[language][key] || `{${key}}`;
-}
 
 function App() {
   const language = getLanguage();

src/Language/Language.js

@@ -0,0 +1,18 @@
+export const languages = ['en', 'nl'];
+
+export function getLanguage() {
+    const currentPath = window.location.pathname;
+    let language;
+    try {
+        const result = currentPath.split('/')[1];
+        if (languages.includes(result)) {
+            language = result;
+        } else {
+            throw new Error('Invalid language detected');
+        }
+    }
+    catch (error) {
+        language = 'en';
+    }
+    return language;
+}

src/Language/LanguageStrings.js

@@ -0,0 +1,65 @@
+import { getLanguage } from "./Language";
+
+const languageStrings = {
+    en: {
+        // Common
+        and: 'and',
+        on: 'on',
+        // Titles
+        japanese: 'Japanese',
+        radio_amateur: 'Radio amateur',
+        software: 'Software',
+        // Japan
+        download_map_at_github: 'Get this map at Github',
+        // Education
+        certification: 'Certification',
+        completed: 'Completed',
+        courses: 'Courses',
+        education: 'Education',
+        issued: 'issued',
+        skills: 'Skills',
+        // Navigation
+        portal: 'Portal',
+        language: 'Language',
+        // Radio
+        equipment: 'Equipment',
+        fielddays: 'Field days',
+        nvisAntenna: 'NVIS Antenna',
+        // Footer
+        footer_contentparsed: 'Content is parsed by',
+        footer_madewith: 'This site was made with',
+    },
+    nl: {
+        // Common
+        and: 'en',
+        on: 'op',
+        // Titles
+        japanese: 'Japans',
+        radio_amateur: 'Radiozendamateur',
+        software: 'Software',
+        // Japan
+        download_map_at_github: 'Download deze kaart op Github',
+        // Education
+        certification: 'Certificering',
+        completed: 'Voltooid',
+        courses: 'Cursussen',
+        education: 'Opleiding',
+        issued: 'uitgegeven',
+        skills: 'Vaardigheden',
+        // Navigation
+        portal: 'Portaal',
+        language: 'Taal',
+        // Radio
+        equipment: 'Apparatuur',
+        fielddays: 'Velddagen',
+        nvisAntenna: 'NVIS Antenne',
+        // Footer
+        footer_contentparsed: 'Inhoud is verwerkt door',
+        footer_madewith: 'Deze website is gemaakt met',
+    },
+};
+
+export function getString(key) {
+    const language = getLanguage();
+    return languageStrings[language][key] || `{${key}}`;
+}

src/Pages/Japan/Japan.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import JapanMap from './components/JapanMap';
 import Dropdown from './components/Dropdown';
-import { getLanguage } from '../../App';
+import { getString } from '../../Language/LanguageStrings'
 
 const Japan = () => {
     const [selectedColor, setSelectedColor] = useState('');
@@ -10,8 +10,6 @@ const Japan = () => {
         setSelectedColor(event.target.value);
     };
 
-    const language = getLanguage();
-
     return (
         <article className='main-page'>
             <div className='row'>
@@ -21,7 +19,7 @@ const Japan = () => {
                 </div>
             </div>
             <div className='row'>
-                <p><a href='https://github.com/PA4KEV/japan-vector-map'>Get this map at Github</a></p>
+                <p><a href='https://github.com/PA4KEV/japan-vector-map'>{getString('download_map_at_github')}</a></p>
             </div>
         </article>
     )

src/Pages/Japan/JapaneseMain.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import Emoji from '../../Content/Emoji';
 import MarkdownPage from '../markdownPage';
-import { getLanguage, getString } from '../../App';
+import { getLanguage } from '../../Language/Language';
+import { getString } from '../../Language/LanguageStrings'
 
 const JapaneseMain = () => {
     const language = getLanguage();

src/Pages/Radio/RadioMain.js

@@ -2,7 +2,8 @@ import React from 'react';
 import Emoji from '../../Content/Emoji';
 import { Link } from 'react-router-dom';
 import MarkdownPage from '../markdownPage';
-import { getLanguage, getString } from '../../App';
+import { getLanguage } from '../../Language/Language';
+import { getString } from '../../Language/LanguageStrings'
 import FielddaysTable from './fielddays/fielddaysTable';
 
 const RadioMain = () => {

src/Pages/Software/SoftwareMain.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import Emoji from '../../Content/Emoji';
 import MarkdownPage from '../markdownPage';
-import { getLanguage, getString } from '../../App';
+import { getLanguage } from '../../Language/Language';
+import { getString } from '../../Language/LanguageStrings'
 import educationData from './education.json'
 
 const SoftwareMain = () => {

src/UI/Breadcrumbs.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { getLanguage } from '../App';
+import { getLanguage } from '../Language/Language';
 import { useTheme } from '../ThemeContext';
 
 const Breadcrumbs = ({ separator, path, children }) => {

src/UI/Footer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTheme } from '../ThemeContext';
 import './Footer.css';
-import { getString } from '../App';
+import { getString } from '../Language/LanguageStrings'
 
 
 const Footer = () => {

src/UI/Navigation.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { useTheme } from '../ThemeContext';
-import { getString, getLanguage } from '../App';
+import { getLanguage } from '../Language/Language';
+import { getString } from '../Language/LanguageStrings'
 
 import './Navigation.css';