Added translations

Author: tomprats

src/lib/common/object/merge.js

@@ -0,0 +1,18 @@
+/* eslint-disable no-param-reassign */
+import isObject from "./is-object";
+
+export default function merge(...objects) {
+  return objects.reduce((target, source) => {
+    Object.keys(source).forEach((key) => {
+      if(Array.isArray(target[key]) && Array.isArray(source[key])) {
+        target[key] = target[key].concat(...source[key]);
+      } else if(isObject(target[key]) && isObject(source[key])) {
+        target[key] = merge(target[key], source[key]);
+      } else {
+        target[key] = source[key];
+      }
+    });
+
+    return target;
+  }, {});
+}

src/lib/hooks/use-i18n.js

@@ -1,6 +1,21 @@
+import {useEffect, useReducer} from "react";
 import useLoadedValue from "lib/hooks/use-loaded-value";
-import {i18nState} from "lib/recoil";
+import {i18nState, translationsQuery} from "lib/recoil";
 
 export default function useI18n() {
-  return useLoadedValue(i18nState);
+  const i18n = useLoadedValue(i18nState);
+  const translations = useLoadedValue(translationsQuery);
+  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+
+  useEffect(() => {
+    if(!translations) { return; }
+
+    Object.keys(translations).forEach((locale) => {
+      i18n.addTranslations(locale.toLowerCase(), {data: translations[locale.toLowerCase()]});
+    });
+
+    forceUpdate();
+  }, [translations]);
+
+  return i18n;
 }

src/lib/i18n-data/en-us.json

@@ -154,6 +154,11 @@
     "benchmarks": {
       "current": "Current Benchmark",
       "search": "Search for Benchmark"
+    },
+    "reports": {
+      "candidate": "Candidate Report",
+      "employee": "Engage Employee Report",
+      "manager": "Hiring Manager Report"
     }
   },
   "room_for_growth_and_change": "Room for Growth and Change",

src/lib/i18n.js

@@ -1,4 +1,5 @@
 import dig from "./common/object/dig";
+import merge from "./common/object/merge";
 import i18nData from "./i18n-data";
 
 export default class I18n {
@@ -11,11 +12,8 @@ export default class I18n {
     const locale = _locale.toLowerCase();
     const currentData = this.data[locale] || {};
 
-    this.data[locale] = {
-      ...currentData,
-      ...data
-    };
-    this.supportedLocales[locale] = name;
+    this.data[locale] = merge(currentData, data);
+    if(name) { this.supportedLocales[locale] = name; }
   }
   copyTranslations(_originLocale, _targetLocale) {
     const originLocale = _originLocale.toLowerCase();

src/lib/recoil/organization.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import {selector} from "recoil";
 import camelCase from "lib/common/string/camel-case";
 import {
@@ -15,7 +14,7 @@ export const settingsQuery = selector({
     const cached = cache.get(cacheKey);
     if(cached) { return cached; }
 
-    const response = await http.get(`/organizations/settings`);
+    const response = await http.get("/organizations/settings");
     if(!response) { return; }
     if(response.errors) {
       console.warn("test", response.errors); /* eslint-disable-line no-console */
@@ -26,9 +25,31 @@ export const settingsQuery = selector({
       (newObject, key) => ({...newObject, [camelCase(key)]: response[key]}),
       {}
     );
-    cache.set(cacheKey, settings, {expiresIn: 60 * 24});
+    cache.set(cacheKey, settings, {expiresIn: 60 * 60 * 3});
 
     return settings;
   },
   key: "settings"
 });
+
+export const translationsQuery = selector({
+  get: async({get}) => {
+    const http = get(httpState);
+    const cache = get(cacheState);
+    const cacheKey = get(safeCacheKeyState({id: http.authKey || "none", type: "translations"}));
+    const cached = cache.get(cacheKey);
+    if(cached) { return cached; }
+
+    const response = await http.get("/xavier/translations", {project: "widgets"});
+    if(!response) { return; }
+    if(response.errors) {
+      console.warn("test", response.errors); /* eslint-disable-line no-console */
+      return;
+    }
+
+    cache.set(cacheKey, response, {expiresIn: 60 * 60 * 3});
+
+    return response;
+  },
+  key: "translations"
+});

test/lib/hooks/use-i18n.test.js

@@ -0,0 +1,48 @@
+import {createRef} from "react";
+import useI18n from "lib/hooks/use-i18n";
+import ComponentHandler from "support/component-handler";
+import {mockTranslations} from "support/container/http";
+import useContainer from "support/hooks/use-container";
+
+describe("useI18n", () => {
+  let value;
+
+  function Component() {
+    const i18n = useI18n();
+    value.current = i18n;
+
+    return null;
+  }
+
+  useContainer();
+
+  beforeEach(() => {
+    value = createRef(null);
+  });
+
+  it("translates", async() => {
+    await ComponentHandler.setup(Component);
+
+    expect(value.current.translate("en-us", "tip_type_for_tools")).toEqual("Tools To Use");
+    expect(value.current.translate("en-us", "results.reports.candidate")).toEqual("Candidate Report");
+    expect(value.current.translate("en-us", "results.reports.manager")).toEqual("Hiring Manager Report");
+  });
+
+  it("translates with remote translations", async() => {
+    mockTranslations({
+      "en-us": {
+        results: {
+          reports: {
+            candidate: "Candidate",
+            employee: "Unemployed Report"
+          }
+        },
+        tip_type_for_tools: "Tools for Tots"
+      }
+    });
+    await ComponentHandler.setup(Component);
+
+    expect(value.current.translate("en-us", "tip_type_for_tools")).toEqual("Tools for Tots");
+    expect(value.current.translate("en-us", "results.reports.manager")).toEqual("Hiring Manager Report");
+  });
+});

test/support/container/http.js

@@ -279,6 +279,19 @@ export const mockSettings = (settings) => (
   })
 );
 
+export const mockTranslations = (translations) => (
+  mockFetch({
+    key: "translate",
+    request: (url, options) => {
+      if(!url.includes("/xavier/translations")) { return false; }
+      if(options.method !== "GET") { return false; }
+
+      return true;
+    },
+    response: () => translations
+  })
+);
+
 export const mockUserCompletedFeedback = (assessmentId, completed = false) => (
   mockFetch({
     key: "user-completed-feedback",
@@ -316,3 +329,6 @@ export const useHighlightedCareers = (...options) => {
   beforeEach(() => { mockHighlightedCareers(...options); });
 };
 export const useSettings = (...options) => { beforeEach(() => { mockSettings(...options); }); };
+export const useTranslations = (...options) => {
+  beforeEach(() => { mockTranslations(...options); });
+};

test/support/hooks/use-container.js

@@ -1,6 +1,7 @@
 import Cache from "lib/cache";
 import Http from "lib/http";
 import Listener from "lib/listener";
+import {useTranslations} from "../container/http";
 
 const cacheMethods = ["get", "remove", "set"];
 const httpMethods = ["delete", "fetch", "get", "post", "put", "request"];
@@ -41,6 +42,8 @@ export default function useContainer(props) {
     });
   });
 
+  useTranslations();
+
   afterEach(() => {
     delete container.assessmentID;
     delete container.benchmarkID;