Add Pagination to Collection List

client/constants.js

@@ -35,6 +35,8 @@ export const SET_PROJECT = 'SET_PROJECT';
 export const SET_PROJECTS = 'SET_PROJECTS';
 export const SET_PROJECTS_FOR_COLLECTION_LIST =
   'SET_PROJECTS_FOR_COLLECTION_LIST';
+export const SET_COLLECTIONS_FOR_COLLECTION_LIST =
+  'SET_COLLECTIONS_FOR_COLLECTION_LIST';
 
 export const SET_COLLECTIONS = 'SET_COLLECTIONS';
 export const CREATE_COLLECTION = 'CREATED_COLLECTION';

client/modules/IDE/actions/collections.js

@@ -6,33 +6,62 @@ import { setToastText, showToast } from './toast';
 
 const TOAST_DISPLAY_TIME_MS = 1500;
 
-export function getCollections(username) {
-  return (dispatch) => {
-    dispatch(startLoader());
-    let url;
-    if (username) {
-      url = `/${username}/collections`;
-    } else {
-      url = '/collections';
-    }
-    return apiClient
-      .get(url)
-      .then((response) => {
-        dispatch({
-          type: ActionTypes.SET_COLLECTIONS,
-          collections: response.data
-        });
-        dispatch(stopLoader());
-      })
-      .catch((error) => {
-        dispatch({
-          type: ActionTypes.ERROR,
-          error: error?.response?.data
-        });
-        dispatch(stopLoader());
-      });
-  };
-}
+const buildCollectionUrl = (username, options = {}) => {
+  const {
+    page = 1,
+    limit = 10,
+    sortField = 'updatedAt',
+    sortDir = 'desc',
+    q = ''
+  } = options;
+
+  const base = username
+    ? `/${encodeURIComponent(username)}/collections`
+    : '/collections';
+
+  const params = new URLSearchParams({
+    page: String(page),
+    limit: String(limit),
+    sortField,
+    sortDir
+  });
+
+  const trimmed = q.trim();
+
+  if (trimmed) {
+    params.set('q', trimmed);
+  }
+
+  return `${base}?${params.toString()}`;
+};
+
+const fetchCollections = (username, options, successType) => (dispatch) => {
+  dispatch(startLoader());
+
+  const url = buildCollectionUrl(username, options);
+  return apiClient
+    .get(url)
+    .then((response) => {
+      dispatch({ type: successType, collections: response.data });
+      dispatch(stopLoader());
+      return response.data;
+    })
+    .catch((error) => {
+      dispatch({ type: ActionTypes.ERROR, error: error?.response?.data });
+      dispatch(stopLoader());
+      throw error;
+    });
+};
+
+export const getCollections = (username, options) =>
+  fetchCollections(username, options, ActionTypes.SET_COLLECTIONS);
+
+export const getCollectionsForCollectionList = (username, options) =>
+  fetchCollections(
+    username,
+    options,
+    ActionTypes.SET_COLLECTIONS_FOR_COLLECTION_LIST
+  );
 
 export function createCollection(collection) {
   return (dispatch) => {

client/modules/IDE/components/AddToCollectionList.jsx

@@ -7,12 +7,14 @@
 import { Loader } from '../../App/components/Loader';
 import {
   addToCollection,
-  getCollections,
+  getCollectionsForCollectionList,
   removeFromCollection
 } from '../actions/collections';
 import getSortedCollections from '../selectors/collections';
 import QuickAddList from './QuickAddList';
 import { remSize } from '../../../theme';
+import Pagination from './Pagination';
+import { sketchResponse } from '../../../testData/testServerResponses';
 
 export const CollectionAddSketchWrapper = styled.div`
   width: ${remSize(600)};
@@ -34,16 +36,38 @@
 
   const username = useSelector((state) => state.user.username);
 
-  const collections = useSelector(getSortedCollections);
+  const collections = useSelector(
+    (state) => state.collectionsListCollections.collections
+  );
+
+  const paginationMeta = useSelector(
+    (state) => state.collectionsListCollections.metadata
+  );
+
+  const q = useSelector((state) => state.search.collectionSearchTerm);
+  const hasCollections = () => collections?.length > 0;
+
+  const [page, setPage] = useState(1);
+  const limit = 10;
 
   // TODO: improve loading state
   const loading = useSelector((state) => state.loading);
   const [hasLoadedData, setHasLoadedData] = useState(false);
   const showLoader = loading && !hasLoadedData;
 
   useEffect(() => {
-    dispatch(getCollections(username)).then(() => setHasLoadedData(true));
-  }, [dispatch, username]);
+    dispatch(
+      getCollectionsForCollectionList(username, {
+        page,
+        limit,
+        q
+      })
+    ).finally(() => setHasLoadedData(true));
+  }, [dispatch, username, page, q]);
+
+  useEffect(() => {
+    setPage(1);
+  }, [q]);
 
   const handleCollectionAdd = (collection) => {
     dispatch(addToCollection(collection.id, projectId));
@@ -66,11 +90,23 @@
       return t('AddToCollectionList.Empty');
     }
     return (
-      <QuickAddList
-        items={collectionWithSketchStatus}
-        onAdd={handleCollectionAdd}
-        onRemove={handleCollectionRemove}
-      />
+      <>
+        <QuickAddList
+          items={collectionWithSketchStatus}
+          onAdd={handleCollectionAdd}
+          onRemove={handleCollectionRemove}
+        />
+        {hasCollections() && (
+          <Pagination
+            page={page}
+            totalPages={paginationMeta.totalPages}
+            onPageChage={setPage}
+            limit={limit}
+            totalCollectoins={paginationMeta.totalCollections}
+            isOverlay
+          />
+        )}
+      </>
     );
   };