From b7c09a816d577d988b048eaa6540e915d30b0f02 Mon Sep 17 00:00:00 2001
From: soupette <cyril.lpz@gmail.com>
Date: Fri, 28 Feb 2020 09:29:12 +0100
Subject: [PATCH] Remove sage from Marketplace

Signed-off-by: soupette <cyril.lpz@gmail.com>
---
 .../admin/src/components/PluginCard/index.js  |   3 +-
 .../admin/src/containers/Admin/index.js       |   8 +-
 .../src/containers/MarketplacePage/Wrapper.js |  10 ++
 .../src/containers/MarketplacePage/index.js   | 106 ++++++++++++++++++
 .../containers/MarketplacePage/useFetch.js    |  52 +++++++++
 5 files changed, 176 insertions(+), 3 deletions(-)
 create mode 100644 packages/strapi-admin/admin/src/containers/MarketplacePage/Wrapper.js
 create mode 100644 packages/strapi-admin/admin/src/containers/MarketplacePage/index.js
 create mode 100644 packages/strapi-admin/admin/src/containers/MarketplacePage/useFetch.js

diff --git a/packages/strapi-admin/admin/src/components/PluginCard/index.js b/packages/strapi-admin/admin/src/components/PluginCard/index.js
index e8909684d4..42588427e4 100644
--- a/packages/strapi-admin/admin/src/components/PluginCard/index.js
+++ b/packages/strapi-admin/admin/src/components/PluginCard/index.js
@@ -80,7 +80,7 @@ class PluginCard extends React.Component {
     } else if (currentEnvironment !== 'development') {
       this.setState({ showModalEnv: true });
     } else if (!isAlreadyInstalled) {
-      downloadPlugin(e);
+      downloadPlugin(id);
     } else {
       push('/list-plugins');
     }
@@ -152,6 +152,7 @@ class PluginCard extends React.Component {
               <Button
                 className={`${buttonClass} button`}
                 label={buttonLabel}
+                type="button"
                 onClick={this.handleDownloadPlugin}
               />
               <a
diff --git a/packages/strapi-admin/admin/src/containers/Admin/index.js b/packages/strapi-admin/admin/src/containers/Admin/index.js
index 57d0ef67b2..ec1221f25f 100644
--- a/packages/strapi-admin/admin/src/containers/Admin/index.js
+++ b/packages/strapi-admin/admin/src/containers/Admin/index.js
@@ -28,7 +28,8 @@ import LeftMenu from '../LeftMenu';
 import ListPluginsPage from '../ListPluginsPage';
 import LocaleToggle from '../LocaleToggle';
 import HomePage from '../HomePage';
-import Marketplace from '../Marketplace';
+// import Marketplace from '../Marketplace';
+import Marketplace from '../MarketplacePage';
 import NotFoundPage from '../NotFoundPage';
 import OnboardingVideos from '../Onboarding';
 import SettingsPage from '../SettingsPage';
@@ -135,7 +136,7 @@ export class Admin extends React.Component {
       disableGlobalOverlayBlocker,
       emitEvent,
       enableGlobalOverlayBlocker,
-      intl: { formatMessage },
+      intl: { formatMessage, locale },
       updatePlugin,
     } = this.props;
 
@@ -154,6 +155,7 @@ export class Admin extends React.Component {
         autoReload={autoReload}
         emitEvent={emitEvent}
         currentEnvironment={currentEnvironment}
+        currentLocale={locale}
         disableGlobalOverlayBlocker={disableGlobalOverlayBlocker}
         enableGlobalOverlayBlocker={enableGlobalOverlayBlocker}
         formatMessage={formatMessage}
@@ -219,6 +221,7 @@ export class Admin extends React.Component {
 Admin.defaultProps = {
   intl: {
     formatMessage: () => {},
+    locale: 'en',
   },
 };
 
@@ -240,6 +243,7 @@ Admin.propTypes = {
   }).isRequired,
   intl: PropTypes.shape({
     formatMessage: PropTypes.func,
+    locale: PropTypes.string,
   }),
   location: PropTypes.object.isRequired,
   setAppError: PropTypes.func.isRequired,
diff --git a/packages/strapi-admin/admin/src/containers/MarketplacePage/Wrapper.js b/packages/strapi-admin/admin/src/containers/MarketplacePage/Wrapper.js
new file mode 100644
index 0000000000..985ae7780c
--- /dev/null
+++ b/packages/strapi-admin/admin/src/containers/MarketplacePage/Wrapper.js
@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  padding: 18px 30px !important;
+  > div:first-child {
+    margin-bottom: 11px;
+  }
+`;
+
+export default Wrapper;
diff --git a/packages/strapi-admin/admin/src/containers/MarketplacePage/index.js b/packages/strapi-admin/admin/src/containers/MarketplacePage/index.js
new file mode 100644
index 0000000000..124bb087ff
--- /dev/null
+++ b/packages/strapi-admin/admin/src/containers/MarketplacePage/index.js
@@ -0,0 +1,106 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  LoadingIndicatorPage,
+  useGlobalContext,
+  request,
+} from 'strapi-helper-plugin';
+import { Header } from '@buffetjs/custom';
+
+import PageTitle from '../../components/PageTitle';
+import PluginCard from '../../components/PluginCard';
+import Wrapper from './Wrapper';
+import useFetch from './useFetch';
+
+const MarketPlacePage = ({ history }) => {
+  const {
+    autoReload,
+    currentEnvironment,
+    formatMessage,
+    plugins,
+  } = useGlobalContext();
+  const { isLoading, data } = useFetch();
+
+  if (isLoading) {
+    return <LoadingIndicatorPage />;
+  }
+
+  const handleDownloadPlugin = async pluginId => {
+    // Force the Overlayblocker to be displayed
+    const overlayblockerParams = {
+      enabled: true,
+      title: 'app.components.InstallPluginPage.Download.title',
+      description: 'app.components.InstallPluginPage.Download.description',
+    };
+    // Lock the app
+    strapi.lockApp(overlayblockerParams);
+
+    try {
+      const opts = {
+        method: 'POST',
+        body: {
+          plugin: pluginId,
+          port: window.location.port,
+        },
+      };
+      const response = await request(
+        '/admin/plugins/install',
+        opts,
+        overlayblockerParams
+      );
+
+      if (response.ok) {
+        // Reload the app
+        window.location.reload();
+      }
+    } catch (err) {
+      strapi.unlockApp();
+      strapi.notification.error('notification.error');
+    }
+  };
+
+  return (
+    <div>
+      <PageTitle
+        title={formatMessage({
+          id: 'app.components.InstallPluginPage.helmet',
+        })}
+      />
+      <Wrapper className="container-fluid">
+        <Header
+          title={{
+            label: formatMessage({
+              id: 'app.components.InstallPluginPage.title',
+            }),
+          }}
+          content={formatMessage({
+            id: 'app.components.InstallPluginPage.description',
+          })}
+          actions={[]}
+        />
+        <div className="row" style={{ paddingTop: '4.1rem' }}>
+          {data.map(plugin => {
+            return (
+              <PluginCard
+                autoReload={autoReload}
+                currentEnvironment={currentEnvironment}
+                downloadPlugin={handleDownloadPlugin}
+                key={plugin.id}
+                history={history}
+                plugin={plugin}
+                showSupportUsButton={false}
+                isAlreadyInstalled={plugins[plugin.id] !== undefined}
+              />
+            );
+          })}
+        </div>
+      </Wrapper>
+    </div>
+  );
+};
+
+MarketPlacePage.propTypes = {
+  history: PropTypes.object.isRequired,
+};
+
+export default MarketPlacePage;
diff --git a/packages/strapi-admin/admin/src/containers/MarketplacePage/useFetch.js b/packages/strapi-admin/admin/src/containers/MarketplacePage/useFetch.js
new file mode 100644
index 0000000000..2461e05617
--- /dev/null
+++ b/packages/strapi-admin/admin/src/containers/MarketplacePage/useFetch.js
@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { useGlobalContext } from 'strapi-helper-plugin';
+
+const useFetch = () => {
+  const { currentLocale } = useGlobalContext();
+  const [state, setState] = useState({
+    error: false,
+    isLoading: true,
+    data: null,
+  });
+
+  useEffect(() => {
+    const CancelToken = axios.CancelToken;
+    const source = CancelToken.source();
+
+    const getData = async () => {
+      try {
+        const { data } = await axios.get(
+          'https://marketplace.strapi.io/plugins',
+          {
+            cancelToken: source.token,
+            params: { lang: currentLocale },
+          }
+        );
+
+        setState({
+          isLoading: false,
+          data,
+          error: false,
+        });
+      } catch (err) {
+        if (axios.isCancel(err)) {
+          // Silent
+        } else {
+          // handle error
+          setState(prev => ({ ...prev, isLoading: false, error: true }));
+        }
+      }
+    };
+
+    getData();
+
+    return () => {
+      source.cancel();
+    };
+  }, [currentLocale]);
+
+  return state;
+};
+
+export default useFetch;