Migrate refresh, refreshLibrary, epic, gog, amazon, and `si…

…deloadedLibrary`

Quite a big commit, but splitting this up further isn't possible

src/common/types.ts

@@ -484,13 +484,6 @@ export type HiddenGame = RecentGame
 
 export type FavouriteGame = HiddenGame
 
-export type RefreshOptions = {
-  checkForUpdates?: boolean
-  fullRefresh?: boolean
-  library?: Runner | 'all'
-  runInBackground?: boolean
-}
-
 export interface WineVersionInfo extends VersionInfo {
   isInstalled: boolean
   hasUpdate: boolean

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

@@ -11,7 +11,6 @@ import { faHardDrive as hardDriveLight } from '@fortawesome/free-regular-svg-ico
 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 classNames from 'classnames'
@@ -20,8 +19,10 @@ import { useShallowGlobalState } from 'frontend/state/GlobalStateV2'
 
 export default React.memo(function ActionIcons() {
   const { t } = useTranslation()
-  const { refreshLibrary } = useContext(ContextProvider)
-  const { refreshing } = useShallowGlobalState('refreshing')
+  const { refreshing, refreshLibrary } = useShallowGlobalState(
+    'refreshing',
+    'refreshLibrary'
+  )
 
   const {
     handleLayout,

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

@@ -1,17 +1,18 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { faHeartCrack, faSyncAlt } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 import { CleaningServicesOutlined, DeleteOutline } from '@mui/icons-material'
 import './index.css'
-import ContextProvider from 'frontend/state/ContextProvider'
 import { useShallowGlobalState } from 'frontend/state/GlobalStateV2'
 
 export default function ErrorComponent({ message }: { message: string }) {
   const { t } = useTranslation()
-  const { refreshLibrary } = useContext(ContextProvider)
-  const { showResetDialog } = useShallowGlobalState('showResetDialog')
+  const { showResetDialog, refreshLibrary } = useShallowGlobalState(
+    'showResetDialog',
+    'refreshLibrary'
+  )
 
   return (
     <div className="errorComponent">

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

@@ -3,7 +3,7 @@ import ToggleSwitch from '../ToggleSwitch'
 import { useTranslation } from 'react-i18next'
 import LibraryContext from 'frontend/screens/Library/LibraryContext'
 import { Category } from 'frontend/types'
-import ContextProvider from 'frontend/state/ContextProvider'
+import { useShallowGlobalState } from 'frontend/state/GlobalStateV2'
 import './index.css'
 
 const RunnerToStore = {
@@ -15,7 +15,11 @@ const RunnerToStore = {
 
 export default function LibraryFilters() {
   const { t } = useTranslation()
-  const { epic, gog, amazon } = useContext(ContextProvider)
+  const { epicUsername, gogUsername, amazonUserId } = useShallowGlobalState(
+    'epicUsername',
+    'gogUsername',
+    'amazonUserId'
+  )
   const {
     setShowFavourites,
     setShowHidden,
@@ -163,9 +167,9 @@ export default function LibraryFilters() {
     <div className="libraryFilters">
       <button className="selectStyle">{t('header.filters', 'Filters')}</button>
       <div className="dropdown">
-        {epic.username && storeToggle('legendary')}
-        {gog.username && storeToggle('gog')}
-        {amazon.user_id && storeToggle('nile')}
+        {epicUsername && storeToggle('legendary')}
+        {gogUsername && storeToggle('gog')}
+        {amazonUserId && storeToggle('nile')}
         {storeToggle('sideload')}
 
         <hr />

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

@@ -1,10 +1,10 @@
 import React, { useContext, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
-import ContextProvider from 'frontend/state/ContextProvider'
 import { GameInfo } from '../../../../common/types'
 import SearchBar from '../SearchBar'
 import { useTranslation } from 'react-i18next'
 import LibraryContext from 'frontend/screens/Library/LibraryContext'
+import { useShallowGlobalState } from 'frontend/state/GlobalStateV2'
 
 function fixFilter(text: string) {
   const regex = new RegExp(/([?\\|*|+|(|)|[|]|])+/, 'g')
@@ -18,17 +18,23 @@ const RUNNER_TO_STORE = {
 }
 
 export default function LibrarySearchBar() {
-  const { epic, gog, sideloadedLibrary, amazon } = useContext(ContextProvider)
+  const { epicLibrary, gogLibrary, amazonLibrary, sideloadedLibrary } =
+    useShallowGlobalState(
+      'epicLibrary',
+      'gogLibrary',
+      'amazonLibrary',
+      'sideloadedLibrary'
+    )
   const { handleSearch, filterText } = useContext(LibraryContext)
   const navigate = useNavigate()
   const { t } = useTranslation()
 
   const list = useMemo(() => {
     return [
-      ...(epic.library ?? []),
-      ...(gog.library ?? []),
-      ...(sideloadedLibrary ?? []),
-      ...(amazon.library ?? [])
+      ...epicLibrary,
+      ...Object.values(gogLibrary),
+      ...amazonLibrary,
+      ...sideloadedLibrary
     ]
       .filter(Boolean)
       .filter((el) => {
@@ -38,7 +44,7 @@ export default function LibrarySearchBar() {
         )
       })
       .sort((g1, g2) => (g1.title < g2.title ? -1 : 1))
-  }, [amazon.library, epic.library, gog.library, filterText])
+  }, [epicLibrary, gogLibrary, amazonLibrary, sideloadedLibrary, filterText])
 
   const handleClick = (game: GameInfo) => {
     handleSearch('')

src/frontend/components/UI/Sidebar/components/SidebarLinks/index.tsx

@@ -13,18 +13,20 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { NavLink, useLocation } from 'react-router-dom'
 import classNames from 'classnames'
-import React, { useContext } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { faDiscord, faPatreon } from '@fortawesome/free-brands-svg-icons'
 import { openDiscordLink } from 'frontend/helpers'
 
-import ContextProvider from 'frontend/state/ContextProvider'
 import { Runner } from 'common/types'
 import './index.css'
 import QuitButton from '../QuitButton'
 import { LocationState } from 'frontend/types'
 import { SHOW_EXTERNAL_LINK_DIALOG_STORAGE_KEY } from 'frontend/components/UI/ExternalLinkDialog'
-import { useGlobalState } from 'frontend/state/GlobalStateV2'
+import {
+  useGlobalState,
+  useShallowGlobalState
+} from 'frontend/state/GlobalStateV2'
 
 type PathSplit = [
   a: undefined,
@@ -40,7 +42,23 @@ export default function SidebarLinks() {
   const location = useLocation() as { pathname: string }
   const [, , runner, appName, type] = location.pathname.split('/') as PathSplit
 
-  const { amazon, epic, gog, refreshLibrary } = useContext(ContextProvider)
+  const {
+    refreshLibrary,
+    epicLibrary,
+    epicUsername,
+    gogLibrary,
+    gogUsername,
+    amazonLibrary,
+    amazonUserId
+  } = useShallowGlobalState(
+    'refreshLibrary',
+    'epicLibrary',
+    'epicUsername',
+    'gogLibrary',
+    'gogUsername',
+    'amazonLibrary',
+    'amazonUserId'
+  )
 
   const inWebviewScreen =
     location.pathname.includes('store') ||
@@ -50,15 +68,15 @@ export default function SidebarLinks() {
 
   const settingsPath = '/settings/app/default/general'
 
-  const loggedIn = epic.username || gog.username || amazon.user_id
+  const loggedIn = epicUsername || gogUsername || amazonUserId
 
   async function handleRefresh() {
     localStorage.setItem('scrollPosition', '0')
 
     const shouldRefresh =
-      (epic.username && !epic.library.length) ||
-      (gog.username && !gog.library.length) ||
-      (amazon.user_id && !amazon.library.length)
+      (epicUsername && !epicLibrary.length) ||
+      (gogUsername && !Object.keys(gogLibrary).length) ||
+      (amazonUserId && !amazonLibrary.length)
     if (shouldRefresh) {
       return refreshLibrary({ runInBackground: true })
     }
@@ -80,10 +98,10 @@ export default function SidebarLinks() {
 
   // By default, open Epic Store
   let defaultStore = 'epic'
-  if (!epic.username && !gog.username && amazon.user_id) {
+  if (!epicUsername && !gogUsername && amazonUserId) {
     // If only logged in to Amazon Games, open Amazon Gaming
     defaultStore = 'amazon'
-  } else if (!epic.username && gog.username) {
+  } else if (!epicUsername && gogUsername) {
     // Otherwise, if not logged in to Epic Games, open GOG Store
     defaultStore = 'gog'
   }

src/frontend/helpers/index.ts

@@ -1,5 +1,4 @@
 import {
-  GameInfo,
   InstallProgress,
   Runner,
   GameSettings,
@@ -9,7 +8,6 @@ import {
 
 import { install, launch, repair, updateGame } from './library'
 import * as fileSize from 'filesize'
-const readFile = window.api.readConfig
 
 const writeConfig = window.api.writeConfig
 
@@ -40,21 +38,6 @@ const syncSaves = async (
   return response
 }
 
-const getLegendaryConfig = async (): Promise<{
-  library: GameInfo[]
-  user: string
-}> => {
-  // TODO: I'd say we should refactor this to be two different IPC calls, makes type annotations easier
-  const library: GameInfo[] = (await readFile('library')) as GameInfo[]
-  const user: string = (await readFile('user')) as string
-
-  if (!user) {
-    return { library: [], user: '' }
-  }
-
-  return { library, user }
-}
-
 const getGameInfo = async (appName: string, runner: Runner) => {
   return window.api.getGameInfo(appName, runner)
 }
@@ -157,7 +140,6 @@ export {
   getGameInfo,
   getGameSettings,
   getInstallInfo,
-  getLegendaryConfig,
   getProgress,
   handleQuit,
   install,

src/frontend/hooks/hasStatus.ts

@@ -1,5 +1,4 @@
-import { useContext, useEffect, useState } from 'react'
-import ContextProvider from 'frontend/state/ContextProvider'
+import { useEffect, useState } from 'react'
 import { GameInfo, Status } from 'common/types'
 import { hasProgress } from './hasProgress'
 import { useTranslation } from 'react-i18next'
@@ -12,7 +11,6 @@ export function hasStatus(
   gameInfo: GameInfo,
   gameSize?: string
 ) {
-  const { epic, gog } = useContext(ContextProvider)
   const thisStatus = useGlobalState(
     useShallow((state) => state.libraryStatus[`${appName}_${gameInfo.runner}`])
   )
@@ -89,14 +87,7 @@ export function hasStatus(
       return setGameStatus({ status: 'notInstalled', label, statusContext })
     }
     checkGameStatus()
-  }, [
-    thisStatus,
-    appName,
-    epic.library,
-    gog.library,
-    is_installed,
-    progress.percent
-  ])
+  }, [thisStatus, appName, is_installed, progress.percent])
 
   return gameStatus
 }

src/frontend/screens/DownloadManager/components/DownloadManagerItem/index.tsx

@@ -1,6 +1,6 @@
 import './index.css'
 
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { DMQueueElement, DownloadManagerState } from 'common/types'
 import StopIcon from 'frontend/assets/stop-icon.svg?react'
@@ -9,7 +9,6 @@ import { handleStopInstallation } from 'frontend/helpers/library'
 import { getGameInfo, getStoreName } from 'frontend/helpers'
 import { useTranslation } from 'react-i18next'
 import { hasProgress } from 'frontend/hooks/hasProgress'
-import ContextProvider from 'frontend/state/ContextProvider'
 import { useNavigate } from 'react-router-dom'
 import PlayIcon from 'frontend/assets/play-icon.svg?react'
 import PauseIcon from 'frontend/assets/pause-icon.svg?react'
@@ -42,7 +41,6 @@ const DownloadManagerItem = ({
   state,
   handleClearItem
 }: Props) => {
-  const { amazon, epic, gog } = useContext(ContextProvider)
   const { t } = useTranslation('gamepage')
   const { t: t2 } = useTranslation('translation')
   const isPaused = state && ['idle', 'paused'].includes(state)
@@ -57,8 +55,6 @@ const DownloadManagerItem = ({
     )
   }
 
-  const library = [...epic.library, ...gog.library, ...amazon.library]
-
   const { params, addToQueueTime, endTime, type, startTime } = element
   const {
     appName,
@@ -84,7 +80,8 @@ const DownloadManagerItem = ({
   const {
     art_cover,
     art_square,
-    install: { is_dlc }
+    install: { is_dlc },
+    title
   } = gameInfo || {}
 
   const [progress] = hasProgress(appName)
@@ -200,16 +197,6 @@ const DownloadManagerItem = ({
 
     return current ? 'var(--text-default)' : 'var(--accent)'
   }
-
-  const currentApp = library.find(
-    (val) => val.app_name === appName && val.runner === runner
-  )
-
-  if (!currentApp) {
-    return null
-  }
-
-  const { title } = currentApp
   const cover = art_cover || art_square
 
   const translatedTypes = {