Fixes viktorstrate/photoview#6

- 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

ui/src/Pages/AlbumPage/AlbumPage.js

@@ -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(
+    match.params.subPage === 'favorites'
+  )
 
-  const [onlyFavorites, setOnlyFavorites] = useState(showFavorites)
-
-  const toggleFavorites = onlyFavorites => {
-    setOnlyFavorites(onlyFavorites)
-    if (onlyFavorites) {
-      history.pushState(
-        { showFavorites: onlyFavorites },
-        '',
-        '/album/' + albumId + '/favorites'
-      )
+  const toggleFavorites = refetch => {
+    const onlyFavorites = !onlyFavorites
+    if (
+      (refetchNeededAll && !onlyFavorites) ||
+      (refetchNeededFavorites && onlyFavorites)
+    ) {
+      refetch({ id: albumId, onlyFavorites: onlyFavorites }).then(() => {
+        if (onlyFavorites) {
+          refetchNeededFavorites = false
+        } else {
+          refetchNeededAll = false
+        }
+        setOnlyFavorites(onlyFavorites)
+      })
     } else {
-      history.back()
+      setOnlyFavorites(onlyFavorites)
     }
+    history.replaceState(
+      {},
+      '',
+      '/album/' + albumId + (onlyFavorites ? '/favorites' : '')
+    )
   }
 
-  useEffect(() => {
-    const updateImageState = event => {
-      setOnlyFavorites(event.state.showFavorites)
-    }
-
-    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)
+            }
           />
         )
       }}

ui/src/Pages/PhotosPage/PhotosPage.js

@@ -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' : '')
     )
 
-    this.setState({
-      onlyWithFavorites,
-    })
+    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

ui/src/components/AlbumTitle.js

@@ -119,7 +119,7 @@ const AlbumTitle = ({
           label="Show only the favorites"
           checked={onlyFavorites}
           onClick={e => e.stopPropagation()}
-          onChange={() => setOnlyFavorites(!onlyFavorites)}
+          onChange={setOnlyFavorites}
         />
       )}
     </Header>

ui/src/components/albumGallery/AlbumGallery.js

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

ui/src/components/photoGallery/MediaThumbnail.js

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

ui/src/components/photoGallery/PhotoGallery.js

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