From d2c49855a86b702a26652a2fd28aaa1a8effc206 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo@dash.dev.br>
Date: Wed, 25 Oct 2023 12:41:01 -0300
Subject: [PATCH] fix: TagList pagination

---
 src/taxonomy/api/hooks/api.js                 | 18 ++++++------
 src/taxonomy/api/hooks/selectors.js           | 10 ++++---
 src/taxonomy/api/types.mjs                    |  5 ++++
 src/taxonomy/taxonomy-detail/TagListTable.jsx | 28 ++++++++++++++-----
 4 files changed, 42 insertions(+), 19 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<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
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<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
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 (
     <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;