Created Providers component

Signed-off-by: soupette <cyril.lpz@gmail.com>

packages/core/admin/admin/src/StrapiApp.js

@@ -1,21 +1,14 @@
 import React from 'react';
-import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
-import { QueryClientProvider, QueryClient } from 'react-query';
-import { ThemeProvider } from 'styled-components';
-import { LibraryProvider, StrapiAppProvider } from '@strapi/helper-plugin';
 import pick from 'lodash/pick';
 import invariant from 'invariant';
 import { basename, createHook } from './core/utils';
 import configureStore from './core/store/configureStore';
 import { Plugin } from './core/apis';
 import App from './pages/App';
-import LanguageProvider from './components/LanguageProvider';
-import AutoReloadOverlayBlockerProvider from './components/AutoReloadOverlayBlockerProvider';
-import OverlayBlocker from './components/OverlayBlocker';
-import Fonts from './components/Fonts';
-import GlobalStyle from './components/GlobalStyle';
-import Notifications from './components/Notifications';
+import Providers from './components/Providers';
+
+import Theme from './components/Theme';
 import languageNativeNames from './translations/languageNativeNames';
 import {
   INJECT_COLUMN_IN_TABLE,
@@ -31,14 +24,6 @@ window.strapi = {
   backendURL: process.env.STRAPI_ADMIN_BACKEND_URL,
 };
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-    },
-  },
-});
-
 class StrapiApp {
   constructor({ appPlugins, library, locales, middlewares, reducers }) {
     this.appLocales = ['en', ...locales.filter(loc => loc !== 'en')];
@@ -366,40 +351,29 @@ class StrapiApp {
     } = this.library;
 
     return (
-      <QueryClientProvider client={queryClient}>
-        <ThemeProvider theme={themes}>
-          <GlobalStyle />
-          <Fonts />
-          <Provider store={store}>
-            <StrapiAppProvider
-              getAdminInjectedComponents={this.admin.getInjectedComponents}
-              getPlugin={this.getPlugin}
-              menu={this.menu}
-              plugins={this.plugins}
-              runHookParallel={this.runHookParallel}
-              runHookWaterfall={(name, initialValue, async = false) => {
-                return this.runHookWaterfall(name, initialValue, async, store);
-              }}
-              runHookSeries={this.runHookSeries}
-              settings={this.settings}
-            >
-              <LibraryProvider components={components} fields={fields}>
-                <LanguageProvider messages={this.translations} localeNames={localeNames}>
-                  <AutoReloadOverlayBlockerProvider>
-                    <OverlayBlocker>
-                      <Notifications>
-                        <BrowserRouter basename={basename}>
-                          <App store={store} />
-                        </BrowserRouter>
-                      </Notifications>
-                    </OverlayBlocker>
-                  </AutoReloadOverlayBlockerProvider>
-                </LanguageProvider>
-              </LibraryProvider>
-            </StrapiAppProvider>
-          </Provider>
-        </ThemeProvider>
-      </QueryClientProvider>
+      <Theme theme={themes}>
+        <Providers
+          components={components}
+          fields={fields}
+          localeNames={localeNames}
+          getAdminInjectedComponents={this.admin.getInjectedComponents}
+          getPlugin={this.getPlugin}
+          messages={this.translations}
+          menu={this.menu}
+          plugins={this.plugins}
+          runHookParallel={this.runHookParallel}
+          runHookWaterfall={(name, initialValue, async = false) => {
+            return this.runHookWaterfall(name, initialValue, async, store);
+          }}
+          runHookSeries={this.runHookSeries}
+          settings={this.settings}
+          store={store}
+        >
+          <BrowserRouter basename={basename}>
+            <App store={store} />
+          </BrowserRouter>
+        </Providers>
+      </Theme>
     );
   }
 }

packages/core/admin/admin/src/components/Providers/index.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { QueryClientProvider, QueryClient } from 'react-query';
+import { LibraryProvider, StrapiAppProvider } from '@strapi/helper-plugin';
+import { Provider } from 'react-redux';
+import LanguageProvider from '../LanguageProvider';
+import AutoReloadOverlayBlockerProvider from '../AutoReloadOverlayBlockerProvider';
+import Notifications from '../Notifications';
+import OverlayBlocker from '../OverlayBlocker';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+const Providers = ({
+  children,
+  components,
+  fields,
+  getAdminInjectedComponents,
+  getPlugin,
+  localeNames,
+  menu,
+  messages,
+  plugins,
+  runHookParallel,
+  runHookSeries,
+  runHookWaterfall,
+  settings,
+  store,
+}) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Provider store={store}>
+        <StrapiAppProvider
+          getAdminInjectedComponents={getAdminInjectedComponents}
+          getPlugin={getPlugin}
+          menu={menu}
+          plugins={plugins}
+          runHookParallel={runHookParallel}
+          runHookWaterfall={runHookWaterfall}
+          runHookSeries={runHookSeries}
+          settings={settings}
+        >
+          <LibraryProvider components={components} fields={fields}>
+            <LanguageProvider messages={messages} localeNames={localeNames}>
+              <AutoReloadOverlayBlockerProvider>
+                <OverlayBlocker>
+                  <Notifications>{children}</Notifications>
+                </OverlayBlocker>
+              </AutoReloadOverlayBlockerProvider>
+            </LanguageProvider>
+          </LibraryProvider>
+        </StrapiAppProvider>
+      </Provider>
+    </QueryClientProvider>
+  );
+};
+
+Providers.propTypes = {
+  children: PropTypes.element.isRequired,
+  components: PropTypes.object.isRequired,
+  fields: PropTypes.object.isRequired,
+  getAdminInjectedComponents: PropTypes.func.isRequired,
+  getPlugin: PropTypes.func.isRequired,
+  localeNames: PropTypes.objectOf(PropTypes.string).isRequired,
+  menu: PropTypes.arrayOf(
+    PropTypes.shape({
+      to: PropTypes.string.isRequired,
+      icon: PropTypes.string,
+      intlLabel: PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        defaultMessage: PropTypes.string.isRequired,
+      }).isRequired,
+      permissions: PropTypes.array,
+      Component: PropTypes.func,
+    })
+  ).isRequired,
+  messages: PropTypes.object.isRequired,
+  plugins: PropTypes.object.isRequired,
+  runHookParallel: PropTypes.func.isRequired,
+  runHookWaterfall: PropTypes.func.isRequired,
+  runHookSeries: PropTypes.func.isRequired,
+  settings: PropTypes.object.isRequired,
+  store: PropTypes.object.isRequired,
+};
+
+export default Providers;

packages/core/admin/admin/src/components/Theme/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import PropTypes from 'prop-types';
+import GlobalStyle from '../GlobalStyle';
+import Fonts from '../Fonts';
+
+const Theme = ({ children, theme }) => (
+  <ThemeProvider theme={theme}>
+    <GlobalStyle />
+    <Fonts />
+    {children}
+  </ThemeProvider>
+);
+
+Theme.propTypes = {
+  children: PropTypes.element.isRequired,
+  theme: PropTypes.object.isRequired,
+};
+
+export default Theme;

packages/core/helper-plugin/lib/src/providers/StrapiAppProvider/index.js

@@ -43,7 +43,7 @@ StrapiAppProvider.propTypes = {
   menu: PropTypes.arrayOf(
     PropTypes.shape({
       to: PropTypes.string.isRequired,
-      icon: PropTypes.array,
+      icon: PropTypes.string,
       intlLabel: PropTypes.shape({
         id: PropTypes.string.isRequired,
         defaultMessage: PropTypes.string.isRequired,