Feat/collection list pagination

client/constants.js

@@ -33,8 +33,13 @@ export const RESET_PROJECT = 'RESET_PROJECT';
 
 export const SET_PROJECT = 'SET_PROJECT';
 export const SET_PROJECTS = 'SET_PROJECTS';
+// <<<<<<< HEAD
+export const SET_COLLECTIONS_FOR_COLLECTION_LIST =
+  'SET_COLLECTIONS_FOR_COLLECTION_LIST';
+// =======
 export const SET_PROJECTS_FOR_COLLECTION_LIST =
   'SET_PROJECTS_FOR_COLLECTION_LIST';
+// >>>>>>> develop-codemirror-v6
 
 export const SET_COLLECTIONS = 'SET_COLLECTIONS';
 export const CREATE_COLLECTION = 'CREATED_COLLECTION';

client/modules/IDE/actions/collections.js

@@ -6,33 +6,33 @@ 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());
-      });
-  };
-}
+// 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());
+//       });
+//   };
+// }
 
 export function createCollection(collection) {
   return (dispatch) => {
@@ -167,3 +167,60 @@ export function deleteCollection(collectionId) {
       });
   };
 }
+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
+  );

client/modules/IDE/actions/ide.js

@@ -236,23 +236,10 @@ export function hideErrorModal() {
   };
 }
 
-export function hideRuntimeErrorWarning() {
-  return {
-    type: ActionTypes.HIDE_RUNTIME_ERROR_WARNING
-  };
-}
-
-export function showRuntimeErrorWarning() {
-  return {
-    type: ActionTypes.SHOW_RUNTIME_ERROR_WARNING
-  };
-}
-
 export function startSketch() {
   return (dispatch, getState) => {
     dispatch(clearConsole());
     dispatch(startVisualSketch());
-    dispatch(showRuntimeErrorWarning());
     const state = getState();
     dispatchMessage({
       type: MessageTypes.SKETCH,

client/modules/IDE/components/AddToCollectionList.jsx

@@ -4,15 +4,13 @@ import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
+import { addToCollection, removeFromCollection } from '../actions/collections';
+import { getCollectionsForCollectionList } from '../actions/collections';
 import { Loader } from '../../App/components/Loader';
-import {
-  addToCollection,
-  getCollections,
-  removeFromCollection
-} from '../actions/collections';
 import getSortedCollections from '../selectors/collections';
 import QuickAddList from './QuickAddList';
 import { remSize } from '../../../theme';
+import Pagination from './Pagination';
 
 export const CollectionAddSketchWrapper = styled.div`
   width: ${remSize(600)};
@@ -34,16 +32,38 @@ const AddToCollectionList = ({ projectId }) => {
 
   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 +86,23 @@ const AddToCollectionList = ({ projectId }) => {
       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}
+            onPageChange={setPage}
+            limit={limit}
+            totalCollections={paginationMeta.totalCollections}
+            isOverlay
+          />
+        )}
+      </>
     );
   };
 

client/modules/IDE/components/AddToCollectionSketchList.jsx

@@ -19,7 +19,6 @@ const AddToCollectionSketchList = ({ collection }) => {
   const dispatch = useDispatch();
 
   const username = useSelector((state) => state.user.username);
-
   const sketches = useSelector(
     (state) => state.collectionsListProjects.projects
   );
@@ -34,8 +33,6 @@ const AddToCollectionSketchList = ({ collection }) => {
 
   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;