From 02d9a1da3d868c0a6cde7cfbede8889210b37482 Mon Sep 17 00:00:00 2001
From: Can Sahin <cann2005@gmail.com>
Date: Mon, 18 Jan 2021 15:46:58 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20dynamic=20messages=20load?=
 =?UTF-8?q?ing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Message objects must be loaded dynamically,
since the translation objects are initialised during the mount

fixes #103
---
 docs/building-blocks/i18n.md                  |  4 ++--
 .../__tests__/extractingMessages.test.ts      | 20 ++++++++--------
 internals/generators/component/index.tsx.hbs  |  2 +-
 .../generators/component/messages.ts.hbs      |  2 +-
 .../generators/container/messages.ts.hbs      |  2 +-
 src/app/containers/HomePage/Features.tsx      | 16 ++++++-------
 src/app/containers/HomePage/messages.ts       | 23 ++++++++++---------
 src/app/containers/LanguageSwitch/index.tsx   |  2 +-
 src/app/containers/LanguageSwitch/messages.ts |  9 ++++----
 9 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/docs/building-blocks/i18n.md b/docs/building-blocks/i18n.md
index 1f1e40dc..0a653ef1 100644
--- 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
index 9a3ca7f0..b2f57736 100644
--- 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
index ddaed0ec..8c1ef484 100644
--- 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
index 8e247f56..58f837a0 100644
--- 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
index 8e247f56..58f837a0 100644
--- 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
index f39475e6..3d9936c6 100644
--- 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
index 7eb15e43..3fe5a330 100644
--- 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
index 1773cfd5..4ee545fb 100644
--- 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
index 03bb059e..bcd95811 100644
--- 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
+    ),
 };