fix: TagList pagination

open-craft · Oct 25, 2023 · d2c4985 · d2c4985
1 parent 1499bb5
commit d2c4985
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 19 deletions.
diff --git 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<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),
-  })
-);
+  });
+};
diff --git 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<import('@tanstack/react-query').UseQueryResult, "error" | "isError" | "isFetched" | "isSuccess">}
  */
-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
@@ -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
@@ -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 (
     <DataTable
       isPaginated
-      isSortable
+      manualPagination
+      fetchData={fetchData}
       data={tagList.results}
       itemCount={tagList.count}
+      pageCount={tagList.numPages}
+      initialState={options}
       columns={[
         {
           Header: 'Value',
@@ -41,7 +55,7 @@ const TagListTable = ({ taxonomyId }) => {
 };
 
 TagListTable.propTypes = {
-  taxonomyId: Proptypes.number.isRequired,
+  taxonomyId: Proptypes.string.isRequired,
 };
 
 export default TagListTable;