implement search game logic and react components b00tc4mp#84

staff/marti-herms/project/V-HUB/api/index.js

@@ -24,7 +24,7 @@ mongoose.connect(process.env.MONGODB_URI)
 
         api.post('/games', jwtVerifier, jsonBodyParser, handle.registerGame)
 
-        api.post('/games/search', jwtVerifier, handle.searchGame)
+        api.get('/games/search', jwtVerifier, handle.searchGame)
 
         api.use(errorHandler)
 

staff/marti-herms/project/V-HUB/app/src/home/Game.jsx

@@ -0,0 +1,27 @@
+import Container from '../library/Container'
+import Image from '../library/Image'
+import Paragraph from '../library/Paragraph'
+
+export default function Game({ game }) {
+    const handleGameClick = () => {
+        window.location.href = game.link
+    }
+
+    return <article className='flex flex-row items-center border border-solid border-slate-700 dark:bg-black'>
+        <button className='bg-transparent border-0' onClick={handleGameClick}>
+            <Container className='flex flex-col'>
+                <Container className='flex flex-row items-center'>
+                    <Image className='w-2/12 h-2/12' src={game.image} />
+                    <Paragraph>{game.name}</Paragraph>
+                </Container>
+                <Container>
+                    <Paragraph>{game.description}</Paragraph>
+                </Container>
+            </Container>
+        </button>
+        <Container className='flex flex-col gap-2 mr-2'>
+            <button className='bg-gray-500 rounded'>Add</button>
+            <button className='bg-green-300 rounded'>Fav</button>
+        </Container>
+    </article>
+}

staff/marti-herms/project/V-HUB/app/src/home/GameRegister.jsx

@@ -1,4 +1,3 @@
-import Logo from '../library/Logo'
 import Container from '../library/Container'
 import Form from '../library/Form'
 import Input from '../library/Input'
@@ -37,8 +36,7 @@ export default function GameRegister({ onGameRegister }) {
 
     return <>
         <Container className='flex flex-col items-center w-full h-full dark:bg-[#1e1e1e]'>
-            <Logo />
-            <Form className='gap-2 flex justify-between items-center' onSubmit={handleRegisterSubmit}>
+            <Form className='gap-2 flex justify-around items-center' onSubmit={handleRegisterSubmit}>
                 <Input id='name-input' type='text' placeholder='Name' />
                 <Input id='image-input' type='text' placeholder='Image' />
                 <Input id='description-input' type='text' placeholder='Description' />

staff/marti-herms/project/V-HUB/app/src/home/GameSearch.jsx

@@ -5,7 +5,7 @@ import Form from '../library/Form'
 import Input from '../library/Input'
 import Button from '../library/Button'
 
-export default function GameSearch() {
+export default function GameSearch({ onChange }) {
     const navigate = useNavigate()
     const location = useLocation()
     const [searchParams, setSearchParams] = useSearchParams()
@@ -38,9 +38,11 @@ export default function GameSearch() {
         const { value: query } = event.target
 
         setQuery(query)
+
+        onChange()
     }
 
-    return <Form onSubmit={handleSubmit} className='flex justify-start items-center text-black'>
+    return <Form onSubmit={handleSubmit} className='flex h-[20%] my-2 gap-2 justify-start items-center text-black'>
         <Input name='q' placeholder='search' value={query} onChange={handleInputChange} />
         <Button className='bg-white' type='submit'>Search</Button>
     </Form>

staff/marti-herms/project/V-HUB/app/src/home/GameSearchResults.jsx

@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react'
+import { useSearchParams } from 'react-router-dom'
+
+import logic from '../../logic'
+import Game from './Game'
+
+export default function GameSearchResults({ refreshStamp }) {
+    const [searchParams] = useSearchParams()
+
+    const q = searchParams.get('q') || ''
+
+    const [games, setGames] = useState([])
+
+    useEffect(() => {
+        loadGames()
+    }, [refreshStamp, q])
+
+    const loadGames = () => {
+        try {
+            logic.searchGame(q)
+                .then(games => setGames(games))
+                .catch(error => {
+                    console.error(error)
+
+                    alert(error.message)
+                })
+        } catch {
+            console.error(error)
+
+            alert(error.message)
+        }
+    }
+
+    const maxView = 5
+
+    let count = 0
+
+    return <section className='flex flex-col gap-4'>
+        {games.map(game => {
+            count++
+
+            if (count <= maxView)
+                return <Game key={game.id} game={game} />
+
+            return
+        })}
+    </section>
+}

staff/marti-herms/project/V-HUB/app/src/home/index.jsx

@@ -6,9 +6,11 @@ import Library from './Library'
 import Footer from './Footer'
 import GameRegister from './GameRegister'
 import GameSearch from './GameSearch'
+import GameSearchResults from './GameSearchResults'
 
 export default function Home({ onLogout }) {
     const [path, setPath] = useState('/')
+    const [refreshStamp, setRefreshStamp] = useState(null)
 
     const navigate = useNavigate()
 
@@ -17,6 +19,7 @@ export default function Home({ onLogout }) {
     }, [path])
 
     const handleHomeClick = () => {
+        setRefreshStamp(Date.now())
         setPath('/')
     }
 
@@ -25,9 +28,14 @@ export default function Home({ onLogout }) {
     }
 
     const handleSearchGameClick = () => {
+        setRefreshStamp(Date.now())
         setPath('/games/search')
     }
 
+    const handleInputChange = () => {
+        setRefreshStamp(Date.now())
+    }
+
     const handleRegisterGame = (gameId) => {
         setPath(`/games/${gameId}`)
     }
@@ -39,7 +47,7 @@ export default function Home({ onLogout }) {
             <Routes>
                 <Route path='/' element={<p className='text-white'>Hello World</p>} />
                 <Route path='/games/register' element={<GameRegister onGameRegister={handleRegisterGame} />} />
-                <Route path='/games/search' element={<GameSearch />} />
+                <Route path='/games/search' element={<><GameSearch onChange={handleInputChange} /> <GameSearchResults refreshStamp={refreshStamp} /></>} />
                 <Route path='/games/:gameId' />
             </Routes>
         </main>

staff/marti-herms/project/V-HUB/app/src/library/Image.jsx

@@ -0,0 +1,3 @@
+export default function Image(props) {
+    return <img {...props} />
+}

staff/marti-herms/project/V-HUB/core/logic/index.js

@@ -2,12 +2,14 @@ import authenticateUser from './authenticateUser.js'
 import registerUser from './registerUser.js'
 import getUserUsername from './getUserUsername.js'
 import registerGame from './registerGame.js'
+import searchGame from './searchGame.js'
 
 const logic = {
     authenticateUser,
     registerUser,
     getUserUsername,
-    registerGame
+    registerGame,
+    searchGame
 }
 
 export default logic