fix(Commons): improve infinite scroll behavior

LibreTexts · May 9, 2024 · 287ec72 · 287ec72
1 parent 816244a
commit 287ec72
Show file tree

Hide file tree

Showing 9 changed files with 15 additions and 33 deletions.
diff --git a/client/src/components/commons/CommonsCatalog.tsx b/client/src/components/commons/CommonsCatalog.tsx
@@ -259,7 +259,7 @@ const CommonsCatalog = () => {
         loadCommonsCatalog(clear),
         loadPublicAssets(clear),
         loadPublicProjects(clear),
-        handleAuthorsSearch("", undefined, clear),
+        handleAuthorsSearch("", {}, clear),
       ]);
     } catch (err) {
       handleGlobalError(err);
@@ -410,15 +410,16 @@ const CommonsCatalog = () => {
 
   // Authors
   async function handleAuthorsSearch(
-    query?: string,
+    query: string,
     authorFilters?: AuthorFilters,
-    clearAndUpdate = false
+    clearAndUpdate = false,
+    page = activePage
   ) {
     try {
       setAuthorsLoading(true);
       const res = await api.authorsSearch({
         searchQuery: query,
-        page: activePage,
+        page,
         limit: ITEMS_PER_PAGE,
         ...authorFilters,
       });
@@ -563,8 +564,9 @@ const CommonsCatalog = () => {
 
   function handleLoadMoreAuthors() {
     if (loadingDisabled) return;
-    setActivePage(activePage + 1);
-    return handleAuthorsSearch(searchString);
+    const nextPage = activePage + 1;
+    setActivePage(nextPage);
+    return handleAuthorsSearch(searchString, authorsState, false, nextPage);
   }
 
   /**

diff --git a/client/src/components/commons/CommonsCatalog/AssetsTable.tsx b/client/src/components/commons/CommonsCatalog/AssetsTable.tsx
@@ -11,13 +11,11 @@ import {
 
 interface AssetsTableProps extends TableProps {
   items: ConductorSearchResponseFile[];
-  lastElementRef?: any;
   loading?: boolean;
 }
 
 const AssetsTable: React.FC<AssetsTableProps> = ({
   items,
-  lastElementRef,
   loading,
   ...rest
 }) => {
@@ -114,7 +112,6 @@ const AssetsTable: React.FC<AssetsTableProps> = ({
               </Table.Row>
             );
           })}
-        <tr ref={lastElementRef}></tr>
         {loading && (
           <Table.Row>
             <Table.Cell colSpan={5}>

diff --git a/client/src/components/commons/CommonsCatalog/AuthorsTable.tsx b/client/src/components/commons/CommonsCatalog/AuthorsTable.tsx
@@ -4,13 +4,11 @@ import { truncateString } from "../../util/HelperFunctions";
 
 interface AuthorsTableProps extends TableProps {
   items: Author[];
-  lastElementRef?: any;
   loading?: boolean;
 }
 
 const AuthorsTable: React.FC<AuthorsTableProps> = ({
   items,
-  lastElementRef,
   loading,
   ...rest
 }) => {
@@ -58,7 +56,6 @@ const AuthorsTable: React.FC<AuthorsTableProps> = ({
               </Table.Row>
             );
           })}
-        <tr ref={lastElementRef}></tr>
         {loading && (
           <Table.Row>
             <Table.Cell colSpan={5}>

diff --git a/client/src/components/commons/CommonsCatalog/BooksTable.tsx b/client/src/components/commons/CommonsCatalog/BooksTable.tsx
@@ -5,13 +5,11 @@ import { Link } from "react-router-dom";
 
 interface BooksTableProps extends TableProps {
   items: Book[];
-  lastElementRef?: any;
   loading?: boolean;
 }
 
 const BooksTable: React.FC<BooksTableProps> = ({
   items,
-  lastElementRef,
   loading,
   ...rest
 }) => {
@@ -75,7 +73,6 @@ const BooksTable: React.FC<BooksTableProps> = ({
               </Table.Row>
             );
           })}
-        <tr ref={lastElementRef}></tr>
         {loading && (
           <Table.Row>
             <Table.Cell colSpan={5}>

diff --git a/client/src/components/commons/CommonsCatalog/CatalogTab.tsx b/client/src/components/commons/CommonsCatalog/CatalogTab.tsx
@@ -1,5 +1,5 @@
 import { TabPane, TabPaneProps } from "semantic-ui-react";
-import { cloneElement } from "react";
+import { cloneElement, useState } from "react";
 import useInfiniteScroll from "../../../hooks/useInfiniteScroll";
 
 interface CatalogTabProps extends TabPaneProps {
@@ -31,16 +31,11 @@ const CatalogTab: React.FC<CatalogTabProps> = ({
   return (
     <TabPane
       attached={false}
-      className="!border-none !shadow-none !px-0 !pt-0 !rounded-md !mt-0 !pb-4"
+      className="!flex flex-col !border-none !shadow-none !px-0 !pt-0 !rounded-md !mt-0 !pb-4 min-h-[800px] justify-between"
       {...rest}
     >
-      {itemizedMode
-        ? cloneElement(itemizedRender as React.ReactElement, {
-            lastElementRef,
-          })
-        : cloneElement(visualRender as React.ReactElement, {
-            lastElementRef,
-          })}
+      {itemizedMode ? itemizedRender : visualRender}
+      <div ref={lastElementRef}></div>
       {dataLength >= totalLength && (
         <div className="w-full mt-4">
           <p className="text-center font-semibold">End of results</p>

diff --git a/client/src/components/commons/CommonsCatalog/ProjectsTable.tsx b/client/src/components/commons/CommonsCatalog/ProjectsTable.tsx
@@ -11,13 +11,11 @@ import { format, parseISO } from "date-fns";
 
 interface ProjectsTableProps extends TableProps {
   items: Project[];
-  lastElementRef?: any;
   loading?: boolean;
 }
 
 const ProjectsTable: React.FC<ProjectsTableProps> = ({
   items,
-  lastElementRef,
   loading,
   ...rest
 }) => {
@@ -109,7 +107,6 @@ const ProjectsTable: React.FC<ProjectsTableProps> = ({
               </Table.Row>
             );
           })}
-        <tr ref={lastElementRef}></tr>
         {loading && (
           <Table.Row>
             <Table.Cell colSpan={5}>

diff --git a/client/src/components/commons/CommonsCatalog/VisualMode.tsx b/client/src/components/commons/CommonsCatalog/VisualMode.tsx
@@ -12,7 +12,6 @@ const VisualMode = ({
   items,
   loading,
   noResultsMessage,
-  lastElementRef,
 }: {
   items: (
     | Book
@@ -22,11 +21,10 @@ const VisualMode = ({
   )[];
   loading?: boolean;
   noResultsMessage?: string;
-  lastElementRef?: any;
 }) => {
   if (items.length > 0) {
     return (
-      <div className="commons-content-card-grid">
+      <div className="commons-content-card-grid ">
         {items.map((item) => (
           <CatalogCard item={item} key={crypto.randomUUID()} />
         ))}
@@ -37,7 +35,6 @@ const VisualMode = ({
             ))}
           </>
         )}
-        <div ref={lastElementRef}></div>
       </div>
     );
   }

diff --git a/client/src/screens/commons/Author/index.tsx b/client/src/screens/commons/Author/index.tsx
@@ -269,9 +269,9 @@ const CommonsAuthor = () => {
                     items={assets}
                     loading={!loadedAssets}
                     noResultsMessage="No assets found for this author."
-                    lastElementRef={lastElementRef}
                   />
                 )}
+                <div ref={lastElementRef}></div>
                 {assets.length >= totalAssets && (
                   <div className="w-full mt-4">
                     <p className="text-center font-semibold">End of results</p>

diff --git a/server/api/search.ts b/server/api/search.ts
@@ -1538,7 +1538,7 @@ async function authorsSearch(
 
     return res.send({
       err: false,
-      numResults: totalCount,
+      numResults: req.query.primaryInstitution ? filtered.length : totalCount,
       results: filtered,
     });
   } catch (err) {