[Revert] Revert #2075

Author: flavioislima

package.json

@@ -155,7 +155,6 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^11.16.7",
     "react-markdown": "^8.0.3",
-    "react-infinite-scroll-hook": "^4.0.4",
     "react-router-dom": "^6.3.0",
     "recharts": "^2.1.14",
     "shlex": "^2.1.2",

src/frontend/hooks/usePaginatedList.ts

@@ -4,7 +4,6 @@ import cx from 'classnames'
 import GameCard from '../GameCard'
 import ContextProvider from 'frontend/state/ContextProvider'
 import { useTranslation } from 'react-i18next'
-import usePaginatedList from 'frontend/hooks/usePaginatedList'
 
 interface Props {
   library: GameInfo[]
@@ -30,51 +29,9 @@ const GamesList = ({
   const { gameUpdates } = useContext(ContextProvider)
   const { t } = useTranslation()
 
-  const { infiniteScrollSentryRef, paginatedList, hasMore } = usePaginatedList(
-    library,
-    {
-      rpp: 10,
-      infinite: true
-    }
-  )
-
-  const renderGameInfo = (gameInfo: GameInfo) => {
-    const {
-      app_name,
-      is_installed,
-      runner,
-      install: { is_dlc }
-    } = gameInfo
-
-    if (is_dlc) {
-      return null
-    }
-    if (!is_installed && onlyInstalled) {
-      return null
-    }
-
-    const hasUpdate = is_installed && gameUpdates?.includes(app_name)
-    return (
-      <GameCard
-        key={app_name}
-        hasUpdate={hasUpdate}
-        buttonClick={() => handleGameCardClick(app_name, runner, gameInfo)}
-        forceCard={layout === 'grid'}
-        isRecent={isRecent}
-        gameInfo={gameInfo}
-      />
-    )
-  }
-
   return (
     <div
-      style={
-        !library.length
-          ? {
-              backgroundColor: 'transparent'
-            }
-          : {}
-      }
+      style={!library.length ? { backgroundColor: 'transparent' } : {}}
       className={cx({
         gameList: layout === 'grid',
         gameListLayout: layout === 'list',
@@ -89,15 +46,35 @@ const GamesList = ({
           <span>{t('wine.actions', 'Action')}</span>
         </div>
       )}
-      {paginatedList.map((item) => {
-        return renderGameInfo(item)
-      })}
-      {hasMore && (
-        <div
-          ref={infiniteScrollSentryRef}
-          style={{ width: 100, height: 40, backgroundColor: 'transparent' }}
-        />
-      )}
+      {!!library.length &&
+        library.map((gameInfo) => {
+          const {
+            app_name,
+            is_installed,
+            runner,
+            install: { is_dlc }
+          } = gameInfo
+          if (is_dlc) {
+            return null
+          }
+          if (!is_installed && onlyInstalled) {
+            return null
+          }
+
+          const hasUpdate = is_installed && gameUpdates?.includes(app_name)
+          return (
+            <GameCard
+              key={app_name}
+              hasUpdate={hasUpdate}
+              buttonClick={() =>
+                handleGameCardClick(app_name, runner, gameInfo)
+              }
+              forceCard={layout === 'grid'}
+              isRecent={isRecent}
+              gameInfo={gameInfo}
+            />
+          )
+        })}
     </div>
   )
 }