implement getUserUsername logic and tests; implement first home react…

… iteration b00tc4mp#84

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

@@ -1,10 +1,12 @@
 import { logic } from 'core'
 
 export default (req, res, next) => {
-    const { userId } = req.params
+    const { userId } = req
+
+    const { targetUserId } = req.params
 
     try {
-        logic.getUserUsername(userId)
+        logic.getUserUsername(userId, targetUserId)
             .then(username => res.json(username))
             .catch(error => next(error))
     } catch (error) {

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

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

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

@@ -19,7 +19,7 @@ mongoose.connect(process.env.MONGODB_URI)
 
         api.post('/users/auth', jsonBodyParser, handle.authenticateUser)
 
-        api.get('/users/:userId/username', jsonBodyParser, handle.getUserUsername)
+        api.get('/users/:targetUserId/username', jwtVerifier, handle.getUserUsername)
 
         api.use(errorHandler)
 

staff/marti-herms/project/V-HUB/api/middleware/errorHandler.js

@@ -1,6 +1,6 @@
 import { errors } from 'com'
 
-const { NotFoundError, CredentialsError, DuplicityError, SessionError, ValidationError } = errors
+const { NotFoundError, CredentialsError, DuplicityError, SessionError, ValidationError, OwnershipError } = errors
 
 export default (error, req, res, next) => {
     let status = 500
@@ -9,7 +9,7 @@ export default (error, req, res, next) => {
         status = 404
 
     else if (error instanceof CredentialsError || error instanceof DuplicityError)
-        ststus = 409
+        status = 409
 
     else if (error instanceof OwnershipError)
         status = 403

staff/marti-herms/project/V-HUB/api/middleware/jwtVerifier.js

@@ -10,7 +10,7 @@ export default (req, res, next) => {
 
     const token = authorization.slice(7)
 
-    jwt.verifier(token, process.env.JWT_SECRET, (error, payload) => {
+    jwt.verify(token, process.env.JWT_SECRET, (error, payload) => {
         if (error) {
             res.status(498).json({ error: SessionError.name, message: error.message })
 

staff/marti-herms/project/V-HUB/api/test/get-username.sh

@@ -0,0 +1 @@
+curl -v http://localhost:8080/users/66b941110938786955ecf3b5/username -H "Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI2NmI5NDExMTA5Mzg3ODY5NTVlY2YzYjUiLCJpYXQiOjE3MjM0NDk5MDN9.sE0z2XpU_e6AQlVnebsA9k7gtW8TITWrfEpP73zj3Dw"

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

@@ -38,6 +38,7 @@ export default function App() {
   }
 
   const handleLogout = () => {
+    logic.logoutUser()
     navigate('/login')
   }
 

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

@@ -0,0 +1,16 @@
+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>
+    </footer>
+}

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

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react'
+
+import useContext from '../context'
+
+import logic from '../../logic'
+
+import Paragraph from '../library/Paragraph'
+
+export default function Header({ onLogoutClick }) {
+    const [username, setUsername] = useState(null)
+
+    useEffect(() => {
+        try {
+            logic.getUserUsername()
+                .then(username => setUsername(username))
+                .catch(error => {
+                    console.error(error)
+
+                    alert(error.message)
+                })
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+    }, [])
+
+    return <header className='flex flex-row justify-end px-4 border border-solid border-b-black'>
+        <Paragraph>{username}</Paragraph>
+        <button onClick={onLogoutClick}>Logout</button>
+    </header>
+}

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

@@ -0,0 +1,11 @@
+import { useState, useEffect } from 'react'
+
+
+
+export default function Library() {
+    const [games, setGames] = useState(null)
+
+    return <div>
+        {games.map()}
+    </div>
+}

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

@@ -1,25 +1,24 @@
-import { useState, useEffect } from "react"
+import { useState, useEffect } from 'react'
 
 import useContext from '../context'
 
-export default function Home() {
-    const [username, setUsername] = useState(null)
+import logic from '../../logic'
+
+import Header from './Header'
+import Library from './Library'
+import Footer from './Footer'
+
+export default function Home({ onLogout }) {
 
     useEffect(() => {
-        try {
-            logic.getUserUsername()
-                .then(username => setName(username))
-                .catch(error => {
-                    console.error(error)
-
-                    alert(error.message)
-                })
-        } catch (error) {
-            console.error(error)
-
-            alert(error.message)
-        }
+
     })
 
-    return <p>Hello, {username}</p>
+    return <main>
+        <Header onLogoutClick={onLogout} ></Header>
+
+
+
+        <Footer></Footer>
+    </main>
 }

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={'w-8/12 h-16 text-4xl text-black rounded-md border border-solid border-black shadow-md shadow-black ' + className} {...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/Checkbox.jsx

@@ -1,3 +1,7 @@
-export default function Checkbox({ className = '', ...nextProps }) {
-    return <input type='checkbox' {...nextProps} />
+export default function Checkbox({ className = '', id, ...nextProps }) {
+    return <>
+        <label htmlFor={id}>
+            <input type='checkbox' id={id}  {...nextProps} /> Game Dev
+        </label>
+    </>
 }

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 bg-[#616161] w-[500px] h-5/6 justify-center items-center rounded-md shadow-md shadow-black ' + className} onSubmit={onSubmit}>{children}</form>
+    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>
 }

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

@@ -0,0 +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>
+    </div>
+}

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

@@ -1,7 +1,7 @@
 import logic from '../../logic'
 
 import Input from '../library/Input'
-import VSeparator from '../library/VSeparator'
+import Logo from '../library/Logo'
 import Container from '../library/Container'
 import Form from '../library/Form'
 import Button from '../library/Button'
@@ -47,14 +47,10 @@ export default function Login({ onLogin, onRegisterClick }) {
         }
     }
 
-    return <main className='flex flex-row w-screen h-screen'>
-        <Container className={'flex flex-col items-center justify-center bg-[#1e1e1e] text-white w-1/3 h-full'}>
-            <img className='top-3 w-72 h-72' src='../images/logo.svg' alt='logo' />
-            <h2 className='text-center text-7xl'>V-HUB</h2>
-        </Container>
-        <VSeparator />
-        <Container className={'flex flex-col items-center justify-center bg-[#1e1e1e] text-white w-2/3 h-full'}>
-            <Form className='gap-14' onSubmit={handleLoginSubmit}>
+    return <main className='flex flex-col w-screen h-screen dark:bg-[#1e1e1e]'>
+        <Logo />
+        <Container className={'flex flex-col items-center justify-center text-white w-screen h-full'}>
+            <Form className='gap-10' onSubmit={handleLoginSubmit}>
                 <Input id='username-input' type='text' placeholder='Username' />
                 <Input id='password-input' type='password' placeholder='Password' />
                 <Button className='bg-rose-500 hover:bg-rose-800' type='submit' >Login</Button>

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

@@ -1,7 +1,7 @@
 import logic from '../../logic'
 
 import Input from '../library/Input'
-import VSeparator from '../library/VSeparator'
+import Logo from '../library/Logo'
 import Container from '../library/Container'
 import Form from '../library/Form'
 import Button from '../library/Button'
@@ -45,20 +45,15 @@ export default function Register({ onLoginClick, onRegister }) {
         }
     }
 
-    return <main className='flex flex-row w-screen h-screen'>
-        <Container className={'flex flex-col items-center justify-center bg-[#1e1e1e] text-white w-1/3 h-full'}>
-            <img className='top-3 w-72 h-72' src='../images/logo.svg' alt='logo' />
-            <h2 className='text-center text-7xl'>V-HUB</h2>
-        </Container>
-        <VSeparator />
-        <Container className={'flex flex-col items-center justify-center bg-[#1e1e1e] text-white w-2/3 h-full'}>
-            <Form className='gap-8' onSubmit={handleRegisterSubmit}>
+    return <main className='flex flex-col w-screen h-screen dark:bg-[#1e1e1e]'>
+        <Logo />
+        <Container className={'flex flex-col items-center justify-center  text-white w-full h-screen'}>
+            <Form className='gap-4' onSubmit={handleRegisterSubmit}>
                 <Input id='username-input' type='text' placeholder='Username' />
                 <Input id='email-input' type='email' placeholder='Email' />
                 <Input id='password-input' type='password' placeholder='Password' />
                 <Input id='repassword-input' type='password' placeholder='Repeat Password' />
                 <Checkbox id='role-input' value='dev' />
-                <label htmlFor='role-input'>Game Dev</label>
                 <Button type='submit' className='bg-rose-500 hover:bg-rose-800'>Register</Button>
                 <Link className='text-xl underline underline-offset-2 hover:text-blue-500' onClick={onLoginClick}>Login</Link>
             </Form>

staff/marti-herms/project/V-HUB/app/util/extractPayloadFromToken.js

@@ -1,5 +1,5 @@
 export default token => {
-    const payload64 = token.slice(token.indexOf('.') + 1, token.lastIndexOf('.'))
+    const payloadB64 = token.slice(token.indexOf('.') + 1, token.lastIndexOf('.'))
 
     const payloadJSON = atob(payloadB64)
 

staff/marti-herms/project/V-HUB/com/errors.js

@@ -46,13 +46,22 @@ class SessionError extends Error {
     }
 }
 
+class OwnershipError extends Error {
+    constructor(message) {
+        super(message)
+
+        this.name = this.constructor.name
+    }
+}
+
 const errors = {
     ValidationError,
     SystemError,
     DuplicityError,
     NotFoundError,
     CredentialsError,
-    SessionError
+    SessionError,
+    OwnershipError
 }
 
 export default errors

staff/marti-herms/project/V-HUB/core/data/models.js

@@ -19,7 +19,6 @@ const user = new Schema({
     },
     avatar: {
         type: String,
-        required: true
     },
     role: {
         type: String,

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

@@ -0,0 +1,24 @@
+import { User } from '../data/models.js'
+
+import { validate, errors } from 'com'
+
+const { NotFoundError, SystemError } = errors
+
+export default (userId, targetUserId) => {
+    validate.string(userId, 'userId')
+    validate.string(targetUserId, 'targetUserId')
+
+    return User.findById(userId).lean()
+        .catch(error => { throw new SystemError(error.message) })
+        .then(user => {
+            if (!user) throw new NotFoundError('user not found')
+
+            return User.findById(targetUserId).lean()
+                .catch(error => { throw new SystemError(error.message) })
+        })
+        .then(user => {
+            if (!user) throw new NotFoundError('targetUser not found')
+
+            return user.username
+        })
+}