Add "sort by" options for shared albums, fix #307

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}
       />
       <PaginateLoader
         active={!finishedLoadingMore && !loading}

ui/src/Pages/SharePage/AlbumSharePage.tsx

@@ -4,12 +4,16 @@ import AlbumGallery from '../../components/albumGallery/AlbumGallery'
 import styled from 'styled-components'
 import { gql, useQuery } from '@apollo/client'
 import { useTranslation } from 'react-i18next'
+import useURLParameters from '../../hooks/useURLParameters'
+import useOrderingParams from '../../hooks/useOrderingParams'
 
 export const SHARE_ALBUM_QUERY = gql`
   query shareAlbumQuery(
     $id: ID!
     $token: String!
     $password: String
+    $mediaOrderBy: String
+    $mediaOrderDirection: OrderDirection
     $limit: 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
         title
         type
@@ -80,13 +90,19 @@ type AlbumSharePageProps = {
 
 const AlbumSharePage = ({ albumID, token, password }: AlbumSharePageProps) => {
   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 <div>{error.message}</div>
   }
 
-  if (loading) {
-    return <div>{t('general.loading.default', 'Loading...')}</div>
-  }
-
-  const album = data.album
+  const album = data?.album
 
   return (
     <AlbumSharePageWrapper data-testid="AlbumSharePage">
@@ -110,6 +122,9 @@ const AlbumSharePage = ({ albumID, token, password }: AlbumSharePageProps) => {
         <AlbumGallery
           album={album}
           customAlbumLink={albumId => `/share/${token}/${albumId}`}
+          showFilter
+          setOrdering={orderParams.setOrdering}
+          ordering={orderParams}
         />
       </Layout>
     </AlbumSharePageWrapper>

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: {

ui/src/components/AlbumFilter.js

@@ -99,7 +99,7 @@ const AlbumFilter = ({
 
   return (
     <>
-      {authToken() && (
+      {authToken() && setOnlyFavorites && (
         <FavoritesCheckbox
           onlyFavorites={onlyFavorites}
           setOnlyFavorites={setOnlyFavorites}

ui/src/hooks/useOrderingParams.ts

@@ -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

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)