implement profile changes in app b00tc4mp#84

Eden23 · Aug 19, 2024 · b2083b7 · b2083b7
1 parent 4301b97
commit b2083b7
Show file tree

Hide file tree

Showing 27 changed files with 192 additions and 143 deletions.
diff --git a/staff/marti-herms/project/V-HUB/api/handlers/getDevUserGamesHandler.js b/staff/marti-herms/project/V-HUB/api/handlers/getDevUserGamesHandler.js
@@ -3,8 +3,10 @@ import { logic } from 'core'
 export default (req, res, next) => {
     const { userId } = req
 
+    const { targetUserId } = req.params
+
     try {
-        logic.getDevUserGames(userId)
+        logic.getDevUserGames(userId, targetUserId)
             .then(games => res.json(games))
             .catch(error => next(error))
     } catch (error) {

diff --git a/staff/marti-herms/project/V-HUB/api/handlers/getUserFavsHandler.js b/staff/marti-herms/project/V-HUB/api/handlers/getUserFavsHandler.js
@@ -3,8 +3,10 @@ import { logic } from 'core'
 export default (req, res, next) => {
     const { userId } = req
 
+    const { targetUserId } = req.params
+
     try {
-        logic.getUserFavs(userId)
+        logic.getUserFavs(userId, targetUserId)
             .then(games => res.json(games))
             .catch(error => next(error))
     } catch (error) {

diff --git a/staff/marti-herms/project/V-HUB/api/handlers/getUserLibraryHandler.js b/staff/marti-herms/project/V-HUB/api/handlers/getUserLibraryHandler.js
@@ -3,8 +3,10 @@ import { logic } from 'core'
 export default (req, res, next) => {
     const { userId } = req
 
+    const { targetUserId } = req.params
+
     try {
-        logic.getUserLibrary(userId)
+        logic.getUserLibrary(userId, targetUserId)
             .then(games => res.json(games))
             .catch(error => next(error))
     } catch (error) {

diff --git a/staff/marti-herms/project/V-HUB/api/index.js b/staff/marti-herms/project/V-HUB/api/index.js
@@ -38,11 +38,11 @@ mongoose.connect(process.env.MONGODB_URI)
 
         api.get('/games/search', jwtVerifier, handle.searchGame)
 
-        api.get('/games/library', jwtVerifier, handle.getUserLibrary)
+        api.get('/games/:targetUserId/library', jwtVerifier, handle.getUserLibrary)
 
-        api.get('/games/favs', jwtVerifier, handle.getUserFavs)
+        api.get('/games/:targetUserId/favs', jwtVerifier, handle.getUserFavs)
 
-        api.get('/games/dev', jwtVerifier, handle.getDevUserGames)
+        api.get('/games/:targetUserId/dev', jwtVerifier, handle.getDevUserGames)
 
         api.get('/games/:gameId', jwtVerifier, handle.getGameById)
 

diff --git a/staff/marti-herms/project/V-HUB/app/index.html b/staff/marti-herms/project/V-HUB/app/index.html
@@ -8,7 +8,7 @@
 </head>
 
 <body class="dark:bg-[#1e1e1e]">
-  <div id="root"></div>
+  <div id="root" class="h-screen"></div>
   <script type="module" src="/index.jsx"></script>
 </body>
 

diff --git a/staff/marti-herms/project/V-HUB/app/logic/getDevUserGames.js b/staff/marti-herms/project/V-HUB/app/logic/getDevUserGames.js
@@ -2,8 +2,8 @@ import { errors } from 'com'
 
 const { SystemError } = errors
 
-export default () => {
-    return fetch(`${import.meta.env.VITE_API_URL}/games/dev`, {
+export default (targetUserId) => {
+    return fetch(`${import.meta.env.VITE_API_URL}/games/${targetUserId}/dev`, {
         headers: { Authorization: `Bearer ${sessionStorage.token}` }
     })
         .catch(error => { throw new SystemError(error.message) })

diff --git a/staff/marti-herms/project/V-HUB/app/logic/getUserFavs.js b/staff/marti-herms/project/V-HUB/app/logic/getUserFavs.js
@@ -2,8 +2,8 @@ import { errors } from 'com'
 
 const { SystemError } = errors
 
-export default () => {
-    return fetch(`${import.meta.env.VITE_API_URL}/games/favs`, {
+export default (targetUserId) => {
+    return fetch(`${import.meta.env.VITE_API_URL}/games/${targetUserId}/favs`, {
         headers: { Authorization: `Bearer ${sessionStorage.token}` }
     })
         .catch(error => { throw new SystemError(error.message) })

diff --git a/staff/marti-herms/project/V-HUB/app/logic/getUserLibrary.js b/staff/marti-herms/project/V-HUB/app/logic/getUserLibrary.js
@@ -2,8 +2,8 @@ import { errors } from 'com'
 
 const { SystemError } = errors
 
-export default () => {
-    return fetch(`${import.meta.env.VITE_API_URL}/games/library`, {
+export default (targetUserId) => {
+    return fetch(`${import.meta.env.VITE_API_URL}/games/${targetUserId}/library`, {
         headers: { Authorization: `Bearer ${sessionStorage.token}` }
     })
         .catch(error => { throw new SystemError(error.message) })

diff --git a/...oject/V-HUB/app/src/home/GameRegister.jsx → ...ms/project/V-HUB/app/src/home/AddGame.jsx b/...oject/V-HUB/app/src/home/GameRegister.jsx → ...ms/project/V-HUB/app/src/home/AddGame.jsx
@@ -1,12 +1,13 @@
+import { Button } from '@mui/material'
+
 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 }) {
+export default function AddGame({ onAddGame }) {
     const { alert } = useContext()
 
     const handleRegisterSubmit = (event) => {
@@ -26,7 +27,7 @@ export default function GameRegister({ onGameRegister }) {
 
         try {
             logic.registerGame(name, image, description, link)
-                .then(gameId => onGameRegister(gameId))
+                .then(() => onAddGame())
                 .catch(error => {
                     console.error(error)
 
@@ -46,7 +47,7 @@ export default function GameRegister({ onGameRegister }) {
                 <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>
+                <Button variant='contained' type='submit'>Add Game</Button>
             </Form>
         </Container>
     </>

diff --git a/staff/marti-herms/project/V-HUB/app/src/home/Footer.jsx b/staff/marti-herms/project/V-HUB/app/src/home/Footer.jsx
@@ -1,23 +1,26 @@
 import { Route, Routes } from 'react-router-dom'
 
+import Button from '../library/Button'
+import NavigationButton from '../library/NavigationButton'
+
 import extractPayloadFromToken from '../../util/extractPayloadFromToken.js'
 
-export default function Footer({ makeReviewVisibility, onSearchGame, onRegisterGame, onHome, onAddReview, onCancel }) {
+export default function Footer({ makeReviewVisibility, onSearchGame, onAddGame, onHome, onAddReview, onCancel }) {
     const { role } = extractPayloadFromToken(sessionStorage.token)
 
-    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'>
+    return <footer className='fixed w-screen h-[5%] bottom-0 left-0 flex flex-row justify-around items-center border-t border-solid border-t-black z-10 bg-slate-700'>
         <Routes>
             <Route path='/' element={<>
-                {role === 'dev' && <button className='border border-solid border-slate-500 bg-white px-2 rounded' onClick={onRegisterGame}>Register Game</button>}
-                <button className='border border-solid border-slate-500 bg-white px-2 rounded' onClick={onSearchGame}>Search</button>
+                {role === 'dev' && <NavigationButton onClick={onAddGame}>Add Game</NavigationButton>}
+                <NavigationButton onClick={onSearchGame}>Search</NavigationButton>
             </>} />
-            <Route path='/profile/:userId' element={<button className='border border-solid border-slate-500 bg-white px-2 rounded' onClick={onHome}>HOME</button>} />
-            <Route path='/games/register' element={<button className='border border-solid border-slate-500 bg-white px-2 rounded' onClick={onHome}>HOME</button>} />
-            <Route path='/search' element={<button className='border border-solid border-slate-500 bg-white px-2 rounded' onClick={onHome}>HOME</button>} />
+            <Route path='/profile/:userId' element={<NavigationButton onClick={onHome}>HOME</NavigationButton>} />
+            <Route path='/games/register' element={<NavigationButton onClick={onHome}>HOME</NavigationButton>} />
+            <Route path='/search' element={<NavigationButton onClick={onHome}>HOME</NavigationButton>} />
             <Route path='/games/:gameId' element={<>
-                <button className='border border-solid border-slate-500 bg-white px-2 rounded' onClick={onHome}>HOME</button>
-                {makeReviewVisibility ? <button className='border border-solid border-slate-500 bg-white px-2 rounded' onClick={onCancel}>Cancel</button> :
-                    <button className='border border-solid border-slate-500 bg-white px-2 rounded' onClick={onAddReview}>Review</button>}
+                <NavigationButton onClick={onHome}>HOME</NavigationButton>
+                {makeReviewVisibility ? <NavigationButton onClick={onCancel}>Cancel</NavigationButton> :
+                    <NavigationButton onClick={onAddReview}>Review</NavigationButton>}
             </>} />
         </Routes>
     </footer>

diff --git a/staff/marti-herms/project/V-HUB/app/src/home/Game.jsx b/staff/marti-herms/project/V-HUB/app/src/home/Game.jsx
@@ -132,11 +132,11 @@ export default function Game({ makeReviewVisibility, onCancel }) {
             </Container>
             <Container className='flex flex-col justify-center pl-2'>
                 <Paragraph className='text-white font-semibold text-lg ml-0 text-wrap'>{game.description}</Paragraph>
-                <Container className='flex flex-row items-center'>
+                <Container className='flex flex-row justify-center items-center'>
                     <Rating name='read-only' value={rating} precision={0.25} readOnly />
                     <Paragraph>{rating}</Paragraph>
                 </Container>
-                <Link className='text-white font-semibold text-lg text-center hover:text-violet-500 active:text-violet-500:' href={game.link}>Download Here</Link>
+                <Link className='text-white font-semibold text-lg text-center hover:text-violet-500 active:text-violet-500:' href={game.link}>Go to official page</Link>
             </Container>
         </>}
 

diff --git a/staff/marti-herms/project/V-HUB/app/src/home/GameBanner.jsx b/staff/marti-herms/project/V-HUB/app/src/home/GameBanner.jsx
@@ -53,11 +53,11 @@ export default function GameBanner({ game, onInteraction, onGameClick, collectio
                     <Paragraph>{game.name}</Paragraph>
                 </Container>
                 <Container>
-                    <Paragraph>{game.description && game.description.slice(0, 25) + '...'}</Paragraph>
+                    <Paragraph>{game.description.length >= 25 ? game.description.slice(0, 25) + '...' : game.description}</Paragraph>
                 </Container>
             </Container>
         </button>
-        {collectionType !== 'devGames' && <Container className='flex flex-col gap-2 mr-2'>
+        {collectionType !== 'devGames' && <Container className='flex flex-col gap-2 mr-2 h-full w-[90px]'>
             <button className='bg-gray-500 rounded' onClick={handleAddGame}>{game.inLibrary ? 'Remove' : 'Add'}</button>
             {game.inLibrary && <button className={game.inFavs ? 'bg-red-500 rounded' : 'bg-green-300 rounded'} onClick={handleFavGame}>Fav</button>}
         </Container>}

diff --git a/staff/marti-herms/project/V-HUB/app/src/home/Header.jsx b/staff/marti-herms/project/V-HUB/app/src/home/Header.jsx
@@ -6,6 +6,8 @@ import useContext from '../context'
 
 import Paragraph from '../library/Paragraph'
 import Avatar from '../library/Avatar'
+import Button from '../library/Button'
+import NavigationButton from '../library/NavigationButton'
 
 import defaultAvatar from '../../images/defaultAvatar.svg'
 
@@ -37,11 +39,11 @@ export default function Header({ onLogoutClick, onProfileClick, refreshStamp })
     }, [refreshStamp])
 
 
-    return <header className='fixed top-0 left-0 w-screen bg-slate-700 z-10 flex flex-row justify-end items-center px-3 border-b border-solid border-b-black'>
-        <button className='flex flex-row items-center' onClick={onProfileClick}>
+    return <header className='fixed top-0 left-0 w-screen h-[5%] bg-slate-700 z-10 flex flex-row justify-end items-center px-3 border-b border-solid border-b-black'>
+        <Button className='flex flex-row items-center' onClick={onProfileClick}>
             <Avatar url={avatar || defaultAvatar} />
-            <Paragraph>{username}</Paragraph>
-        </button>
-        <button className='bg-white rounded box-content h-5 pt-1/2 pb-1 px-1 hover:bg-slate-500 active:bg-slate-500' onClick={onLogoutClick}>Logout</button>
+            <Paragraph className=''>{username}</Paragraph>
+        </Button>
+        <NavigationButton className='bg-white rounded box-content h-5 pt-1/2 pb-1 px-1 hover:bg-slate-500 active:bg-slate-500' onClick={onLogoutClick}>Logout</NavigationButton>
     </header>
 }
diff --git a/staff/marti-herms/project/V-HUB/app/src/home/Library.jsx b/staff/marti-herms/project/V-HUB/app/src/home/Library.jsx
@@ -6,10 +6,10 @@ import useContext from '../context.js'
 import GameBanner from './GameBanner.jsx'
 import extractPayloadFromToken from '../../util/extractPayloadFromToken.js'
 
-export default function Library({ onGameClick }) {
+export default function Library({ onGameClick, user }) {
     const { alert } = useContext()
 
-    const { role } = extractPayloadFromToken(sessionStorage.token)
+    const { userId, role } = extractPayloadFromToken(sessionStorage.token)
 
     const [games, setGames] = useState([])
     const [libraryVisibility, setLibraryVisibility] = useState(false)
@@ -18,7 +18,7 @@ export default function Library({ onGameClick }) {
 
     const libraryGames = () => {
         try {
-            logic.getUserLibrary()
+            logic.getUserLibrary((user && user.id) || userId)
                 .then(games => setGames(games))
                 .catch(error => {
                     console.error(error)
@@ -34,7 +34,7 @@ export default function Library({ onGameClick }) {
 
     const favsGames = () => {
         try {
-            logic.getUserFavs()
+            logic.getUserFavs((user && user.id) || userId)
                 .then(games => setGames(games))
                 .catch(error => {
                     console.error(error)
@@ -50,7 +50,7 @@ export default function Library({ onGameClick }) {
 
     const devGames = () => {
         try {
-            logic.getDevUserGames()
+            logic.getDevUserGames((user && user.id) || userId)
                 .then(games => setGames(games))
                 .catch(error => {
                     console.error(error)
@@ -89,13 +89,13 @@ export default function Library({ onGameClick }) {
     }
 
     return <div>
-        {role === 'dev' && <>
-            <button className='w-full h-8 bg-black text-white border border-solid border-slate-700' onClick={handleDevGames}>Games</button>
+        {((!user && role) || user.role === 'dev') && <>
+            <button className='w-full h-[45px] bg-black text-white border border-solid border-slate-700' onClick={handleDevGames}>Games</button>
             {devGamesVisibility && games.map(game => <GameBanner key={game.id} game={game} onInteraction={devGames} onGameClick={onGameClick} collectionType={'devGames'} />)}
         </>}
-        <button className='w-full h-8 bg-black text-white border border-solid border-slate-700' onClick={handleLibrary}>Library</button>
+        <button className='w-full h-[45px] bg-black text-white border border-solid border-slate-700' onClick={handleLibrary}>Library</button>
         {libraryVisibility && games.map(game => <GameBanner key={game.id} game={game} onInteraction={libraryGames} onGameClick={onGameClick} collectionType={'library'} />)}
-        <button className='w-full h-8 bg-black text-white border border-solid border-slate-700' onClick={handleFavs}>Favs</button>
+        <button className='w-full h-[45px] bg-black text-white border border-solid border-slate-700' onClick={handleFavs}>Favs</button>
         {favsVisibility && games.map(game => <GameBanner key={game.id} game={game} onInteraction={favsGames} onGameClick={onGameClick} collectionType={'favs'} />)}
     </div>
 }
diff --git a/staff/marti-herms/project/V-HUB/app/src/home/Profile.jsx b/staff/marti-herms/project/V-HUB/app/src/home/Profile.jsx
@@ -5,9 +5,10 @@ import logic from '../../logic'
 
 import useContext from '../context'
 
+import Library from './Library'
+
 import Container from '../library/Container'
 import Avatar from '../library/Avatar'
-import Paragraph from '../library/Paragraph'
 import Button from '../library/Button'
 import Form from '../library/Form'
 import Input from '../library/Input'
@@ -16,7 +17,7 @@ import extractPayloadFromToken from '../../util/extractPayloadFromToken'
 
 import defaultAvatar from '../../images/defaultAvatar.svg'
 
-export default function Profile({ refreshStamp, onChange }) {
+export default function Profile({ refreshStamp, onChange, onGameClick }) {
     const { alert } = useContext()
 
     const { userId } = useParams()
@@ -43,16 +44,6 @@ export default function Profile({ refreshStamp, onChange }) {
         }
     }, [userId, refreshStamp])
 
-    const handleEditUsernameClick = () => {
-        setEditUsernameVisibility(true)
-        setEditAvatarVisibility(false)
-    }
-
-    const handleEditAvatarClick = () => {
-        setEditUsernameVisibility(false)
-        setEditAvatarVisibility(true)
-    }
-
     const handleEditUsername = (event) => {
         event.preventDefault()
         try {
@@ -105,43 +96,62 @@ export default function Profile({ refreshStamp, onChange }) {
         }
     }
 
+    const handleEditUsernameClick = () => {
+        setLibraryVisibility(false)
+        setFavsVisibility(false)
+        setdevGamesVisibility(false)
+        setEditAvatarVisibility(false)
+
+        setEditUsernameVisibility(true)
+    }
+
+    const handleEditAvatarClick = () => {
+        setLibraryVisibility(false)
+        setFavsVisibility(false)
+        setdevGamesVisibility(false)
+        setEditUsernameVisibility(false)
+
+        setEditAvatarVisibility(true)
+    }
+
     const handleEditUserCancel = () => {
         setEditUsernameVisibility(false)
         setEditAvatarVisibility(false)
     }
 
     return <>
-        {user && <Container className='flex flex-row justify-center items-center'>
+        {user && <Container className='flex flex-row justify-center items-center my-4'>
             <Avatar url={user.avatar || defaultAvatar} className='w-20 h-20' />
             <h2 className='text-white text-4xl'>{user.username}</h2>
         </Container>}
-        {user && user.id === loggedInUserId && <Container className='m-3 flex-col justify-start flex-wrap box-content'>
-            <Button className='rounded-sm bg-slate-300 min-w-40 h-6 text-black hover:bg-slate-500' onClick={handleEditUsernameClick}>Edit Username</Button>
-            <Button className='rounded-sm bg-slate-300 min-w-40 h-6 text-black hover:bg-slate-500' onClick={handleEditAvatarClick}>Edit Avatar</Button>
+        {user && user.id === loggedInUserId && <Container className='m-3 flex flex-col justify-center items-center gap-2 box-content'>
+            <Button className='rounded bg-slate-300 h-auto text-black hover:bg-slate-500' onClick={handleEditUsernameClick}>Edit Username</Button>
+            <Button className='rounded bg-slate-300 h-auto text-black hover:bg-slate-500' onClick={handleEditAvatarClick}>Edit Avatar</Button>
         </Container>}
-        {editUsernameVisibility && <Container className='flex-col justify-center'>
-            <Form className='flex-col' onSubmit={handleEditUsername}>
-                <Container>
-                    <label htmlFor='new-username'>Username</label>
-                    <Input id='new-username' />
+        {editUsernameVisibility && <Container className='flex flex-col justify-center items-center'>
+            <Form onSubmit={handleEditUsername}>
+                <Container className='flex flex-col justify-center items-center'>
+                    <Input id='new-username' placeholder='username' className='py-3' />
                 </Container>
-                <Container className='flex-row m-3 justify-around'>
-                    <Button type='submit'>Submit</Button>
-                    <Button onClick={handleEditUserCancel}>Cancel</Button>
+                <Container className='flex flex-row m-3 justify-around mx-10'>
+                    <Button className='dark:bg-white' type='submit'>Submit</Button>
+                    <Button className='dark:bg-white' onClick={handleEditUserCancel}>Cancel</Button>
                 </Container>
             </Form>
         </Container>}
-        {editAvatarVisibility && <Container className='flex-col justify-center'>
-            <Form className='flex-col' onSubmit={handleEditAvatar}>
-                <Container>
-                    <label htmlFor='new-avatar'>Avatar</label>
-                    <Input id='new-avatar' />
+        {editAvatarVisibility && <Container className='flex flex-col justify-center items-center'>
+            <Form onSubmit={handleEditAvatar}>
+                <Container className='flex flex-col justify-center items-center'>
+                    <Input id='new-avatar' placeholder='avatar' className='py-3' />
                 </Container>
-                <Container className='flex-row m-3 justify-around'>
-                    <Button type='submit'>Submit</Button>
-                    <Button onClick={handleEditUserCancel}>Cancel</Button>
+                <Container className='flex flex-row m-3 justify-around mx-10'>
+                    <Button className='dark:bg-white' type='submit'>Submit</Button>
+                    <Button className='dark:bg-white' onClick={handleEditUserCancel}>Cancel</Button>
                 </Container>
             </Form>
         </Container>}
+        {user && <Container>
+            <Library onGameClick={onGameClick} user={user} />
+        </Container>}
     </>
 }