add Upload.jsx with logic and request API with formData b00tc4mp#382

staff/abel-prieto/PROYECT/HiInit/src/components/Upload.jsx

@@ -1,33 +1,48 @@
-import { useState } from 'react'
-import { CommandBar, Pointer } from '../utils'
+import { CommandBar } from '../utils'
+import logic from '../logic'
 
 function Upload() {
-    const [commandText, setCommandText] = useState('')
-    const [upload, setUpload] = useState(true)
-    const { pointer } = Pointer()
+
+    // UPLOAD FILE
+    function handleUploadFile(event) {
+        event.preventDefault()
+
+        logic.uploadFile()
+            .then(() => {
+                const succesUpload = document.querySelector('#client-error')
+
+                succesUpload.innerText = 'File succesfully upload!'
+                succesUpload.style.color = 'green'
+
+                return
+            })
+            .catch(error => {
+                const clientError = document.querySelector('#client-error')
+
+                clientError.innerText = error.message
+                clientError.style.color = 'red'
+
+                return
+            })
+    }
 
     return <>
         <div className="container">
             <p>~$</p>
-            <p>Select the files and upload them: </p>
+            <p id="client-error">Select the files and upload them: </p>
 
             <br />
 
             <div className="command-bar">
                 <CommandBar />
 
                 <div id="command-form">
-                    <input id="command" type="text" contentEditable="true" autoFocus autoComplete="off" value={commandText} onChange={(event) => setCommandText(event.target.value)}
-                        style={{ width: `${Math.max(10, commandText.length * 8)}px` }} />
+                    <form action="/upload" method="POST" encType="multipart/form-data" onSubmit={handleUploadFile}>
+                        <input type="file" name="file" />
+                        <button type="submit" className='button-form'>Upload</button>
+                    </form>
                 </div>
 
-                {uknownCommand && (
-                    <span>
-                        <p>shell: command not found: '{commandText}'. Entry login or register</p>
-                    </span>
-                )}
-
-                <p>{pointer}</p>
             </div>
         </div>
     </>

staff/abel-prieto/PROYECT/HiInit/src/components/index.js

@@ -1,7 +1,9 @@
 import Login from './Login'
 import Register from './Register'
+import Upload from './Upload'
 
 export {
     Login,
-    Register
+    Register,
+    Upload
 }

staff/abel-prieto/PROYECT/HiInit/src/logic/index.js

@@ -4,14 +4,16 @@ import retrieveUser from './retrieveUser.js'
 import retrieveGuest from './retrieveGuest.js'
 import logoutUser from './logoutUser.js'
 import isUserLoggedIn from './isUserLoggedIn.js'
+import uploadFile from './uploadFile.js'
 
 export {
     loginUser,
     registerUser,
     retrieveUser,
     retrieveGuest,
     logoutUser,
-    isUserLoggedIn
+    isUserLoggedIn,
+    uploadFile
 }
 
 const logic = {
@@ -20,7 +22,8 @@ const logic = {
     retrieveUser,
     retrieveGuest,
     logoutUser,
-    isUserLoggedIn
+    isUserLoggedIn,
+    uploadFile
 }
 
 export default logic

staff/abel-prieto/PROYECT/HiInit/src/logic/loginUser.js

@@ -10,7 +10,7 @@ async function loginUser(email, password) {
     }
 
     try {
-        const res = await fetch(`${import.meta.env.VITE_HIINIT_APP}users/auth`, req)
+        const res = await fetch(`${import.meta.env.VITE_HIINIT_APP}/users/auth`, req)
 
         if (!res.ok) {
             const body = await res.json()

staff/abel-prieto/PROYECT/HiInit/src/logic/registerUser.js

@@ -10,7 +10,7 @@ async function registerUser(username, email, password) {
     }
 
     try {
-        const res = await fetch(`${import.meta.env.VITE_HIINIT_APP}users`, req)
+        const res = await fetch(`${import.meta.env.VITE_HIINIT_APP}/users`, req)
 
         if (!res.ok) {
             const body = await res.json()

staff/abel-prieto/PROYECT/HiInit/src/logic/retrieveGuest.js

@@ -1,14 +1,11 @@
 
 async function retrieveGuest() {
     const req = {
-        method: 'GET',
-        headers: {
-            "Content-Type": "application/json"
-        }
+        method: 'GET'
     }
 
     try {
-        const res = await fetch(`${import.meta.env.VITE_HIINIT_APP}users`, req)
+        const res = await fetch(`${import.meta.env.VITE_HIINIT_APP}/users`, req)
 
         if (!res.ok) {
             const body = await res.json()

staff/abel-prieto/PROYECT/HiInit/src/logic/retrieveUser.js

@@ -9,7 +9,7 @@ async function retrieveUser() {
     }
 
     try {
-        const res = await fetch(`${import.meta.env.VITE_HIINIT_APP}users`, req)
+        const res = await fetch(`${import.meta.env.VITE_HIINIT_APP}/users`, req)
 
         if (!res.ok) {
             const body = await res.json()

staff/abel-prieto/PROYECT/HiInit/src/logic/uploadFile.js

@@ -0,0 +1,24 @@
+import session from './session'
+
+async function uploadFile() {
+    const req = {
+        method: 'POST',
+        headers: {
+            Authorization: `Bearer ${session.sessionUserId}`
+        }
+    }
+
+    try {
+        const res = await fetch(`${import.meta.env.VITE_HIINIT_APP}/upload`, req)
+
+        if (!res.ok) {
+            const body = await res.json()
+            throw new Error(body.message)
+        }
+
+    } catch (error) {
+        throw new Error(error.message)
+    }
+}
+
+export default uploadFile

staff/abel-prieto/PROYECT/HiInit/src/main.jsx

@@ -4,7 +4,7 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 
 import App from './App.jsx'
 import { Credentials, Desktop } from './views'
-import { Login, Register } from './components'
+import { Login, Register, Upload } from './components'
 
 import './index.css'
 
@@ -17,6 +17,7 @@ ReactDOM.createRoot(document.getElementById('root')).render(
         <Route path="/login" element={<Login />} />
         <Route path="/register" element={<Register />} />
         <Route path="/desktop" element={<Desktop />} />
+        <Route path="/upload" element={<Upload />} />
       </Routes>
     </Router>
   </React.StrictMode>,

staff/abel-prieto/PROYECT/HiInit/src/utils/CommandBar.jsx

@@ -22,9 +22,23 @@ export default function CommandBar() {
             }
         } else {
             setUsername('guest')
-            setGroup('hiinit')
+            setGroup('hiinit.com')
             setRole('guest')
         }
+
+        // if (session.sessionUserId === null) {
+        //     try {
+        //         logic.retrieveGuest()
+        //             .then(guest => {
+        //                 setUsername(guest.username)
+        //                 setGroup(guest.group)
+        //                 setRole(guest.role)
+        //             })
+        //             .catch(error => alert(error.message))
+        //     } catch (error) {
+        //         alert(error.message)
+        //     }
+        // }
     }, [])
 
     return <>

staff/abel-prieto/PROYECT/HiInit/src/views/Credentials.jsx

@@ -94,7 +94,7 @@ function Credentials() {
             <Routes>
                 <Route path="/register" element={logic.isUserLoggedIn() ? <Navigate to="/login" /> : <Register onSuccess={handleLoginShow} />}></Route>
                 <Route path="/login" element={logic.isUserLoggedIn() ? <Navigate to="/desktop" /> : <Login onSuccess={handleDesktopShow} />}></Route>
-                <Route path="/desktop" element={logic.isUserLoggedIn() ? <Desktop onLogout={handleLogout} /> : <Navigate to="/login" />}></Route>
+                <Route path="/desktop" element={logic.isUserLoggedIn() ? <Navigate to="/login" /> : <Desktop onLogout={handleLogout} />}></Route>
             </Routes>
         </div>
     </>

staff/abel-prieto/PROYECT/HiInit/src/views/Desktop.jsx

@@ -1,6 +1,8 @@
 import { Pointer, CommandBar } from '../utils'
 import { useState, useEffect } from 'react'
-import { Router, useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
+
+import logic from '../logic'
 
 function Desktop({ onLogout }) {
     const [commandText, setCommandText] = useState('')
@@ -15,8 +17,9 @@ function Desktop({ onLogout }) {
             let commandText = document.getElementById('command').value
 
             if ((commandText === 'EXIT' || commandText === 'exit') && event.key === 'Enter') {
-                onLogout()
+                handleLogout()
             } else if ((commandText === 'UPLOAD' || commandText === 'upload') && event.key === 'Enter') {
+                setUknownCommand(false)
                 navigate('/upload')
             } else if (event.key === 'Enter') {
                 setUknownCommand(!uknownCommand)
@@ -36,6 +39,17 @@ function Desktop({ onLogout }) {
         }
     }, [navigate, uknownCommand])
 
+    // LOGOUT VIEW
+    function handleLogout() {
+        logic.logoutUser(error => {
+            if (error) {
+                throw new Error(error)
+            }
+
+            navigate('/')
+        })
+    }
+
     return <>
         <div className="container">
             <p>~$</p>