Refetch when favorites changes

ui/src/components/timelineGallery/TimelineGallery.js

@@ -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>
+    </>
   )
 }
 

ui/src/components/timelineGallery/TimelineGroupAlbum.js

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

ui/src/components/timelineGallery/TimelineGroupDate.js

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