From b82cd7d05aa75828c3ed2c9cfdd8fc160408e2d5 Mon Sep 17 00:00:00 2001 From: Fernando Chavez Date: Thu, 6 Oct 2022 08:51:50 -0400 Subject: [PATCH] Add sort menu to the marketplace page --- .../hooks/useFetchMarketplacePlugins/index.js | 4 +-- .../useFetchMarketplacePlugins/utils/api.js | 10 +++++-- .../useFetchMarketplaceProviders/index.js | 4 +-- .../useFetchMarketplaceProviders/utils/api.js | 8 ++++-- .../components/SortFilter/index.js | 28 +++++++++++++++++++ .../admin/src/pages/MarketplacePage/index.js | 16 +++++++++-- 6 files changed, 58 insertions(+), 12 deletions(-) create mode 100644 packages/core/admin/admin/src/pages/MarketplacePage/components/SortFilter/index.js diff --git a/packages/core/admin/admin/src/hooks/useFetchMarketplacePlugins/index.js b/packages/core/admin/admin/src/hooks/useFetchMarketplacePlugins/index.js index 9675b71357..3b3d4fe9d5 100644 --- a/packages/core/admin/admin/src/hooks/useFetchMarketplacePlugins/index.js +++ b/packages/core/admin/admin/src/hooks/useFetchMarketplacePlugins/index.js @@ -2,10 +2,10 @@ import { useQuery } from 'react-query'; import { useNotification } from '@strapi/helper-plugin'; import { fetchMarketplacePlugins } from './utils/api'; -const useFetchMarketplacePlugins = (notifyLoad) => { +const useFetchMarketplacePlugins = (notifyLoad, sort) => { const toggleNotification = useNotification(); - return useQuery('list-marketplace-plugins', () => fetchMarketplacePlugins(), { + return useQuery(['list-marketplace-plugins', sort], () => fetchMarketplacePlugins({ sort }), { onSuccess() { if (notifyLoad) { notifyLoad(); 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 a889de2f5f..c53d98e0c4 100644 --- a/packages/core/admin/admin/src/hooks/useFetchMarketplacePlugins/utils/api.js +++ b/packages/core/admin/admin/src/hooks/useFetchMarketplacePlugins/utils/api.js @@ -1,9 +1,13 @@ import axios from 'axios'; -const MARKETPLACE_API_URL = 'https://market-api.strapi.io'; +const MARKETPLACE_API_URL = 'https://market-api-proxy.herokuapp.com'; -const fetchMarketplacePlugins = async () => { - const { data: response } = await axios.get(`${MARKETPLACE_API_URL}/plugins`); +const fetchMarketplacePlugins = async ({ sort = 'name:asc' } = null) => { + const { data: response } = await axios.get(`${MARKETPLACE_API_URL}/plugins`, { + params: { + sort, + }, + }); // Only keep v4 plugins const filteredResponse = { diff --git a/packages/core/admin/admin/src/hooks/useFetchMarketplaceProviders/index.js b/packages/core/admin/admin/src/hooks/useFetchMarketplaceProviders/index.js index 9970a335c5..a97ad51391 100644 --- a/packages/core/admin/admin/src/hooks/useFetchMarketplaceProviders/index.js +++ b/packages/core/admin/admin/src/hooks/useFetchMarketplaceProviders/index.js @@ -2,10 +2,10 @@ import { useQuery } from 'react-query'; import { useNotification } from '@strapi/helper-plugin'; import { fetchMarketplacePlugins } from './utils/api'; -const useFetchMarketplaceProviders = (notifyLoad) => { +const useFetchMarketplaceProviders = (notifyLoad, sort) => { const toggleNotification = useNotification(); - return useQuery('list-marketplace-providers', () => fetchMarketplacePlugins(), { + return useQuery(['list-marketplace-providers', sort], () => fetchMarketplacePlugins({ sort }), { onSuccess() { if (notifyLoad) { notifyLoad(); diff --git a/packages/core/admin/admin/src/hooks/useFetchMarketplaceProviders/utils/api.js b/packages/core/admin/admin/src/hooks/useFetchMarketplaceProviders/utils/api.js index c1776b1bfd..18254087f0 100644 --- a/packages/core/admin/admin/src/hooks/useFetchMarketplaceProviders/utils/api.js +++ b/packages/core/admin/admin/src/hooks/useFetchMarketplaceProviders/utils/api.js @@ -2,8 +2,12 @@ import axios from 'axios'; const MARKETPLACE_API_URL = 'https://market-api.strapi.io'; -const fetchMarketplacePlugins = async () => { - const { data } = await axios.get(`${MARKETPLACE_API_URL}/providers`); +const fetchMarketplacePlugins = async ({ sort = 'name:asc' } = null) => { + const { data } = await axios.get(`${MARKETPLACE_API_URL}/providers`, { + params: { + sort, + }, + }); return data; }; diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/SortFilter/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/SortFilter/index.js new file mode 100644 index 0000000000..b2f744b525 --- /dev/null +++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/SortFilter/index.js @@ -0,0 +1,28 @@ +import React from 'react'; +import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu'; +import { useIntl } from 'react-intl'; +import { NavLink } from 'react-router-dom'; +import { getTrad } from '../../../../content-manager/utils'; + +const SortFilter = () => { + const { formatMessage } = useIntl(); + + return ( + + + Alphabetical Order + + + Newest + + + ); +}; + +export default SortFilter; diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js index 1d5552fda4..93a88f88a5 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useRef, useState, useMemo } from 'react'; import { useIntl } from 'react-intl'; import { Helmet } from 'react-helmet'; import matchSorter from 'match-sorter'; @@ -20,6 +20,7 @@ import { Typography } from '@strapi/design-system/Typography'; import { Flex } from '@strapi/design-system/Flex'; import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/design-system/Tabs'; +import { useLocation } from 'react-router-dom'; import EmptyNpmPackageSearch from './components/EmptyNpmPackageSearch'; import PageHeader from './components/PageHeader'; import useFetchMarketplaceProviders from '../../hooks/useFetchMarketplaceProviders'; @@ -29,6 +30,7 @@ import offlineCloud from '../../assets/images/icon_offline-cloud.svg'; import useNavigatorOnLine from '../../hooks/useNavigatorOnLine'; import MissingPluginBanner from './components/MissingPluginBanner'; import NpmPackagesGrid from './components/NpmPackagesGrid'; +import SortFilter from './components/SortFilter'; const matchSearch = (npmPackages, search) => { return matchSorter(npmPackages, search, { @@ -39,6 +41,8 @@ const matchSearch = (npmPackages, search) => { }, { threshold: matchSorter.rankings.WORD_STARTS_WITH, key: 'attributes.description' }, ], + sorter: (items) => items, + baseSort: (a, b) => (a.index < b.index ? -1 : 1), }); }; @@ -52,6 +56,9 @@ const MarketPlacePage = () => { const [npmPackageType, setNpmPackageType] = useState('plugin'); const { autoReload: isInDevelopmentMode, dependencies, useYarn } = useAppInfos(); const isOnline = useNavigatorOnLine(); + const { search } = useLocation(); + const params = useMemo(() => new URLSearchParams(search), [search]); + const sort = params.get('sort') || 'name:asc'; useFocusWhenNavigate(); @@ -73,10 +80,10 @@ const MarketPlacePage = () => { }; const { status: marketplacePluginsStatus, data: marketplacePluginsResponse } = - useFetchMarketplacePlugins(notifyMarketplaceLoad); + useFetchMarketplacePlugins(notifyMarketplaceLoad, sort); const { status: marketplaceProvidersStatus, data: marketplaceProvidersResponse } = - useFetchMarketplaceProviders(notifyMarketplaceLoad); + useFetchMarketplaceProviders(notifyMarketplaceLoad, sort); const isLoading = [marketplacePluginsStatus, marketplaceProvidersStatus].includes('loading'); @@ -235,6 +242,9 @@ const MarketPlacePage = () => { + + + {/* Plugins panel */}