From 3d6b0dfe53b817861038e2758aa405cc9b182066 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo@dash.dev.br>
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<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..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<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;
   }
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 (
     <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',
@@ -41,7 +58,7 @@ const TagListTable = ({ taxonomyId }) => {
 };
 
 TagListTable.propTypes = {
-  taxonomyId: Proptypes.number.isRequired,
+  taxonomyId: Proptypes.string.isRequired,
 };
 
 export default TagListTable;