fix: 🐛 dynamic messages loading

Message objects must be loaded dynamically, since the translation objects are initialised during the mount fixes #103
react-boilerplate · Jan 18, 2021 · 02d9a1d · 02d9a1d
1 parent 2440250
commit 02d9a1d
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 39 deletions.
diff --git a/docs/building-blocks/i18n.md b/docs/building-blocks/i18n.md
@@ -73,7 +73,7 @@ import { translations } from 'locales/translations';
 import { _t } from 'utils/messages';
 
 export const messages = {
-  someItem: _t(translations.HomePage.Features.someItem, 'default value'),
+  someItem: () => _t(translations.HomePage.Features.someItem, 'default value'),
   // ...
 };
 ```
@@ -87,7 +87,7 @@ import { messages } from './messages';
 
 export function MyComponent() {
   const { t } = useTranslation();
-  return <div>{t(...messages.someItem}</div>;
+  return <div>{t(...messages.someItem()}</div>;
 }
 ```
 

diff --git a/internals/extractMessages/__tests__/extractingMessages.test.ts b/internals/extractMessages/__tests__/extractingMessages.test.ts
@@ -15,10 +15,10 @@ describe('extracting messages', () => {
     const content = `
       import { translations } from 'locales/translations';
       export const messages = {
-        x: _t(translations.a),
-        x: _t(translations.a.k1),
-        x: _t(translations.a.k2, "v1"),
-        x: _t(translations.a.k3, "v1", {a: "b"}),
+        x: () => _t(translations.a),
+        x: () => _t(translations.a.k1),
+        x: () => _t(translations.a.k2, "v1"),
+        x: () => _t(translations.a.k3, "v1", {a: "b"}),
       };
     `;
     scannerConfig.parseContent(content, parser);
@@ -32,10 +32,10 @@ describe('extracting messages', () => {
     const content = `
       import { translations } from 'locales/translations';
       export const messages = {
-        x: _t("a"),
-        x: _t("a.k1"),
-        x: _t("a.k2", "v1"),
-        x: _t("a.k3", "v1", {a: "b"}),
+        x: () => _t("a"),
+        x: () => _t("a.k1"),
+        x: () => _t("a.k2", "v1"),
+        x: () => _t("a.k3", "v1", {a: "b"}),
       };
     `;
     scannerConfig.parseContent(content, parser);
@@ -50,8 +50,8 @@ describe('extracting messages', () => {
       import { translations } from 'locales/translations';
       const m = translations.a;
       export const messages = {
-        x: _t(m.k1),
-        x: _t(m.k2, "v1"),
+        x: () => _t(m.k1),
+        x: () => _t(m.k2, "v1"),
       };
     `;
     scannerConfig.parseContent(content, parser);

diff --git a/internals/generators/component/index.tsx.hbs b/internals/generators/component/index.tsx.hbs
@@ -36,7 +36,7 @@ export function {{ properCase ComponentName }}(props: Props) {
   {{/if}}
     {{#if wantTranslations}}
     {t('')}
-    {/*  {t(...messages.someThing)}  */}
+    {/*  {t(...messages.someThing())}  */}
     {{/if}}
   {{#if wantStyledComponents}}
   </Div>

diff --git a/internals/generators/component/messages.ts.hbs b/internals/generators/component/messages.ts.hbs
@@ -7,5 +7,5 @@ import { translations } from 'locales/translations';
 import { _t } from 'utils/messages';
 
 export const messages = {
-  // someThing: _t(translations.someThing,'default value'),
+  // someThing: () => _t(translations.someThing,'default value'),
 };
diff --git a/internals/generators/container/messages.ts.hbs b/internals/generators/container/messages.ts.hbs
@@ -7,5 +7,5 @@ import { translations } from 'locales/translations';
 import { _t } from 'utils/messages';
 
 export const messages = {
-  // someThing: _t(translations.someThing,'default value'),
+  // someThing: () => _t(translations.someThing,'default value'),
 };
diff --git a/src/app/containers/HomePage/Features.tsx b/src/app/containers/HomePage/Features.tsx
@@ -82,9 +82,9 @@ export function Features() {
         <Feature>
           <INTLIcon className="feature-icon" />
           <Content>
-            <SubTitle>{t(messages.i18nTitle)} </SubTitle>
+            <SubTitle>{t(messages.i18nTitle())} </SubTitle>
             <P>
-              {t(messages.i18nDescription)}
+              {t(messages.i18nDescription())}
               <br />
               <small>
                 (Only some of the features below are translated to demonstrate
@@ -97,9 +97,9 @@ export function Features() {
         <Feature>
           <RouteIcon className="feature-icon" />
           <Content>
-            <SubTitle>{t(...messages.routingTitle)}</SubTitle>
+            <SubTitle>{t(...messages.routingTitle())}</SubTitle>
             <P>
-              {t(messages.routingDescription)}
+              {t(messages.routingDescription())}
               <br />
               <small>
                 Go to our{' '}
@@ -112,15 +112,15 @@ export function Features() {
         <Feature>
           <InstantFeedbackIcon className="feature-icon" />
           <Content>
-            <SubTitle>{t(messages.feedbackTitle)}</SubTitle>
-            <P>{t(messages.feedbackDescription)}</P>
+            <SubTitle>{t(messages.feedbackTitle())}</SubTitle>
+            <P>{t(messages.feedbackDescription())}</P>
           </Content>
         </Feature>
         <Feature>
           <ScaffoldingIcon className="feature-icon" />
           <Content>
-            <SubTitle>{t(messages.scaffoldingTitle)}</SubTitle>
-            <P>{t(messages.scaffoldingDescription)}</P>
+            <SubTitle>{t(messages.scaffoldingTitle())}</SubTitle>
+            <P>{t(messages.scaffoldingDescription())}</P>
           </Content>
         </Feature>
         <Feature>

diff --git a/src/app/containers/HomePage/messages.ts b/src/app/containers/HomePage/messages.ts
@@ -8,15 +8,16 @@ import { translations } from 'locales/translations';
 import { _t } from 'utils/messages';
 
 export const messages = {
-  routingTitle: _t(
-    translations.routingFeature.title,
-    'Industry-standard Routing', // you can set the default value when extracting
-  ),
-  routingDescription: _t(translations.routingFeature.description),
-  feedbackTitle: _t(translations.feedbackFeature.title),
-  feedbackDescription: _t(translations.feedbackFeature.description),
-  scaffoldingTitle: _t(translations.scaffoldingFeature.title),
-  scaffoldingDescription: _t(translations.scaffoldingFeature.description),
-  i18nTitle: _t(translations.i18nFeature.title),
-  i18nDescription: _t(translations.i18nFeature.description),
+  routingTitle: () =>
+    _t(
+      translations.routingFeature.title,
+      'Industry-standard Routing', // you can set the default value when extracting
+    ),
+  routingDescription: () => _t(translations.routingFeature.description),
+  feedbackTitle: () => _t(translations.feedbackFeature.title),
+  feedbackDescription: () => _t(translations.feedbackFeature.description),
+  scaffoldingTitle: () => _t(translations.scaffoldingFeature.title),
+  scaffoldingDescription: () => _t(translations.scaffoldingFeature.description),
+  i18nTitle: () => _t(translations.i18nFeature.title),
+  i18nDescription: () => _t(translations.i18nFeature.description),
 };
diff --git a/src/app/containers/LanguageSwitch/index.tsx b/src/app/containers/LanguageSwitch/index.tsx
@@ -14,7 +14,7 @@ export function LanguageSwitch() {
 
   return (
     <Wrapper>
-      <FormLabel>{t(...messages.selectLanguage)}</FormLabel>
+      <FormLabel>{t(...messages.selectLanguage())}</FormLabel>
       <Languages>
         <Radio
           id="en"

diff --git a/src/app/containers/LanguageSwitch/messages.ts b/src/app/containers/LanguageSwitch/messages.ts
@@ -2,8 +2,9 @@ import { translations } from 'locales/translations';
 import { _t } from 'utils/messages';
 
 export const messages = {
-  selectLanguage: _t(
-    translations.i18nFeature.selectLanguage,
-    'Select Language', // default value
-  ),
+  selectLanguage: () =>
+    _t(
+      translations.i18nFeature.selectLanguage,
+      'Select Language', // default value
+    ),
 };