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

68
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,44 +106,31 @@ 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} id: albumId,
variables={{ onlyFavorites,
id: albumId, mediaOrderBy: ordering.orderBy,
onlyFavorites, mediaOrderDirection: ordering.orderDirection,
mediaOrderBy: ordering.orderBy, },
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 (
<Layout title={data ? data.album.title : 'Loading album'}> return (
<AlbumGallery <Layout title={data ? data.album.title : 'Loading album'}>
album={data && data.album} <AlbumGallery
loading={loading} album={data && data.album}
showFavoritesToggle loading={loading}
setOnlyFavorites={setOnlyFavorites} showFavoritesToggle
onlyFavorites={onlyFavorites} setOnlyFavorites={toggleFavorites}
onFavorite={() => onlyFavorites={onlyFavorites}
(refetchNeededAll = refetchNeededFavorites = true) onFavorite={() => (refetchNeededAll = refetchNeededFavorites = true)}
} showFilter
showFilter setOrdering={setOrderingCallback}
setOrdering={setOrderingCallback} ordering={ordering}
ordering={ordering} />
/> </Layout>
</Layout>
)
}}
</Query>
) )
} }