Skeleton for language picker.

package.json

@@ -12,8 +12,10 @@
     "firebase": "^9.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-intl": "^5.21.1",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
+    "recoil": "^0.5.2",
     "sass": "^1.43.4",
     "typescript": "^4.1.2"
   },
@@ -21,7 +23,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "extract-intl": "NODE_ENV=development extract-messages -l=en,fi,sk -o src/translations -d en --flat false 'src/**/!(*.test).js'"
   },
   "eslintConfig": {
     "extends": [
@@ -44,6 +47,7 @@
     "fsevents": "^2.3.2"
   },
   "devDependencies": {
-    "@types/react-router-dom": "^5.3.1"
+    "@types/react-router-dom": "^5.3.1",
+    "extract-react-intl-messages": "^4.1.1"
   }
 }

src/App.tsx

@@ -1,10 +1,16 @@
 import "./App.scss";
 import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
+import { useRecoilValue } from 'recoil';
+import { currentLanguage } from './atoms/language';
 import { Main } from './pages/Main';
 import { Registration } from './pages/Registration';
+import { IntlProvider } from 'react-intl';
+import { localization } from './constants/localization';
 
 export default function App() {
+  const language = useRecoilValue(currentLanguage)
   return (
+    <IntlProvider locale={language} messages={localization[language]}>
       <Router>
         <Switch>
           <Route exact path="/:page">
@@ -16,5 +22,6 @@ export default function App() {
           <Redirect from="/" to="/program" />
         </Switch>
       </Router >
+    </IntlProvider>
   );
 }

src/atoms/language.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const currentLanguage = atom<string>({
+    key: "currentLanguage",
+    default: "fi"
+})

src/components/Header.tsx

@@ -1,10 +1,15 @@
+import { FormattedMessage } from 'react-intl';
+import { LanguagePicker } from './LanguagePicker';
 import "./styles/header.scss"
 
 export const Header = () => {
     return (
         <header className="App-header">
-            <h1>Lintu ja Maslo</h1>
+            <h1><FormattedMessage id="common.title" /></h1>
-            <p><i>Elokuussa 2022</i></p>
+            <p><i><FormattedMessage id="common.subtitle" /></i></p>
+            <div className="LanguagePicker-container">
+                <LanguagePicker />
+            </div>
         </header>
     )
 }

src/components/LanguagePicker.tsx

@@ -0,0 +1,24 @@
+import DownOutlined from '@ant-design/icons/lib/icons/DownOutlined';
+import { Dropdown, Menu } from 'antd';
+import { useRecoilState } from 'recoil';
+import { currentLanguage } from '../atoms/language';
+import { languageItems } from '../constants/languageItems';
+import "./styles/languagePicker.scss"
+
+export const LanguagePicker = () => {
+    const [lang, setLang] = useRecoilState(currentLanguage)
+
+    const menu = (
+        <Menu>
+            {languageItems.map(lang => {
+                return (<Menu.Item key={lang.value} onClick={e => setLang(e.key)}>{lang.label}</Menu.Item>);
+            })}
+        </Menu>
+    );
+
+    return (
+        <Dropdown overlay={menu} trigger={["click"]}>
+            <span className="dropdown">{lang} <DownOutlined /></span>
+        </Dropdown>
+    )
+}

src/components/styles/header.scss

@@ -11,3 +11,9 @@
 .App-header h1 {
   color: white;
 }
+
+.LanguagePicker-container {
+  display: flex;
+  justify-content: end;
+  width: 24%;
+}

src/components/styles/languagePicker.scss

@@ -0,0 +1,6 @@
+.ant-dropdown-trigger.dropdown {
+  width: 50px;
+  border-radius: 5%;
+  margin-bottom: 10px;
+  background-color: dimgray;
+}

src/constants/languageItems.ts

@@ -0,0 +1,6 @@
+import { LanguageItem } from '../types/languageItem';
+
+export const languageItems: LanguageItem[] = [
+    { label: "Suomi", value: "fi" },
+    { label: "Englanti", value: "en" }
+];

src/constants/localization/common/en.ts

@@ -0,0 +1,4 @@
+export const common: Record<string, string> = {
+    "common.title": "Lintu and Maslo",
+    "common.subtitle": "August 2022"
+}

src/constants/localization/common/fi.ts

@@ -0,0 +1,4 @@
+export const common: Record<string, string> = {
+    "common.title": "Lintu ja Maslo",
+    "common.subtitle": "Elokuussa 2022"
+}

src/constants/localization/en.ts

@@ -0,0 +1,7 @@
+import { common } from "./common/en";
+
+const en: Record<string, string> = {
+    ...common
+}
+
+export default en;

src/constants/localization/fi.ts

@@ -0,0 +1,7 @@
+import { common } from "./common/fi";
+
+const fi: Record<string, string> = {
+    ...common
+}
+
+export default fi;

src/constants/localization/index.ts

@@ -0,0 +1,7 @@
+import fi from "./fi";
+import en from "./en";
+
+export const localization: { [key: string]: Record<string, string> } = {
+    fi,
+    en
+}

src/index.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { RecoilRoot } from 'recoil';
 import './index.scss';
 import App from './App';
 
 ReactDOM.render(
   <React.StrictMode>
+    <RecoilRoot>
       <App />
+    </RecoilRoot>
   </React.StrictMode>,
   document.getElementById('root')
 );

src/types/languageItem.ts

@@ -0,0 +1,4 @@
+export type LanguageItem = {
+    label: string;
+    value: string;
+}