feat: allow to pass locale (#85)

This removes the need of fetching user settings in the i18n initialisation. Apps typically need to fetch user settings for other uses, so the locale can be passed from the app to the shim reducing the number of (mostly identical) requests for user settings.
dhis2 · Apr 26, 2021 · 5ddd32e · 5ddd32e
1 parent 850cc9b
commit 5ddd32e
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -29,7 +29,6 @@
         "react-test-renderer": "^16.8"
     },
     "dependencies": {
-        "@dhis2/ui-core": "^4.6.1",
         "prop-types": "^15.7.2"
     },
     "peerDependencies": {

diff --git a/src/D2Shim.js b/src/D2Shim.js
@@ -1,8 +1,8 @@
 import * as PropTypes from 'prop-types'
 import { useD2 } from './useD2'
 
-export const D2Shim = ({ children, onInitialized, d2Config, i18nRoot }) => {
-    const { d2, d2Error } = useD2({ onInitialized, d2Config, i18nRoot })
+export const D2Shim = ({ children, onInitialized, d2Config, i18nRoot, locale }) => {
+    const { d2, d2Error } = useD2({ onInitialized, d2Config, i18nRoot, locale })
 
     return children({ d2, d2Error })
 }
@@ -11,5 +11,6 @@ D2Shim.propTypes = {
     children: PropTypes.func.isRequired,
     d2Config: PropTypes.object,
     i18nRoot: PropTypes.string,
+    locale: PropTypes.string,
     onInitialized: PropTypes.func,
 }
diff --git a/src/__tests__/useD2-with-locale.spec.js b/src/__tests__/useD2-with-locale.spec.js
@@ -0,0 +1,41 @@
+import { renderHook } from '@testing-library/react-hooks'
+import * as alld2 from 'd2'
+import { useD2 } from '../useD2'
+
+jest.mock('@dhis2/app-runtime', () => {
+    return {
+        useConfig: () => {
+            return {
+                baseUrl: 'baseurl',
+                apiVersion: '42',
+            }
+        },
+    }
+})
+
+describe('useD2 with locale', () => {
+    it('sets the language from the given locale', async () => {
+        const initSpy = jest.spyOn(alld2, 'init').mockResolvedValue('d2obj')
+        const userSettingsSpy = jest
+            .spyOn(alld2, 'getUserSettings')
+            .mockResolvedValue({
+                keyUiLocale: 'no',
+            })
+        const spy = jest.spyOn(alld2.config.i18n.sources, 'add')
+        const { waitForNextUpdate } = renderHook(() =>
+            useD2({
+                d2Config: { schemas: ['schema1'] },
+                i18nRoot: 'i18n_old',
+                locale: 'it',
+            })
+        )
+
+        await waitForNextUpdate()
+
+        expect(userSettingsSpy).toHaveBeenCalledTimes(0)
+
+        expect(spy).toHaveBeenCalledWith('i18n_old/i18n_module_it.properties')
+
+        jest.restoreAllMocks()
+    })
+})
diff --git a/src/__tests__/useD2.spec.js b/src/__tests__/useD2.spec.js
@@ -16,9 +16,11 @@ jest.mock('@dhis2/app-runtime', () => {
 describe('useD2', () => {
     it('returns the d2 config and sets the language', async () => {
         const initSpy = jest.spyOn(alld2, 'init').mockResolvedValue('d2obj')
-        jest.spyOn(alld2, 'getUserSettings').mockResolvedValue({
-            keyUiLocale: 'no',
-        })
+        const userSettingsSpy = jest
+            .spyOn(alld2, 'getUserSettings')
+            .mockResolvedValue({
+                keyUiLocale: 'no',
+            })
         const spy = jest.spyOn(alld2.config.i18n.sources, 'add')
         const mockOnInit = jest.fn().mockResolvedValue('initialized')
 
@@ -51,6 +53,8 @@ describe('useD2', () => {
             schemas: ['schema1'],
         })
 
+        expect(userSettingsSpy).toHaveBeenCalledTimes(1)
+
         expect(spy).toHaveBeenCalledWith('i18n_old/i18n_module_no.properties')
 
         jest.restoreAllMocks()

diff --git a/src/useD2.js b/src/useD2.js
@@ -4,23 +4,29 @@ import { useConfig } from '@dhis2/app-runtime'
 
 let theD2 = null
 
-const configI18n = async (baseUrl, i18nRoot) => {
+const configI18n = async (baseUrl, i18nRoot, locale) => {
     config.baseUrl = baseUrl
 
-    const settings = await getUserSettings()
+    const currentLocale = locale || (await getUserSettings()).keyUiLocale
 
-    if (settings.keyUiLocale && settings.keyUiLocale !== 'en') {
+    if (currentLocale && currentLocale !== 'en') {
         config.i18n.sources.add(
-            `${i18nRoot}/i18n_module_${settings.keyUiLocale}.properties`
+            `${i18nRoot}/i18n_module_${currentLocale}.properties`
         )
     }
 
     config.i18n.sources.add(`${i18nRoot}/i18n_module_en.properties`)
 }
 
-const initD2 = async ({ appUrl, baseUrl, d2Config, i18nRoot = null }) => {
+const initD2 = async ({
+    appUrl,
+    baseUrl,
+    d2Config,
+    i18nRoot = null,
+    locale,
+}) => {
     if (i18nRoot) {
-        await configI18n(baseUrl, i18nRoot)
+        await configI18n(baseUrl, i18nRoot, locale)
     }
 
     return await init({
@@ -34,6 +40,7 @@ export const useD2 = ({
     d2Config = {},
     onInitialized = Function.prototype,
     i18nRoot,
+    locale,
 } = {}) => {
     const { baseUrl, apiVersion } = useConfig()
     const [d2, setD2] = useState(theD2)
@@ -46,6 +53,7 @@ export const useD2 = ({
                 baseUrl: `${baseUrl}/api/${apiVersion}`,
                 d2Config,
                 i18nRoot,
+                locale,
             })
                 .then(async d2 => {
                     await onInitialized(d2)