diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/PluginCard/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/PluginCard/index.js index b23c60270a..31849684f2 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/components/PluginCard/index.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/PluginCard/index.js @@ -24,7 +24,7 @@ const EllipsisText = styled(Typography)` overflow: hidden; `; -const PluginCard = ({ plugin, installedPlugins }) => { +const PluginCard = ({ plugin, installedPlugins, useYarn }) => { const { attributes } = plugin; const { formatMessage } = useIntl(); const toggleNotification = useNotification(); @@ -38,6 +38,9 @@ const PluginCard = ({ plugin, installedPlugins }) => { ? `yarn add ${attributes.npmPackageName}` : `npm install ${attributes.npmPackageName}`; + // TODO: remove and use + console.log(useYarn); + return ( { const { formatMessage } = useIntl(); const { trackUsage } = useTracking(); + const toggleNotification = useNotification(); useFocusWhenNavigate(); @@ -43,9 +47,27 @@ const MarketPlacePage = () => { status: installedPluginsStatus, data: installedPluginsResponse, } = useFetchInstalledPlugins(); + const { data: appInfoResponse, status: appInfoStatus } = useQuery( + 'app-information', + fetchAppInformation, + { + onError: () => { + toggleNotification({ + type: 'warning', + message: { id: 'notification.error', defaultMessage: 'An error occured' }, + }); + }, + } + ); - const isLoading = marketplacePluginsStatus === 'loading' || installedPluginsStatus === 'loading'; - const hasFailed = marketplacePluginsStatus === 'error' || installedPluginsStatus === 'error'; + const isLoading = + marketplacePluginsStatus === 'loading' || + installedPluginsStatus === 'loading' || + appInfoStatus === 'loading'; + const hasFailed = + marketplacePluginsStatus === 'error' || + installedPluginsStatus === 'error' || + appInfoStatus === 'error'; useEffect(() => { trackUsage('didGoToMarketplace'); @@ -94,7 +116,11 @@ const MarketPlacePage = () => { {marketplacePluginsResponse.data.map(plugin => ( - + ))} diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/utils/api.js b/packages/core/admin/admin/src/pages/MarketplacePage/utils/api.js index e89885df86..74139b64d7 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/utils/api.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/utils/api.js @@ -1,10 +1,8 @@ import { axiosInstance } from '../../../core/utils'; -const fetchAppInformation = async notify => { +const fetchAppInformation = async () => { const { data } = await axiosInstance.get('/admin/information'); - notify(); - return data; };