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 { useTranslation } from 'react-i18next'
|
||||||
import useURLParameters from '../../hooks/useURLParameters'
|
import useURLParameters from '../../hooks/useURLParameters'
|
||||||
import useOrderingParams from '../../hooks/useOrderingParams'
|
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`
|
export const SHARE_ALBUM_QUERY = gql`
|
||||||
query shareAlbumQuery(
|
query shareAlbumQuery(
|
||||||
|
@ -94,17 +97,28 @@ const AlbumSharePage = ({ albumID, token, password }: AlbumSharePageProps) => {
|
||||||
const urlParams = useURLParameters()
|
const urlParams = useURLParameters()
|
||||||
const orderParams = useOrderingParams(urlParams)
|
const orderParams = useOrderingParams(urlParams)
|
||||||
|
|
||||||
const { data, error } = useQuery(SHARE_ALBUM_QUERY, {
|
const { data, error, loading, fetchMore } = useQuery<shareAlbumQuery>(
|
||||||
variables: {
|
SHARE_ALBUM_QUERY,
|
||||||
id: albumID,
|
{
|
||||||
token,
|
variables: {
|
||||||
password,
|
id: albumID,
|
||||||
limit: 200,
|
token,
|
||||||
offset: 0,
|
password,
|
||||||
mediaOrderBy: orderParams.orderBy,
|
limit: 200,
|
||||||
mediaOrderDirection: orderParams.orderDirection,
|
offset: 0,
|
||||||
},
|
mediaOrderBy: orderParams.orderBy,
|
||||||
})
|
mediaOrderDirection: orderParams.orderDirection,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
const { containerElem, finished: finishedLoadingMore } =
|
||||||
|
useScrollPagination<shareAlbumQuery>({
|
||||||
|
loading,
|
||||||
|
fetchMore,
|
||||||
|
data,
|
||||||
|
getItems: data => data.album.media,
|
||||||
|
})
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
return <div>{error.message}</div>
|
return <div>{error.message}</div>
|
||||||
|
@ -120,12 +134,17 @@ const AlbumSharePage = ({ albumID, token, password }: AlbumSharePageProps) => {
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<AlbumGallery
|
<AlbumGallery
|
||||||
|
ref={containerElem}
|
||||||
album={album}
|
album={album}
|
||||||
customAlbumLink={albumId => `/share/${token}/${albumId}`}
|
customAlbumLink={albumId => `/share/${token}/${albumId}`}
|
||||||
showFilter
|
showFilter
|
||||||
setOrdering={orderParams.setOrdering}
|
setOrdering={orderParams.setOrdering}
|
||||||
ordering={orderParams}
|
ordering={orderParams}
|
||||||
/>
|
/>
|
||||||
|
<PaginateLoader
|
||||||
|
active={!finishedLoadingMore && !loading}
|
||||||
|
text={t('general.loading.paginate.media', 'Loading more media')}
|
||||||
|
/>
|
||||||
</Layout>
|
</Layout>
|
||||||
</AlbumSharePageWrapper>
|
</AlbumSharePageWrapper>
|
||||||
)
|
)
|
||||||
|
|
|
@ -16,6 +16,8 @@ import SharePage, {
|
||||||
import { SIDEBAR_DOWNLOAD_QUERY } from '../../components/sidebar/SidebarDownload'
|
import { SIDEBAR_DOWNLOAD_QUERY } from '../../components/sidebar/SidebarDownload'
|
||||||
import { SHARE_ALBUM_QUERY } from './AlbumSharePage'
|
import { SHARE_ALBUM_QUERY } from './AlbumSharePage'
|
||||||
|
|
||||||
|
jest.mock('../../hooks/useScrollPagination')
|
||||||
|
|
||||||
describe('load correct share page, based on graphql query', () => {
|
describe('load correct share page, based on graphql query', () => {
|
||||||
const token = 'TOKEN123'
|
const token = 'TOKEN123'
|
||||||
|
|
||||||
|
|
|
@ -3,15 +3,46 @@ import AlbumTitle from '../album/AlbumTitle'
|
||||||
import PhotoGallery from '../photoGallery/PhotoGallery'
|
import PhotoGallery from '../photoGallery/PhotoGallery'
|
||||||
import AlbumBoxes from './AlbumBoxes'
|
import AlbumBoxes from './AlbumBoxes'
|
||||||
import AlbumFilter from '../album/AlbumFilter'
|
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 {
|
import {
|
||||||
photoGalleryReducer,
|
photoGalleryReducer,
|
||||||
urlPresentModeSetupHook,
|
urlPresentModeSetupHook,
|
||||||
} from '../photoGallery/photoGalleryReducer'
|
} from '../photoGallery/photoGalleryReducer'
|
||||||
import { MediaOrdering, SetOrderingFn } from '../../hooks/useOrderingParams'
|
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 = {
|
type AlbumGalleryProps = {
|
||||||
album?: albumQuery_album
|
album?: AlbumGalleryAlbum
|
||||||
loading?: boolean
|
loading?: boolean
|
||||||
customAlbumLink?(albumID: string): string
|
customAlbumLink?(albumID: string): string
|
||||||
showFilter?: boolean
|
showFilter?: boolean
|
||||||
|
|
Loading…
Reference in New Issue