From 048e5a2f4ecdcebe7ca17703a6e735c8089afef0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?= Date: Fri, 11 Nov 2022 17:07:17 +0100 Subject: [PATCH] Add pagination to marketplace --- .../useFetchMarketplacePlugins/utils/api.js | 2 ++ .../components/NpmPackagesPagination/index.js | 27 +++++++++++++++++++ .../admin/src/pages/MarketplacePage/index.js | 27 ++++++++++++++++--- .../src/pages/MarketplacePage/tests/server.js | 8 ++++++ .../src/components/PageSizeURLQuery/index.js | 17 +++++++----- 5 files changed, 71 insertions(+), 10 deletions(-) create mode 100644 packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesPagination/index.js diff --git a/packages/core/admin/admin/src/hooks/useFetchMarketplacePlugins/utils/api.js b/packages/core/admin/admin/src/hooks/useFetchMarketplacePlugins/utils/api.js index a90ed7863c..3bf33beac6 100644 --- a/packages/core/admin/admin/src/hooks/useFetchMarketplacePlugins/utils/api.js +++ b/packages/core/admin/admin/src/hooks/useFetchMarketplacePlugins/utils/api.js @@ -1,10 +1,12 @@ import axios from 'axios'; +import qs from 'qs'; const MARKETPLACE_API_URL = 'https://market-api.strapi.io'; const fetchMarketplacePlugins = async (params = {}) => { const { data: response } = await axios.get(`${MARKETPLACE_API_URL}/plugins`, { params, + paramsSerializer: (params) => qs.stringify(params), }); // Only keep v4 plugins diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesPagination/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesPagination/index.js new file mode 100644 index 0000000000..a6ad08681e --- /dev/null +++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesPagination/index.js @@ -0,0 +1,27 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Box } from '@strapi/design-system/Box'; +import { Flex } from '@strapi/design-system/Flex'; +import { PaginationURLQuery, PageSizeURLQuery } from '@strapi/helper-plugin'; + +const NpmPackagesPagination = ({ pagination }) => { + return ( + + + + + + + ); +}; + +NpmPackagesPagination.propTypes = { + pagination: PropTypes.shape({ + page: PropTypes.number.isRequired, + pageCount: PropTypes.number.isRequired, + pageSize: PropTypes.number.isRequired, + total: PropTypes.number.isRequired, + }).isRequired, +}; + +export default NpmPackagesPagination; diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js index be0898093b..6cc5d8a4a0 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js @@ -39,6 +39,7 @@ import MissingPluginBanner from './components/MissingPluginBanner'; import NpmPackagesGrid from './components/NpmPackagesGrid'; import SortSelect from './components/SortSelect'; import NpmPackagesFilters from './components/NpmPackagesFilters'; +import NpmPackagesPagination from './components/NpmPackagesPagination'; const matchSearch = (npmPackages, search) => { return matchSorter(npmPackages, search, { @@ -67,6 +68,11 @@ const MarketPlacePage = () => { const npmPackageType = query?.npmPackageType || 'plugin'; + const paginationParams = { + page: query?.page || 1, + pageSize: query?.pageSize || 24, + }; + const [tabQuery, setTabQuery] = useState({ plugin: npmPackageType === 'plugin' ? { ...query } : {}, provider: npmPackageType === 'provider' ? { ...query } : {}, @@ -92,10 +98,16 @@ const MarketPlacePage = () => { }; const { status: marketplaceProvidersStatus, data: marketplaceProvidersResponse } = - useFetchMarketplaceProviders(notifyMarketplaceLoad, tabQuery.provider); + useFetchMarketplaceProviders(notifyMarketplaceLoad, { + ...tabQuery.provider, + pagination: paginationParams, + }); const { status: marketplacePluginsStatus, data: marketplacePluginsResponse } = - useFetchMarketplacePlugins(notifyMarketplaceLoad, tabQuery.plugin); + useFetchMarketplacePlugins(notifyMarketplaceLoad, { + ...tabQuery.plugin, + pagination: paginationParams, + }); const isLoading = [marketplacePluginsStatus, marketplaceProvidersStatus].includes('loading'); @@ -192,7 +204,7 @@ const MarketPlacePage = () => { const hasTabQuery = tabQuery[selectedTab] && Object.keys(tabQuery[selectedTab]).length; if (hasTabQuery) { - setQuery({ ...tabQuery[selectedTab], npmPackageType: selectedTab }); + setQuery({ ...tabQuery[selectedTab], npmPackageType: selectedTab, page: 1 }); } else { setQuery({ npmPackageType: selectedTab, @@ -200,6 +212,7 @@ const MarketPlacePage = () => { collections: [], categories: [], sort: 'name:asc', + page: 1, }); } }; @@ -226,6 +239,11 @@ const MarketPlacePage = () => { : marketplaceProvidersResponse.meta.collections; const possibleCategories = marketplacePluginsResponse.meta.categories; + const { pagination } = + npmPackageType === 'plugin' + ? marketplacePluginsResponse.meta + : marketplaceProvidersResponse.meta; + return (
@@ -333,7 +351,8 @@ const MarketPlacePage = () => { - + + diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/server.js b/packages/core/admin/admin/src/pages/MarketplacePage/tests/server.js index 505e978034..c17e276e4b 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/server.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/server.js @@ -3,6 +3,14 @@ import { rest } from 'msw'; import { responses as pluginResponses } from './mocks/plugins'; import { responses as providerResponses } from './mocks/providers'; +rest.get('https://market-api.strapi.io/plugins?collections[]', (req, res, ctx) => { + return { + data: [ + + ] + } +} + const handlers = [ rest.get('https://market-api.strapi.io/plugins', (req, res, ctx) => { let responseData; diff --git a/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/index.js b/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/index.js index fc42c8dae4..b8ed1fe109 100644 --- a/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/index.js +++ b/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/index.js @@ -11,7 +11,7 @@ import PropTypes from 'prop-types'; import useQueryParams from '../../hooks/useQueryParams'; import useTracking from '../../hooks/useTracking'; -const PageSizeURLQuery = ({ trackedEvent }) => { +const PageSizeURLQuery = ({ trackedEvent, options, defaultValue }) => { const { formatMessage } = useIntl(); const [{ query }, setQuery] = useQueryParams(); const { trackUsage } = useTracking(); @@ -26,7 +26,7 @@ const PageSizeURLQuery = ({ trackedEvent }) => { page: 1, }); }; - const pageSize = query?.pageSize || '10'; + const pageSize = query?.pageSize || defaultValue; return ( @@ -39,10 +39,11 @@ const PageSizeURLQuery = ({ trackedEvent }) => { onChange={handleChange} value={pageSize} > - - - - + {options.map((option) => ( + + ))} @@ -58,10 +59,14 @@ const PageSizeURLQuery = ({ trackedEvent }) => { PageSizeURLQuery.defaultProps = { trackedEvent: null, + options: ['10', '20', '50', '100'], + defaultValue: '10', }; PageSizeURLQuery.propTypes = { trackedEvent: PropTypes.string, + options: PropTypes.arrayOf(PropTypes.string.isRequired), + defaultValue: PropTypes.string, }; export default PageSizeURLQuery;