feat: collections tab with basic cards

Author: navinkarkera

src/library-authoring/LibraryAuthoringPage.tsx

@@ -203,7 +203,7 @@ const LibraryAuthoringPage = () => {
               />
               <Route
                 path={TabList.collections}
-                element={<LibraryCollections />}
+                element={<LibraryCollections libraryId={libraryId} variant="full" />}
               />
               <Route
                 path="*"

src/library-authoring/LibraryCollections.tsx

@@ -1,8 +1,12 @@
 import React, { useEffect, useMemo } from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { CardGrid } from '@openedx/paragon';
 
 import messages from './messages';
 import { useSearchContext } from '../search-manager';
+import { NoComponents, NoSearchResults } from './EmptyStates';
+import ComponentCard from './components/ComponentCard';
+import { LIBRARY_SECTION_PREVIEW_LIMIT } from './components/LibrarySection';
 
 type LibraryCollectionsProps = {
   libraryId: string,
@@ -27,10 +31,52 @@ const LibraryCollections = ({ libraryId, variant }: LibraryCollectionsProps) =>
     setExtraFilter,
   } = useSearchContext();
 
-    // __AUTO_GENERATED_PRINT_VAR_START__
-    console.log("LibraryCollections collectionHits: ", collectionHits); // __AUTO_GENERATED_PRINT_VAR_END__
-  return <div className="d-flex my-6 justify-content-center">
-  </div>
+  const collectionList = variant === 'preview' ? collectionHits.slice(0, LIBRARY_SECTION_PREVIEW_LIMIT) : collectionHits;
+
+  useEffect(() => {
+    if (variant === 'full') {
+      const onscroll = () => {
+        // Verify the position of the scroll to implementa a infinite scroll.
+        // Used `loadLimit` to fetch next page before reach the end of the screen.
+        const loadLimit = 300;
+        const scrolledTo = window.scrollY + window.innerHeight;
+        const scrollDiff = document.body.scrollHeight - scrolledTo;
+        const isNearToBottom = scrollDiff <= loadLimit;
+        if (isNearToBottom && hasNextPage && !isFetchingNextPage) {
+          fetchNextPage();
+        }
+      };
+      window.addEventListener('scroll', onscroll);
+      return () => {
+        window.removeEventListener('scroll', onscroll);
+      };
+    }
+    return () => {};
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  if (totalCollectionHits === 0) {
+    return isFiltered ? <NoSearchResults /> : <NoComponents />;
+  }
+
+  return (
+    <CardGrid
+      columnSizes={{
+        sm: 12,
+        md: 6,
+        lg: 4,
+        xl: 3,
+      }}
+      hasEqualColumnHeights
+    >
+      { collectionList.map((contentHit) => (
+        <ComponentCard
+          key={contentHit.id}
+          contentHit={contentHit}
+          blockTypeDisplayName={'Collection'}
+        />
+      )) }
+    </CardGrid>
+  );
 };
 
 export default LibraryCollections;

src/library-authoring/LibraryHome.tsx

@@ -20,13 +20,12 @@ const LibraryHome = ({ libraryId, tabList, handleTabChange } : LibraryHomeProps)
   const intl = useIntl();
   const {
     totalHits: componentCount,
+    totalCollectionHits: collectionCount,
     isFiltered,
   } = useSearchContext();
 
-  const collectionCount = 0;
-
   const renderEmptyState = () => {
-    if (componentCount === 0) {
+    if (componentCount === 0 && collectionCount === 0) {
       return isFiltered ? <NoSearchResults /> : <NoComponents />;
     }
     return null;
@@ -42,9 +41,9 @@ const LibraryHome = ({ libraryId, tabList, handleTabChange } : LibraryHomeProps)
             <LibrarySection
               title={intl.formatMessage(messages.collectionsTitle, { collectionCount })}
               contentCount={collectionCount}
-              // TODO: add viewAllAction here once collections implemented
+              viewAllAction={() => handleTabChange(tabList.collections)}
             >
-              <LibraryCollections />
+              <LibraryCollections libraryId={libraryId} variant="preview" />
             </LibrarySection>
             <LibrarySection
               title={intl.formatMessage(messages.componentsTitle, { componentCount })}

src/search-manager/data/apiHooks.ts

@@ -125,7 +125,6 @@ export const useContentSearchResults = ({
     hasNextPage: query.hasNextPage,
     // The last page has the most accurate count of total hits
     totalHits: pages?.[pages.length - 1]?.totalHits ?? 0,
-    // The last page has the most accurate count of total hits
     totalCollectionHits: pages?.[pages.length - 1]?.totalCollectionHits ?? 0,
   };
 };