Migrate libraryTopSection

src/frontend/screens/Library/index.tsx

@@ -33,7 +33,10 @@ import { Category, PlatformsFilters, StoresFilters } from 'frontend/types'
 import { hasHelp } from 'frontend/hooks/hasHelp'
 import EmptyLibraryMessage from './components/EmptyLibrary'
 import CategoriesManager from './components/CategoriesManager'
-import { useGlobalState } from '../../state/GlobalStateV2'
+import {
+  useGlobalState,
+  useShallowGlobalState
+} from 'frontend/state/GlobalStateV2'
 import { useShallow } from 'zustand/react/shallow'
 
 const storage = window.localStorage
@@ -56,12 +59,11 @@ export default React.memo(function Library(): JSX.Element {
     amazon,
     sideloadedLibrary,
     favouriteGames,
-    libraryTopSection,
-
     currentCustomCategories,
     customCategories,
     hiddenGames
   } = useContext(ContextProvider)
+  const { libraryTopSection } = useShallowGlobalState('libraryTopSection')
 
   hasHelp(
     'library',

src/frontend/screens/Settings/components/LibraryTopSection.tsx

@@ -1,22 +1,20 @@
-import React, { ChangeEvent, useContext } from 'react'
+import React, { ChangeEvent } from 'react'
 import { useTranslation } from 'react-i18next'
 import { SelectField } from 'frontend/components/UI'
 import useSetting from 'frontend/hooks/useSetting'
-import ContextProvider from 'frontend/state/ContextProvider'
 import { LibraryTopSectionOptions } from 'common/types'
+import { useGlobalState } from 'frontend/state/GlobalStateV2'
 
 const LibraryTopSection = () => {
   const { t } = useTranslation()
-  const { handleLibraryTopSection } = useContext(ContextProvider)
   const [libraryTopSection, setLibraryTopSection] = useSetting(
     'libraryTopSection',
     'disabled'
   )
 
-  const onSectionChange = (event: ChangeEvent) => {
-    const newValue = (event.target as HTMLSelectElement)
-      .value as LibraryTopSectionOptions
-    handleLibraryTopSection(newValue)
+  const onSectionChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    const newValue = event.target.value as LibraryTopSectionOptions
+    useGlobalState.setState({ libraryTopSection: newValue })
     setLibraryTopSection(newValue)
   }
 

src/frontend/state/ContextProvider.tsx

@@ -26,8 +26,6 @@ const initialContext: ContextType = {
     logout: async () => Promise.resolve()
   },
   sideloadedLibrary: [],
-  libraryTopSection: 'disabled',
-  handleLibraryTopSection: () => null,
   refresh: async () => Promise.resolve(),
   refreshLibrary: async () => Promise.resolve(),
   refreshWineVersionInfo: async () => Promise.resolve(),

src/frontend/state/GlobalState.tsx

@@ -6,8 +6,7 @@ import {
   GameInfo,
   HiddenGame,
   RefreshOptions,
-  Runner,
-  LibraryTopSectionOptions
+  Runner
 } from 'common/types'
 import { DialogModalOptions } from 'frontend/types'
 import { withTranslation } from 'react-i18next'
@@ -56,7 +55,6 @@ interface StateProps {
     user_id?: string
     username?: string
   }
-  libraryTopSection: string
   refreshing: boolean
   refreshingInTheBackground: boolean
   hiddenGames: HiddenGame[]
@@ -134,7 +132,6 @@ class GlobalState extends PureComponent<Props> {
       user_id: nileConfigStore.get_nodefault('userData.user_id'),
       username: nileConfigStore.get_nodefault('userData.name')
     },
-    libraryTopSection: globalSettings?.libraryTopSection || 'disabled',
     refreshing: false,
     refreshingInTheBackground: true,
     hiddenGames: configStore.get('games.hidden', []),
@@ -384,10 +381,6 @@ class GlobalState extends PureComponent<Props> {
     })
   }).bind(this)
 
-  handleLibraryTopSection = (value: LibraryTopSectionOptions) => {
-    this.setState({ libraryTopSection: value })
-  }
-
   handleSuccessfulLogin = (runner: Runner) => {
     storage.setItem('category', 'all')
     this.refreshLibrary({
@@ -787,7 +780,6 @@ class GlobalState extends PureComponent<Props> {
             removeCategory: this.removeCustomCategory,
             renameCategory: this.renameCustomCategory
           },
-          handleLibraryTopSection: this.handleLibraryTopSection,
           setTheme: this.setTheme,
           setZoomPercent: this.setZoomPercent,
           setAllTilesInColor: this.setAllTilesInColor,

src/frontend/state/GlobalStateV2.ts

@@ -13,6 +13,7 @@ import type {
   ExperimentalFeatures,
   GameInfo,
   GameStatus,
+  LibraryTopSectionOptions,
   Runner
 } from 'common/types'
 
@@ -43,6 +44,8 @@ interface GlobalStateV2 extends ExperimentalFeatures {
   libraryStatus: Record<`${string}_${Runner}`, GameStatus>
 
   externalLinkDialogOptions: ExternalLinkDialogOptions
+
+  libraryTopSection: LibraryTopSectionOptions
 }
 
 const useGlobalState = create<GlobalStateV2>()(
@@ -103,7 +106,9 @@ const useGlobalState = create<GlobalStateV2>()(
       enableHelp: false,
       automaticWinetricksFixes: true,
 
-      externalLinkDialogOptions: { showDialog: false }
+      externalLinkDialogOptions: { showDialog: false },
+
+      libraryTopSection: 'disabled'
     }),
     {
       name: 'globalState',
@@ -196,6 +201,9 @@ window.api.requestAppSettings().then((settings) => {
     useGlobalState.setState({
       ...settings.experimentalFeatures
     })
+
+  if (settings.libraryTopSection)
+    useGlobalState.setState({ libraryTopSection: settings.libraryTopSection })
 })
 
 export { useGlobalState, useShallowGlobalState }

src/frontend/types.ts

@@ -5,7 +5,6 @@ import {
   ConnectivityStatus,
   DialogType,
   ButtonOptions,
-  LibraryTopSectionOptions,
   DMQueueElement,
   DownloadManagerState,
   GameSettings,
@@ -19,8 +18,6 @@ import { NileLoginData, NileRegisterData } from 'common/types/nile'
 export type Category = 'all' | 'legendary' | 'gog' | 'sideload' | 'nile'
 
 export interface ContextType {
-  libraryTopSection: string
-  handleLibraryTopSection: (value: LibraryTopSectionOptions) => void
   refresh: (library: Runner, checkUpdates?: boolean) => Promise<void>
   refreshLibrary: (options: RefreshOptions) => Promise<void>
   refreshWineVersionInfo: (fetch: boolean) => void