Refetch when favorites changes
This commit is contained in:
parent
4fdb9357ea
commit
398f1bf46b
|
@ -1,4 +1,4 @@
|
|||
import React, { useState, useCallback } from 'react'
|
||||
import React, { useState, useCallback, useRef, useEffect } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { useQuery, gql } from '@apollo/client'
|
||||
import TimelineGroupDate from './TimelineGroupDate'
|
||||
|
@ -58,6 +58,7 @@ const TimelineGallery = () => {
|
|||
|
||||
const onlyFavorites = getParam('favorites') == '1' ? true : false
|
||||
const setOnlyFavorites = favorites => setParam('favorites', favorites ? 1 : 0)
|
||||
const favoritesNeedsRefresh = useRef(false)
|
||||
|
||||
const nextMedia = useCallback(() => {
|
||||
setActiveIndex(activeIndex => {
|
||||
|
@ -122,12 +123,21 @@ const TimelineGallery = () => {
|
|||
})
|
||||
}, [activeIndex])
|
||||
|
||||
const { data, error, loading } = useQuery(MY_TIMELINE_QUERY, {
|
||||
const { data, error, loading, refetch } = useQuery(MY_TIMELINE_QUERY, {
|
||||
variables: {
|
||||
onlyFavorites,
|
||||
},
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (favoritesNeedsRefresh) {
|
||||
favoritesNeedsRefresh.current = false
|
||||
refetch({
|
||||
onlyFavorites: onlyFavorites,
|
||||
})
|
||||
}
|
||||
}, [onlyFavorites])
|
||||
|
||||
if (error) {
|
||||
return error
|
||||
}
|
||||
|
@ -166,12 +176,15 @@ const TimelineGallery = () => {
|
|||
dateGroup: i,
|
||||
})
|
||||
}}
|
||||
onFavorite={() => {
|
||||
favoritesNeedsRefresh.current = true
|
||||
}}
|
||||
/>
|
||||
))
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Loader active={loading}>Loading timeline</Loader>
|
||||
<FavoritesCheckbox
|
||||
onlyFavorites={onlyFavorites}
|
||||
|
@ -191,7 +204,7 @@ const TimelineGallery = () => {
|
|||
setPresenting={setPresenting}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
@ -41,6 +41,7 @@ const TimelineGroupAlbum = ({
|
|||
onSelectMedia,
|
||||
setPresenting,
|
||||
activeIndex,
|
||||
onFavorite,
|
||||
}) => {
|
||||
const { updateSidebar } = useContext(SidebarContext)
|
||||
|
||||
|
@ -53,6 +54,7 @@ const TimelineGroupAlbum = ({
|
|||
updateSidebar(<MediaSidebar media={media} />)
|
||||
}}
|
||||
setPresenting={setPresenting}
|
||||
onFavorite={onFavorite}
|
||||
index={i}
|
||||
active={activeIndex == i}
|
||||
/>
|
||||
|
@ -73,6 +75,7 @@ TimelineGroupAlbum.propTypes = {
|
|||
onSelectMedia: PropTypes.func.isRequired,
|
||||
setPresenting: PropTypes.func.isRequired,
|
||||
activeIndex: PropTypes.number.isRequired,
|
||||
onFavorite: PropTypes.func,
|
||||
}
|
||||
|
||||
export default TimelineGroupAlbum
|
||||
|
|
|
@ -30,6 +30,7 @@ const TimelineGroupDate = ({
|
|||
onSelectDateGroup,
|
||||
activeIndex,
|
||||
setPresenting,
|
||||
onFavorite,
|
||||
}) => {
|
||||
const albumGroupElms = groups.map((group, i) => (
|
||||
<TimelineGroupAlbum
|
||||
|
@ -43,6 +44,7 @@ const TimelineGroupDate = ({
|
|||
}}
|
||||
activeIndex={activeIndex.albumGroup == i ? activeIndex.media : -1}
|
||||
setPresenting={setPresenting}
|
||||
onFavorite={onFavorite}
|
||||
/>
|
||||
))
|
||||
|
||||
|
@ -62,6 +64,7 @@ TimelineGroupDate.propTypes = {
|
|||
onSelectDateGroup: PropTypes.func.isRequired,
|
||||
activeIndex: PropTypes.object.isRequired,
|
||||
setPresenting: PropTypes.func.isRequired,
|
||||
onFavorite: PropTypes.func,
|
||||
}
|
||||
|
||||
export default TimelineGroupDate
|
||||
|
|
Loading…
Reference in New Issue