diff --git a/ui/src/Pages/AlbumPage/AlbumPage.tsx b/ui/src/Pages/AlbumPage/AlbumPage.tsx index 960111c2..a2ca8735 100644 --- a/ui/src/Pages/AlbumPage/AlbumPage.tsx +++ b/ui/src/Pages/AlbumPage/AlbumPage.tsx @@ -2,13 +2,13 @@ import React, { useCallback, useEffect } from 'react' import { useQuery, gql } from '@apollo/client' import AlbumGallery from '../../components/albumGallery/AlbumGallery' import Layout from '../../Layout' -import useURLParameters, { UrlKeyValuePair } from '../../hooks/useURLParameters' +import useURLParameters from '../../hooks/useURLParameters' import useScrollPagination from '../../hooks/useScrollPagination' import PaginateLoader from '../../components/PaginateLoader' import LazyLoad from '../../helpers/LazyLoad' import { useTranslation } from 'react-i18next' import { albumQuery, albumQueryVariables } from './__generated__/albumQuery' -import { OrderDirection } from '../../../__generated__/globalTypes' +import useOrderingParams from '../../hooks/useOrderingParams' const ALBUM_QUERY = gql` query albumQuery( @@ -75,36 +75,12 @@ function AlbumPage({ match }: AlbumPageProps) { 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) => - 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] - ) + urlParams.setParam('favorites', favorites ? '1' : '0') const { loading, error, data, refetch, fetchMore } = useQuery< albumQuery, @@ -113,8 +89,8 @@ function AlbumPage({ match }: AlbumPageProps) { variables: { id: albumId, onlyFavorites, - mediaOrderBy: orderBy, - mediaOrderDirection: orderDirection, + mediaOrderBy: orderParams.orderBy, + mediaOrderDirection: orderParams.orderDirection, offset: 0, limit: 200, }, @@ -178,8 +154,8 @@ function AlbumPage({ match }: AlbumPageProps) { onlyFavorites={onlyFavorites} onFavorite={() => (refetchNeededAll = refetchNeededFavorites = true)} showFilter - setOrdering={setOrdering} - ordering={{ orderBy, orderDirection }} + setOrdering={orderParams.setOrdering} + ordering={orderParams} /> { 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: { id: albumID, token, password, limit: 200, offset: 0, + mediaOrderBy: orderParams.orderBy, + mediaOrderDirection: orderParams.orderDirection, }, }) @@ -94,11 +110,7 @@ const AlbumSharePage = ({ albumID, token, password }: AlbumSharePageProps) => { return
{error.message}
} - if (loading) { - return
{t('general.loading.default', 'Loading...')}
- } - - const album = data.album + const album = data?.album return ( @@ -110,6 +122,9 @@ const AlbumSharePage = ({ albumID, token, password }: AlbumSharePageProps) => { `/share/${token}/${albumId}`} + showFilter + setOrdering={orderParams.setOrdering} + ordering={orderParams} /> diff --git a/ui/src/Pages/SharePage/SharePage.test.js b/ui/src/Pages/SharePage/SharePage.test.js index a5a9a9c7..bd857581 100644 --- a/ui/src/Pages/SharePage/SharePage.test.js +++ b/ui/src/Pages/SharePage/SharePage.test.js @@ -147,6 +147,8 @@ describe('load correct share page, based on graphql query', () => { password: null, limit: 200, offset: 0, + mediaOrderBy: 'date_shot', + mediaOrderDirection: 'ASC', }, }, result: { diff --git a/ui/src/components/AlbumFilter.js b/ui/src/components/AlbumFilter.js index f8a6ba83..8396df9e 100644 --- a/ui/src/components/AlbumFilter.js +++ b/ui/src/components/AlbumFilter.js @@ -99,7 +99,7 @@ const AlbumFilter = ({ return ( <> - {authToken() && ( + {authToken() && setOnlyFavorites && ( 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 diff --git a/ui/src/hooks/useURLParameters.ts b/ui/src/hooks/useURLParameters.ts index 0ff833bd..262e2c14 100644 --- a/ui/src/hooks/useURLParameters.ts +++ b/ui/src/hooks/useURLParameters.ts @@ -2,7 +2,13 @@ import { useState } from 'react' 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 url = new URL(urlString)