Fix HomePage contexts and update context api

packages/strapi-plugin-users-permissions/admin/src/components/ListRow/index.js

@@ -10,6 +10,7 @@ import { FormattedMessage } from 'react-intl';
 import { capitalize, get, includes } from 'lodash';
 
 import { IcoContainer, PopUpWarning } from 'strapi-helper-plugin';
+import { HomePageContext } from '../../contexts/HomePage';
 import { Container, Flex, Row, Wrapper } from './Components';
 
 import en from '../../translations/en.json';
@@ -18,6 +19,8 @@ class ListRow extends React.Component {
   // eslint-disable-line react/prefer-stateless-function
   state = { showModalDelete: false };
 
+  static contextType = HomePageContext;
+
   // Roles that can't be deleted && modified
   // Don't delete this line
   protectedRoleIDs = [];
@@ -169,12 +172,12 @@ class ListRow extends React.Component {
   }
 }
 
-ListRow.contextTypes = {
-  emitEvent: PropTypes.func,
-  pathname: PropTypes.string,
-  push: PropTypes.func,
-  setDataToEdit: PropTypes.func.isRequired,
-};
+// ListRow.contextTypes = {
+//   emitEvent: PropTypes.func,
+//   pathname: PropTypes.string,
+//   push: PropTypes.func,
+//   setDataToEdit: PropTypes.func.isRequired,
+// };
 
 ListRow.defaultProps = {
   item: {

packages/strapi-plugin-users-permissions/admin/src/components/PopUpForm/index.js

@@ -22,8 +22,8 @@ import {
   take,
   takeRight,
 } from 'lodash';
-
 import { InputsIndex as Input } from 'strapi-helper-plugin';
+import { HomePageContext } from '../../contexts/HomePage';
 
 // Translations
 import en from '../../translations/en.json';
@@ -34,6 +34,8 @@ class PopUpForm extends React.Component {
   // eslint-disable-line react/prefer-stateless-function
   state = { enabled: false, isEditing: false };
 
+  static contextType = HomePageContext;
+
   UNSAFE_componentWillReceiveProps(nextProps) {
     const { values } = nextProps;
 
@@ -332,10 +334,6 @@ class PopUpForm extends React.Component {
   }
 }
 
-PopUpForm.contextTypes = {
-  unsetDataToEdit: PropTypes.func.isRequired,
-};
-
 PopUpForm.defaultProps = {
   settingType: 'providers',
 };

packages/strapi-plugin-users-permissions/admin/src/containers/HomePage/index.js

@@ -11,10 +11,12 @@ import { injectIntl } from 'react-intl';
 import { bindActionCreators, compose } from 'redux';
 import { clone, get, includes, isEqual, isEmpty } from 'lodash';
 
-import { HeaderNav, PluginHeader } from 'strapi-helper-plugin';
+import { GlobalContext, HeaderNav, PluginHeader } from 'strapi-helper-plugin';
 
 import pluginId from '../../pluginId';
 
+import { HomePageContextProvider } from '../../contexts/HomePage';
+
 // Design
 import EditForm from '../../components/EditForm';
 import List from '../../components/List';
@@ -49,12 +51,7 @@ const keyBoardShortCuts = [18, 78];
 export class HomePage extends React.Component {
   state = { mapKey: {}, showModalEdit: false };
 
-  getChildContext = () => ({
-    pathname: this.props.location.pathname,
-    push: this.props.history.push,
-    setDataToEdit: this.props.setDataToEdit,
-    unsetDataToEdit: this.props.unsetDataToEdit,
-  });
+  static contextType = GlobalContext;
 
   componentDidMount() {
     this.props.fetchData(this.props.match.params.settingType);
@@ -239,48 +236,43 @@ export class HomePage extends React.Component {
       );
 
     return (
-      <form onSubmit={e => e.preventDefault()}>
-        <Wrapper className="container-fluid">
-          <PluginHeader
-            title={{ id: 'users-permissions.HomePage.header.title' }}
-            description={{
-              id: 'users-permissions.HomePage.header.description',
-            }}
-            actions={headerActions}
-          />
-          <HeaderNav links={this.headerNavLinks} />
-          {component}
-        </Wrapper>
+      <HomePageContextProvider
+        emitEvent={this.context.emitEvent}
+        pathname={this.props.location.pathname}
+        push={this.props.history.push}
+        setDataToEdit={this.props.setDataToEdit}
+        unsetDataToEdit={this.props.unsetDataToEdit}
+      >
+        <form onSubmit={e => e.preventDefault()}>
+          <Wrapper className="container-fluid">
+            <PluginHeader
+              title={{ id: 'users-permissions.HomePage.header.title' }}
+              description={{
+                id: 'users-permissions.HomePage.header.description',
+              }}
+              actions={headerActions}
+            />
+            <HeaderNav links={this.headerNavLinks} />
+            {component}
+          </Wrapper>
 
-        <PopUpForm
-          actionType="edit"
-          isOpen={this.state.showModalEdit}
-          dataToEdit={dataToEdit}
-          didCheckErrors={didCheckErrors}
-          formErrors={formErrors}
-          onChange={this.props.onChange}
-          onSubmit={this.handleSubmit}
-          settingType={match.params.settingType}
-          values={get(modifiedData, [this.getEndPoint(), dataToEdit], {})}
-        />
-      </form>
+          <PopUpForm
+            actionType="edit"
+            isOpen={this.state.showModalEdit}
+            dataToEdit={dataToEdit}
+            didCheckErrors={didCheckErrors}
+            formErrors={formErrors}
+            onChange={this.props.onChange}
+            onSubmit={this.handleSubmit}
+            settingType={match.params.settingType}
+            values={get(modifiedData, [this.getEndPoint(), dataToEdit], {})}
+          />
+        </form>
+      </HomePageContextProvider>
     );
   }
 }
 
-HomePage.childContextTypes = {
-  pathname: PropTypes.string,
-  push: PropTypes.func,
-  setDataToEdit: PropTypes.func,
-  unsetDataToEdit: PropTypes.func,
-};
-
-HomePage.contextTypes = {
-  emitEvent: PropTypes.func,
-};
-
-HomePage.defaultProps = {};
-
 HomePage.propTypes = {
   cancelChanges: PropTypes.func.isRequired,
   data: PropTypes.object.isRequired,

packages/strapi-plugin-users-permissions/admin/src/contexts/HomePage/index.js

@@ -0,0 +1,29 @@
+import React, { createContext, useContext } from 'react';
+import PropTypes from 'prop-types';
+
+const HomePageContext = createContext({});
+
+const HomePageContextProvider = ({ children, ...rest }) => {
+  return (
+    <HomePageContext.Provider value={rest}>{children}</HomePageContext.Provider>
+  );
+};
+
+const useHomePageContext = () => useContext(HomePageContext);
+
+HomePageContextProvider.defaultProps = {
+  pathname: '',
+  push: () => {},
+  setDataToEdit: () => {},
+  unsetDataToEdit: () => {},
+};
+
+HomePageContextProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  pathname: PropTypes.string,
+  push: PropTypes.func,
+  setDataToEdit: PropTypes.func,
+  unsetDataToEdit: PropTypes.func,
+};
+
+export { HomePageContext, HomePageContextProvider, useHomePageContext };