Add "sort by" options for shared albums, fix #307
This commit is contained in:
parent
b8196cdd67
commit
1b2616f74e
|
@ -2,13 +2,13 @@ import React, { useCallback, useEffect } from 'react'
|
||||||
import { useQuery, gql } from '@apollo/client'
|
import { useQuery, gql } from '@apollo/client'
|
||||||
import AlbumGallery from '../../components/albumGallery/AlbumGallery'
|
import AlbumGallery from '../../components/albumGallery/AlbumGallery'
|
||||||
import Layout from '../../Layout'
|
import Layout from '../../Layout'
|
||||||
import useURLParameters, { UrlKeyValuePair } from '../../hooks/useURLParameters'
|
import useURLParameters from '../../hooks/useURLParameters'
|
||||||
import useScrollPagination from '../../hooks/useScrollPagination'
|
import useScrollPagination from '../../hooks/useScrollPagination'
|
||||||
import PaginateLoader from '../../components/PaginateLoader'
|
import PaginateLoader from '../../components/PaginateLoader'
|
||||||
import LazyLoad from '../../helpers/LazyLoad'
|
import LazyLoad from '../../helpers/LazyLoad'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import { albumQuery, albumQueryVariables } from './__generated__/albumQuery'
|
import { albumQuery, albumQueryVariables } from './__generated__/albumQuery'
|
||||||
import { OrderDirection } from '../../../__generated__/globalTypes'
|
import useOrderingParams from '../../hooks/useOrderingParams'
|
||||||
|
|
||||||
const ALBUM_QUERY = gql`
|
const ALBUM_QUERY = gql`
|
||||||
query albumQuery(
|
query albumQuery(
|
||||||
|
@ -75,36 +75,12 @@ function AlbumPage({ match }: AlbumPageProps) {
|
||||||
|
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
|
||||||
const { getParam, setParam, setParams } = useURLParameters()
|
const urlParams = useURLParameters()
|
||||||
|
const orderParams = useOrderingParams(urlParams)
|
||||||
|
|
||||||
const onlyFavorites = getParam('favorites') == '1' ? true : false
|
const onlyFavorites = urlParams.getParam('favorites') == '1' ? true : false
|
||||||
const setOnlyFavorites = (favorites: boolean) =>
|
const setOnlyFavorites = (favorites: boolean) =>
|
||||||
setParam('favorites', favorites ? '1' : '0')
|
urlParams.setParam('favorites', favorites ? '1' : '0')
|
||||||
|
|
||||||
const orderBy = getParam('orderBy', 'date_shot')
|
|
||||||
|
|
||||||
const orderDirStr = getParam('orderDirection', 'ASC') || 'hello'
|
|
||||||
const orderDirection = orderDirStr as OrderDirection
|
|
||||||
|
|
||||||
type setOrderingFn = (args: {
|
|
||||||
orderBy?: string
|
|
||||||
orderDirection?: OrderDirection
|
|
||||||
}) => void
|
|
||||||
|
|
||||||
const setOrdering: setOrderingFn = useCallback(
|
|
||||||
({ orderBy, orderDirection }) => {
|
|
||||||
const updatedParams: UrlKeyValuePair[] = []
|
|
||||||
if (orderBy !== undefined) {
|
|
||||||
updatedParams.push({ key: 'orderBy', value: orderBy })
|
|
||||||
}
|
|
||||||
if (orderDirection !== undefined) {
|
|
||||||
updatedParams.push({ key: 'orderDirection', value: orderDirection })
|
|
||||||
}
|
|
||||||
|
|
||||||
setParams(updatedParams)
|
|
||||||
},
|
|
||||||
[setParams]
|
|
||||||
)
|
|
||||||
|
|
||||||
const { loading, error, data, refetch, fetchMore } = useQuery<
|
const { loading, error, data, refetch, fetchMore } = useQuery<
|
||||||
albumQuery,
|
albumQuery,
|
||||||
|
@ -113,8 +89,8 @@ function AlbumPage({ match }: AlbumPageProps) {
|
||||||
variables: {
|
variables: {
|
||||||
id: albumId,
|
id: albumId,
|
||||||
onlyFavorites,
|
onlyFavorites,
|
||||||
mediaOrderBy: orderBy,
|
mediaOrderBy: orderParams.orderBy,
|
||||||
mediaOrderDirection: orderDirection,
|
mediaOrderDirection: orderParams.orderDirection,
|
||||||
offset: 0,
|
offset: 0,
|
||||||
limit: 200,
|
limit: 200,
|
||||||
},
|
},
|
||||||
|
@ -178,8 +154,8 @@ function AlbumPage({ match }: AlbumPageProps) {
|
||||||
onlyFavorites={onlyFavorites}
|
onlyFavorites={onlyFavorites}
|
||||||
onFavorite={() => (refetchNeededAll = refetchNeededFavorites = true)}
|
onFavorite={() => (refetchNeededAll = refetchNeededFavorites = true)}
|
||||||
showFilter
|
showFilter
|
||||||
setOrdering={setOrdering}
|
setOrdering={orderParams.setOrdering}
|
||||||
ordering={{ orderBy, orderDirection }}
|
ordering={orderParams}
|
||||||
/>
|
/>
|
||||||
<PaginateLoader
|
<PaginateLoader
|
||||||
active={!finishedLoadingMore && !loading}
|
active={!finishedLoadingMore && !loading}
|
||||||
|
|
|
@ -4,12 +4,16 @@ import AlbumGallery from '../../components/albumGallery/AlbumGallery'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
import { gql, useQuery } from '@apollo/client'
|
import { gql, useQuery } from '@apollo/client'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import useURLParameters from '../../hooks/useURLParameters'
|
||||||
|
import useOrderingParams from '../../hooks/useOrderingParams'
|
||||||
|
|
||||||
export const SHARE_ALBUM_QUERY = gql`
|
export const SHARE_ALBUM_QUERY = gql`
|
||||||
query shareAlbumQuery(
|
query shareAlbumQuery(
|
||||||
$id: ID!
|
$id: ID!
|
||||||
$token: String!
|
$token: String!
|
||||||
$password: String
|
$password: String
|
||||||
|
$mediaOrderBy: String
|
||||||
|
$mediaOrderDirection: OrderDirection
|
||||||
$limit: Int
|
$limit: Int
|
||||||
$offset: Int
|
$offset: Int
|
||||||
) {
|
) {
|
||||||
|
@ -25,7 +29,13 @@ export const SHARE_ALBUM_QUERY = gql`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
media(paginate: { limit: $limit, offset: $offset }) {
|
media(
|
||||||
|
paginate: { limit: $limit, offset: $offset }
|
||||||
|
order: {
|
||||||
|
order_by: $mediaOrderBy
|
||||||
|
order_direction: $mediaOrderDirection
|
||||||
|
}
|
||||||
|
) {
|
||||||
id
|
id
|
||||||
title
|
title
|
||||||
type
|
type
|
||||||
|
@ -80,13 +90,19 @@ type AlbumSharePageProps = {
|
||||||
|
|
||||||
const AlbumSharePage = ({ albumID, token, password }: AlbumSharePageProps) => {
|
const AlbumSharePage = ({ albumID, token, password }: AlbumSharePageProps) => {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const { data, loading, error } = useQuery(SHARE_ALBUM_QUERY, {
|
|
||||||
|
const urlParams = useURLParameters()
|
||||||
|
const orderParams = useOrderingParams(urlParams)
|
||||||
|
|
||||||
|
const { data, error } = useQuery(SHARE_ALBUM_QUERY, {
|
||||||
variables: {
|
variables: {
|
||||||
id: albumID,
|
id: albumID,
|
||||||
token,
|
token,
|
||||||
password,
|
password,
|
||||||
limit: 200,
|
limit: 200,
|
||||||
offset: 0,
|
offset: 0,
|
||||||
|
mediaOrderBy: orderParams.orderBy,
|
||||||
|
mediaOrderDirection: orderParams.orderDirection,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -94,11 +110,7 @@ const AlbumSharePage = ({ albumID, token, password }: AlbumSharePageProps) => {
|
||||||
return <div>{error.message}</div>
|
return <div>{error.message}</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
if (loading) {
|
const album = data?.album
|
||||||
return <div>{t('general.loading.default', 'Loading...')}</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
const album = data.album
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AlbumSharePageWrapper data-testid="AlbumSharePage">
|
<AlbumSharePageWrapper data-testid="AlbumSharePage">
|
||||||
|
@ -110,6 +122,9 @@ const AlbumSharePage = ({ albumID, token, password }: AlbumSharePageProps) => {
|
||||||
<AlbumGallery
|
<AlbumGallery
|
||||||
album={album}
|
album={album}
|
||||||
customAlbumLink={albumId => `/share/${token}/${albumId}`}
|
customAlbumLink={albumId => `/share/${token}/${albumId}`}
|
||||||
|
showFilter
|
||||||
|
setOrdering={orderParams.setOrdering}
|
||||||
|
ordering={orderParams}
|
||||||
/>
|
/>
|
||||||
</Layout>
|
</Layout>
|
||||||
</AlbumSharePageWrapper>
|
</AlbumSharePageWrapper>
|
||||||
|
|
|
@ -147,6 +147,8 @@ describe('load correct share page, based on graphql query', () => {
|
||||||
password: null,
|
password: null,
|
||||||
limit: 200,
|
limit: 200,
|
||||||
offset: 0,
|
offset: 0,
|
||||||
|
mediaOrderBy: 'date_shot',
|
||||||
|
mediaOrderDirection: 'ASC',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
result: {
|
result: {
|
||||||
|
|
|
@ -99,7 +99,7 @@ const AlbumFilter = ({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{authToken() && (
|
{authToken() && setOnlyFavorites && (
|
||||||
<FavoritesCheckbox
|
<FavoritesCheckbox
|
||||||
onlyFavorites={onlyFavorites}
|
onlyFavorites={onlyFavorites}
|
||||||
setOnlyFavorites={setOnlyFavorites}
|
setOnlyFavorites={setOnlyFavorites}
|
||||||
|
|
|
@ -0,0 +1,38 @@
|
||||||
|
import { useCallback } from 'react'
|
||||||
|
import { OrderDirection } from '../../__generated__/globalTypes'
|
||||||
|
import { UrlKeyValuePair, UrlParams } from './useURLParameters'
|
||||||
|
|
||||||
|
function useOrderingParams({ getParam, setParams }: UrlParams) {
|
||||||
|
const orderBy = getParam('orderBy', 'date_shot')
|
||||||
|
|
||||||
|
const orderDirStr = getParam('orderDirection', 'ASC') || 'hello'
|
||||||
|
const orderDirection = orderDirStr as OrderDirection
|
||||||
|
|
||||||
|
type setOrderingFn = (args: {
|
||||||
|
orderBy?: string
|
||||||
|
orderDirection?: OrderDirection
|
||||||
|
}) => void
|
||||||
|
|
||||||
|
const setOrdering: setOrderingFn = useCallback(
|
||||||
|
({ orderBy, orderDirection }) => {
|
||||||
|
const updatedParams: UrlKeyValuePair[] = []
|
||||||
|
if (orderBy !== undefined) {
|
||||||
|
updatedParams.push({ key: 'orderBy', value: orderBy })
|
||||||
|
}
|
||||||
|
if (orderDirection !== undefined) {
|
||||||
|
updatedParams.push({ key: 'orderDirection', value: orderDirection })
|
||||||
|
}
|
||||||
|
|
||||||
|
setParams(updatedParams)
|
||||||
|
},
|
||||||
|
[setParams]
|
||||||
|
)
|
||||||
|
|
||||||
|
return {
|
||||||
|
orderBy,
|
||||||
|
orderDirection,
|
||||||
|
setOrdering,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default useOrderingParams
|
|
@ -2,7 +2,13 @@ import { useState } from 'react'
|
||||||
|
|
||||||
export type UrlKeyValuePair = { key: string; value: string }
|
export type UrlKeyValuePair = { key: string; value: string }
|
||||||
|
|
||||||
function useURLParameters() {
|
export type UrlParams = {
|
||||||
|
getParam(key: string, defaultValue?: string | null): string | null
|
||||||
|
setParam(key: string, value: string): void
|
||||||
|
setParams(pairs: UrlKeyValuePair[]): void
|
||||||
|
}
|
||||||
|
|
||||||
|
function useURLParameters(): UrlParams {
|
||||||
const [urlString, setUrlString] = useState(document.location.href)
|
const [urlString, setUrlString] = useState(document.location.href)
|
||||||
|
|
||||||
const url = new URL(urlString)
|
const url = new URL(urlString)
|
||||||
|
|
Loading…
Reference in New Issue