From 3d6b0dfe53b817861038e2758aa405cc9b182066 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=B4mulo=20Penido?= Date: Wed, 25 Oct 2023 13:10:38 -0300 Subject: [PATCH] fix: add tagList pagination --- src/taxonomy/api/hooks/api.js | 18 ++++---- src/taxonomy/api/hooks/selectors.js | 23 +++++++---- src/taxonomy/api/types.mjs | 5 +++ src/taxonomy/taxonomy-detail/TagListTable.jsx | 41 +++++++++++++------ 4 files changed, 60 insertions(+), 27 deletions(-) diff --git a/src/taxonomy/api/hooks/api.js b/src/taxonomy/api/hooks/api.js index df49e9ad86..44440f72dc 100644 --- a/src/taxonomy/api/hooks/api.js +++ b/src/taxonomy/api/hooks/api.js @@ -13,8 +13,8 @@ const getTaxonomyDetailApiUrl = (taxonomyId) => new URL( `api/content_tagging/v1/taxonomies/${taxonomyId}/`, getApiBaseUrl(), ).href; -const getTagListApiUrl = (taxonomyId) => new URL( - `api/content_tagging/v1/taxonomies/${taxonomyId}/tags/?page_size=300`, +const getTagListApiUrl = (taxonomyId, page) => new URL( + `api/content_tagging/v1/taxonomies/${taxonomyId}/tags/?page=${page + 1}`, getApiBaseUrl(), ).href; @@ -48,13 +48,15 @@ export const useTaxonomyDetailData = (taxonomyId) => ( /** * @param {number} taxonomyId + * @param {number} options * @returns {import('@tanstack/react-query').UseQueryResult} */ -export const useTagListData = (taxonomyId) => ( - useQuery({ - queryKey: ['tagList', taxonomyId], - queryFn: () => getAuthenticatedHttpClient().get(getTagListApiUrl(taxonomyId)) +export const useTagListData = (taxonomyId, options) => { + const { pageIndex } = options; + return useQuery({ + queryKey: ['tagList', taxonomyId, pageIndex], + queryFn: () => getAuthenticatedHttpClient().get(getTagListApiUrl(taxonomyId, pageIndex)) .then(camelCaseObject) .then((response) => response.data), - }) -); + }); +}; diff --git a/src/taxonomy/api/hooks/selectors.js b/src/taxonomy/api/hooks/selectors.js index baa19305c0..f49d6fe6cd 100644 --- a/src/taxonomy/api/hooks/selectors.js +++ b/src/taxonomy/api/hooks/selectors.js @@ -62,29 +62,38 @@ export const useTaxonomyDetailDataResponse = (taxonomyId) => { /** * @param {number} taxonomyId - * @returns {Pick} + * @param {import("../types.mjs").QueryOptions} options + * @returns { + * Pick< + * import('@tanstack/react-query').UseQueryResult, + * "error" | "isError" | "isFetched" | "isLoading" | "isSuccess" + * > + * } */ -export const useTagListDataStatus = (taxonomyId) => { +export const useTagListDataStatus = (taxonomyId, options) => { const { - isError, error, + isError, isFetched, + isLoading, isSuccess, - } = useTagListData(taxonomyId); + } = useTagListData(taxonomyId, options); return { - isError, error, + isError, isFetched, + isLoading, isSuccess, }; }; /** * @param {number} taxonomyId + * @param {import("../types.mjs").QueryOptions} options * @returns {import("../types.mjs").TaxonomyData | undefined} */ -export const useTagListDataResponse = (taxonomyId) => { - const { isSuccess, data } = useTagListData(taxonomyId); +export const useTagListDataResponse = (taxonomyId, options) => { + const { isSuccess, data } = useTagListData(taxonomyId, options); if (isSuccess) { return data; } diff --git a/src/taxonomy/api/types.mjs b/src/taxonomy/api/types.mjs index 36e47dbe10..57f7f74f10 100644 --- a/src/taxonomy/api/types.mjs +++ b/src/taxonomy/api/types.mjs @@ -39,3 +39,8 @@ * @property {Object} data * @property {string} status */ + +/** + * @typedef {Object} QueryOptions + * @property {number} page_index + */ diff --git a/src/taxonomy/taxonomy-detail/TagListTable.jsx b/src/taxonomy/taxonomy-detail/TagListTable.jsx index 4bcff79bc4..b902a4005d 100644 --- a/src/taxonomy/taxonomy-detail/TagListTable.jsx +++ b/src/taxonomy/taxonomy-detail/TagListTable.jsx @@ -1,30 +1,47 @@ +import { useState } from 'react'; import { DataTable, - TextFilter, } from '@edx/paragon'; import Proptypes from 'prop-types'; +import _ from 'lodash'; import { useTagListDataResponse, useTagListDataStatus } from '../api/hooks/selectors'; const TagListTable = ({ taxonomyId }) => { + const [options, setOptions] = useState({ + pageIndex: 0, + }); + const useTagListData = () => { - const { isError, isFetched } = useTagListDataStatus(taxonomyId); - const tagList = useTagListDataResponse(taxonomyId); - return { isError, isFetched, tagList }; + const { isError, isFetched, isLoading } = useTagListDataStatus(taxonomyId, options); + const tagList = useTagListDataResponse(taxonomyId, options); + return { + isError, + isFetched, + isLoading, + tagList, + }; }; - const { tagList } = useTagListData(taxonomyId); - if (!tagList || !tagList.results) { - return 'Loading...'; - } + const { tagList, isLoading } = useTagListData(); + + const fetchData = (args) => { + if (!_.isEqual(args, options)) { + setOptions({ ...args }); + } + }; return ( { }; TagListTable.propTypes = { - taxonomyId: Proptypes.number.isRequired, + taxonomyId: Proptypes.string.isRequired, }; export default TagListTable;