Remove legacy context api in admin

packages/strapi-admin/admin/src/components/InstallPluginPopup/index.js

@@ -1,8 +1,8 @@
 /*
-*
+ *
-* InstallPluginPopup
+ * InstallPluginPopup
-*
+ *
-*/
+ */
 
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -10,26 +10,28 @@ import { FormattedMessage } from 'react-intl';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import { map } from 'lodash';
 import cn from 'classnames';
-
+import { MarketPlaceContext } from '../../contexts/MarketPlace';
 import Official from '../Official';
 // import StarsContainer from 'components/StarsContainer';
 
 import styles from './styles.scss';
 
 class InstallPluginPopup extends React.Component {
+  static contextType = MarketPlaceContext;
+
   handleClick = () => {
     this.props.history.push({ pathname: this.props.history.location.pathname });
 
     if (!this.props.isAlreadyInstalled) {
       this.context.downloadPlugin(this.props.plugin.id);
     }
-  }
+  };
 
   toggle = () => {
     this.props.history.push({
       pathname: this.props.history.location.pathname,
     });
-  }
+  };
 
   navLinks = [
     {
@@ -56,19 +58,42 @@ class InstallPluginPopup extends React.Component {
 
   render() {
     const descriptions = {
-      short: this.props.plugin.id === 'support-us' ? <FormattedMessage id={this.props.plugin.description.short} /> : this.props.plugin.description.short,
+      short:
-      long: this.props.plugin.id === 'support-us' ? <FormattedMessage id={this.props.plugin.description.long || this.props.plugin.description.short} /> : this.props.plugin.description.long || this.props.plugin.description.short,
+        this.props.plugin.id === 'support-us' ? (
+          <FormattedMessage id={this.props.plugin.description.short} />
+        ) : (
+          this.props.plugin.description.short
+        ),
+      long:
+        this.props.plugin.id === 'support-us' ? (
+          <FormattedMessage
+            id={
+              this.props.plugin.description.long ||
+              this.props.plugin.description.short
+            }
+          />
+        ) : (
+          this.props.plugin.description.long ||
+          this.props.plugin.description.short
+        ),
     };
-    const buttonName = this.props.isAlreadyInstalled ? 'app.components.PluginCard.Button.label.install' : 'app.components.InstallPluginPopup.downloads';
+    const buttonName = this.props.isAlreadyInstalled
+      ? 'app.components.PluginCard.Button.label.install'
+      : 'app.components.InstallPluginPopup.downloads';
 
     return (
-      <Modal isOpen={this.props.isOpen} toggle={this.toggle} className={styles.modalPosition}>
+      <Modal
+        isOpen={this.props.isOpen}
+        toggle={this.toggle}
+        className={styles.modalPosition}
+      >
         <ModalHeader toggle={this.toggle} className={styles.modalHeader} />
         <ModalBody className={styles.modalBody}>
           <div className={styles.wrapper}>
-
             <div className={styles.headerWrapper}>
-              <div className={styles.logo}><img src={`${this.props.plugin.logo}`} alt="icon" /></div>
+              <div className={styles.logo}>
+                <img src={`${this.props.plugin.logo}`} alt="icon" />
+              </div>
               <div className={styles.headerInfo}>
                 <div className={styles.name}>{this.props.plugin.name}</div>
                 <div className={styles.ratings}>
@@ -86,8 +111,16 @@ class InstallPluginPopup extends React.Component {
                 </div>
                 <div className={styles.headerButtonContainer}>
                   <div>
-                    <i className={`fa fa-${this.props.plugin.isCompatible ? 'check' : 'times'}`} />
+                    <i
-                    <FormattedMessage id={`app.components.PluginCard.compatible${this.props.plugin.id === 'support-us' ? 'Community' : ''}`} />
+                      className={`fa fa-${
+                        this.props.plugin.isCompatible ? 'check' : 'times'
+                      }`}
+                    />
+                    <FormattedMessage
+                      id={`app.components.PluginCard.compatible${
+                        this.props.plugin.id === 'support-us' ? 'Community' : ''
+                      }`}
+                    />
                   </div>
                   <div>
                     <div>
@@ -95,7 +128,10 @@ class InstallPluginPopup extends React.Component {
                       <span style={{ fontWeight: '600' }}>+{this.props.plugin.downloads_nb}k&nbsp;</span><FormattedMessage id="app.components.InstallPluginPopup.downloads" />
                       */}
                     </div>
-                    <div className={styles.buttonWrapper} onClick={this.handleClick}>
+                    <div
+                      className={styles.buttonWrapper}
+                      onClick={this.handleClick}
+                    >
                       <div>
                         <FormattedMessage id={buttonName} />
                       </div>
@@ -110,37 +146,40 @@ class InstallPluginPopup extends React.Component {
           </div>
           <div className={styles.navContainer}>
             {map(this.navLinks, link => {
-              const isActive = this.props.history.location.hash.split('::')[1] === link.name;
+              const isActive =
+                this.props.history.location.hash.split('::')[1] === link.name;
 
               return (
                 <div
                   key={link.name}
-                  className={cn(isActive ? styles.navLink : '', link.name !== 'description' ? styles.notAllowed : '')}
+                  className={cn(
+                    isActive ? styles.navLink : '',
+                    link.name !== 'description' ? styles.notAllowed : ''
+                  )}
                   onClick={() => {
                     if (link.name === 'description') {
-                      this.props.history.push({ pathname: this.props.history.location.pathname, hash: `${this.props.plugin.id}::${link.name}` });
+                      this.props.history.push({
+                        pathname: this.props.history.location.pathname,
+                        hash: `${this.props.plugin.id}::${link.name}`,
+                      });
                     }
                   }}
-                  style={isActive ? { paddingTop: '4px'} : { paddingTop: '6px' }}
+                  style={
+                    isActive ? { paddingTop: '4px' } : { paddingTop: '6px' }
+                  }
                 >
                   <FormattedMessage id={link.content} />
                 </div>
               );
             })}
           </div>
-          <div className={styles.pluginDescription}>
+          <div className={styles.pluginDescription}>{descriptions.long}</div>
-            {descriptions.long}
-          </div>
         </ModalBody>
       </Modal>
     );
   }
 }
 
-InstallPluginPopup.contextTypes = {
-  downloadPlugin: PropTypes.func.isRequired,
-};
-
 InstallPluginPopup.defaultProps = {
   description: {
     short: 'app.Components.InstallPluginPopup.noDescription',

packages/strapi-admin/admin/src/containers/Marketplace/index.js

@@ -13,6 +13,7 @@ import cn from 'classnames';
 
 import { LoadingIndicatorPage, PluginHeader } from 'strapi-helper-plugin';
 
+import { MarketPlaceContextProvider } from '../../contexts/MarketPlace';
 // Design
 import PageTitle from '../../components/PageTitle';
 import PluginCard from '../../components/PluginCard';
@@ -33,10 +34,6 @@ import saga from './saga';
 import styles from './styles.scss';
 
 class Marketplace extends React.Component {
-  getChildContext = () => ({
-    downloadPlugin: this.props.downloadPlugin,
-  });
-
   componentDidMount() {
     // Fetch the available and installed plugins
     this.props.getAvailableAndInstalledPlugins();
@@ -87,29 +84,29 @@ class Marketplace extends React.Component {
     }
 
     return (
-      <div>
+      <MarketPlaceContextProvider downloadPlugin={this.props.downloadPlugin}>
-        <FormattedMessage id="app.components.InstallPluginPage.helmet">
+        <div>
-          {this.renderHelmet}
+          <FormattedMessage id="app.components.InstallPluginPage.helmet">
-        </FormattedMessage>
+            {this.renderHelmet}
-        <div className={cn('container-fluid', styles.containerFluid)}>
+          </FormattedMessage>
-          <PluginHeader
+          <div className={cn('container-fluid', styles.containerFluid)}>
-            title={{ id: 'app.components.InstallPluginPage.title' }}
+            <PluginHeader
-            description={{ id: 'app.components.InstallPluginPage.description' }}
+              title={{ id: 'app.components.InstallPluginPage.title' }}
-            actions={[]}
+              description={{
-          />
+                id: 'app.components.InstallPluginPage.description',
-          <div className={cn('row', styles.wrapper)}>
+              }}
-            {Object.keys(availablePlugins).map(this.renderPluginCard)}
+              actions={[]}
+            />
+            <div className={cn('row', styles.wrapper)}>
+              {Object.keys(availablePlugins).map(this.renderPluginCard)}
+            </div>
           </div>
         </div>
-      </div>
+      </MarketPlaceContextProvider>
     );
   }
 }
 
-Marketplace.childContextTypes = {
-  downloadPlugin: PropTypes.func.isRequired,
-};
-
 Marketplace.defaultProps = {};
 
 Marketplace.propTypes = {

packages/strapi-admin/admin/src/contexts/MarketPlace/index.js

@@ -0,0 +1,27 @@
+import React, { createContext, useContext } from 'react';
+import PropTypes from 'prop-types';
+
+const MarketPlaceContext = createContext({});
+
+const MarketPlaceContextProvider = ({ children, ...rest }) => {
+  return (
+    <MarketPlaceContext.Provider value={rest}>
+      {children}
+    </MarketPlaceContext.Provider>
+  );
+};
+
+const useMarketPlaceContext = () => useContext(MarketPlaceContext);
+
+MarketPlaceContextProvider.defaultProps = {};
+
+MarketPlaceContextProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  dowloadPlugin: PropTypes.func.isRequired,
+};
+
+export {
+  MarketPlaceContext,
+  MarketPlaceContextProvider,
+  useMarketPlaceContext,
+};