Created notifications provider

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

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

@@ -152,14 +152,16 @@ class StrapiApp {
             <StrapiAppProvider getPlugin={this.getPlugin} plugins={this.plugins}>
               <LibraryProvider components={components} fields={fields}>
                 <LanguageProvider messages={this.translations}>
-                  <>
-                    <AutoReloadOverlayBlocker />
-                    <OverlayBlocker />
-                    <Notifications />
-                    <BrowserRouter basename={basename}>
-                      <App store={store} />
-                    </BrowserRouter>
-                  </>
+                  <Notifications>
+                    <>
+                      <AutoReloadOverlayBlocker />
+                      <OverlayBlocker />
+
+                      <BrowserRouter basename={basename}>
+                        <App store={store} />
+                      </BrowserRouter>
+                    </>
+                  </Notifications>
                 </LanguageProvider>
               </LibraryProvider>
             </StrapiAppProvider>

packages/core/admin/admin/src/components/LeftMenu/useMenuSections.js

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
-import { useUser } from '@strapi/helper-plugin';
+import { useUser , useNotification } from '@strapi/helper-plugin';
 import { useSelector, useDispatch } from 'react-redux';
+
 import getCtOrStLinks from './utils/getCtOrStLinks';
 import getPluginSectionLinks from './utils/getPluginSectionLinks';
 import getGeneralLinks from './utils/getGeneralLinks';
@@ -10,6 +11,8 @@ import toPluginLinks from './utils/toPluginLinks';
 import selectMenuLinks from './selectors';
 
 const useMenuSections = (plugins, shouldUpdateStrapi) => {
+  const toggleNotification = useNotification();
+  console.log(toggleNotification);
   const state = useSelector(selectMenuLinks);
   const dispatch = useDispatch();
   const { userPermissions } = useUser();
@@ -30,7 +33,8 @@ const useMenuSections = (plugins, shouldUpdateStrapi) => {
   const resolvePermissions = async (permissions = userPermissions) => {
     const pluginsSectionLinks = toPluginLinks(pluginsRef.current);
     const { authorizedCtLinks, authorizedStLinks, contentTypes } = await getCtOrStLinks(
-      permissions
+      permissions,
+      toggleNotification
     );
 
     const authorizedPluginSectionLinks = await getPluginSectionLinks(

packages/core/admin/admin/src/components/LeftMenu/utils/getCtOrStLinks.js

@@ -2,7 +2,7 @@ import { request } from '@strapi/helper-plugin';
 import generateModelsLinks from './generateModelsLinks';
 import checkPermissions from './checkPermissions';
 
-const getCtOrStLinks = async userPermissions => {
+const getCtOrStLinks = async (userPermissions, toggleNotification) => {
   const requestURL = '/content-manager/content-types';
 
   try {
@@ -37,7 +37,7 @@ const getCtOrStLinks = async userPermissions => {
   } catch (err) {
     console.error(err);
 
-    strapi.notification.toggle({
+    toggleNotification({
       type: 'warning',
       message: { id: 'notification.error' },
     });

packages/core/admin/admin/src/components/LeftMenu/utils/tests/getCtOrStLinks.test.js

@@ -135,14 +135,14 @@ describe('checkPermissions', () => {
 
   it('creates an array of boolean corresponding to the permission state', async () => {
     console.error = () => undefined;
-    strapi.notification.toggle = jest.fn();
+    const toggleNotification = jest.fn();
     const userPermissions = [];
 
     request.mockImplementation(() => {
       throw new Error('Something went wrong');
     });
 
-    await getCtOrStLinks(userPermissions);
-    expect(strapi.notification.toggle).toBeCalled();
+    await getCtOrStLinks(userPermissions, toggleNotification);
+    expect(toggleNotification).toBeCalled();
   });
 });

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

@@ -1,11 +1,13 @@
+import { NotificationsProvider } from '@strapi/helper-plugin';
 import React, { useEffect, useReducer } from 'react';
+import PropTypes from 'prop-types';
 import { CSSTransition } from 'react-transition-group';
 
 import Notification from './Notification';
 import reducer, { initialState } from './reducer';
 import NotificationsWrapper from './Wrapper';
 
-const Notifications = () => {
+const Notifications = ({ children }) => {
   const [{ notifications }, dispatch] = useReducer(reducer, initialState);
 
   const displayNotification = config => {
@@ -26,21 +28,28 @@ const Notifications = () => {
   }, []);
 
   return (
-    <NotificationsWrapper>
-      {notifications.map(notification => (
-        <CSSTransition
-          key={notification.id}
-          classNames="notification"
-          timeout={{
-            enter: 500,
-            exit: 300,
-          }}
-        >
-          <Notification dispatch={dispatch} notification={notification} />
-        </CSSTransition>
-      ))}
-    </NotificationsWrapper>
+    <NotificationsProvider toggleNotification={displayNotification}>
+      <NotificationsWrapper>
+        {notifications.map(notification => (
+          <CSSTransition
+            key={notification.id}
+            classNames="notification"
+            timeout={{
+              enter: 500,
+              exit: 300,
+            }}
+          >
+            <Notification dispatch={dispatch} notification={notification} />
+          </CSSTransition>
+        ))}
+      </NotificationsWrapper>
+      {children}
+    </NotificationsProvider>
   );
 };
 
+Notifications.propTypes = {
+  children: PropTypes.element.isRequired,
+};
+
 export default Notifications;

packages/core/helper-plugin/lib/src/contexts/NotificationsContext.js

@@ -0,0 +1,11 @@
+/**
+ *
+ * NotificationsContext
+ *
+ */
+
+import { createContext } from 'react';
+
+const NotificationsContext = createContext();
+
+export default NotificationsContext;

packages/core/helper-plugin/lib/src/hooks/useNotification/index.js

@@ -0,0 +1,19 @@
+/**
+ *
+ * useNotification
+ *
+ */
+
+import { useContext, useRef } from 'react';
+import NotificationsContext from '../../contexts/NotificationsContext';
+
+const useNotification = () => {
+  const { toggleNotification } = useContext(NotificationsContext);
+  // Use a ref so we can safely add the toggleNotification
+  // to a hook dependencies array
+  const toggleNotificationRef = useRef(toggleNotification);
+
+  return toggleNotificationRef.current;
+};
+
+export default useNotification;

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

@@ -105,6 +105,7 @@ export { default as PopUpWarningIcon } from './components/PopUpWarning/Icon';
 export { default as PopUpWarningModal } from './components/PopUpWarning/StyledModal';
 
 // Contexts
+export { default as NotificationsContext } from './contexts/NotificationsContext';
 export { GlobalContext, GlobalContextProvider, useGlobalContext } from './contexts/GlobalContext';
 export { default as UserContext } from './contexts/UserContext';
 export { default as ContentManagerEditViewDataManagerContext } from './contexts/ContentManagerEditViewDataManagerContext';
@@ -113,6 +114,7 @@ export { default as ContentManagerEditViewDataManagerContext } from './contexts/
 export { default as useContentManagerEditViewDataManager } from './hooks/useContentManagerEditViewDataManager';
 export { default as useQuery } from './hooks/useQuery';
 export { default as useLibrary } from './hooks/useLibrary';
+export { default as useNotification } from './hooks/useNotification';
 export { default as useStrapiApp } from './hooks/useStrapiApp';
 export { default as useUser } from './hooks/useUser';
 export { default as useUserPermissions } from './hooks/useUserPermissions';
@@ -120,6 +122,7 @@ export { default as useQueryParams } from './hooks/useQueryParams';
 
 // Providers
 export { default as LibraryProvider } from './providers/LibraryProvider';
+export { default as NotificationsProvider } from './providers/NotificationsProvider';
 export { default as StrapiAppProvider } from './providers/StrapiAppProvider';
 
 // Utils

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

@@ -0,0 +1,23 @@
+/**
+ *
+ * NotificationsProvider
+ *
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import NotificationsContext from '../../contexts/NotificationsContext';
+
+const NotificationsProvider = ({ children, toggleNotification }) => {
+  return (
+    <NotificationsContext.Provider value={{ toggleNotification }}>
+      {children}
+    </NotificationsContext.Provider>
+  );
+};
+
+NotificationsProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  toggleNotification: PropTypes.func.isRequired,
+};
+
+export default NotificationsProvider;