option to show more 'shared with me' documents

app/components/Sidebar/components/GroupLink.tsx

@@ -8,19 +8,32 @@ import Relative from "./Relative";
 import SharedWithMeLink from "./SharedWithMeLink";
 import SidebarContext, { groupSidebarContext } from "./SidebarContext";
 import SidebarLink from "./SidebarLink";
+import { RequestResponse } from "~/hooks/usePaginatedRequest";
+import GroupMembership from "~/models/GroupMembership";
+import { t } from "i18next";
+import { toast } from "sonner";
 
 type Props = {
   /** The group to render */
   group: Group;
+  /** The response from the group memberships request */
+  response: RequestResponse<GroupMembership>;
 };
 
-const GroupLink: React.FC<Props> = ({ group }) => {
+const GroupLink: React.FC<Props> = ({ group, response }) => {
   const locationSidebarContext = useLocationSidebarContext();
   const sidebarContext = groupSidebarContext(group.id);
+  const { loading, next, end, error } = response;
   const [expanded, setExpanded] = React.useState(
     locationSidebarContext === sidebarContext
   );
 
+  React.useEffect(() => {
+    if (error) {
+      toast.error(t("Could not load shared documents"));
+    }
+  }, [error, t]);
+
   const handleDisclosureClick = React.useCallback((ev) => {
     ev?.preventDefault();
     setExpanded((e) => !e);
@@ -50,6 +63,14 @@ const GroupLink: React.FC<Props> = ({ group }) => {
               depth={1}
             />
           ))}
+          {!end && (
+            <SidebarLink
+              onClick={next}
+              label={`${t("Show more")}…`}
+              disabled={loading}
+              depth={0}
+            />
+          )}
         </Folder>
       </SidebarContext.Provider>
     </Relative>

app/components/Sidebar/components/SharedWithMe.tsx

@@ -30,7 +30,9 @@ function SharedWithMe() {
   const history = useHistory();
   const locationSidebarContext = useLocationSidebarContext();
 
-  usePaginatedRequest<GroupMembership>(groupMemberships.fetchAll);
+  const gmResponse = usePaginatedRequest<GroupMembership>(
+    groupMemberships.fetchAll
+  );
 
   const { loading, next, end, error, page } =
     usePaginatedRequest<UserMembership>(userMemberships.fetchPage, {
@@ -108,7 +110,7 @@ function SharedWithMe() {
       <Flex column>
         <Header id="shared" title={t("Shared with me")}>
           {user.groupsWithDocumentMemberships.map((group) => (
-            <GroupLink key={group.id} group={group} />
+            <GroupLink key={group.id} group={group} response={gmResponse} />
           ))}
           <Relative>
             {reorderProps.isDragging && (

app/hooks/usePaginatedRequest.ts

@@ -3,7 +3,7 @@ import { useState, useEffect, useCallback } from "react";
 import { PaginationParams } from "~/types";
 import useRequest from "./useRequest";
 
-type RequestResponse<T> = {
+export type RequestResponse<T> = {
   /** The return value of the paginated request function. */
   data: T[] | undefined;
   /** The request error, if any. */

shared/i18n/locales/en_US/translation.json

@@ -427,11 +427,11 @@
   "Expand": "Expand",
   "Document not supported – try Markdown, Plain text, HTML, or Word": "Document not supported – try Markdown, Plain text, HTML, or Word",
   "Import files": "Import files",
+  "Could not load shared documents": "Could not load shared documents",
+  "Show more": "Show more",
   "Go back": "Go back",
   "Go forward": "Go forward",
-  "Could not load shared documents": "Could not load shared documents",
   "Shared with me": "Shared with me",
-  "Show more": "Show more",
   "Link options": "Link options",
   "Could not load starred documents": "Could not load starred documents",
   "Starred": "Starred",