add and modify File.jsx and downloadFile logic with .blob() system | …

…add delete and download button with CSS b00tc4mp#382
abelpriem · Mar 20, 2024 · f4153df · f4153df
1 parent 1250385
commit f4153df
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 25 deletions.
diff --git a/staff/abel-prieto/PROYECT/HiInit/src/components/Download.jsx b/staff/abel-prieto/PROYECT/HiInit/src/components/Download.jsx
@@ -32,6 +32,7 @@ function Download() {
                 setList(true)
             } else if ((commandText === 'EXIT' || commandText === 'exit') && event.key === 'Enter') {
                 setList(false)
+                handleLogout()
             } else if (event.key === 'Enter') {
                 setUknownCommand(!uknownCommand)
             }
@@ -77,6 +78,17 @@ function Download() {
         }
     }, [fetchingFiles, list, handleError, navigate])
 
+    // LOGOUT VIEW
+    function handleLogout() {
+        logic.logoutUser(error => {
+            if (error) {
+                handleError(error, navigate)
+            }
+
+            navigate('/')
+        })
+    }
+
     return (
         <div className="container">
             <p>~$</p>

diff --git a/staff/abel-prieto/PROYECT/HiInit/src/components/Files.jsx b/staff/abel-prieto/PROYECT/HiInit/src/components/Files.jsx
@@ -39,8 +39,6 @@ function Files(props) {
                         clientError.style.color = 'tomato'
 
                         handleError(error, navigate)
-
-                        return
                     })
             }
         })
@@ -54,14 +52,23 @@ function Files(props) {
 
         try {
             logic.downloadFile(file.id)
-                .then(() => {
+                .then(blob => {
+                    const url = window.URL.createObjectURL(blob)
+
+                    const anchor = document.createElement('a')
+                    anchor.href = url
+                    anchor.download = file.name
+                    anchor.click()
+
+                    window.URL.revokeObjectURL(url)
+
                     clientError.innerText = 'File successfully download ✅'
                     clientError.style.color = 'green'
                 })
-                .catch(error => {
-                    handleError(error, navigate)
-                })
         } catch (error) {
+            clientError.innerText = `${error.message} ❌`
+            clientError.style.color = 'tomato'
+
             handleError(error, navigate)
         }
     }
@@ -70,8 +77,8 @@ function Files(props) {
         <article>
             <ul>
                 <p>{file.name}</p>
-                <button id="download-file" className='button-form' onClick={handleDownloadFile}>Download</button>
-                <button id="delete-file" className='button-form' onClick={handleDeleteFile}>Delete</button>
+                <button className='anchor-button' onClick={handleDownloadFile}>Download</button>
+                <button id="delete-file" className='button-delete' onClick={handleDeleteFile}>Delete</button>
             </ul>
         </article>
     </>

diff --git a/staff/abel-prieto/PROYECT/HiInit/src/index.css b/staff/abel-prieto/PROYECT/HiInit/src/index.css
diff --git a/staff/abel-prieto/PROYECT/HiInit/src/logic/downloadFile.js b/staff/abel-prieto/PROYECT/HiInit/src/logic/downloadFile.js
@@ -20,6 +20,8 @@ function downloadFile(fileId) {
                     .catch(error => { throw new SystemError(error.message) })
                     .then(body => { throw new errors[body.error](body.message) })
             }
+
+            return res.blob()
         })
 }
 

diff --git a/staff/abel-prieto/PROYECT/HiInit/src/views/Desktop.jsx b/staff/abel-prieto/PROYECT/HiInit/src/views/Desktop.jsx
@@ -20,33 +20,27 @@ function Desktop() {
 
     // RETRIEVE ROLE
     useEffect(() => {
-        if (fetchingUser || role.length === 0) {
+        if (fetchingUser) {
             const fetchUser = async () => {
                 try {
                     const user = await logic.retrieveUser()
                     setRole(user.role)
-                    setFetchingUser(false)
+                    setFetchingUser(!fetchingUser)
                 } catch (error) {
                     handleError(error, navigate)
-                    setFetchingUser(false)
+                    setFetchingUser(!fetchingUser)
                 }
             }
 
             fetchUser()
         }
-    }, [role, handleError, navigate])
-
-    // useEffect(() => {
-    //    setFetchingUser(true)
-    // }, [])
+    }, [fetchingUser, role, handleError, navigate])
 
     // ESCUCHA TECLADO, ERROR Y ESCRITURA
     useEffect(() => {
         const handleKeyPress = (event) => {
             let commandText = document.getElementById('command').value
 
-            console.log(role)
-
             if ((commandText === 'EXIT' || commandText === 'exit') && event.key === 'Enter') {
                 handleLogout()
             } else if ((commandText === 'UPLOAD' || commandText === 'upload') && event.key === 'Enter') {
@@ -60,6 +54,7 @@ function Desktop() {
                 navigate('/profile')
             } else if (role.includes('admin') && (commandText === 'SUDO' || commandText === 'sudo') && event.key === 'Enter') {
                 setUknownCommand(false)
+                setFetchingUser(!fetchingUser)
                 navigate('/administrator')
             } else if ((commandText === 'HELP' || commandText === 'help') && event.key === 'Enter') {
                 setHelp(!help)
@@ -71,6 +66,7 @@ function Desktop() {
         const handleKeyDown = () => {
             setUknownCommand(false)
             setHelp(false)
+            setFetchingUser(false)
         }
 
         document.addEventListener('keypress', handleKeyPress)
@@ -80,7 +76,7 @@ function Desktop() {
             document.removeEventListener('keypress', handleKeyPress)
             document.removeEventListener('keydown', handleKeyDown)
         }
-    }, [navigate, uknownCommand, help])
+    }, [navigate, uknownCommand, help, fetchingUser])
 
     // LOGOUT VIEW
     function handleLogout() {

diff --git a/staff/abel-prieto/PROYECT/HiInit/src/views/Sudo.jsx b/staff/abel-prieto/PROYECT/HiInit/src/views/Sudo.jsx
@@ -40,10 +40,6 @@ export default function Sudo() {
                 setUknownCommand(false)
                 setMenu(false)
                 navigate('/create-group')
-            } else if ((commandText === '4') && event.key === 'Enter') {
-                setUknownCommand(false)
-                setMenu(false)
-                navigate('/desktop')
             } else if (event.key === 'Enter') {
                 setUknownCommand(!uknownCommand)
             }
@@ -60,7 +56,7 @@ export default function Sudo() {
             document.removeEventListener('keypress', handleKeyPress)
             document.removeEventListener('keydown', handleKeyDown)
         }
-    }, [navigate, uknownCommand])
+    }, [navigate, uknownCommand, menu])
 
     // LOGOUT VIEW
     function handleLogout() {
@@ -103,7 +99,7 @@ export default function Sudo() {
                     <li><p><strong>Create new ADMIN</strong></p></li>
                     <li><p><strong>Delete Users</strong></p></li>
                     <li><p><strong>Create new Group</strong></p></li>
-                    <li><p><strong>Create new Command</strong></p></li>
+                    <li><p><strong>Create new Command - In construction... ⌛</strong></p></li>
                 </ol>
             )}
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,6 +20,8 @@ function downloadFile(fileId) { @@
                         .catch(error => { throw new SystemError(error.message) })
                         .then(body => { throw new errors[body.error](body.message) })
                 }
+                return res.blob()
             })
     }
@@ Expand Down @@