[Tech] Remove the Global State

src/backend/__tests__/progress_bar.test.ts

@@ -32,7 +32,8 @@ describe('progress_bar', () => {
     it('does nothing', () => {
       sendGameStatusUpdate({
         appName: 'Test',
-        status: 'queued'
+        status: 'queued',
+        runner: 'legendary'
       })
 
       expect(window.setProgressBar).not.toBeCalled()
@@ -43,7 +44,8 @@ describe('progress_bar', () => {
     it('sets progress bar to indeterminate', () => {
       sendGameStatusUpdate({
         appName: 'Test',
-        status: 'installing'
+        status: 'installing',
+        runner: 'legendary'
       })
 
       expect(window.setProgressBar).toBeCalledWith(2)
@@ -54,7 +56,8 @@ describe('progress_bar', () => {
 
       sendGameStatusUpdate({
         appName: 'Test',
-        status: 'installing'
+        status: 'installing',
+        runner: 'legendary'
       })
 
       expect(backendEvents.on).toBeCalledWith(
@@ -69,7 +72,8 @@ describe('progress_bar', () => {
       sendProgressUpdate({
         appName: 'Test',
         status: 'installing',
-        progress: { percent: 42, bytes: '', eta: '' }
+        progress: { percent: 42, bytes: '', eta: '' },
+        runner: 'legendary'
       })
 
       expect(window.setProgressBar).toBeCalledWith(0.42)
@@ -80,7 +84,8 @@ describe('progress_bar', () => {
     it('removes the progress bar', () => {
       sendGameStatusUpdate({
         appName: 'Test',
-        status: 'done'
+        status: 'done',
+        runner: 'legendary'
       })
 
       expect(window.setProgressBar).toBeCalledWith(-1)
@@ -91,7 +96,8 @@ describe('progress_bar', () => {
 
       sendGameStatusUpdate({
         appName: 'Test',
-        status: 'done'
+        status: 'done',
+        runner: 'legendary'
       })
 
       expect(backendEvents.off).toBeCalledWith(

src/backend/api/downloadmanager.ts

@@ -1,6 +1,11 @@
-import { DownloadManagerState } from './../../common/types'
+import {
+  DownloadManagerState,
+  Runner,
+  DMQueueElement,
+  InstallParams,
+  UpdateParams
+} from 'common/types'
 import { ipcRenderer } from 'electron'
-import { DMQueueElement, InstallParams, UpdateParams } from 'common/types'
 
 export const install = async (args: InstallParams) => {
   const dmQueueElement: DMQueueElement = {
@@ -57,8 +62,8 @@ export const updateGame = (args: UpdateParams) => {
 export const getDMQueueInformation = async () =>
   ipcRenderer.invoke('getDMQueueInformation')
 
-export const removeFromDMQueue = (appName: string) =>
-  ipcRenderer.send('removeFromDMQueue', appName)
+export const removeFromDMQueue = (appName: string, runner: Runner) =>
+  ipcRenderer.send('removeFromDMQueue', appName, runner)
 
 export const handleDMQueueInformation = (
   onChange: (

src/backend/downloadmanager/downloadqueue.ts

@@ -2,7 +2,12 @@ import { gameManagerMap, libraryManagerMap } from 'backend/storeManagers'
 import { TypeCheckedStoreBackend } from './../electron_store'
 import { logError, logInfo, LogPrefix, logWarning } from '../logger/logger'
 import { getFileSize, removeFolder, sendGameStatusUpdate } from '../utils'
-import { DMQueueElement, DMStatus, DownloadManagerState } from 'common/types'
+import {
+  DMQueueElement,
+  DMStatus,
+  DownloadManagerState,
+  Runner
+} from 'common/types'
 import { installQueueElement, updateQueueElement } from './utils'
 import { sendFrontendMessage } from '../main_window'
 import { callAbortController } from 'backend/utils/aborthandler/aborthandler'
@@ -89,7 +94,7 @@ async function initQueue() {
 
     if (!isPaused()) {
       addToFinished(element, status)
-      removeFromQueue(element.params.appName)
+      removeFromQueue(element.params.appName, element.params.runner)
       element = getFirstQueueElement()
     } else {
       element = null
@@ -178,7 +183,7 @@ async function addToQueue(element: DMQueueElement) {
   }
 }
 
-function removeFromQueue(appName: string) {
+function removeFromQueue(appName: string, runner: Runner) {
   if (appName && downloadManager.has('queue')) {
     const elements = downloadManager.get('queue', [])
     const index = elements.findIndex(
@@ -192,6 +197,7 @@ function removeFromQueue(appName: string) {
 
     sendGameStatusUpdate({
       appName,
+      runner,
       status: 'done'
     })
 
@@ -216,13 +222,13 @@ function cancelCurrentDownload({ removeDownloaded = false }) {
     if (Array.isArray(currentElement.params.installDlcs)) {
       const dlcsToRemove = currentElement.params.installDlcs
       for (const dlc of dlcsToRemove) {
-        removeFromQueue(dlc)
+        removeFromQueue(dlc, currentElement.params.runner)
       }
     }
     if (isRunning()) {
       stopCurrentDownload()
     }
-    removeFromQueue(currentElement.params.appName)
+    removeFromQueue(currentElement.params.appName, currentElement.params.runner)
 
     if (removeDownloaded) {
       const { appName, runner } = currentElement!.params

src/backend/downloadmanager/ipc_handler.ts

@@ -12,8 +12,8 @@ ipcMain.handle('addToDMQueue', async (e, element) => {
   await addToQueue(element)
 })
 
-ipcMain.on('removeFromDMQueue', (e, appName) => {
-  removeFromQueue(appName)
+ipcMain.on('removeFromDMQueue', (e, appName, runner) => {
+  removeFromQueue(appName, runner)
 })
 
 ipcMain.on('resumeCurrentDownload', () => {

src/common/typedefs/ipcBridge.d.ts

@@ -89,7 +89,7 @@ interface SyncIPCFunctions {
   showLogFileInFolder: (appNameOrRunner: string) => void
   addShortcut: (appName: string, runner: Runner, fromMenu: boolean) => void
   removeShortcut: (appName: string, runner: Runner) => void
-  removeFromDMQueue: (appName: string) => void
+  removeFromDMQueue: (appName: string, runner: Runner) => void
   clearDMFinished: () => void
   abort: (id: string) => void
   'connectivity-changed': (newStatus: ConnectivityStatus) => void

src/common/types.ts

@@ -225,11 +225,11 @@ export type Status =
 
 export interface GameStatus {
   appName: string
+  runner: Runner
+  status: Status
   progress?: InstallProgress
   folder?: string
   context?: string // Additional context e.g current step
-  runner?: Runner
-  status: Status
 }
 
 export type GlobalConfigVersion = 'auto' | 'v0'
@@ -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/App.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { useEffect } from 'react'
 
 import './App.css'
 import {
@@ -8,24 +8,26 @@ import {
   RouterProvider
 } from 'react-router-dom'
 import Sidebar from './components/UI/Sidebar'
-import ContextProvider from './state/ContextProvider'
 import { ControllerHints, Help, OfflineMessage } from './components/UI'
 import DialogHandler from './components/UI/DialogHandler'
 import SettingsModal from './screens/Settings/components/SettingsModal'
 import ExternalLinkDialog from './components/UI/ExternalLinkDialog'
 import WindowControls from './components/UI/WindowControls'
 import classNames from 'classnames'
 import { ThemeProvider, createTheme } from '@mui/material/styles'
+import { useShallowGlobalState } from './state/GlobalStateV2'
+import InstallModal from './screens/Library/components/InstallModal'
 
 function Root() {
-  const {
-    isSettingsModalOpen,
-    isRTL,
-    isFullscreen,
-    isFrameless,
-    experimentalFeatures,
-    help
-  } = useContext(ContextProvider)
+  const { isFullscreen, isFrameless, isRTL, enableNewDesign } =
+    useShallowGlobalState(
+      'isFullscreen',
+      'isFrameless',
+      'isRTL',
+      'enableNewDesign'
+    )
+
+  useEffect(window.api.frontendReady, [])
 
   const hasNativeOverlayControls = navigator['windowControlsOverlay']?.visible
   const showOverlayControls = isFrameless && !hasNativeOverlayControls
@@ -41,7 +43,7 @@ function Root() {
         isRTL,
         frameless: isFrameless,
         fullscreen: isFullscreen,
-        oldDesign: !experimentalFeatures.enableNewDesign
+        oldDesign: !enableNewDesign
       })}
       // disable dragging for all elements by default
       onDragStart={(e) => e.preventDefault()}
@@ -51,12 +53,8 @@ function Root() {
         <Sidebar />
         <main className="content">
           <DialogHandler />
-          {isSettingsModalOpen.gameInfo && (
-            <SettingsModal
-              gameInfo={isSettingsModalOpen.gameInfo}
-              type={isSettingsModalOpen.type}
-            />
-          )}
+          <InstallModal />
+          <SettingsModal />
           <ExternalLinkDialog />
           <Outlet />
         </main>
@@ -65,7 +63,7 @@ function Root() {
           <div className="simple-keyboard"></div>
         </div>
         {showOverlayControls && <WindowControls />}
-        {experimentalFeatures.enableHelp && <Help items={help.items} />}
+        {<Help />}
       </ThemeProvider>
     </div>
   )

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

@@ -11,15 +11,18 @@ 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'
 import LibraryContext from 'frontend/screens/Library/LibraryContext'
+import { useShallowGlobalState } from 'frontend/state/GlobalStateV2'
 
 export default React.memo(function ActionIcons() {
   const { t } = useTranslation()
-  const { refreshLibrary, refreshing } = useContext(ContextProvider)
+  const { refreshing, refreshLibrary } = useShallowGlobalState(
+    'refreshing',
+    'refreshLibrary'
+  )
 
   const {
     handleLayout,

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

@@ -1,4 +1,4 @@
-import React, { MouseEvent, useContext } from 'react'
+import React, { MouseEvent } from 'react'
 import { AntiCheatInfo } from 'common/types'
 import { createNewWindow } from 'frontend/helpers'
 
@@ -8,7 +8,6 @@ import AllowedIcon from 'frontend/assets/rounded_checkmark_icon.svg?react'
 
 import './index.scss'
 import { useTranslation } from 'react-i18next'
-import ContextProvider from 'frontend/state/ContextProvider'
 
 type Props = {
   anticheatInfo: AntiCheatInfo | null
@@ -18,7 +17,6 @@ const awacyUrl = 'https://areweanticheatyet.com/'
 
 export default function Anticheat({ anticheatInfo }: Props) {
   const { t } = useTranslation()
-  const { platform } = useContext(ContextProvider)
 
   if (!anticheatInfo) {
     return null

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

@@ -1,37 +1,41 @@
 import React, { useContext } from 'react'
-import ContextProvider from 'frontend/state/ContextProvider'
 import { useTranslation } from 'react-i18next'
 import ToggleSwitch from '../ToggleSwitch'
 import LibraryContext from 'frontend/screens/Library/LibraryContext'
+import {
+  useGlobalState,
+  useShallowGlobalState
+} from 'frontend/state/GlobalStateV2'
+import { useShallow } from 'zustand/react/shallow'
 
 export default function CategoryFilter() {
-  const {
-    customCategories,
-    currentCustomCategories,
-    setCurrentCustomCategories
-  } = useContext(ContextProvider)
+  const { currentCustomCategories } = useShallowGlobalState(
+    'currentCustomCategories'
+  )
+  const categoriesList = useGlobalState(
+    useShallow((state) => Object.keys(state.customCategories))
+  )
   const { setShowCategories } = useContext(LibraryContext)
   const { t } = useTranslation()
 
   const toggleCategory = (category: string) => {
+    let newCategories: string[]
     if (currentCustomCategories.includes(category)) {
-      const newCategories = currentCustomCategories.filter(
-        (cat) => cat !== category
-      )
-      setCurrentCustomCategories(newCategories)
+      newCategories = currentCustomCategories.filter((cat) => cat !== category)
     } else {
-      setCurrentCustomCategories([...currentCustomCategories, category])
+      newCategories = [...currentCustomCategories, category]
     }
+    useGlobalState.setState({ currentCustomCategories: newCategories })
   }
 
   const setCategoryOnly = (category: string) => {
-    setCurrentCustomCategories([category])
+    useGlobalState.setState({ currentCustomCategories: [category] })
   }
 
   const selectAll = () => {
-    setCurrentCustomCategories(
-      ['preset_uncategorized'].concat(customCategories.listCategories())
-    )
+    useGlobalState.setState({
+      currentCustomCategories: ['preset_uncategorized'].concat(categoriesList)
+    })
   }
 
   const toggleWithOnly = (
@@ -66,8 +70,6 @@ export default function CategoryFilter() {
     return toggleWithOnly(toggle, onOnlyClick, categoryValue || categoryName)
   }
 
-  const categoriesList = customCategories.listCategories()
-
   return (
     <div className="categoriesFilter">
       <button className="selectStyle">

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

@@ -1,12 +1,12 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
-import ContextProvider from 'frontend/state/ContextProvider'
+import { useShallowGlobalState } from 'frontend/state/GlobalStateV2'
 
 import './index.css'
 
 export default function ControllerHints() {
-  const { activeController } = useContext(ContextProvider)
+  const { activeController } = useShallowGlobalState('activeController')
   const [layout, setLayout] = useState('steam-deck') // default to steam deck icons
   const [mainActionHint, setMainActionHint] = useState('') // A / Cross
   const [altActionHint, setAltActionHint] = useState('') // X / Square