implement register game in api; implement register game logic and rea…

…ct in app b00tc4mp#84

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

@@ -1,11 +1,13 @@
 import authenticateUserHandler from './authenticateUserHandler.js'
 import registerUserHandler from './registerUserHandler.js'
 import getUserUsernameHandler from './getUserUsernameHandler.js'
+import registerGameHandler from './registerGameHandler.js'
 
 const handle = {
     authenticateUser: authenticateUserHandler,
     registerUser: registerUserHandler,
-    getUserUsername: getUserUsernameHandler
+    getUserUsername: getUserUsernameHandler,
+    registerGame: registerGameHandler
 }
 
 export default handle

staff/marti-herms/project/V-HUB/api/handlers/registerGameHandler.js

@@ -0,0 +1,15 @@
+import { logic } from 'core'
+
+export default (req, res, next) => {
+    const { userId } = req
+
+    const { name, image, description, link } = req.body
+
+    try {
+        logic.registerGame(userId, name, image, description, link)
+            .then(() => res.status(201).send())
+            .catch(error => next(error))
+    } catch (error) {
+        next(error)
+    }
+}

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

@@ -1,9 +1,10 @@
 import 'dotenv/config'
 import express from 'express'
+import cors from 'cors'
 
 import { mongoose } from 'core'
 
-import { cors, jsonBodyParser, jwtVerifier, errorHandler } from './middleware/index.js'
+import { jsonBodyParser, jwtVerifier, errorHandler } from './middleware/index.js'
 
 import handle from './handlers/index.js'
 
@@ -13,14 +14,16 @@ mongoose.connect(process.env.MONGODB_URI)
 
         const api = express()
 
-        api.use(cors)
+        api.use(cors())
 
         api.post('/users', jsonBodyParser, handle.registerUser)
 
         api.post('/users/auth', jsonBodyParser, handle.authenticateUser)
 
         api.get('/users/:targetUserId/username', jwtVerifier, handle.getUserUsername)
 
+        api.post('/games', jwtVerifier, jsonBodyParser, handle.registerGame)
+
         api.use(errorHandler)
 
         api.listen(process.env.PORT, () => console.info(`API listening on PORT ${process.env.PORT}`))

staff/marti-herms/project/V-HUB/api/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "com": "file:../com",
     "core": "file:../core",
+    "cors": "^2.8.5",
     "dotenv": "^16.4.5",
     "express": "^4.19.2",
     "jsonwebtoken": "^9.0.2"

staff/marti-herms/project/V-HUB/api/test/register-game.sh

@@ -0,0 +1 @@
+curl -v http://localhost:8080/games -X POST -d '{"userId":"66b9e687cfa7ce5e041652b3","name":"candy crush","image":"https://store-images.s-microsoft.com/image/apps.54354.13510798882606697.7a42c472-75d7-487e-9538-ebb5ce1657e6.372723d8-dd1a-450a-9fed-d420e7705e4e?mode=scale&q=90&h=300&w=200","description":"candy crush broh","link":"https://www.microsoft.com/en-us/p/candy-crush-saga/9nblggh18846?activetab=pivot:overviewtab"}' -H "Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI2NmI5NDExMTA5Mzg3ODY5NTVlY2YzYjUiLCJpYXQiOjE3MjM0NDk5MDN9.sE0z2XpU_e6AQlVnebsA9k7gtW8TITWrfEpP73zj3Dw" -H "Content-Type: application/json"

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

@@ -6,4 +6,7 @@ import App from './src/App.jsx'
 import './index.css'
 
 const root = ReactDOM.createRoot(document.getElementById('root'))
+
+document.getElementById('root').className = 'w-screen h-screen'
+
 root.render(<Router><App /></Router>)

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

@@ -1,15 +1,17 @@
-import loginUser from './loginUser';
-import logoutUser from './logoutUser';
-import registerUser from './registerUser';
-import isUserLoggedIn from './isUserLoggedIn';
-import getUserUsername from './getUserUsername';
+import loginUser from './loginUser.js'
+import logoutUser from './logoutUser.js'
+import registerUser from './registerUser.js'
+import isUserLoggedIn from './isUserLoggedIn.js'
+import getUserUsername from './getUserUsername.js'
+import registerGame from './registerGame.js'
 
 const logic = {
     loginUser,
     logoutUser,
     registerUser,
     isUserLoggedIn,
-    getUserUsername
+    getUserUsername,
+    registerGame
 }
 
 export default logic

staff/marti-herms/project/V-HUB/app/logic/registerGame.js

@@ -0,0 +1,36 @@
+import { validate, errors } from 'com'
+
+const { SystemError } = errors
+
+export default (name, image, description, link) => {
+    validate.string(name, 'name')
+    validate.string(image, 'image')
+    validate.string(description, 'description')
+    validate.string(link, 'link')
+
+    return fetch(`${import.meta.env.VITE_API_URL}/games`, {
+        method: 'POST',
+        headers: {
+            Authorization: `Bearer ${sessionStorage.token}`,
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ name, image, description, link })
+    })
+        .catch(error => { throw new SystemError(error.message) })
+        .then(response => {
+            const { status } = response
+
+            if (status === 201) return
+
+            return response.json()
+                .then(body => {
+                    const { error, message } = body
+
+                    const constructor = errors[error]
+
+                    throw new constructor(message)
+                })
+        })
+
+
+}

staff/marti-herms/project/V-HUB/app/logic/registerUser.js

@@ -1,4 +1,4 @@
-import { validate, errors } from "com"
+import { validate, errors } from 'com'
 
 const { SystemError, ValidationError } = errors
 

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

@@ -13,8 +13,8 @@ import logic from '../logic'
 export default function App() {
   const navigate = useNavigate()
 
-  const { theme, setTheme } = useState(localStorage.theme)
-  const { alertMessage, setAlertMessage } = useState(null)
+  const [theme, setTheme] = useState(localStorage.theme)
+  const [alertMessage, setAlertMessage] = useState(null)
 
   useEffect(() => {
     document.documentElement.className = theme

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

@@ -1,16 +1,11 @@
 import logic from '../../logic'
 
-export default function Footer() {
-    const handleAddGame = () => {
-
-    }
-
-    const handleRegisterGame = () => {
-
-    }
-
-    return <footer className='fixed w-screen p-2 bottom-0 left-0 flex flex-row justify-around items-center border border-solid border-t-black'>
-        <button className='border border-solid border-black' onClick={handleAddGame}>Add Game</button>
-        <button className='border border-solid border-black' onClick={handleRegisterGame}>Register Game</button>
+export default function Footer({ path, onSearchGame, onRegisterGame, onHome }) {
+    return <footer className='fixed w-screen h-10 bottom-0 left-0 flex flex-row justify-around items-center border-t border-solid border-t-black z-10 bg-slate-700'>
+        {path === '/' && <>
+            <button className='border border-solid border-slate-500 bg-white px-2 rounded' onClick={onSearchGame}>Search Game</button>
+            <button className='border border-solid border-slate-500 bg-white px-2 rounded' onClick={onRegisterGame}>Register Game</button>
+        </>}
+        {path === '/games/register' && <button className='border border-solid border-slate-500 bg-white px-2 rounded' onClick={onHome}>HOME</button>}
     </footer>
 }

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

@@ -0,0 +1,50 @@
+import Logo from '../library/Logo'
+import Container from '../library/Container'
+import Form from '../library/Form'
+import Input from '../library/Input'
+import Button from '../library/Button'
+
+import useContext from '../context'
+import logic from '../../logic'
+
+export default function GameRegister({ onGameRegister }) {
+    const { alert } = useContext()
+
+    const handleRegisterSubmit = (event) => {
+        event.preventDefault()
+
+        const form = event.target
+
+        const nameInput = form['name-input']
+        const imageInput = form['image-input']
+        const descriptionInput = form['description-input']
+        const linkInput = form['link-input']
+
+        const name = nameInput.value
+        const image = imageInput.value
+        const description = descriptionInput.value
+        const link = linkInput.value
+
+        try {
+            logic.registerGame(name, image, description, link)
+                .then(gameId => onGameRegister(gameId))
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+    }
+
+    return <>
+        <Container className='flex flex-col items-center w-full h-full dark:bg-[#1e1e1e]'>
+            <Logo />
+            <Form className='gap-2' 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' />
+                <Input id='link-input' type='text' placeholder='Link' />
+                <Button type='submit' className='bg-rose-500 hover:bg-rose-800'>Register</Button>
+            </Form>
+        </Container>
+    </>
+}

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

@@ -25,7 +25,7 @@ export default function Header({ onLogoutClick }) {
         }
     }, [])
 
-    return <header className='flex flex-row justify-end px-4 border border-solid border-b-black'>
+    return <header className='fixed top-0 left-0 w-screen bg-slate-700 z-10 flex flex-row justify-end px-4 border-b border-solid border-b-black'>
         <Paragraph>{username}</Paragraph>
         <button onClick={onLogoutClick}>Logout</button>
     </header>

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

@@ -1,24 +1,48 @@
 import { useState, useEffect } from 'react'
-
-import useContext from '../context'
-
-import logic from '../../logic'
+import { Route, Routes, useNavigate } from 'react-router-dom'
 
 import Header from './Header'
 import Library from './Library'
 import Footer from './Footer'
+import GameRegister from './GameRegister'
 
 export default function Home({ onLogout }) {
+    const [path, setPath] = useState('/')
+
+    const navigate = useNavigate()
 
     useEffect(() => {
+        navigate(path)
+    }, [path])
 
-    })
+    const handleHomeClick = () => {
+        setPath('/')
+    }
 
-    return <main>
-        <Header onLogoutClick={onLogout} ></Header>
+    const handleRegisterGameClick = () => {
+        setPath('/games/register')
+    }
+
+    const handleSearchGameClick = () => {
+        setPath('/games/search')
+    }
 
+    const handleRegisterGame = (gameId) => {
+        setPath(`/games/${gameId}`)
+    }
 
+    return <>
+        <Header onLogoutClick={onLogout} ></Header>
 
-        <Footer></Footer>
-    </main>
+        <main className='py-10 w-screen h-full dark:bg-[#1e1e1e]'>
+            <Routes>
+                <Route path='/' element={<p className='text-white'>Hello World</p>} />
+                <Route path='/games/register' element={<GameRegister onGameRegister={handleRegisterGame} />} />
+                <Route path='/games/search' />
+                <Route path='/games/:gameId' />
+            </Routes>
+        </main>
+
+        <Footer path={path} onSearchGame={handleSearchGameClick} onRegisterGame={handleRegisterGameClick} onHome={handleHomeClick} ></Footer>
+    </>
 }

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

@@ -1,3 +1,3 @@
 export default function Button({ className = '', children, ...nextProps }) {
-    return <button className={className + 'w-8/12 h-16 text-4xl text-black rounded-md border border-solid border-black shadow-md shadow-black '} {...nextProps}>{children}</button>
+    return <button className={className + ' w-8/12 h-16 text-4xl text-black rounded-md border border-solid border-black shadow-md shadow-black '} {...nextProps}>{children}</button>
 }

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

@@ -1,3 +1,3 @@
 export default function Form({ className = '', children, onSubmit }) {
-    return <form className={'flex flex-col m-auto w-full h-full justify-center items-center rounded-md shadow-md shadow-black ' + className} onSubmit={onSubmit}>{children}</form>
+    return <form className={'flex flex-col w-full h-full justify-between items-center ' + className} onSubmit={onSubmit}>{children}</form>
 }

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

@@ -1,6 +1,6 @@
 export default function Logo() {
     return <div className='bg-transparent box-content'>
-        <img className='bg-transparent w-3/12 h-3/12' src='../images/logo.svg' alt='logo' />
-        <p className='relative text-white z-10 top-0'>V-HUB</p>
+        <img className='relative top-0 bg-transparent w-3/12 h-3/12' src='../images/logo.svg' alt='logo' />
+        <p className='relative top-0 text-white z-10'>V-HUB</p>
     </div>
 }

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

@@ -1,3 +1,3 @@
 export default function Paragraph({ children, className = '' }) {
-    return <p className={`m-2 ${className}`}>{children}</p>
+    return <p className={`m-2 dark:text-white ${className}`}>{children}</p>
 }

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

@@ -36,12 +36,12 @@ export default function Register({ onLoginClick, onRegister }) {
                 .catch(error => {
                     console.error(error)
 
-                    alert(error.message)
+                    alert(message)
                 })
         } catch (error) {
             console.error(error)
 
-            alert(error.message)
+            alert(message)
         }
     }