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..5bb881cbcb 100644 --- a/src/taxonomy/api/hooks/selectors.js +++ b/src/taxonomy/api/hooks/selectors.js @@ -62,15 +62,16 @@ export const useTaxonomyDetailDataResponse = (taxonomyId) => { /** * @param {number} taxonomyId + * @param {import("../types.mjs").QueryOptions} options * @returns {Pick} */ -export const useTagListDataStatus = (taxonomyId) => { +export const useTagListDataStatus = (taxonomyId, options) => { const { isError, error, isFetched, isSuccess, - } = useTagListData(taxonomyId); + } = useTagListData(taxonomyId, options); return { isError, error, @@ -81,10 +82,11 @@ export const useTagListDataStatus = (taxonomyId) => { /** * @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..85cc6c6610 100644 --- a/src/taxonomy/taxonomy-detail/TagListTable.jsx +++ b/src/taxonomy/taxonomy-detail/TagListTable.jsx @@ -1,30 +1,44 @@ +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); + const { isError, isFetched } = useTagListDataStatus(taxonomyId, options); + const tagList = useTagListDataResponse(taxonomyId, options); return { isError, isFetched, tagList }; }; - const { tagList } = useTagListData(taxonomyId); + const { tagList, isFetched } = useTagListData(); + + const fetchData = (args) => { + if (!_.isEqual(args, options)) { + setOptions({ ...args }); + } + }; - if (!tagList || !tagList.results) { + if (!isFetched) { return 'Loading...'; } return ( { }; TagListTable.propTypes = { - taxonomyId: Proptypes.number.isRequired, + taxonomyId: Proptypes.string.isRequired, }; export default TagListTable;