Getting a feel for desired multi-language approach #424

src/js/locale/de.yaml

@@ -0,0 +1,3 @@
+sidebar:
+  now_playing: GERMAN
+  search: GERMAN

src/js/locale/dictionaries.js

@@ -0,0 +1,12 @@
+import en from './en.yaml';
+import de from './de.yaml';
+
+export default {
+  en,
+  de,
+};
+
+export {
+  en,
+  de,
+};

src/js/locale/en.yaml

@@ -0,0 +1,25 @@
+sidebar:
+  now_playing: Now playing
+  search: Search
+  discover: Discover
+  genre: Genre / Mood
+  featured_playlists: Featured playlists
+  new_releases: New releases
+  my_music: My music
+  playlists: Playlists
+  artists: Artists
+  albums: Albums
+  tracks: Tracks
+  browse: Browse
+  settings: Settings
+  not_connected: %{name} not connected
+now_playing:
+  title: Now playing
+  context_actions:
+    radio: Radio
+    history: History
+    add_uri: Add URI
+  current_track:
+    playing_from: Playling from
+    shuffle: Shuffle
+    clear: Clear

src/js/locale/index.js

@@ -0,0 +1,54 @@
+import React, { Fragment } from 'react';
+import { useSelector } from 'react-redux';
+import get from 'lodash/get';
+import dictionaries from './dictionaries';
+import { titleCase } from '../util/helpers';
+
+const PARAMS_REG_EXP = '%{(.*?)}';
+const paramsRegExp = new RegExp(PARAMS_REG_EXP, 'g');
+
+const content = (path, params = {}, transform, dictionary) => {
+
+  let value = get((dictionary || dictionaries.en), path, '');
+  value = value.replace(
+    paramsRegExp,
+    (replaceText, key) => params.hasOwnProperty(key) ? params[key] : '',
+  );
+
+  switch (transform) {
+    case 'upper':
+      value = value.toUpperCase();
+      break;
+    case 'lower':
+      value = value.toLowerCase();
+      break;
+    case 'title':
+      value = titleCase(value);
+      break;
+    default:
+      break;
+  }
+
+  return value;
+};
+
+const Content = ({ path, params = {}, transform, children }) => {
+  const language = useSelector((state) => state.ui.language);
+  const dictionary = dictionaries[language];
+  return (
+    <Fragment>
+      {content(path, params, transform, dictionary)}
+      {children}
+    </Fragment>
+  );
+}
+
+export default {
+  Content,
+  content,
+};
+
+export {
+  Content,
+  content,
+};