feat(menu-languages): add languages to menu

ubilabs · Nov 6, 2019 · 190ba2c · 190ba2c
1 parent ca7af8b
commit 190ba2c
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 13 deletions.
diff --git a/i18n/de.json b/i18n/de.json
@@ -7,5 +7,11 @@
   "goBack": "Zurück",
   "storymode": "Geschichtsmodus",
   "projection": "Projektion",
-  "menu": "Menü"
+  "menu": "Menü",
+  "presenter-mode": "Präsentations-Modus",
+  "showcase-mode": "Show-Case-Modus",
+  "language": "Sprache wechseln",
+  "share": "Inhalt teilen",
+  "export": "Daten exportieren",
+  "info": "Weitere Informationen"
 }
diff --git a/i18n/en.json b/i18n/en.json
@@ -7,5 +7,11 @@
   "goBack": "Go back",
   "storymode": "Story Mode",
   "projection": "Projection",
-  "menu": "Menu"
+  "menu": "Menu",
+  "presenter-mode": "Presenter Mode",
+  "showcase-mode": "Show Case Mode",
+  "language": "Change language",
+  "share": "Share Content",
+  "export": "Export Data",
+  "info": "More Information"
 }
diff --git a/src/scripts/components/menu/menu.tsx b/src/scripts/components/menu/menu.tsx
@@ -16,27 +16,31 @@ import {MenuItem} from '../../types/menu-item';
 import styles from './menu.styl';
 
 const Menu: FunctionComponent = () => {
+  const intl = useIntl();
   const menuItems: MenuItem[] = [
     {
       id: 'presenter-mode',
-      name: 'Presenter Mode',
+      name: intl.formatMessage({id: 'presenter-mode'}),
       link: '/present',
       icon: PresenterIcon
     },
     {
       id: 'show-case-mode',
-      name: 'Show Case Mode',
+      name: intl.formatMessage({id: 'showcase-mode'}),
       link: '/showcase',
       icon: ShowCaseIcon
     },
-    {id: 'language', name: 'Change language', icon: LanguageIcon},
-    {id: 'share', name: 'Share Content', icon: ShareIcon},
-    {id: 'export', name: 'Export Data', icon: ExportIcon},
-    {id: 'info', name: 'More Information', icon: InfoIcon}
+    {
+      id: 'language',
+      name: intl.formatMessage({id: 'language'}),
+      icon: LanguageIcon
+    },
+    {id: 'share', name: intl.formatMessage({id: 'share'}), icon: ShareIcon},
+    {id: 'export', name: intl.formatMessage({id: 'export'}), icon: ExportIcon},
+    {id: 'info', name: intl.formatMessage({id: 'info'}), icon: InfoIcon}
   ];
 
   const [isOpen, setIsOpen] = useState(false);
-  const intl = useIntl();
   const onButtonClickHandler = () => setIsOpen(!isOpen);
 
   return (

diff --git a/src/scripts/components/presentation-selector/presentation-selector.tsx b/src/scripts/components/presentation-selector/presentation-selector.tsx
@@ -1,5 +1,6 @@
 import React, {FunctionComponent} from 'react';
 import {Link} from 'react-router-dom';
+import {FormattedMessage} from 'react-intl';
 
 import StoryList from '../story-list/story-list';
 
@@ -8,9 +9,11 @@ import styles from './presentation-selector.styl';
 const PresentationSelector: FunctionComponent = () => (
   <div className={styles.presentationSelector}>
     <Link to="/" className={styles.backButton}>
-      Go back
+      <FormattedMessage id="goBack" />
     </Link>
-    <h1 className={styles.title}>Presenter Mode</h1>
+    <h1 className={styles.title}>
+      <FormattedMessage id="presenter-mode" />
+    </h1>
     <StoryList />
   </div>
 );

diff --git a/src/scripts/components/showcase-selector/showcase-selector.tsx b/src/scripts/components/showcase-selector/showcase-selector.tsx
@@ -1,5 +1,6 @@
 import React, {FunctionComponent} from 'react';
 import {Link} from 'react-router-dom';
+import {FormattedMessage} from 'react-intl';
 
 import StoryList from '../story-list/story-list';
 
@@ -8,9 +9,11 @@ import styles from './showcase-selector.styl';
 const ShowcaseSelector: FunctionComponent = () => (
   <div className={styles.showcaseSelector}>
     <Link to="/" className={styles.backButton}>
-      Go back
+      <FormattedMessage id="goBack" />
     </Link>
-    <h1 className={styles.title}>Showcase Mode</h1>
+    <h1 className={styles.title}>
+      <FormattedMessage id="showcase-mode" />
+    </h1>
     <StoryList />
   </div>
 );