Favorites filter composable. Refresh libraries in background

src/frontend/components/UI/ActionIcons/index.tsx

@@ -6,25 +6,18 @@ import {
   faArrowDownZA,
   faHardDrive as hardDriveSolid
 } from '@fortawesome/free-solid-svg-icons'
-import {
-  faHardDrive as hardDriveLight
-} from '@fortawesome/free-regular-svg-icons'
+import { faHardDrive as hardDriveLight } from '@fortawesome/free-regular-svg-icons'
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import ContextProvider from 'frontend/state/ContextProvider'
 import FormControl from '../FormControl'
 import './index.css'
-import { Runner } from 'common/types'
 import classNames from 'classnames'
 import LibraryContext from 'frontend/screens/Library/LibraryContext'
 
-interface Props {
-  library: Runner | 'all'
-}
-
-export default React.memo(function ActionIcons({ library }: Props) {
+export default React.memo(function ActionIcons() {
   const { t } = useTranslation()
   const { refreshLibrary, refreshing } = useContext(ContextProvider)
 
@@ -94,9 +87,7 @@ export default React.memo(function ActionIcons({ library }: Props) {
           title={t('generic.library.refresh', 'Refresh Library')}
           onClick={async () =>
             refreshLibrary({
-              checkForUpdates: true,
-              runInBackground: library === 'gog',
-              library
+              checkForUpdates: true
             })
           }
         >

src/frontend/screens/Library/components/LibraryHeader/index.tsx

@@ -1,9 +1,7 @@
 import React, { useContext, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionIcons from 'frontend/components/UI/ActionIcons'
-import { amazonCategories, epicCategories } from 'frontend/helpers/library'
 import { GameInfo } from 'common/types'
-import { getLibraryTitle } from '../../constants'
 import LibraryContext from '../../LibraryContext'
 import './index.css'
 
@@ -17,7 +15,7 @@ export default React.memo(function LibraryHeader({
   handleAddGameButtonClick
 }: Props) {
   const { t } = useTranslation()
-  const { category, showFavourites } = useContext(LibraryContext)
+  const { showFavourites } = useContext(LibraryContext)
 
   const numberOfGames = useMemo(() => {
     if (!list) {
@@ -30,35 +28,15 @@ export default React.memo(function LibraryHeader({
 
     const total = list.length - dlcCount
     return total > 0 ? `${total}` : 0
-  }, [list, category])
-
-  function getLibrary() {
-    if (category === 'all') {
-      return category
-    }
-
-    if (epicCategories.includes(category)) {
-      return 'legendary'
-    }
-
-    if (amazonCategories.includes(category)) {
-      return 'nile'
-    }
-
-    if (category === 'sideload') {
-      return 'sideload'
-    }
-
-    return 'gog'
-  }
+  }, [list])
 
   return (
     <h5 className="libraryHeader">
       <div className="libraryHeaderWrapper">
         <span className="libraryTitle">
           {showFavourites
             ? t('favourites', 'Favourites')
-            : `${getLibraryTitle(category, t)}`}
+            : t('title.allGames', 'All Games')}
           <span className="numberOfgames">{numberOfGames}</span>
           <button
             className="sideloadGameButton"
@@ -67,7 +45,7 @@ export default React.memo(function LibraryHeader({
             {t('add_game', 'Add Game')}
           </button>
         </span>
-        <ActionIcons library={getLibrary()} />
+        <ActionIcons />
       </div>
     </h5>
   )

src/frontend/screens/Library/index.tsx

@@ -307,7 +307,11 @@ export default React.memo(function Library(): JSX.Element {
       })
     }
     return tempArray
-  }, [showFavourites, showFavouritesLibrary, favouriteGames, epic, gog])
+  }, [showFavourites, showFavouritesLibrary, favouriteGames, epic, gog, amazon])
+
+  const favouritesIds = useMemo(() => {
+    return favourites.map((game) => `${game.app_name}_${game.runner}`)
+  }, [favourites])
 
   // select library
   const libraryToShow = useMemo(() => {
@@ -331,39 +335,39 @@ export default React.memo(function Library(): JSX.Element {
       displayedStores = Object.keys(storesFilters)
     }
 
+    const showEpic = epic.username && displayedStores.includes('legendary')
+    const showGog = gog.username && displayedStores.includes('gog')
+    const showAmazon = amazon.user_id && displayedStores.includes('nile')
+    const showSideloaded = displayedStores.includes('sideload')
+
+    const epicLibrary = showEpic ? epic.library : []
+    const gogLibrary = showGog ? gog.library : []
+    const sideloadedApps = showSideloaded ? sideloadedLibrary : []
+    const amazonLibrary = showAmazon ? amazon.library : []
+
+    library = [
+      ...sideloadedApps,
+      ...epicLibrary,
+      ...gogLibrary,
+      ...amazonLibrary
+    ]
+
     if (showFavouritesLibrary) {
-      library = favourites.filter((game) =>
-        displayedStores.includes(game?.runner)
+      library = library.filter((game) =>
+        favouritesIds.includes(`${game.app_name}_${game.runner}`)
       )
-    } else {
-      const showEpic = epic.username && displayedStores.includes('legendary')
-      const showGog = gog.username && displayedStores.includes('gog')
-      const showAmazon = amazon.user_id && displayedStores.includes('nile')
-      const showSideloaded = displayedStores.includes('sideload')
-
-      const epicLibrary = showEpic ? epic.library : []
-      const gogLibrary = showGog ? gog.library : []
-      const sideloadedApps = showSideloaded ? sideloadedLibrary : []
-      const amazonLibrary = showAmazon ? amazon.library : []
-
-      library = [
-        ...sideloadedApps,
-        ...epicLibrary,
-        ...gogLibrary,
-        ...amazonLibrary
-      ]
-
-      if (showInstalledOnly) {
-        library = library.filter((game) => game.is_installed)
-      }
+    }
 
-      if (!showNonAvailable) {
-        const nonAvailbleGames = storage.getItem('nonAvailableGames') || '[]'
-        const nonAvailbleGamesArray = JSON.parse(nonAvailbleGames)
-        library = library.filter(
-          (game) => !nonAvailbleGamesArray.includes(game.app_name)
-        )
-      }
+    if (showInstalledOnly) {
+      library = library.filter((game) => game.is_installed)
+    }
+
+    if (!showNonAvailable) {
+      const nonAvailbleGames = storage.getItem('nonAvailableGames') || '[]'
+      const nonAvailbleGamesArray = JSON.parse(nonAvailbleGames)
+      library = library.filter(
+        (game) => !nonAvailbleGamesArray.includes(game.app_name)
+      )
     }
 
     // filter