Add pagination for shared albums
This commit is contained in:
parent
11b7dfb647
commit
d92747cee7
|
@ -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>
|
||||
)
|
||||
|
|
|
@ -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'
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue