Add pagination for shared albums

ui/src/Pages/SharePage/AlbumSharePage.tsx

@@ -6,6 +6,9 @@ import { gql, useQuery } from '@apollo/client'
 import { useTranslation } from 'react-i18next'
 import useURLParameters from '../../hooks/useURLParameters'
 import useOrderingParams from '../../hooks/useOrderingParams'
+import { shareAlbumQuery } from './__generated__/shareAlbumQuery'
+import useScrollPagination from '../../hooks/useScrollPagination'
+import PaginateLoader from '../../components/PaginateLoader'
 
 export const SHARE_ALBUM_QUERY = gql`
   query shareAlbumQuery(
@@ -94,17 +97,28 @@ const AlbumSharePage = ({ albumID, token, password }: AlbumSharePageProps) => {
   const urlParams = useURLParameters()
   const orderParams = useOrderingParams(urlParams)
 
-  const { data, error } = useQuery(SHARE_ALBUM_QUERY, {
-    variables: {
-      id: albumID,
-      token,
-      password,
-      limit: 200,
-      offset: 0,
-      mediaOrderBy: orderParams.orderBy,
-      mediaOrderDirection: orderParams.orderDirection,
-    },
-  })
+  const { data, error, loading, fetchMore } = useQuery<shareAlbumQuery>(
+    SHARE_ALBUM_QUERY,
+    {
+      variables: {
+        id: albumID,
+        token,
+        password,
+        limit: 200,
+        offset: 0,
+        mediaOrderBy: orderParams.orderBy,
+        mediaOrderDirection: orderParams.orderDirection,
+      },
+    }
+  )
+
+  const { containerElem, finished: finishedLoadingMore } =
+    useScrollPagination<shareAlbumQuery>({
+      loading,
+      fetchMore,
+      data,
+      getItems: data => data.album.media,
+    })
 
   if (error) {
     return <div>{error.message}</div>
@@ -120,12 +134,17 @@ const AlbumSharePage = ({ albumID, token, password }: AlbumSharePageProps) => {
         }
       >
         <AlbumGallery
+          ref={containerElem}
           album={album}
           customAlbumLink={albumId => `/share/${token}/${albumId}`}
           showFilter
           setOrdering={orderParams.setOrdering}
           ordering={orderParams}
         />
+        <PaginateLoader
+          active={!finishedLoadingMore && !loading}
+          text={t('general.loading.paginate.media', 'Loading more media')}
+        />
       </Layout>
     </AlbumSharePageWrapper>
   )

ui/src/Pages/SharePage/SharePage.test.js

@@ -16,6 +16,8 @@ import SharePage, {
 import { SIDEBAR_DOWNLOAD_QUERY } from '../../components/sidebar/SidebarDownload'
 import { SHARE_ALBUM_QUERY } from './AlbumSharePage'
 
+jest.mock('../../hooks/useScrollPagination')
+
 describe('load correct share page, based on graphql query', () => {
   const token = 'TOKEN123'
 

ui/src/components/albumGallery/AlbumGallery.tsx

@@ -3,15 +3,46 @@ import AlbumTitle from '../album/AlbumTitle'
 import PhotoGallery from '../photoGallery/PhotoGallery'
 import AlbumBoxes from './AlbumBoxes'
 import AlbumFilter from '../album/AlbumFilter'
-import { albumQuery_album } from '../../Pages/AlbumPage/__generated__/albumQuery'
+import {
+  albumQuery_album_media_highRes,
+  albumQuery_album_media_thumbnail,
+  albumQuery_album_media_videoWeb,
+  albumQuery_album_subAlbums,
+} from '../../Pages/AlbumPage/__generated__/albumQuery'
 import {
   photoGalleryReducer,
   urlPresentModeSetupHook,
 } from '../photoGallery/photoGalleryReducer'
 import { MediaOrdering, SetOrderingFn } from '../../hooks/useOrderingParams'
+import { MediaType } from '../../__generated__/globalTypes'
+
+type AlbumGalleryAlbum = {
+  __typename: 'Album'
+  id: string
+  title: string
+  subAlbums: albumQuery_album_subAlbums[]
+  media: {
+    __typename: 'Media'
+    id: string
+    type: MediaType
+    /**
+     * URL to display the media in a smaller resolution
+     */
+    thumbnail: albumQuery_album_media_thumbnail | null
+    /**
+     * URL to display the photo in full resolution, will be null for videos
+     */
+    highRes: albumQuery_album_media_highRes | null
+    /**
+     * URL to get the video in a web format that can be played in the browser, will be null for photos
+     */
+    videoWeb: albumQuery_album_media_videoWeb | null
+    favorite?: boolean
+  }[]
+}
 
 type AlbumGalleryProps = {
-  album?: albumQuery_album
+  album?: AlbumGalleryAlbum
   loading?: boolean
   customAlbumLink?(albumID: string): string
   showFilter?: boolean