Add Pagination to Sketch List

client/constants.js

@@ -33,6 +33,8 @@ export const RESET_PROJECT = 'RESET_PROJECT';
 
 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 = 'SET_COLLECTIONS';
 export const CREATE_COLLECTION = 'CREATED_COLLECTION';

client/modules/IDE/actions/projects.js

@@ -2,31 +2,60 @@ import { apiClient } from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 import { startLoader, stopLoader } from '../reducers/loading';
 
-// eslint-disable-next-line
-export function getProjects(username) {
-  return (dispatch) => {
-    dispatch(startLoader());
-    let url;
-    if (username) {
-      url = `/${username}/projects`;
-    } else {
-      url = '/projects';
-    }
-    return apiClient
-      .get(url)
-      .then((response) => {
-        dispatch({
-          type: ActionTypes.SET_PROJECTS,
-          projects: response.data
-        });
-        dispatch(stopLoader());
-      })
-      .catch((error) => {
-        dispatch({
-          type: ActionTypes.ERROR,
-          error: error?.response?.data
-        });
-        dispatch(stopLoader());
-      });
-  };
-}
+const buildProjectsUrl = (username, options = {}) => {
+  const {
+    page = 1,
+    limit = 10,
+    sortField = 'updatedAt',
+    sortDir = 'desc',
+    q = ''
+  } = options;
+
+  const base = username
+    ? `/${encodeURIComponent(username)}/projects`
+    : '/projects';
+
+  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 fetchProjects = (username, options, successType) => (dispatch) => {
+  dispatch(startLoader());
+
+  const url = buildProjectsUrl(username, options);
+
+  return apiClient
+    .get(url)
+    .then((response) => {
+      dispatch({ type: successType, projects: response.data });
+      dispatch(stopLoader());
+      return response.data;
+    })
+    .catch((error) => {
+      dispatch({ type: ActionTypes.ERROR, error: error?.response?.data });
+      dispatch(stopLoader());
+      throw error;
+    });
+};
+
+export const getProjects = (username, options) =>
+  fetchProjects(username, options, ActionTypes.SET_PROJECTS);
+
+export const getProjectsForCollectionList = (username, options) =>
+  fetchProjects(
+    username,
+    options,
+    ActionTypes.SET_PROJECTS_FOR_COLLECTION_LIST
+  );

client/modules/IDE/components/AddToCollectionSketchList.jsx

@@ -4,9 +4,9 @@ import { Helmet } from 'react-helmet';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { addToCollection, removeFromCollection } from '../actions/collections';
-import { getProjects } from '../actions/projects';
-import getSortedSketches from '../selectors/projects';
+import { getProjectsForCollectionList } from '../actions/projects';
 import { Loader } from '../../App/components/Loader';
+import Pagination from './Pagination';
 import QuickAddList from './QuickAddList';
 import {
   CollectionAddSketchWrapper,
@@ -20,16 +20,39 @@ const AddToCollectionSketchList = ({ collection }) => {
 
   const username = useSelector((state) => state.user.username);
 
-  const sketches = useSelector(getSortedSketches);
+  const sketches = useSelector(
+    (state) => state.collectionsListProjects.projects
+  );
+
+  const paginationMeta = useSelector(
+    (state) => state.collectionsListProjects.metadata
+  );
+
+  const q = useSelector((state) => state.search.sketchSearchTerm);
+
+  const hasSketches = () => sketches?.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(getProjects(username)).then(() => setHasLoadedData(true));
-  }, [dispatch, username]);
+    dispatch(
+      getProjectsForCollectionList(username, {
+        page,
+        limit,
+        q
+      })
+    ).finally(() => setHasLoadedData(true));
+  }, [dispatch, username, page, q]);
+
+  useEffect(() => {
+    setPage(1);
+  }, [q]);
 
   const handleCollectionAdd = (sketch) => {
     dispatch(addToCollection(collection.id, sketch.id));
@@ -43,7 +66,8 @@ const AddToCollectionSketchList = ({ collection }) => {
     ...sketch,
     url: `/${username}/sketches/${sketch.id}`,
     isAdded: collection.items.some(
-      (item) => item.projectId === sketch.id && !item.isDeleted
+      (item) =>
+        (item.projectId || item.project?.id) === sketch.id && !item.isDeleted
     )
   }));
 
@@ -55,11 +79,23 @@ const AddToCollectionSketchList = ({ collection }) => {
       return t('AddToCollectionSketchList.NoCollections');
     }
     return (
-      <QuickAddList
-        items={sketchesWithAddedStatus}
-        onAdd={handleCollectionAdd}
-        onRemove={handleCollectionRemove}
-      />
+      <>
+        <QuickAddList
+          items={sketchesWithAddedStatus}
+          onAdd={handleCollectionAdd}
+          onRemove={handleCollectionRemove}
+        />
+        {hasSketches() && (
+          <Pagination
+            page={page}
+            totalPages={paginationMeta.totalPages}
+            onPageChange={setPage}
+            limit={limit}
+            totalSketches={paginationMeta.totalProjects}
+            isOverlay
+          />
+        )}
+      </>
     );
   };
 
@@ -81,7 +117,10 @@ AddToCollectionSketchList.propTypes = {
     name: PropTypes.string.isRequired,
     items: PropTypes.arrayOf(
       PropTypes.shape({
-        projectId: PropTypes.string.isRequired,
+        projectId: PropTypes.string,
+        project: PropTypes.shape({
+          id: PropTypes.string
+        }),
         isDeleted: PropTypes.bool
       })
     )