feat: Add pagination support for lib v2s

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);
 }
 

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),
   })
 );

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>
     )
   );