Merge pull request #169 from wednesday-solutions/feat/removing-formatjs-as-entrypoint

feat: removing formatjs as an entrypoint

Author: alichherawalla

app/app.js

@@ -19,9 +19,7 @@ import 'sanitize.css/sanitize.css';
 import App from 'containers/App/Loadable';
 
 // Import Language Provider
-import LanguageProvider from 'containers/LanguageProvider';
 import ScrollToTop from 'components/ScrollToTop';
-import ErrorBoundary from '@components/ErrorBoundary';
 // Load the favicon and the .htaccess file
 /* eslint-disable import/no-unresolved, import/extensions */
 import '!file-loader?name=[name].[ext]!./images/favicon.ico';
@@ -30,9 +28,6 @@ import 'file-loader?name=.htaccess!./.htaccess';
 
 import configureStore from './configureStore';
 
-// Import i18n messages
-import { translationMessages } from './i18n';
-
 // Create redux store with history
 const initialState = {};
 const { store, persistor } = configureStore(initialState, history);
@@ -41,19 +36,15 @@ const root = createRoot(container);
 const render = (messages) => {
   root.render(
     <StrictMode>
-      <ErrorBoundary>
-        <Provider store={store}>
-          <PersistGate loading={null} persistor={persistor}>
-            <LanguageProvider messages={messages}>
-              <Router history={history}>
-                <ScrollToTop>
-                  <App />
-                </ScrollToTop>
-              </Router>
-            </LanguageProvider>
-          </PersistGate>
-        </Provider>
-      </ErrorBoundary>
+      <Provider store={store}>
+        <PersistGate loading={null} persistor={persistor}>
+          <Router history={history}>
+            <ScrollToTop>
+              <App />
+            </ScrollToTop>
+          </Router>
+        </PersistGate>
+      </Provider>
     </StrictMode>
   );
 };
@@ -63,20 +54,20 @@ if (module.hot) {
   // modules.hot.accept does not accept dynamic dependencies,
   // have to be constants at compile-time
   module.hot.accept(['./i18n', 'containers/App'], () => {
-    render(translationMessages);
+    render();
   });
 }
 
 // Chunked polyfill for browsers without Intl support
 if (!window.Intl) {
   Promise.resolve(import('intl'))
     .then(() => Promise.all([import('intl/locale-data/jsonp/en.js')]))
-    .then(() => render(translationMessages))
+    .then(() => render())
     .catch((err) => {
       throw err;
     });
 } else {
-  render(translationMessages);
+  render();
 }
 
 // Install ServiceWorker and AppCache in the end since

app/containers/App/index.js

@@ -20,6 +20,9 @@ import GlobalStyle from '@app/global-styles';
 import { colors } from '@themes';
 import Header from '@components/Header';
 import For from '@components/For';
+import LanguageProvider from 'containers/LanguageProvider';
+import ErrorBoundary from '@app/components/ErrorBoundary/index';
+import { translationMessages } from '@app/i18n';
 
 const theme = {
   fg: colors.primary,
@@ -35,33 +38,37 @@ export function App({ location, history }) {
   }, []);
 
   return (
-    <ThemeProvider theme={theme}>
-      <Header />
-      <Layout.Content>
-        <For
-          ParentComponent={(props) => <Switch {...props} />}
-          of={map(Object.keys(routeConfig))}
-          renderItem={(routeKey, index) => {
-            const Component = routeConfig[routeKey].component;
-            return (
-              <Route
-                exact={routeConfig[routeKey].exact}
-                key={index}
-                path={routeConfig[routeKey].route}
-                render={(props) => {
-                  const updatedProps = {
-                    ...props,
-                    ...routeConfig[routeKey].props
-                  };
-                  return <Component {...updatedProps} />;
-                }}
-              />
-            );
-          }}
-        />
-        <GlobalStyle />
-      </Layout.Content>
-    </ThemeProvider>
+    <ErrorBoundary>
+      <LanguageProvider messages={translationMessages}>
+        <ThemeProvider theme={theme}>
+          <Header />
+          <Layout.Content>
+            <For
+              ParentComponent={(props) => <Switch {...props} />}
+              of={map(Object.keys(routeConfig))}
+              renderItem={(routeKey, index) => {
+                const Component = routeConfig[routeKey].component;
+                return (
+                  <Route
+                    exact={routeConfig[routeKey].exact}
+                    key={index}
+                    path={routeConfig[routeKey].route}
+                    render={(props) => {
+                      const updatedProps = {
+                        ...props,
+                        ...routeConfig[routeKey].props
+                      };
+                      return <Component {...updatedProps} />;
+                    }}
+                  />
+                );
+              }}
+            />
+            <GlobalStyle />
+          </Layout.Content>
+        </ThemeProvider>
+      </LanguageProvider>
+    </ErrorBoundary>
   );
 }
 App.propTypes = {

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

@@ -1,13 +1,13 @@
 import React from 'react';
-import { renderProvider, renderWithIntl } from '@utils/testUtils';
+import { renderProvider } from '@utils/testUtils';
 import App from '../index';
 import { BrowserRouter } from 'react-router-dom';
 import history from '@app/utils/history';
 import { waitFor } from '@testing-library/react';
 
 describe('<App /> container tests', () => {
   it('should render and match the snapshot', () => {
-    const { container } = renderWithIntl(
+    const { container } = renderProvider(
       <BrowserRouter>
         <App />
       </BrowserRouter>