[Fix] Beta 2 Fixes (#1590)

* fix: empty library after logout

* fix: login status not changing after logout

* chore: hide autocomplete until start typing

* fix: webview login wait for sid

* feat: show QuitButton on SteamDeck Gaming mode

* chore: lower minimum characters on autocomplete

* fix: individual library refresh

* feat: clear cache clear updates in storage

* fix: percent in gamecard

* chore: remove unused code

* fix: less spacing between first lane and others

* fix: gog breaking on empty library store

* chore: better checking of gog store

electron/gog/library.ts

@@ -252,9 +252,13 @@ export class GOGLibrary {
   }
 
   public getInstallAndGameInfo(slug: string): GameInfo {
-    const game = (libraryStore.get('games') as GameInfo[]).find(
-      (value) => value.app_name === slug
-    )
+    const lib = libraryStore.get('games')
+
+    if (!Array.isArray(lib)) {
+      return
+    }
+
+    const game: GameInfo = lib.find((value) => value.app_name === slug)
 
     if (!game) return null
     const installedInfo = this.installedGames.get(game.app_name)

electron/main.ts

@@ -629,6 +629,7 @@ ipcMain.handle('getMaxCpus', () => cpus().length)
 ipcMain.handle('getHeroicVersion', () => app.getVersion())
 ipcMain.handle('getLegendaryVersion', async () => getLegendaryVersion())
 ipcMain.handle('getGogdlVersion', async () => getGogdlVersion())
+ipcMain.handle('isSteamDeckMode', () => isSteamDeckGameMode)
 
 ipcMain.handle('getPlatform', () => process.platform)
 

src/components/UI/ActionIcons/index.tsx

@@ -25,7 +25,7 @@ interface Props {
   sortInstalled: boolean
   toggleSortDescending: () => void
   toggleSortinstalled: () => void
-  library: Runner
+  library: Runner | 'all'
 }
 
 export default function ActionIcons({

src/components/UI/SearchBar/index.tsx

@@ -66,17 +66,19 @@ export default function SearchBar() {
           id="search" // this id is used for the virtualkeyboard, don't change it
           className="FormControl__input"
         />
-        <ul className="autoComplete">
-          {list.length > 0 &&
-            list.map((title, i) => (
-              <li
-                onClick={(e) => handleClick(e.currentTarget.innerText)}
-                key={i}
-              >
-                {title}
-              </li>
-            ))}
-        </ul>
+        {filterText.length > 0 && (
+          <ul className="autoComplete">
+            {list.length > 0 &&
+              list.map((title, i) => (
+                <li
+                  onClick={(e) => handleClick(e.currentTarget.innerText)}
+                  key={i}
+                >
+                  {title}
+                </li>
+              ))}
+          </ul>
+        )}
       </FormControl>
     </div>
   )

src/components/UI/Sidebar/components/QuitButton/index.tsx

@@ -0,0 +1,22 @@
+import { faPowerOff } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { handleQuit } from 'src/helpers'
+
+const QuitButton: React.FC = () => {
+  const { t } = useTranslation()
+  return (
+    <button className="Sidebar__item" onClick={handleQuit}>
+      <div className="Sidebar__itemIcon">
+        <FontAwesomeIcon
+          icon={faPowerOff}
+          title={t('userselector.quit', 'Quit')}
+        />
+      </div>
+      <span>{t('userselector.quit', 'Quit')}</span>
+    </button>
+  )
+}
+
+export default QuitButton

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

@@ -23,6 +23,7 @@ import { ipcRenderer } from 'src/helpers'
 import ContextProvider from 'src/state/ContextProvider'
 import { Runner } from 'src/types'
 import './index.css'
+import QuitButton from '../QuitButton'
 
 interface LocationState {
   fromGameCard: boolean
@@ -49,6 +50,7 @@ export default function SidebarLinks() {
     location.pathname.startsWith('/settings/default')
   )
   const [settingsPath, setSettingsPath] = useState('/settings/default/general')
+  const [isSteamDeckGameMode, setIsSteamDeckGameMode] = useState(false)
 
   const {
     hasCloudSave = false,
@@ -81,6 +83,12 @@ export default function SidebarLinks() {
     }
   }, [location])
 
+  useEffect(() => {
+    ipcRenderer
+      .invoke('isSteamDeckMode')
+      .then((res) => setIsSteamDeckGameMode(res))
+  }, [])
+
   return (
     <div className="SidebarLinks Sidebar__section">
       {loggedIn && (
@@ -360,6 +368,7 @@ export default function SidebarLinks() {
         </div>
         <span>Ko-fi</span>
       </button>
+      {isSteamDeckGameMode && <QuitButton />}
     </div>
   )
 }

src/helpers/library.ts

@@ -307,6 +307,9 @@ function getRecentGames(library: GameInfo[]) {
   return library.filter((game) => recentGamesList.includes(game.app_name))
 }
 
+export const epicCategories = ['all', 'legendary', 'epic', 'unreal']
+export const gogCategories = ['all', 'gog']
+
 export {
   handleStopInstallation,
   getRecentGames,

src/screens/Game/GameSubMenu/index.css

@@ -39,6 +39,10 @@
   word-break: break-word;
 }
 
+.otherInfo > .clickable {
+  margin-top: 12px;
+}
+
 .submenu .MuiCircularProgress-root.is-link {
   width: auto !important;
   height: auto !important;

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

@@ -125,7 +125,7 @@ const GameCard = ({
 
   function getStatus() {
     if (isUpdating) {
-      return t('status.updating') + ` ${percent}`
+      return t('status.updating') + ` ${percent}%`
     }
     if (isInstalling) {
       return t('status.installing') + ` ${percent || 0}%`
@@ -373,7 +373,7 @@ const GameCard = ({
           {
             <>
               <span className="icons">
-                {hasUpdate && (
+                {hasUpdate && !isUpdating && (
                   <SvgButton
                     className="updateIcon"
                     title={`${t('button.update')} (${title})`}

src/screens/Library/components/GamesList/index.tsx

@@ -8,13 +8,15 @@ import { useTranslation } from 'react-i18next'
 interface Props {
   library: GameInfo[]
   layout?: string
+  isFirstLane?: boolean
   handleGameCardClick: (app_name: string, runner: Runner) => void
 }
 
 export const GamesList = ({
   library = [],
   layout = 'grid',
-  handleGameCardClick
+  handleGameCardClick,
+  isFirstLane = false
 }: Props): JSX.Element => {
   const { gameUpdates } = useContext(ContextProvider)
   const { t } = useTranslation()
@@ -24,7 +26,8 @@ export const GamesList = ({
       style={!library.length ? { backgroundColor: 'transparent' } : {}}
       className={cx({
         gameList: layout === 'grid',
-        gameListLayout: layout === 'list'
+        gameListLayout: layout === 'list',
+        firstLane: isFirstLane
       })}
     >
       {layout === 'list' && (

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

@@ -1,6 +1,7 @@
 import React, { useContext, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionIcons from 'src/components/UI/ActionIcons'
+import { epicCategories } from 'src/helpers/library'
 import ContextProvider from 'src/state/ContextProvider'
 import { GameInfo } from 'src/types'
 import { getLibraryTitle } from '../../constants'
@@ -49,6 +50,18 @@ export default function LibraryHeader({
     storage.setItem('sortInstalled', JSON.stringify(!sortInstalled))
   }
 
+  function getLibrary() {
+    if (category === 'all') {
+      return category
+    }
+
+    if (epicCategories.includes(category)) {
+      return 'legendary'
+    }
+
+    return 'gog'
+  }
+
   return (
     <h3 className="libraryHeader">
       <div className="libraryHeaderWrapper">
@@ -62,7 +75,7 @@ export default function LibraryHeader({
           sortDescending={sortDescending}
           toggleSortDescending={() => handleSortDescending()}
           sortInstalled={sortInstalled}
-          library={category === 'legendary' ? 'legendary' : 'gog'}
+          library={getLibrary()}
           toggleSortinstalled={() => handleSortInstalled()}
         />
       </div>

src/screens/Library/index.css

@@ -6,6 +6,10 @@
   padding: 1rem 1rem 7rem;
 }
 
+.gameList.firstLane {
+  padding: 1rem 1rem 2rem;
+}
+
 .gameListLayout {
   display: flex;
   flex-direction: column;

src/screens/Library/index.tsx

@@ -20,6 +20,7 @@ import { GamesList } from './components/GamesList'
 import { GameInfo, Runner } from 'src/types'
 import ErrorComponent from 'src/components/UI/ErrorComponent'
 import LibraryHeader from './components/LibraryHeader'
+import { epicCategories, gogCategories } from 'src/helpers/library'
 
 const InstallModal = lazy(
   async () => import('src/screens/Library/components/InstallModal')
@@ -45,6 +46,7 @@ export default function Library(): JSX.Element {
     filterPlatform,
     hiddenGames,
     showHidden,
+    handleCategory,
     showFavourites: showFavouritesLibrary
   } = useContext(ContextProvider)
 
@@ -101,6 +103,16 @@ export default function Library(): JSX.Element {
     setInstalling(newInstalling)
   }, [libraryStatus])
 
+  useEffect(() => {
+    // This code avoids getting stuck on a empty library after logout of the current selected store
+    if (epicCategories.includes(category) && !epic.username) {
+      handleCategory('gog')
+    }
+    if (gogCategories.includes(category) && !gog.username) {
+      handleCategory('legendary')
+    }
+  }, [epic.username, gog.username])
+
   const filterLibrary = (library: GameInfo[], filter: string) => {
     if (!library) {
       return []
@@ -204,8 +216,6 @@ export default function Library(): JSX.Element {
         category === 'all' ? g : g.runner === category
       )
     } else {
-      const epicCategories = ['all', 'legendary', 'epic', 'unreal']
-      const gogCategories = ['all', 'gog']
       const isEpic = epic.username && epicCategories.includes(category)
       const isGog = gog.username && gogCategories.includes(category)
       const epicLibrary = isEpic ? epic.library : []
@@ -300,6 +310,7 @@ export default function Library(): JSX.Element {
             <h3 className="libraryHeader">{t('Recent', 'Played Recently')}</h3>
             <GamesList
               library={recentGames}
+              isFirstLane
               handleGameCardClick={handleModal}
             />
           </>
@@ -308,7 +319,11 @@ export default function Library(): JSX.Element {
         {showFavourites && !showFavouritesLibrary && (
           <>
             <h3 className="libraryHeader">{t('favourites', 'Favourites')}</h3>
-            <GamesList library={favourites} handleGameCardClick={handleModal} />
+            <GamesList
+              library={favourites}
+              handleGameCardClick={handleModal}
+              isFirstLane
+            />
           </>
         )}
 

src/screens/Settings/components/AdvancedSettings/index.tsx

@@ -286,6 +286,12 @@ export const AdvancedSettings = ({
     setEosOverlayCheckingForUpdates(false)
   }
 
+  function clearHeroicCache() {
+    const storage: Storage = window.localStorage
+    storage.removeItem('updates')
+    return ipcRenderer.send('clearCache')
+  }
+
   return (
     <div>
       <h3 className="settingSubheader">{t('settings.navbar.advanced')}</h3>
@@ -522,7 +528,7 @@ export const AdvancedSettings = ({
         </button>
         <button
           className="button is-footer is-danger"
-          onClick={() => ipcRenderer.send('clearCache')}
+          onClick={() => clearHeroicCache()}
         >
           <div className="button-icontext-flex">
             <div className="button-icon-flex">

src/state/ContextProvider.tsx

@@ -8,13 +8,13 @@ const initialContext: ContextType = {
     library: [],
     username: null,
     login: async () => Promise.resolve(''),
-    logout: () => null
+    logout: async () => Promise.resolve()
   },
   gog: {
     library: [],
     username: null,
     login: async () => Promise.resolve(''),
-    logout: () => null
+    logout: async () => Promise.resolve()
   },
   wineVersions: [],
   error: false,

src/state/GlobalState.tsx

@@ -280,8 +280,9 @@ export class GlobalState extends PureComponent<Props> {
     return response.status
   }
 
-  epicLogout = () => {
-    ipcRenderer.invoke('logoutLegendary').finally(() => {
+  epicLogout = async () => {
+    this.setState({ refreshing: true })
+    await ipcRenderer.invoke('logoutLegendary').finally(() => {
       this.setState({
         epic: {
           library: [],
@@ -290,6 +291,7 @@ export class GlobalState extends PureComponent<Props> {
       })
     })
     console.log('Logging out from epic')
+    this.setState({ refreshing: false })
     window.location.reload()
   }
 
@@ -311,8 +313,8 @@ export class GlobalState extends PureComponent<Props> {
     return response.status
   }
 
-  gogLogout = () => {
-    ipcRenderer.invoke('logoutGOG').finally(() => {
+  gogLogout = async () => {
+    await ipcRenderer.invoke('logoutGOG').finally(() => {
       this.setState({
         gog: {
           library: [],
@@ -324,7 +326,10 @@ export class GlobalState extends PureComponent<Props> {
     window.location.reload()
   }
 
-  refresh = async (library?: Runner, checkUpdates?: boolean): Promise<void> => {
+  refresh = async (
+    library?: Runner | 'all',
+    checkUpdates?: boolean
+  ): Promise<void> => {
     console.log('refreshing')
 
     let updates = this.state.gameUpdates
@@ -488,11 +493,6 @@ export class GlobalState extends PureComponent<Props> {
           library: runner
         })
 
-        storage.setItem(
-          'updates',
-          JSON.stringify(gameUpdates.filter((g) => g !== currentApp.appName))
-        )
-
         return this.setState({
           gameUpdates: updatedGamesUpdates,
           libraryStatus: newLibraryStatus