From abc0bc54d524299faeb65ca0aae9b5929b9bdbf0 Mon Sep 17 00:00:00 2001
From: stz184 <ivanov.bg@gmail.com>
Date: Sun, 27 Sep 2020 16:58:26 +0300
Subject: [PATCH] Fixes viktorstrate/photoview#6 - Used useCallback to improve
 the performance

---
 ui/src/Pages/AlbumPage/AlbumPage.js | 49 +++++++++++++++--------------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/ui/src/Pages/AlbumPage/AlbumPage.js b/ui/src/Pages/AlbumPage/AlbumPage.js
index 45127cb9..4815f330 100644
--- a/ui/src/Pages/AlbumPage/AlbumPage.js
+++ b/ui/src/Pages/AlbumPage/AlbumPage.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import ReactRouterPropTypes from 'react-router-prop-types'
 import gql from 'graphql-tag'
 import { Query } from 'react-apollo'
@@ -51,29 +51,32 @@ function AlbumPage({ match }) {
     match.params.subPage === 'favorites'
   )
 
-  const toggleFavorites = refetch => {
-    const newState = !onlyFavorites
-    if (
-      (refetchNeededAll && !newState) ||
-      (refetchNeededFavorites && newState)
-    ) {
-      refetch({ id: albumId, onlyFavorites: newState }).then(() => {
-        if (onlyFavorites) {
-          refetchNeededFavorites = false
-        } else {
-          refetchNeededAll = false
-        }
+  const toggleFavorites = useCallback(
+    refetch => {
+      const newState = !onlyFavorites
+      if (
+        (refetchNeededAll && !newState) ||
+        (refetchNeededFavorites && newState)
+      ) {
+        refetch({ id: albumId, onlyFavorites: newState }).then(() => {
+          if (onlyFavorites) {
+            refetchNeededFavorites = false
+          } else {
+            refetchNeededAll = false
+          }
+          setOnlyFavorites(newState)
+        })
+      } else {
         setOnlyFavorites(newState)
-      })
-    } else {
-      setOnlyFavorites(newState)
-    }
-    history.replaceState(
-      {},
-      '',
-      '/album/' + albumId + (newState ? '/favorites' : '')
-    )
-  }
+      }
+      history.replaceState(
+        {},
+        '',
+        '/album/' + albumId + (newState ? '/favorites' : '')
+      )
+    },
+    [onlyFavorites, setOnlyFavorites]
+  )
 
   return (
     <Query query={albumQuery} variables={{ id: albumId, onlyFavorites }}>