- Fixed incorrect typename of the optimistic response of markFavorite() - Added onFavorite callback to track when media is favorited - Added logic to refetch the query when media is added/removed to favorites
This commit is contained in:
parent
23d9d27764
commit
9212ac52eb
|
@ -42,49 +42,55 @@ const albumQuery = gql`
|
|||
}
|
||||
`
|
||||
|
||||
let refetchNeededAll = false
|
||||
let refetchNeededFavorites = false
|
||||
|
||||
function AlbumPage({ match }) {
|
||||
const albumId = match.params.id
|
||||
const showFavorites = match.params.subPage === 'favorites'
|
||||
|
||||
const [onlyFavorites, setOnlyFavorites] = useState(showFavorites)
|
||||
|
||||
const toggleFavorites = onlyFavorites => {
|
||||
setOnlyFavorites(onlyFavorites)
|
||||
if (onlyFavorites) {
|
||||
history.pushState(
|
||||
{ showFavorites: onlyFavorites },
|
||||
'',
|
||||
'/album/' + albumId + '/favorites'
|
||||
const [onlyFavorites, setOnlyFavorites] = useState(
|
||||
match.params.subPage === 'favorites'
|
||||
)
|
||||
|
||||
const toggleFavorites = refetch => {
|
||||
const onlyFavorites = !onlyFavorites
|
||||
if (
|
||||
(refetchNeededAll && !onlyFavorites) ||
|
||||
(refetchNeededFavorites && onlyFavorites)
|
||||
) {
|
||||
refetch({ id: albumId, onlyFavorites: onlyFavorites }).then(() => {
|
||||
if (onlyFavorites) {
|
||||
refetchNeededFavorites = false
|
||||
} else {
|
||||
history.back()
|
||||
refetchNeededAll = false
|
||||
}
|
||||
setOnlyFavorites(onlyFavorites)
|
||||
})
|
||||
} else {
|
||||
setOnlyFavorites(onlyFavorites)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const updateImageState = event => {
|
||||
setOnlyFavorites(event.state.showFavorites)
|
||||
history.replaceState(
|
||||
{},
|
||||
'',
|
||||
'/album/' + albumId + (onlyFavorites ? '/favorites' : '')
|
||||
)
|
||||
}
|
||||
|
||||
window.addEventListener('popstate', updateImageState)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('popstate', updateImageState)
|
||||
}
|
||||
}, [setOnlyFavorites])
|
||||
|
||||
return (
|
||||
<Query query={albumQuery} variables={{ id: albumId, onlyFavorites }}>
|
||||
{({ loading, error, data }) => {
|
||||
{({ loading, error, data, refetch }) => {
|
||||
if (error) return <div>Error</div>
|
||||
|
||||
return (
|
||||
<AlbumGallery
|
||||
album={data && data.album}
|
||||
loading={loading}
|
||||
showFavoritesToggle
|
||||
setOnlyFavorites={toggleFavorites}
|
||||
setOnlyFavorites={() => {
|
||||
toggleFavorites(refetch)
|
||||
}}
|
||||
onlyFavorites={onlyFavorites}
|
||||
onFavorite={() =>
|
||||
(refetchNeededAll = refetchNeededFavorites = true)
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
|
|
|
@ -64,6 +64,8 @@ class PhotosPage extends Component {
|
|||
this.previousImage = this.previousImage.bind(this)
|
||||
|
||||
this.albums = []
|
||||
this.refetchNeededFavorites = false
|
||||
this.refetchNeededAll = false
|
||||
}
|
||||
|
||||
onPopState(event) {
|
||||
|
@ -80,17 +82,33 @@ class PhotosPage extends Component {
|
|||
window.removeEventListener('popstate', this.onPopState)
|
||||
}
|
||||
|
||||
favoritesCheckboxClick() {
|
||||
favoritesCheckboxClick(refetch) {
|
||||
const onlyWithFavorites = !this.state.onlyWithFavorites
|
||||
history.pushState(
|
||||
{ showFavorites: onlyWithFavorites },
|
||||
{},
|
||||
'',
|
||||
'/photos' + (onlyWithFavorites ? '/favorites' : '')
|
||||
)
|
||||
|
||||
if (
|
||||
(this.refetchNeededAll && !onlyWithFavorites) ||
|
||||
(this.refetchNeededFavorites && onlyWithFavorites)
|
||||
) {
|
||||
refetch({ onlyWithFavorites }).then(() => {
|
||||
if (onlyWithFavorites) {
|
||||
this.refetchNeededFavorites = false
|
||||
} else {
|
||||
this.refetchNeededAll = false
|
||||
}
|
||||
this.setState({
|
||||
onlyWithFavorites,
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.setState({
|
||||
onlyWithFavorites,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
setActiveImage(album, photo) {
|
||||
|
@ -139,7 +157,7 @@ class PhotosPage extends Component {
|
|||
query={photoQuery}
|
||||
variables={{ onlyWithFavorites: showOnlyWithFavorites }}
|
||||
>
|
||||
{({ loading, error, data }) => {
|
||||
{({ loading, error, data, refetch }) => {
|
||||
if (error) return error
|
||||
|
||||
if (loading) return null
|
||||
|
@ -157,7 +175,7 @@ class PhotosPage extends Component {
|
|||
onClick={e => e.stopPropagation()}
|
||||
checked={showOnlyWithFavorites}
|
||||
onChange={() => {
|
||||
this.favoritesCheckboxClick()
|
||||
this.favoritesCheckboxClick(refetch)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
@ -168,6 +186,10 @@ class PhotosPage extends Component {
|
|||
onSelectImage={photoIndex => {
|
||||
this.setActiveImage(index, photoIndex)
|
||||
}}
|
||||
onFavorite={() => {
|
||||
this.refetchNeededAll = true
|
||||
this.refetchNeededFavorites = true
|
||||
}}
|
||||
activeIndex={
|
||||
this.state.activeAlbumIndex == index
|
||||
? this.state.activePhotoIndex
|
||||
|
|
|
@ -119,7 +119,7 @@ const AlbumTitle = ({
|
|||
label="Show only the favorites"
|
||||
checked={onlyFavorites}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onChange={() => setOnlyFavorites(!onlyFavorites)}
|
||||
onChange={setOnlyFavorites}
|
||||
/>
|
||||
)}
|
||||
</Header>
|
||||
|
|
|
@ -12,6 +12,7 @@ const AlbumGallery = ({
|
|||
showFavoritesToggle = false,
|
||||
setOnlyFavorites,
|
||||
onlyFavorites = false,
|
||||
onFavorite,
|
||||
}) => {
|
||||
const [imageState, setImageState] = useState({
|
||||
activeImage: -1,
|
||||
|
@ -111,6 +112,7 @@ const AlbumGallery = ({
|
|||
onSelectImage={index => {
|
||||
setActiveImage(index)
|
||||
}}
|
||||
onFavorite={onFavorite}
|
||||
setPresenting={setPresentingWithHistory}
|
||||
nextImage={nextImage}
|
||||
previousImage={previousImage}
|
||||
|
@ -126,6 +128,7 @@ AlbumGallery.propTypes = {
|
|||
showFavoritesToggle: PropTypes.bool,
|
||||
setOnlyFavorites: PropTypes.func,
|
||||
onlyFavorites: PropTypes.bool,
|
||||
onFavorite: PropTypes.func,
|
||||
}
|
||||
|
||||
export default AlbumGallery
|
||||
|
|
|
@ -130,6 +130,7 @@ export const MediaThumbnail = ({
|
|||
index,
|
||||
active,
|
||||
setPresenting,
|
||||
onFavorite,
|
||||
}) => {
|
||||
const [markFavorite] = useMutation(markFavoriteMutation)
|
||||
|
||||
|
@ -141,19 +142,21 @@ export const MediaThumbnail = ({
|
|||
name={media.favorite ? 'heart' : 'heart outline'}
|
||||
onClick={event => {
|
||||
event.stopPropagation()
|
||||
const favorite = !media.favorite
|
||||
markFavorite({
|
||||
variables: {
|
||||
mediaId: media.id,
|
||||
favorite: !media.favorite,
|
||||
favorite: favorite,
|
||||
},
|
||||
optimisticResponse: {
|
||||
favoritePhoto: {
|
||||
favoriteMedia: {
|
||||
id: media.id,
|
||||
favorite: !media.favorite,
|
||||
__typename: 'Photo',
|
||||
favorite: favorite,
|
||||
__typename: 'Media',
|
||||
},
|
||||
},
|
||||
})
|
||||
onFavorite()
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
|
|
@ -40,6 +40,7 @@ const PhotoGallery = ({
|
|||
setPresenting,
|
||||
nextImage,
|
||||
previousImage,
|
||||
onFavorite,
|
||||
}) => {
|
||||
const { updateSidebar } = useContext(SidebarContext)
|
||||
|
||||
|
@ -94,6 +95,7 @@ const PhotoGallery = ({
|
|||
updateSidebar(<MediaSidebar media={photo} />)
|
||||
onSelectImage(index)
|
||||
}}
|
||||
onFavorite={onFavorite}
|
||||
setPresenting={setPresenting}
|
||||
minWidth={minWidth}
|
||||
index={index}
|
||||
|
@ -140,6 +142,7 @@ PhotoGallery.propTypes = {
|
|||
setPresenting: PropTypes.func,
|
||||
nextImage: PropTypes.func,
|
||||
previousImage: PropTypes.func,
|
||||
onFavorite: PropTypes.func,
|
||||
}
|
||||
|
||||
export default PhotoGallery
|
||||
|
|
Loading…
Reference in New Issue