Merge branch 'dev' into dependabot/npm_and_yarn/websocket-extensions-…

…0.1.4

docs/building-blocks/i18n.md

@@ -42,7 +42,7 @@ export function MyComponent() {
     i18n.changeLanguage(language);
   };
   // The nested objects are intellisense supported ✅
-  return <div>{t(translations.HomePage.Features.someItem())}</div>;
+  return <div>{t(translations.HomePage.Features.someItem}</div>;
 }
 ```
 

docs/building-blocks/redux-toolkit.md

@@ -84,7 +84,7 @@ const homepageSlice = createSlice({
  * `actions` will be used to trigger change in the state from where ever you want
  * `name` will be used to add this slice to our Redux Store
  */
-export const { actions, reducer, name: sliceKey } = githubRepoFormSlice;
+export const { actions, reducer, name: sliceKey } = homepageSlice;
 ```
 
 ### Adding the slice to your Redux Store
@@ -103,6 +103,9 @@ import { sliceKey, reducer, actions } from './slice';
 import { selectUsername } from './selectors';
 
 export function HomePage() {
+  // Used to dispatch slice actions
+  const dispatch = useDispatch();
+
   // Inject the slice to redux
   useInjectReducer({ key: sliceKey, reducer: reducer });
 
@@ -112,7 +115,7 @@ export function HomePage() {
 
   const textInputChanged = evt => {
     // Trigger the action to change the state. It accepts `string` as we declared in `slice.ts`. Fully type-safe ✅
-    actions.changeUsername(evt.target.value);
+    dispatch(actions.changeUsername(evt.target.value));
   };
   // ...
 }

docs/building-blocks/routing.md

@@ -37,4 +37,30 @@ export function AboutPage() {
 }
 ```
 
+## Routing programmatically
+
+You can use the [react-router hooks](https://reacttraining.com/react-router/web/api/Hooks) to change the route or get params etc...
+
+```ts
+import { useHistory } from 'react-router-dom';
+
+function HomeButton() {
+  let history = useHistory();
+
+  function handleClick() {
+    history.push('/home');
+  }
+
+  return (
+    <button type="button" onClick={handleClick}>
+      Go home
+    </button>
+  );
+}
+```
+
+{% hint style="info" %}
+
 You can read more in [`react-router`'s documentation](https://reacttraining.com/react-router/web/api).
+
+{% endhint %}

internals/startingTemplate/src/app/components/NotFoundPage/P.ts

@@ -3,6 +3,6 @@ import styled from 'styled-components/macro';
 export const P = styled.p`
   font-size: 1rem;
   line-height: 1.5;
-  color: ${p => p.theme.textSecondary};
+  color: black;
   margin: 0.625rem 0 1.5rem 0;
 `;

internals/startingTemplate/src/app/components/NotFoundPage/index.tsx

@@ -36,7 +36,7 @@ const Wrapper = styled.div`
 const Title = styled.div`
   margin-top: -8vh;
   font-weight: bold;
-  color: ${p => p.theme.text};
+  color: black;
   font-size: 3.375rem;
 
   span {

internals/startingTemplate/src/locales/i18n.ts

@@ -4,7 +4,7 @@ import { initReactI18next } from 'react-i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 
 import en from './en/translation.json';
-import { ConvertedToFunctionsType } from './types';
+import { ConvertedToObjectType } from './types';
 
 const translationsJson = {
   en: {
@@ -15,26 +15,25 @@ const translationsJson = {
 export type TranslationResource = typeof en;
 export type LanguageKey = keyof TranslationResource;
 
-export const translations: ConvertedToFunctionsType<TranslationResource> = {} as any;
+export const translations: ConvertedToObjectType<TranslationResource> = {} as any;
 
 /*
- * Converts the static JSON file into object where keys are identical
- * but values are functions that produces the same key as string.
+ * Converts the static JSON file into an object where keys are identical
+ * but values are strings concatenated according to syntax.
  * This is helpful when using the JSON file keys and still have the intellisense support
  * along with type-safety
  */
-const convertToFunctions = (obj: any, dict: {}, current?: string) => {
+const convertLanguageJsonToObject = (obj: any, dict: {}, current?: string) => {
   Object.keys(obj).forEach(key => {
     const currentLookupKey = current ? `${current}.${key}` : key;
     if (typeof obj[key] === 'object') {
       dict[key] = {};
-      convertToFunctions(obj[key], dict[key], currentLookupKey);
+      convertLanguageJsonToObject(obj[key], dict[key], currentLookupKey);
     } else {
-      dict[key] = () => currentLookupKey;
+      dict[key] = currentLookupKey;
     }
   });
 };
-
 export const i18n = i18next
   // pass the i18n instance to react-i18next.
   .use(initReactI18next)
@@ -56,5 +55,7 @@ export const i18n = i18next
         escapeValue: false, // not needed for react as it escapes by default
       },
     },
-    () => convertToFunctions(en, translations),
+    () => {
+      convertLanguageJsonToObject(en, translations);
+    },
   );

internals/startingTemplate/src/locales/types.ts

@@ -1,5 +1,3 @@
-export type ConvertedToFunctionsType<T> = {
-  [P in keyof T]: T[P] extends string
-    ? () => string
-    : ConvertedToFunctionsType<T[P]>;
+export type ConvertedToObjectType<T> = {
+  [P in keyof T]: T[P] extends string ? string : ConvertedToObjectType<T[P]>;
 };

package.json

@@ -70,7 +70,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "npm run verify-startingTemplate-changes && npm run checkTs && lint-staged",
+      "pre-commit": "npm run checkTs && lint-staged && npm run verify-startingTemplate-changes",
       "prepare-commit-msg": "devmoji -e",
       "commit-msg": "if git-branch-is dev; then commitlint -E HUSKY_GIT_PARAMS; fi"
     }
@@ -96,7 +96,6 @@
   "dependencies": {
     "@reduxjs/toolkit": "1.3.2",
     "fontfaceobserver": "2.1.0",
-    "history": "4.10.1",
     "i18next": "19.3.4",
     "i18next-browser-languagedetector": "4.0.2",
     "react": "16.13.0",
@@ -117,7 +116,6 @@
     "@testing-library/jest-dom": "5.1.1",
     "@testing-library/react": "10.0.1",
     "@types/fontfaceobserver": "0.0.6",
-    "@types/history": "4.7.5",
     "@types/jest": "25.1.4",
     "@types/node": "13.9.3",
     "@types/react": "16.9.25",

src/app/containers/HomePage/Features.tsx

@@ -82,9 +82,9 @@ export function Features() {
         <Feature>
           <INTLIcon className="feature-icon" />
           <Content>
-            <SubTitle>{t(translations.i18nFeature.title())} </SubTitle>
+            <SubTitle>{t(translations.i18nFeature.title)} </SubTitle>
             <P>
-              {t(translations.i18nFeature.description())}
+              {t(translations.i18nFeature.description)}
               <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(translations.routingFeature.title())}</SubTitle>
+            <SubTitle>{t(translations.routingFeature.title)}</SubTitle>
             <P>
-              {t(translations.routingFeature.description())}
+              {t(translations.routingFeature.description)}
               <br />
               <small>
                 Go to our{' '}
@@ -112,15 +112,15 @@ export function Features() {
         <Feature>
           <InstantFeedbackIcon className="feature-icon" />
           <Content>
-            <SubTitle>{t(translations.feedbackFeature.title())}</SubTitle>
-            <P>{t(translations.feedbackFeature.description())}</P>
+            <SubTitle>{t(translations.feedbackFeature.title)}</SubTitle>
+            <P>{t(translations.feedbackFeature.description)}</P>
           </Content>
         </Feature>
         <Feature>
           <ScaffoldingIcon className="feature-icon" />
           <Content>
-            <SubTitle>{t(translations.scaffoldingFeature.title())}</SubTitle>
-            <P>{t(translations.scaffoldingFeature.description())}</P>
+            <SubTitle>{t(translations.scaffoldingFeature.title)}</SubTitle>
+            <P>{t(translations.scaffoldingFeature.description)}</P>
           </Content>
         </Feature>
         <Feature>

src/app/containers/LanguageSwitch/__tests__/index.test.tsx

@@ -26,7 +26,7 @@ describe('<LanguageSwitch />', () => {
 
     let languageSwitch = renderLanguageSwitch();
     let label = languageSwitch.queryByText(
-      t(translations.i18nFeature.selectLanguage()),
+      t(translations.i18nFeature.selectLanguage),
     );
     expect(label).toBeInTheDocument();
 
@@ -35,7 +35,7 @@ describe('<LanguageSwitch />', () => {
 
     languageSwitch = renderLanguageSwitch();
     label = languageSwitch.queryByText(
-      t(translations.i18nFeature.selectLanguage()),
+      t(translations.i18nFeature.selectLanguage),
     );
     expect(label).toBeInTheDocument();
   });

src/app/containers/LanguageSwitch/index.tsx

@@ -14,7 +14,7 @@ export function LanguageSwitch() {
 
   return (
     <Wrapper>
-      <FormLabel>{t(translations.i18nFeature.selectLanguage())}</FormLabel>
+      <FormLabel>{t(translations.i18nFeature.selectLanguage)}</FormLabel>
       <Languages>
         <Radio
           id="en"

src/locales/__tests__/i18n.test.ts

@@ -8,8 +8,8 @@ describe('i18n', () => {
 
   it('should initate i18n with translations', async () => {
     const t = await i18n;
-    expect(
-      t(translations.feedbackFeature.description()).length,
-    ).toBeGreaterThan(0);
+    expect(t(translations.feedbackFeature.description).length).toBeGreaterThan(
+      0,
+    );
   });
 });

src/locales/i18n.ts

@@ -5,7 +5,7 @@ import LanguageDetector from 'i18next-browser-languagedetector';
 
 import en from './en/translation.json';
 import de from './de/translation.json';
-import { ConvertedToFunctionsType } from './types';
+import { ConvertedToObjectType } from './types';
 
 const translationsJson = {
   en: {
@@ -19,22 +19,22 @@ const translationsJson = {
 export type TranslationResource = typeof en;
 export type LanguageKey = keyof TranslationResource;
 
-export const translations: ConvertedToFunctionsType<TranslationResource> = {} as any;
+export const translations: ConvertedToObjectType<TranslationResource> = {} as any;
 
 /*
- * Converts the static JSON file into object where keys are identical
- * but values are functions that produces the same key as string.
+ * Converts the static JSON file into an object where keys are identical
+ * but values are strings concatenated according to syntax.
  * This is helpful when using the JSON file keys and still have the intellisense support
  * along with type-safety
  */
-const convertToFunctions = (obj: any, dict: {}, current?: string) => {
+const convertLanguageJsonToObject = (obj: any, dict: {}, current?: string) => {
   Object.keys(obj).forEach(key => {
     const currentLookupKey = current ? `${current}.${key}` : key;
     if (typeof obj[key] === 'object') {
       dict[key] = {};
-      convertToFunctions(obj[key], dict[key], currentLookupKey);
+      convertLanguageJsonToObject(obj[key], dict[key], currentLookupKey);
     } else {
-      dict[key] = () => currentLookupKey;
+      dict[key] = currentLookupKey;
     }
   });
 };
@@ -59,5 +59,7 @@ export const i18n = i18next
         escapeValue: false, // not needed for react as it escapes by default
       },
     },
-    () => convertToFunctions(en, translations),
+    () => {
+      convertLanguageJsonToObject(en, translations);
+    },
   );

src/locales/types.ts

@@ -1,5 +1,3 @@
-export type ConvertedToFunctionsType<T> = {
-  [P in keyof T]: T[P] extends string
-    ? () => string
-    : ConvertedToFunctionsType<T[P]>;
+export type ConvertedToObjectType<T> = {
+  [P in keyof T]: T[P] extends string ? string : ConvertedToObjectType<T[P]>;
 };

template.json

@@ -46,7 +46,6 @@
     "dependencies": {
       "@reduxjs/toolkit": "1.3.2",
       "fontfaceobserver": "2.1.0",
-      "history": "4.10.1",
       "i18next": "19.3.4",
       "i18next-browser-languagedetector": "4.0.2",
       "prettier": "2.0.1",
@@ -71,7 +70,6 @@
       "@testing-library/jest-dom": "5.1.1",
       "@testing-library/react": "10.0.1",
       "@types/fontfaceobserver": "0.0.6",
-      "@types/history": "4.7.5",
       "@types/jest": "25.1.4",
       "@types/node": "13.9.3",
       "@types/react": "16.9.25",