Game details on home view is broken + filter navigation

Fixes #293 Fixes #294
andrew-codes · May 9, 2024 · 6d63905 · 6d63905
1 parent 4f28521
commit 6d63905
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/apps/playnite-web/src/components/GameFigure.tsx b/apps/playnite-web/src/components/GameFigure.tsx
@@ -1,5 +1,4 @@
-import { Box, Stack, styled } from '@mui/material'
-import { Link } from '@remix-run/react'
+import { Box, Button, Stack, styled } from '@mui/material'
 import { FC, PropsWithChildren, useCallback, useState } from 'react'
 import { useInView } from 'react-intersection-observer'
 import type { IGame } from '../domain/types'
@@ -30,7 +29,7 @@ const GameFigure: FC<
     width: string
     height: string
     noDefer: boolean
-    onSelect?: (evt) => void
+    onSelect?: (evt, game: IGame) => void
   }>
 > = ({ children, game, style, noDefer, onSelect, width, height }) => {
   const [hasBeenInViewBefore, setHasBeenInViewBefore] = useState(false)
@@ -49,7 +48,7 @@ const GameFigure: FC<
       {hasBeenInViewBefore || noDefer
         ? [
             <Box sx={{ position: 'relative' }} key={`${game.id}-image`}>
-              <Link to={`/browse/${game.id}`} onClick={onSelect}>
+              <Button onClick={(evt) => onSelect?.(evt, game)}>
                 {!imageHasError ? (
                   <Image
                     src={game.cover}
@@ -68,7 +67,7 @@ const GameFigure: FC<
                     }}
                   />
                 )}
-              </Link>
+              </Button>
               <Box
                 sx={(theme) => ({
                   position: 'absolute',

diff --git a/apps/playnite-web/src/components/HorizontalGameList.tsx b/apps/playnite-web/src/components/HorizontalGameList.tsx
@@ -19,7 +19,7 @@ const ImageListWithoutOverflow = styled(ImageList)`
 const HorizontalGameList: FC<{
   games: IList<Match<IGame>>
   noDeferCount: number
-  onSelect?: (game: IGame) => void
+  onSelect?: (evt, game: IGame) => void
 }> = ({ games, noDeferCount, onSelect }) => {
   const theme = useTheme()
   const isXl = useMediaQuery(theme.breakpoints.up('xl'))

diff --git a/apps/playnite-web/src/routes/_index.tsx b/apps/playnite-web/src/routes/_index.tsx
@@ -17,15 +17,16 @@ import NoFilter from '../domain/filters/NoFilter'
 import { IGame, Playlist } from '../domain/types'
 
 async function loader({ request }: LoaderFunctionArgs) {
-  const api = getGameApi()
   try {
+    const api = getGameApi()
     const games = await api.getGames()
+
     return json({
       lists: [
         {
           name: 'Playing',
           games: games
-            .filter((game) => game.completionStatus?.name === 'Playing')
+            .filter((game) => game.completionStatus?.name === 'Played')
             .map((game) => game.gamePlatforms),
         },
         {
@@ -69,7 +70,7 @@ function Index() {
   const handleClose = useCallback(() => {
     setRightDrawerOpen(false)
   }, [])
-  const handleGameSelect = useCallback((game: IGame) => {
+  const handleGameSelect = useCallback((evt, game: IGame) => {
     setGame(game)
     setRightDrawerOpen(true)
   }, [])

diff --git a/apps/playnite-web/src/routes/browse.tsx b/apps/playnite-web/src/routes/browse.tsx
@@ -85,9 +85,9 @@ function Browse() {
     setFiltersInDrawer(false)
     navigate(-1)
   }, [])
-
   const handleSelection = useCallback((evt, game) => {
     setRightDrawerOpen(true)
+    navigate(`/browse/${game.id}`)
   }, [])
 
   const games = useMemo(