Skip to content

Commit

Permalink
fix: add tagList pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
rpenido committed Oct 25, 2023
1 parent 591604c commit 3d6b0df
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 27 deletions.
18 changes: 10 additions & 8 deletions src/taxonomy/api/hooks/api.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -48,13 +48,15 @@ export const useTaxonomyDetailData = (taxonomyId) => (

/**
* @param {number} taxonomyId
* @param {number} options
* @returns {import('@tanstack/react-query').UseQueryResult<import('../types.mjs').TaxonomyData>}
*/
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),
})
);
});
};
23 changes: 16 additions & 7 deletions src/taxonomy/api/hooks/selectors.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,29 +62,38 @@ export const useTaxonomyDetailDataResponse = (taxonomyId) => {

/**
* @param {number} taxonomyId
* @returns {Pick<import('@tanstack/react-query').UseQueryResult, "error" | "isError" | "isFetched" | "isSuccess">}
* @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;
}
Expand Down
5 changes: 5 additions & 0 deletions src/taxonomy/api/types.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -39,3 +39,8 @@
* @property {Object} data
* @property {string} status
*/

/**
* @typedef {Object} QueryOptions
* @property {number} page_index
*/
41 changes: 29 additions & 12 deletions src/taxonomy/taxonomy-detail/TagListTable.jsx
Original file line number Diff line number Diff line change
@@ -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);

Check failure on line 26 in src/taxonomy/taxonomy-detail/TagListTable.jsx

View workflow job for this annotation

GitHub Actions / tests

More than 1 blank line not allowed
if (!tagList || !tagList.results) {
return 'Loading...';
}
const { tagList, isLoading } = useTagListData();

const fetchData = (args) => {
if (!_.isEqual(args, options)) {
setOptions({ ...args });
}
};

return (
<DataTable
isLoading={isLoading}
isPaginated
isSortable
data={tagList.results}
itemCount={tagList.count}
manualPagination
fetchData={fetchData}
data={tagList?.results || []}
itemCount={tagList?.count}
pageCount={tagList?.numPages}
initialState={options}
columns={[
{
Header: 'Value',
Expand All @@ -41,7 +58,7 @@ const TagListTable = ({ taxonomyId }) => {
};

TagListTable.propTypes = {
taxonomyId: Proptypes.number.isRequired,
taxonomyId: Proptypes.string.isRequired,
};

export default TagListTable;

0 comments on commit 3d6b0df

Please sign in to comment.