Grab first available language as default if one isn't set, localize missing translation fallbacks (#110)

* setting up getOptions to return the first lagnuage available as default if a default language isn't provided

* set up the missing translation callback to localize the translation before passing it as a value

* prettier and fixing some flow issues with onMissingTranslation fixes

* Import ComponentClass and Component (#106)

Both ComponentClass and Component should be imported from `react`. `react-redux` doesn't contain those two.

* update CHANGELOG

* 3.2.2

* move onMissingTranslation logic from getLocalizedElement to getTranslate

* fix flow issues

* remove uneeded import from TS definition

* add missing default translation message

Author: ryandrewjohnson

.flowconfig

@@ -12,3 +12,4 @@
 [options]
 module.ignore_non_literal_requires=true
 module.name_mapper='react-localize-redux' -> '<PROJECT_ROOT>/src/index.js'
+suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe

src/Translate.js

@@ -83,7 +83,10 @@ class WrappedTranslate extends React.Component<TranslateWithContextProps> {
       const translation = renderToStaticMarkup(children);
       context.addTranslationForLanguage &&
         context.addTranslationForLanguage(
-          { [id]: translation },
+          {
+            // $FlowFixMe: flow complains that type of id can't be undefined, but we already guard against this in the checks above
+            [id]: translation
+          },
           defaultLanguage
         );
     }

src/index.d.ts

@@ -5,7 +5,6 @@ import {
   ComponentType
 } from 'react';
 import { Store } from 'redux';
-import { ComponentClass, Component } from 'react';
 
 export as namespace ReactLocalizeRedux;
 
@@ -32,7 +31,7 @@ type TransFormFunction = (
 type MissingTranslationOptions = {
   translationId: string;
   languageCode: string;
-  defaultTranslation: string;
+  defaultTranslation: LocalizedElement;
 };
 
 export type onMissingTranslationFunction = (

src/localize.js

@@ -52,10 +52,22 @@ export type InitializeOptions = {
   ignoreTranslateChildren?: boolean
 };
 
+// This is to get around the whole default options issue with Flow
+// I tried using the $Diff approach, but with no luck so for now stuck with this terd.
+// Because sometimes you just want flow to shut up!
+type InitializeOptionsRequired = {
+  renderToStaticMarkup: renderToStaticMarkupFunction | false,
+  renderInnerHtml: boolean,
+  onMissingTranslation: onMissingTranslationFunction,
+  defaultLanguage: string,
+  ignoreTranslateChildren: boolean
+};
+
 export type TranslateOptions = {
   language?: string,
   renderInnerHtml?: boolean,
   onMissingTranslation?: onMissingTranslationFunction,
+  defaultLanguage?: string,
   ignoreTranslateChildren?: boolean
 };
 
@@ -66,7 +78,7 @@ export type AddTranslationOptions = {
 export type LocalizeState = {
   +languages: Language[],
   +translations: Translations,
-  +options: InitializeOptions
+  +options: InitializeOptionsRequired
 };
 
 export type TranslatedLanguage = {
@@ -102,7 +114,7 @@ export type MultipleLanguageTranslation = {
 type MissingTranslationOptions = {
   translationId: string,
   languageCode: string,
-  defaultTranslation: string
+  defaultTranslation: LocalizedElement
 };
 
 export type onMissingTranslationFunction = (
@@ -274,9 +286,9 @@ export function translations(
 }
 
 export function options(
-  state: InitializeOptions = defaultTranslateOptions,
+  state: InitializeOptionsRequired = defaultTranslateOptions,
   action: ActionDetailed
-): InitializeOptions {
+): InitializeOptionsRequired {
   switch (action.type) {
     case INITIALIZE:
       const options: any = action.payload.options || {};
@@ -288,10 +300,11 @@ export function options(
   }
 }
 
-export const defaultTranslateOptions: InitializeOptions = {
+export const defaultTranslateOptions: InitializeOptionsRequired = {
   renderToStaticMarkup: false,
   renderInnerHtml: false,
   ignoreTranslateChildren: false,
+  defaultLanguage: '',
   onMissingTranslation: ({ translationId, languageCode }) =>
     'Missing translationId: ${ translationId } for language: ${ languageCode }'
 };
@@ -361,8 +374,20 @@ export const getTranslations = (state: LocalizeState): Translations => {
 export const getLanguages = (state: LocalizeState): Language[] =>
   state.languages;
 
-export const getOptions = (state: LocalizeState): InitializeOptions =>
-  state.options;
+export const getOptions = (state: LocalizeState): InitializeOptionsRequired => {
+  const options = Object.assign({}, state.options);
+  let languages;
+
+  // If there isn't a default language, grab the first languages from the
+  // available languages as default
+
+  if (!options.defaultLanguage) {
+    languages = getLanguages(state) || [];
+    options.defaultLanguage = languages[0] ? languages[0].code : '';
+  }
+
+  return options;
+};
 
 export const getActiveLanguage = (state: LocalizeState): Language => {
   const languages = getLanguages(state);
@@ -452,43 +477,60 @@ export const getTranslate: Selector<
           : translationsForActiveLanguage;
 
       const defaultTranslations =
-        activeLanguage &&
-        activeLanguage.code === initializeOptions.defaultLanguage
+        activeLanguage && activeLanguage.code === defaultLanguage
           ? translationsForActiveLanguage
-          : initializeOptions.defaultLanguage !== undefined
-            ? getTranslationsForLanguage(initializeOptions.defaultLanguage)
-            : {};
+          : getTranslationsForLanguage(defaultLanguage);
 
       const languageCode =
         overrideLanguage !== undefined
           ? overrideLanguage
           : activeLanguage && activeLanguage.code;
 
-      const onMissingTranslation = (translationId: string) => {
-        return mergedOptions.onMissingTranslation({
-          translationId,
+      const mergedOptions = { ...defaultOptions, ...translateOptions };
+
+      const getTranslation = (translationId: string) => {
+        const hasValidTranslation = translations[translationId] !== undefined;
+        const hasValidDefaultTranslation =
+          defaultTranslations[translationId] !== undefined;
+
+        const defaultTranslation = hasValidDefaultTranslation
+          ? getLocalizedElement({
+              translation: defaultTranslations[translationId],
+              data,
+              renderInnerHtml: mergedOptions.renderInnerHtml
+            })
+          : "No default translation found! Ensure you've added translations for your default langauge.";
+
+        // if translation is not valid then generate the on missing translation message in it's place
+        const translation = hasValidTranslation
+          ? translations[translationId]
+          : mergedOptions.onMissingTranslation({
+              translationId,
+              languageCode,
+              defaultTranslation
+            });
+
+        // if translations are missing than ovrride data to include translationId, languageCode
+        // as these will be needed to render missing translations message
+        const translationData = hasValidTranslation
+          ? data
+          : { translationId, languageCode };
+
+        return getLocalizedElement({
+          translation,
+          data: translationData,
           languageCode,
-          defaultTranslation: defaultTranslations[translationId]
+          renderInnerHtml: mergedOptions.renderInnerHtml
         });
       };
 
-      const mergedOptions = { ...defaultOptions, ...translateOptions };
-      const { renderInnerHtml } = mergedOptions;
-      const sharedParams = {
-        translations,
-        data,
-        languageCode,
-        renderInnerHtml,
-        onMissingTranslation
-      };
-
       if (typeof value === 'string') {
-        return getLocalizedElement({ translationId: value, ...sharedParams });
+        return getTranslation(value);
       } else if (Array.isArray(value)) {
         return value.reduce((prev, cur) => {
           return {
             ...prev,
-            [cur]: getLocalizedElement({ translationId: cur, ...sharedParams })
+            [cur]: getTranslation(cur)
           };
         }, {});
       } else {

src/utils.js

@@ -16,33 +16,17 @@ import type {
 } from './localize';
 
 type LocalizedElementOptions = {
-  translationId: string,
-  translations: TranslatedLanguage,
+  translation: string,
   data: TranslatePlaceholderData,
-  languageCode: string,
-  renderInnerHtml: boolean,
-  onMissingTranslation: (translationId: string) => string
+  renderInnerHtml: boolean
 };
 
 export const getLocalizedElement = (
   options: LocalizedElementOptions
 ): LocalizedElement => {
-  const {
-    translationId,
-    translations,
-    data,
-    renderInnerHtml,
-    onMissingTranslation
-  } = options;
-  const localizedString =
-    translations[translationId] || onMissingTranslation(translationId);
-  const placeholderData = translations[translationId]
-    ? data
-    : {
-        translationId: options.translationId,
-        languageCode: options.languageCode
-      };
-  const translatedValueOrArray = templater(localizedString, placeholderData);
+  const { translation, data, renderInnerHtml } = options;
+
+  const translatedValueOrArray = templater(translation, data);
 
   // if result of templater is string, do the usual stuff
   if (typeof translatedValueOrArray === 'string') {
@@ -150,7 +134,7 @@ export const validateOptions = (
     typeof options.renderToStaticMarkup !== 'function'
   ) {
     throw new Error(`
-      react-localize-redux: initialize option renderToStaticMarkup is invalid. 
+      react-localize-redux: initialize option renderToStaticMarkup is invalid.
       Please see https://ryandrewjohnson.github.io/react-localize-docs/#initialize.
     `);
   }

tests/localize.test.js

@@ -3,6 +3,7 @@ import Adapter from 'enzyme-adapter-react-16';
 import {
   languages,
   translations,
+  getOptions,
   getActiveLanguage,
   getTranslationsForActiveLanguage,
   getTranslationsForSpecificLanguage,
@@ -658,7 +659,8 @@ describe('localize', () => {
           bye: ['bye-en', 'bye-fr'],
           yo: ['yo ${ name }', 'yo-fr ${ name }'],
           foo: ['foo ${ bar }', 'foo-fr ${ bar }'],
-          html: ['<b>hi-en</b>', '<b>hi-fr</b>']
+          html: ['<b>hi-en</b>', '<b>hi-fr</b>'],
+          money_no_translation: ['save $${ amount }']
         },
         options: defaultTranslateOptions
       };
@@ -749,6 +751,19 @@ describe('localize', () => {
       );
     });
 
+    it('should set first language available as default when no default is set', () => {
+      const options = getOptions(state);
+      expect(options.defaultLanguage).toBe(state.languages[0].code);
+    });
+
+    it('should return value using default language when missing a translation with USD hard coded into translation', () => {
+      state.options.onMissingTranslation = ({ defaultTranslation }) => defaultTranslation;
+      const key = 'money_no_translation';
+      const translate = getTranslate(state);
+      const result = translate([key], { amount: 100 });
+      expect(result[key]).toBe('save $100')
+    });
+
     it('should return value from onMissingTranslation option override', () => {
       state.options.onMissingTranslation = ({ translationId, languageCode }) =>
         '${translationId} - ${languageCode}';

tests/utils.test.js

@@ -13,50 +13,35 @@ describe('locale utils', () => {
     it('should return element with localized string', () => {
       const translations = { test: 'Here is my test' };
       const result = utils.getLocalizedElement({
-        translationId: 'test',
-        translations
+        translation: 'Here is my test'
       });
       expect(result).toBe(translations.test);
     });
 
     it('should render inner HTML when renderInnerHtml = true', () => {
-      const translations = { test: '<h1>Here</h1> is my <strong>test</strong>' };
+      const translation = '<h1>Here</h1> is my <strong>test</strong>';
       const wrapper = shallow(utils.getLocalizedElement({
-        translationId: 'test',
-        translations,
+        translation,
         renderInnerHtml: true
       }));
 
       expect(wrapper.find('span').exists()).toBe(true);
-      expect(wrapper.html()).toEqual(`<span>${translations.test}</span>`);
+      expect(wrapper.html()).toEqual(`<span>${translation}</span>`);
     });
 
     it('should not render inner HTML when renderInnerHtml = false', () => {
-      const translations = { test: '<h1>Here</h1> is my <strong>test</strong>' };
+      const translation = '<h1>Here</h1> is my <strong>test</strong>';
       const result = utils.getLocalizedElement({
-        translationId: 'test',
-        translations, 
+        translation,
         renderInnerHtml: false
       });
-      expect(result).toBe(translations.test);
-    });
-
-    it('should return result of onMissingTranslation when translation = undefined', () => {
-      const onMissingTranslation = () => 'My missing message';
-      const result = utils.getLocalizedElement({
-        translationId: 'nothing',
-        translations: {},
-        renderInnerHtml: true, 
-        onMissingTranslation
-      });
-      expect(result).toEqual('My missing message');
+      expect(result).toBe(translation);
     });
 
     it('should replace variables in translation string with data', () => {
-      const translations = { test: 'Hello ${ name }' };
+      const translation = 'Hello ${ name }';
       const result = utils.getLocalizedElement({
-        translationId: 'test',
-        translations,
+        translation,
         renderInnerHtml: true,
         data: { name: 'Ted' }
       });
@@ -65,10 +50,9 @@ describe('locale utils', () => {
 
     it('should handle React in data', () => {
       const Comp = () => <div>ReactJS</div>
-      const translations = { test: 'Hello ${ comp } data' }
+      const translation = 'Hello ${ comp } data';
       const result = utils.getLocalizedElement({
-        translationId: 'test',
-        translations,
+        translation,
         data: { comp: <Comp /> }
       });
       expect(mount(result).text()).toContain('ReactJS');