Migrate hiddenGames and favouriteGames

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

@@ -95,10 +95,23 @@ const GameCard = ({
 
   const navigate = useNavigate()
 
-  const { hiddenGames, favouriteGames, showDialogModal, activeController } =
-    useContext(ContextProvider)
-  const { setIsSettingsModalOpen } = useShallowGlobalState(
-    'setIsSettingsModalOpen'
+  const { showDialogModal, activeController } = useContext(ContextProvider)
+  const {
+    setIsSettingsModalOpen,
+    favouriteGames,
+    addFavouriteGame,
+    removeFavouriteGame,
+    hiddenGames,
+    addHiddenGame,
+    removeHiddenGame
+  } = useShallowGlobalState(
+    'setIsSettingsModalOpen',
+    'favouriteGames',
+    'addFavouriteGame',
+    'removeFavouriteGame',
+    'hiddenGames',
+    'addHiddenGame',
+    'removeHiddenGame'
   )
 
   const { layout } = useContext(LibraryContext)
@@ -257,13 +270,13 @@ const GameCard = ({
   }
 
   const isHiddenGame = useMemo(() => {
-    return !!hiddenGames.list.find(
+    return !!hiddenGames.find(
       (hiddenGame: HiddenGame) => hiddenGame.appName === appName
     )
   }, [hiddenGames, appName])
 
   const isFavouriteGame = useMemo(() => {
-    return !!favouriteGames.list.find(
+    return !!favouriteGames.find(
       (favouriteGame: FavouriteGame) => favouriteGame.appName === appName
     )
   }, [favouriteGames, appName])
@@ -332,18 +345,18 @@ const GameCard = ({
     {
       // hide
       label: t('button.hide_game', 'Hide Game'),
-      onclick: () => hiddenGames.add(appName, title),
+      onclick: () => addHiddenGame({ appName, title }),
       show: !isHiddenGame
     },
     {
       // unhide
       label: t('button.unhide_game', 'Unhide Game'),
-      onclick: () => hiddenGames.remove(appName),
+      onclick: () => removeHiddenGame(appName),
       show: isHiddenGame
     },
     {
       label: t('button.add_to_favourites', 'Add To Favourites'),
-      onclick: () => favouriteGames.add(appName, title),
+      onclick: () => addFavouriteGame({ appName, title }),
       show: !isFavouriteGame
     },
     {
@@ -354,7 +367,7 @@ const GameCard = ({
     },
     {
       label: t('button.remove_from_favourites', 'Remove From Favourites'),
-      onclick: () => favouriteGames.remove(appName),
+      onclick: () => removeFavouriteGame(appName),
       show: isFavouriteGame
     },
     {

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

@@ -4,6 +4,7 @@ import ContextProvider from 'frontend/state/ContextProvider'
 import { GameInfo, Runner } from 'common/types'
 import GamesList from '../GamesList'
 import { configStore } from 'frontend/helpers/electronStores'
+import { useShallowGlobalState } from 'frontend/state/GlobalStateV2'
 
 interface Props {
   handleModal: (appName: string, runner: Runner, gameInfo: GameInfo) => void
@@ -42,10 +43,10 @@ export default React.memo(function RecentlyPlayed({
   const { epic, gog, sideloadedLibrary, amazon } = useContext(ContextProvider)
   const [recentGames, setRecentGames] = useState<GameInfo[]>([])
 
-  const hiddenGames = useContext(ContextProvider).hiddenGames
+  const { hiddenGames } = useShallowGlobalState('hiddenGames')
 
   const loadRecentGames = async () => {
-    const hiddenAppNames = hiddenGames.list.map((game) => game.appName)
+    const hiddenAppNames = hiddenGames.map((game) => game.appName)
     const { maxRecentGames } = await window.api.requestAppSettings()
     let newRecentGames = getRecentGames(
       [

src/frontend/screens/Library/index.tsx

@@ -58,12 +58,11 @@ export default React.memo(function Library(): JSX.Element {
     gog,
     amazon,
     sideloadedLibrary,
-    favouriteGames,
     currentCustomCategories,
-    customCategories,
-    hiddenGames
+    customCategories
   } = useContext(ContextProvider)
-  const { libraryTopSection } = useShallowGlobalState('libraryTopSection')
+  const { libraryTopSection, favouriteGames, hiddenGames } =
+    useShallowGlobalState('libraryTopSection', 'favouriteGames', 'hiddenGames')
 
   hasHelp(
     'library',
@@ -316,14 +315,14 @@ export default React.memo(function Library(): JSX.Element {
 
   const favouriteGamesList = useMemo(() => {
     if (showHidden) {
-      return favouriteGames.list
+      return favouriteGames
     }
 
-    const hiddenAppNames = hiddenGames.list.map(
+    const hiddenAppNames = hiddenGames.map(
       (hidden: HiddenGame) => hidden.appName
     )
 
-    return favouriteGames.list.filter(
+    return favouriteGames.filter(
       (game) => !hiddenAppNames.includes(game.appName)
     )
   }, [favouriteGames, showHidden, hiddenGames])
@@ -495,9 +494,7 @@ export default React.memo(function Library(): JSX.Element {
     }
 
     // hide hidden
-    const hiddenGamesAppNames = hiddenGames.list.map(
-      (hidden: HiddenGame) => hidden?.appName
-    )
+    const hiddenGamesAppNames = hiddenGames.map((hidden) => hidden?.appName)
 
     if (!showHidden) {
       library = library.filter(

src/frontend/state/ContextProvider.tsx

@@ -31,18 +31,8 @@ const initialContext: ContextType = {
   refreshWineVersionInfo: async () => Promise.resolve(),
   refreshing: false,
   refreshingInTheBackground: true,
-  hiddenGames: {
-    list: [],
-    add: () => null,
-    remove: () => null
-  },
   currentCustomCategories: [],
   setCurrentCustomCategories: () => null,
-  favouriteGames: {
-    list: [],
-    add: () => null,
-    remove: () => null
-  },
   customCategories: {
     list: {},
     listCategories: () => [],

src/frontend/state/GlobalState.tsx

@@ -235,54 +235,6 @@ class GlobalState extends PureComponent<Props> {
     this.setState({ lastChangelogShown: value })
   }
 
-  hideGame = (appNameToHide: string, appTitle: string) => {
-    const newHiddenGames = [
-      ...this.state.hiddenGames,
-      { appName: appNameToHide, title: appTitle }
-    ]
-
-    this.setState({
-      hiddenGames: newHiddenGames
-    })
-    configStore.set('games.hidden', newHiddenGames)
-  }
-
-  unhideGame = (appNameToUnhide: string) => {
-    const newHiddenGames = this.state.hiddenGames.filter(
-      ({ appName }) => appName !== appNameToUnhide
-    )
-
-    this.setState({
-      hiddenGames: newHiddenGames
-    })
-    configStore.set('games.hidden', newHiddenGames)
-  }
-
-  addGameToFavourites = (appNameToAdd: string, appTitle: string) => {
-    const newFavouriteGames = [
-      ...this.state.favouriteGames.filter(
-        (fav) => fav.appName !== appNameToAdd
-      ),
-      { appName: appNameToAdd, title: appTitle }
-    ]
-
-    this.setState({
-      favouriteGames: newFavouriteGames
-    })
-    configStore.set('games.favourites', newFavouriteGames)
-  }
-
-  removeGameFromFavourites = (appNameToRemove: string) => {
-    const newFavouriteGames = this.state.favouriteGames.filter(
-      ({ appName }) => appName !== appNameToRemove
-    )
-
-    this.setState({
-      favouriteGames: newFavouriteGames
-    })
-    configStore.set('games.favourites', newFavouriteGames)
-  }
-
   getCustomCategories = () =>
     Array.from(new Set(Object.keys(this.state.customCategories))).sort()
 
@@ -727,9 +679,7 @@ class GlobalState extends PureComponent<Props> {
       epic,
       gog,
       amazon,
-      favouriteGames,
       customCategories,
-      hiddenGames,
       hideChangelogsOnStartup,
       lastChangelogShown
     } = this.state
@@ -761,16 +711,6 @@ class GlobalState extends PureComponent<Props> {
           refresh: this.refresh,
           refreshLibrary: this.refreshLibrary,
           refreshWineVersionInfo: this.refreshWineVersionInfo,
-          hiddenGames: {
-            list: hiddenGames,
-            add: this.hideGame,
-            remove: this.unhideGame
-          },
-          favouriteGames: {
-            list: favouriteGames,
-            add: this.addGameToFavourites,
-            remove: this.removeGameFromFavourites
-          },
           customCategories: {
             list: customCategories,
             listCategories: this.getCustomCategories,

src/frontend/state/GlobalStateV2.ts

@@ -11,8 +11,10 @@ import type {
 } from '../types'
 import type {
   ExperimentalFeatures,
+  FavouriteGame,
   GameInfo,
   GameStatus,
+  HiddenGame,
   LibraryTopSectionOptions,
   Runner
 } from 'common/types'
@@ -46,6 +48,14 @@ interface GlobalStateV2 extends ExperimentalFeatures {
   externalLinkDialogOptions: ExternalLinkDialogOptions
 
   libraryTopSection: LibraryTopSectionOptions
+
+  hiddenGames: HiddenGame[]
+  addHiddenGame: (gameToAdd: HiddenGame) => void
+  removeHiddenGame: (appName: string) => void
+
+  favouriteGames: FavouriteGame[]
+  addFavouriteGame: (gameToAdd: FavouriteGame) => void
+  removeFavouriteGame: (appName: string) => void
 }
 
 const useGlobalState = create<GlobalStateV2>()(
@@ -108,13 +118,39 @@ const useGlobalState = create<GlobalStateV2>()(
 
       externalLinkDialogOptions: { showDialog: false },
 
-      libraryTopSection: 'disabled'
+      libraryTopSection: 'disabled',
+
+      hiddenGames: configStore.get('games.hidden', []),
+      addHiddenGame: (game) =>
+        set({ hiddenGames: [...get().hiddenGames, game] }),
+      removeHiddenGame: (game) => {
+        const updatedHiddenGames = get().hiddenGames.filter(
+          ({ appName }) => appName !== game
+        )
+        set({
+          hiddenGames: updatedHiddenGames
+        })
+      },
+
+      favouriteGames: configStore.get('games.favourites', []),
+      addFavouriteGame: (game) =>
+        set({ favouriteGames: [...get().favouriteGames, game] }),
+      removeFavouriteGame: (game) => {
+        const updatedFavouriteGames = get().favouriteGames.filter(
+          ({ appName }) => appName !== game
+        )
+        set({
+          favouriteGames: updatedFavouriteGames
+        })
+      }
     }),
     {
       name: 'globalState',
       partialize: (state) => ({
         gameUpdates: state.gameUpdates,
-        language: state.language
+        language: state.language,
+        hiddenGames: state.hiddenGames,
+        favouriteGames: state.favouriteGames
       })
     }
   )

src/frontend/types.ts

@@ -23,16 +23,6 @@ export interface ContextType {
   refreshWineVersionInfo: (fetch: boolean) => void
   refreshing: boolean
   refreshingInTheBackground: boolean
-  hiddenGames: {
-    list: HiddenGame[]
-    add: (appNameToHide: string, appTitle: string) => void
-    remove: (appNameToUnhide: string) => void
-  }
-  favouriteGames: {
-    list: HiddenGame[]
-    add: (appNameToAdd: string, appTitle: string) => void
-    remove: (appNameToRemove: string) => void
-  }
   customCategories: {
     list: Record<string, string[]>
     listCategories: () => string[]
@@ -101,11 +91,6 @@ export interface ExternalLinkDialogOptions {
   linkCallback?: () => void
 }
 
-interface HiddenGame {
-  appName: string
-  title: string
-}
-
 export interface InstallProgress {
   bytes: string
   eta: string