Merge branch 'dev' into redux-toolkit-switch

# Conflicts:
#	app/containers/App/selectors.js
#	package.json

.all-contributorsrc

@@ -168,6 +168,16 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "Can-Sahin",
+      "name": "Can Sahin",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/33245689?v=4",
+      "profile": "https://github.com/Can-Sahin",
+      "contributions": [
+        "code",
+        "doc",
+      ]
     }
   ],
   "contributorsPerLine": 8

app/app.js

@@ -8,9 +8,9 @@
 import 'react-app-polyfill/ie11';
 import 'react-app-polyfill/stable';
 
-import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'connected-react-router';
 import FontFaceObserver from 'fontfaceobserver';

app/components/List/tests/index.test.js

@@ -11,7 +11,10 @@ describe('<List />', () => {
   });
 
   it('should pass all items props to rendered component', () => {
-    const items = [{ id: 1, name: 'Hello' }, { id: 2, name: 'World' }];
+    const items = [
+      { id: 1, name: 'Hello' },
+      { id: 2, name: 'World' },
+    ];
 
     const component = ({ item }) => <li>{item.name}</li>; // eslint-disable-line react/prop-types
 

app/containers/App/index.js

@@ -48,7 +48,7 @@ function App() {
       <Switch>
         <Route exact path="/" component={HomePage} />
         <Route path="/features" component={FeaturePage} />
-        <Route path="" component={NotFoundPage} />
+        <Route component={NotFoundPage} />
       </Switch>
 
       <Footer />

app/containers/App/selectors.js

@@ -7,9 +7,6 @@ import { createSelector } from '@reduxjs/toolkit';
 const selectRouter = state => state.router;
 
 const makeSelectLocation = () =>
-  createSelector(
-    selectRouter,
-    routerState => routerState.location,
-  );
+  createSelector(selectRouter, routerState => routerState.location);
 
 export { makeSelectLocation };

app/containers/App/tests/__snapshots__/index.test.js.snap

@@ -27,7 +27,6 @@ exports[`<App /> should render and match the snapshot 1`] = `
     />
     <Route
       component={[Function]}
-      path=""
     />
   </Switch>
   <Footer />

app/containers/HomePage/selectors.js

@@ -8,9 +8,6 @@ import { initialState } from './slice';
 const selectHome = state => state.home || initialState;
 
 const makeSelectUsername = () =>
-  createSelector(
-    selectHome,
-    homeState => homeState.username,
-  );
+  createSelector(selectHome, homeState => homeState.username);
 
 export { selectHome, makeSelectUsername };

app/containers/LanguageProvider/index.js

@@ -14,21 +14,14 @@ import { IntlProvider } from 'react-intl';
 
 import { makeSelectLocale } from './selectors';
 
-const stateSelector = createSelector(
-  makeSelectLocale(),
-  locale => ({
-    locale,
-  }),
-);
+const stateSelector = createSelector(makeSelectLocale(), locale => ({
+  locale,
+}));
 
 export default function LanguageProvider(props) {
   const { locale } = useSelector(stateSelector);
   return (
-    <IntlProvider
-      locale={locale}
-      key={locale}
-      messages={props.messages[locale]}
-    >
+    <IntlProvider locale={locale} messages={props.messages[locale]}>
       {React.Children.only(props.children)}
     </IntlProvider>
   );

app/containers/LanguageProvider/selectors.js

@@ -12,9 +12,6 @@ const selectLanguage = state => state.language || initialState;
  */
 
 const makeSelectLocale = () =>
-  createSelector(
-    selectLanguage,
-    languageState => languageState.locale,
-  );
+  createSelector(selectLanguage, languageState => languageState.locale);
 
 export { selectLanguage, makeSelectLocale };

app/containers/LocaleToggle/index.js

@@ -15,12 +15,9 @@ import { appLocales } from '../../locales';
 import { changeLocale } from '../LanguageProvider/slice';
 import { makeSelectLocale } from '../LanguageProvider/selectors';
 
-const stateSelector = createSelector(
-  makeSelectLocale(),
-  locale => ({
-    locale,
-  }),
-);
+const stateSelector = createSelector(makeSelectLocale(), locale => ({
+  locale,
+}));
 
 export default function LocaleToggle() {
   const { locale } = useSelector(stateSelector);

app/containers/NotFoundPage/messages.js

@@ -1,7 +1,7 @@
 /*
  * NotFoundPage Messages
  *
- * This contains all the text for the NotFoundPage component.
+ * This contains all the text for the NotFoundPage container.
  *
  */
 
@@ -12,6 +12,6 @@ export const scope = 'boilerplate.containers.NotFoundPage';
 export default defineMessages({
   header: {
     id: `${scope}.header`,
-    defaultMessage: 'Page not found.',
+    defaultMessage: 'This is the NotFoundPage container!',
   },
 });

app/global-styles.js

@@ -29,6 +29,7 @@ const GlobalStyle = createGlobalStyle`
   }
 
   input, select {
+    font-family: inherit;
     font-size: inherit;
   }
 `;

app/i18n.js

@@ -8,7 +8,7 @@
  *   You CANNOT use import/export in this file.
  */
 
-const addLocaleData = require('react-intl').addLocaleData; //eslint-disable-line
+const { addLocaleData } = require('react-intl');
 const enLocaleData = require('react-intl/locale-data/en');
 const deLocaleData = require('react-intl/locale-data/de');
 const { DEFAULT_LOCALE } = require('./locales');

internals/scripts/clean.js

@@ -42,6 +42,7 @@ shell.mv('internals/templates/utils', 'app');
 shell.cp('internals/templates/app.js', 'app/app.js');
 shell.cp('internals/templates/global-styles.js', 'app/global-styles.js');
 shell.cp('internals/templates/i18n.js', 'app/i18n.js');
+shell.cp('internals/templates/locales.js', 'app/locales.js');
 shell.cp('internals/templates/index.html', 'app/index.html');
 shell.cp('internals/templates/reducers.js', 'app/reducers.js');
 shell.cp('internals/templates/configureStore.js', 'app/configureStore.js');

internals/templates/app.js

@@ -8,9 +8,9 @@
 import 'react-app-polyfill/ie11';
 import 'react-app-polyfill/stable';
 
-// Import all the third party stuff
 import React from 'react';
 import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'connected-react-router';
 import history from 'utils/history';
@@ -39,23 +39,28 @@ const initialState = {};
 const store = configureStore(initialState, history);
 const MOUNT_NODE = document.getElementById('app');
 
+const ConnectedApp = props => (
+  <Provider store={store}>
+    <LanguageProvider messages={props.messages}>
+      <ConnectedRouter history={history}>
+        <HelmetProvider>
+          <App />
+        </HelmetProvider>
+      </ConnectedRouter>
+    </LanguageProvider>
+  </Provider>
+);
+
+ConnectedApp.propTypes = {
+  messages: PropTypes.object,
+};
+
 const render = messages => {
-  ReactDOM.render(
-    <Provider store={store}>
-      <LanguageProvider messages={messages}>
-        <ConnectedRouter history={history}>
-          <HelmetProvider>
-            <App />
-          </HelmetProvider>
-        </ConnectedRouter>
-      </LanguageProvider>
-    </Provider>,
-    MOUNT_NODE,
-  );
+  ReactDOM.render(<ConnectedApp messages={messages} />, MOUNT_NODE);
 };
 
 if (module.hot) {
-  // Hot reloadable React components and translation json files
+  // Hot reloadable translation json files
   // modules.hot.accept does not accept dynamic dependencies,
   // have to be constants at compile-time
   module.hot.accept(['./i18n'], () => {

internals/templates/containers/App/index.js

@@ -1,6 +1,6 @@
 /**
  *
- * App.js
+ * App
  *
  * This component is the skeleton around the actual pages, and should only
  * contain code that should be seen on all pages. (e.g. navigation bar)
@@ -10,12 +10,13 @@
 import React from 'react';
 import { Switch, Route } from 'react-router-dom';
 
+import { hot } from 'react-hot-loader/root';
 import HomePage from 'containers/HomePage/Loadable';
 import NotFoundPage from 'containers/NotFoundPage/Loadable';
 
 import GlobalStyle from '../../global-styles';
 
-export default function App() {
+function App() {
   return (
     <div>
       <Switch>
@@ -26,3 +27,5 @@ export default function App() {
     </div>
   );
 }
+
+export default hot(App);

internals/templates/containers/App/selectors.js

@@ -7,9 +7,6 @@ import { createSelector } from '@reduxjs/toolkit';
 const selectRouter = state => state.router;
 
 const makeSelectLocation = () =>
-  createSelector(
-    selectRouter,
-    routerState => routerState.location,
-  );
+  createSelector(selectRouter, routerState => routerState.location);
 
 export { makeSelectLocation };

internals/templates/containers/LanguageProvider/index.js

@@ -14,21 +14,14 @@ import { IntlProvider } from 'react-intl';
 
 import { makeSelectLocale } from './selectors';
 
-const stateSelector = createSelector(
-  makeSelectLocale(),
-  locale => ({
-    locale,
-  }),
-);
+const stateSelector = createSelector(makeSelectLocale(), locale => ({
+  locale,
+}));
 
 export default function LanguageProvider(props) {
   const { locale } = useSelector(stateSelector);
   return (
-    <IntlProvider
-      locale={locale}
-      key={locale}
-      messages={props.messages[locale]}
-    >
+    <IntlProvider locale={locale} messages={props.messages[locale]}>
       {React.Children.only(props.children)}
     </IntlProvider>
   );

internals/templates/containers/LanguageProvider/selectors.js

@@ -12,9 +12,6 @@ const selectLanguage = state => state.language || initialState;
  */
 
 const makeSelectLocale = () =>
-  createSelector(
-    selectLanguage,
-    languageState => languageState.locale,
-  );
+  createSelector(selectLanguage, languageState => languageState.locale);
 
 export { selectLanguage, makeSelectLocale };

internals/templates/containers/NotFoundPage/tests/index.test.js

@@ -1,18 +1,21 @@
+/**
+ * Testing the NotFoundPage
+ */
+
 import React from 'react';
 import { render } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 
-import NotFoundPage from '../index';
+import NotFound from '../index';
+import messages from '../messages';
 
-describe('<NotFoundPage />', () => {
-  it('should render and match the snapshot', () => {
-    const {
-      container: { firstChild },
-    } = render(
+describe('<NotFound />', () => {
+  it('should render the Page Not Found text', () => {
+    const { queryByText } = render(
       <IntlProvider locale="en">
-        <NotFoundPage />
+        <NotFound />
       </IntlProvider>,
     );
-    expect(firstChild).toMatchSnapshot();
+    expect(queryByText(messages.header.defaultMessage)).toBeInTheDocument();
   });
 });

internals/templates/global-styles.js

@@ -12,7 +12,6 @@ const GlobalStyle = createGlobalStyle`
   }
 
   #app {
-    background-color: #fafafa;
     min-height: 100%;
     min-width: 100%;
   }

internals/templates/i18n.js

@@ -7,7 +7,8 @@
  *   script `extract-intl`, and must use CommonJS module syntax
  *   You CANNOT use import/export in this file.
  */
-const addLocaleData = require('react-intl').addLocaleData; //eslint-disable-line
+
+const { addLocaleData } = require('react-intl');
 const enLocaleData = require('react-intl/locale-data/en');
 const { DEFAULT_LOCALE } = require('./locales');
 

internals/templates/locales.js

@@ -1 +1,6 @@
-export const DEFAULT_LOCALE = 'en';
+exports.DEFAULT_LOCALE = 'en';
+
+// prettier-ignore
+exports.appLocales = [
+  'en',
+];

internals/webpack/webpack.dev.babel.js

@@ -6,6 +6,7 @@ const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
+const ErrorOverlayPlugin = require('error-overlay-webpack-plugin');
 
 module.exports = require('./webpack.base.babel')({
   mode: 'development',
@@ -31,6 +32,7 @@ module.exports = require('./webpack.base.babel')({
 
   // Add development plugins
   plugins: [
+    new ErrorOverlayPlugin(),
     new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading
     new HtmlWebpackPlugin({
       inject: true, // Inject all files that are generated by webpack, e.g. bundle.js
@@ -44,7 +46,7 @@ module.exports = require('./webpack.base.babel')({
 
   // Emit a source map for easier debugging
   // See https://webpack.js.org/configuration/devtool/#devtool
-  devtool: 'eval-source-map',
+  devtool: 'cheap-module-source-map',
 
   performance: {
     hints: false,