mirror
/
photoview
mirror of https://github.com/photoview/photoview.git
1
Fork 0
Code

AlbumPages is now using useQuery hook instead of <Query> component

This commit is contained in:
stz184 2020-10-30 15:54:09 +02:00
parent 9e1a3464eb
commit f76c3e4e0d
1 changed files with 27 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
ui/src/Pages/AlbumPage/AlbumPage.js
View File

@ -1,8 +1,7 @@
import React, { useCallback, useState, useEffect } from 'react' import React, { useCallback, useState, useEffect } from 'react'
import ReactRouterPropTypes from 'react-router-prop-types' import ReactRouterPropTypes from 'react-router-prop-types'
import { useLocation } from 'react-router-dom' import { useLocation } from 'react-router-dom'
import { gql } from '@apollo/client' import { useQuery, gql } from '@apollo/client'
import { Query } from '@apollo/client/react/components'
import AlbumGallery from '../../components/albumGallery/AlbumGallery' import AlbumGallery from '../../components/albumGallery/AlbumGallery'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import Layout from '../../Layout' import Layout from '../../Layout'
@ -80,7 +79,7 @@ function AlbumPage({ match }) {
) )
const toggleFavorites = useCallback( const toggleFavorites = useCallback(
(onlyFavorites, refetch) => { onlyFavorites => {
if ( if (
(refetchNeededAll && !onlyFavorites) || (refetchNeededAll && !onlyFavorites) ||
(refetchNeededFavorites && onlyFavorites) (refetchNeededFavorites && onlyFavorites)
@ -97,7 +96,7 @@ function AlbumPage({ match }) {
setOnlyFavorites(onlyFavorites) setOnlyFavorites(onlyFavorites)
} }
}, },
[setOnlyFavorites] [setOnlyFavorites, refetch]
) )
useEffect(() => { useEffect(() => {
@ -107,45 +106,32 @@ function AlbumPage({ match }) {
history.replaceState({}, '', pathName + '?' + queryString) history.replaceState({}, '', pathName + '?' + queryString)
}, [onlyFavorites, ordering]) }, [onlyFavorites, ordering])
return ( const { loading, error, data, refetch } = useQuery(albumQuery, {
<Query variables: {
query={albumQuery}
variables={{
id: albumId, id: albumId,
onlyFavorites, onlyFavorites,
mediaOrderBy: ordering.orderBy, mediaOrderBy: ordering.orderBy,
mediaOrderDirection: ordering.orderDirection, mediaOrderDirection: ordering.orderDirection,
}}
>
{({ loading, error, data, refetch }) => {
const setOnlyFavorites = useCallback(
checked => {
toggleFavorites(checked, refetch)
}, },
[toggleFavorites, refetch] })
)
if (error) return <div>Error</div> if (error) return <div>Error</div>
return ( return (
<Layout title={data ? data.album.title : 'Loading album'}> <Layout title={data ? data.album.title : 'Loading album'}>
<AlbumGallery <AlbumGallery
album={data && data.album} album={data && data.album}
loading={loading} loading={loading}
showFavoritesToggle showFavoritesToggle
setOnlyFavorites={setOnlyFavorites} setOnlyFavorites={toggleFavorites}
onlyFavorites={onlyFavorites} onlyFavorites={onlyFavorites}
onFavorite={() => onFavorite={() => (refetchNeededAll = refetchNeededFavorites = true)}
(refetchNeededAll = refetchNeededFavorites = true)
}
showFilter showFilter
setOrdering={setOrderingCallback} setOrdering={setOrderingCallback}
ordering={ordering} ordering={ordering}
/> />
</Layout> </Layout>
) )
}}
</Query>
)
} }
AlbumPage.propTypes = { AlbumPage.propTypes = {