From f39487d25ba3b8fbe8b2af76b6b37afc99dd62e8 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom@getoutline.com>
Date: Mon, 30 Jan 2023 19:53:14 -0800
Subject: [PATCH] fix: PaginatedList does not always load more (#4811)

---
 app/components/PaginatedList.tsx                  | 2 +-
 app/components/Sidebar/components/Collections.tsx | 6 ++----
 server/routes/api/collections.ts                  | 5 ++++-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/components/PaginatedList.tsx b/app/components/PaginatedList.tsx
index 4a37c8d8f..493e6acfa 100644
--- a/app/components/PaginatedList.tsx
+++ b/app/components/PaginatedList.tsx
@@ -99,7 +99,7 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
     }
     this.isFetching = true;
     const counter = ++this.fetchCounter;
-    const limit = DEFAULT_PAGINATION_LIMIT;
+    const limit = this.props.options?.limit ?? DEFAULT_PAGINATION_LIMIT;
     this.error = undefined;
 
     try {
diff --git a/app/components/Sidebar/components/Collections.tsx b/app/components/Sidebar/components/Collections.tsx
index 2549b4886..0a5fa0401 100644
--- a/app/components/Sidebar/components/Collections.tsx
+++ b/app/components/Sidebar/components/Collections.tsx
@@ -43,15 +43,13 @@ function Collections() {
     }),
   });
 
-  React.useEffect(() => {
-    collections.fetchPage({ limit: 100 });
-  }, [collections]);
-
   return (
     <Flex column>
       <Header id="collections" title={t("Collections")}>
         <Relative>
           <PaginatedList
+            fetch={collections.fetchPage}
+            options={{ limit: 25 }}
             aria-label={t("Collections")}
             items={collections.orderedData}
             loading={<PlaceholderCollections />}
diff --git a/server/routes/api/collections.ts b/server/routes/api/collections.ts
index 006da0b51..428553e70 100644
--- a/server/routes/api/collections.ts
+++ b/server/routes/api/collections.ts
@@ -760,7 +760,10 @@ router.post(
       method: ["withMembership", user.id],
     }).findAll({
       where,
-      order: [["updatedAt", "DESC"]],
+      order: [
+        Sequelize.literal('"collection"."index" collate "C"'),
+        ["updatedAt", "DESC"],
+      ],
       offset: ctx.state.pagination.offset,
       limit: ctx.state.pagination.limit,
     });