From 049e49093b15ec11c6a66fa3fc6f149cf85a7630 Mon Sep 17 00:00:00 2001
From: Yusuf Musleh <yusuf@opencraft.com>
Date: Thu, 30 May 2024 18:56:20 +0300
Subject: [PATCH] feat: Add pagination support for lib v2s

---
 src/studio-home/data/api.js                   | 20 ++++++++--
 src/studio-home/data/apiHooks.ts              | 14 +++++--
 .../tabs-section/libraries-v2-tab/index.tsx   | 38 ++++++++++++++++---
 3 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/src/studio-home/data/api.js b/src/studio-home/data/api.js
index 69e0487fff..a3d1214706 100644
--- a/src/studio-home/data/api.js
+++ b/src/studio-home/data/api.js
@@ -42,10 +42,24 @@ export async function getStudioHomeLibraries() {
 
 /**
  * Get's studio home v2 Libraries.
- * @returns {Promise<Object>}
+ * @param {object} customParams - Additional custom paramaters for the API request.
+ * @param {string?} customParams.type - (optional) Library type, default `complex`
+ * @param {number} customParams.page - Page number of results
+ * @param {number?} customParams.pageSize - (optional) The number of results on each page, default `50`
+ * @param {boolean?} customParams.pagination - (optional) Whether pagination is supported, default `true`
+ * @returns {Promise<Object>} - A Promise that resolves to the response data container the studio home v2 libraries.
  */
-export async function getStudioHomeLibrariesV2() {
-  const { data } = await getAuthenticatedHttpClient().get(`${getApiBaseUrl()}/api/libraries/v2/`);
+export async function getStudioHomeLibrariesV2(customParams) {
+  // Set default params if not passed in
+  const customParamsDefaults = {
+    ...customParams,
+    type: customParams.type || 'complex',
+    page: customParams.page || 1,
+    pageSize: customParams.pageSize || 50,
+    pagination: !customParams.pagination === undefined || true,
+  };
+  const customParamsFormat = snakeCaseObject(customParamsDefaults);
+  const { data } = await getAuthenticatedHttpClient().get(`${getApiBaseUrl()}/api/libraries/v2/`, { params: customParamsFormat });
   return camelCaseObject(data);
 }
 
diff --git a/src/studio-home/data/apiHooks.ts b/src/studio-home/data/apiHooks.ts
index 7285874c64..15800af68c 100644
--- a/src/studio-home/data/apiHooks.ts
+++ b/src/studio-home/data/apiHooks.ts
@@ -2,12 +2,20 @@ import { useQuery } from '@tanstack/react-query';
 
 import { getStudioHomeLibrariesV2 } from './api';
 
+
+interface CustomParams {
+  type: string,
+  page: number,
+  pageSize: number,
+  pagination: boolean,
+}
+
 /**
  * Builds the query to fetch list of V2 Libraries
  */
-export const useListStudioHomeV2Libraries = () => (
+export const useListStudioHomeV2Libraries = (customParams: CustomParams) => (
   useQuery({
-    queryKey: ['listV2Libraries'],
-    queryFn: () => getStudioHomeLibrariesV2(),
+    queryKey: ['listV2Libraries', customParams.page],
+    queryFn: () => getStudioHomeLibrariesV2(customParams),
   })
 );
diff --git a/src/studio-home/tabs-section/libraries-v2-tab/index.tsx b/src/studio-home/tabs-section/libraries-v2-tab/index.tsx
index 98888f79a8..c26527edd8 100644
--- a/src/studio-home/tabs-section/libraries-v2-tab/index.tsx
+++ b/src/studio-home/tabs-section/libraries-v2-tab/index.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Icon, Row } from '@openedx/paragon';
+import { Icon, Row, Pagination } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { useListStudioHomeV2Libraries } from '../../data/apiHooks';
@@ -14,11 +14,18 @@ const LibrariesV2Tab = ({
   redirectToLibraryAuthoringMfe,
 }) => {
   const intl = useIntl();
+
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const handlePageSelect = (page) => {
+    setCurrentPage(page);
+  };
+
   const {
     data,
     isLoading,
     isError,
-  } = useListStudioHomeV2Libraries();
+  } = useListStudioHomeV2Libraries({page: currentPage});
 
   if (isLoading) {
     return (
@@ -49,8 +56,19 @@ const LibrariesV2Tab = ({
         )}
       />
     ) : (
-      <div className="courses-tab">
-        {data.map(({ id, org, slug, title }) => (
+      <div className="courses-tab-container">
+        <div className="d-flex flex-row justify-content-between my-4">
+          {/* Temporary div to add spacing. This will be replaced with lib search/filters */}
+          <div className="d-flex" />
+          <p data-testid="pagination-info">
+            {intl.formatMessage(messages.coursesPaginationInfo, {
+              length: data.results.length,
+              total: data.count,
+            })}
+          </p>
+        </div>
+
+        {data.results.map(({ id, org, slug, title }) => (
           <CardItem
             key={`${org}+${slug}`}
             isLibraries
@@ -60,6 +78,16 @@ const LibrariesV2Tab = ({
             url={libURL(id)}
           />
         ))}
+
+        {data.numPages > 1 &&
+          <Pagination
+            className="d-flex justify-content-center"
+            paginationLabel="pagination navigation"
+            pageCount={data.numPages}
+            currentPage={currentPage}
+            onPageSelect={handlePageSelect}
+          />
+        }
       </div>
     )
   );