Merge pull request #91 from TeamXFive/feat/knowledge

[feat] First steps into file retrieval
TeamXFive · Oct 23, 2024 · 81a1954 · 81a1954
2 parents c10f77e + 7c17507
commit 81a1954
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 18 deletions.
diff --git a/src/pages/Knowledge/Knowledge.jsx b/src/pages/Knowledge/Knowledge.jsx
@@ -1,5 +1,5 @@
 import '../../style/Knowledge/Knowledge.css';
-import { useRef, useState } from "react";
+import {useEffect, useRef, useState} from "react";
 import useKnowledgeContext from "../../hook/Knowledge/useKnowledgeContext.jsx";
 
 function Knowledge() {
@@ -59,8 +59,6 @@ function Knowledge() {
     };
 
     const validateAndSetFiles = (incomingFiles) => {
-        const validFiles = [];
-
         incomingFiles.forEach(async (file) => {
             // Validate file type
             if (!allowedFileTypes.includes(file.type)) {
@@ -84,19 +82,44 @@ function Knowledge() {
 
                 const formData = new FormData();
                 formData.append('file', file);
-
-                const response = await fetch('http://localhost:3000/upload', {
-                    method: 'POST',
-                    body: formData
-                });
-                validFiles.push(file);
-
+
+                try {
+                    const response = await fetch('http://localhost:3000/upload', {
+                        method: 'POST',
+                        body: formData
+                    });
+
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+
+                    const result = await response.text();
+                    console.log(result);
+                    getFiles();
+                } catch (error) {
+                    console.error('Error uploading file:', error);
+                }
             }
         });
-
-        setFiles(validFiles);
     };
 
+    const getFiles = async () => {
+        try {
+            const response = await fetch('http://localhost:3000/file_retrieval', {
+                method: 'POST'
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const result = await response.json();
+            console.log(result);
+            setFiles(result)
+        } catch (error) {
+            console.error('Error retrieving files:', error);
+        }
+    }
+
     // Handle button click to open file input dialog
     const openFileDialog = () => {
         fileInputRef.current.click();
@@ -142,12 +165,15 @@ function Knowledge() {
                 </section>
 
                 <section className={`knowledge-documents`}>
-                    <div>Stored Documents</div>
-                    <ul>
-                        {files.map((file, index) => (
-                            <li key={index}>{file.name}</li>
-                        ))}
-                    </ul>
+                    <div className={`knowledge-documents-header`}>Stored Documents</div>
+
+                    <div className={`knowledge-documents-list-container`}>
+                        <ul className={`knowledge-documents-list`}>
+                            {files.map((file, index) => (
+                                <li className={`knowledge-documents-item`} key={index}>{file.filename}</li>
+                            ))}
+                        </ul>
+                    </div>
                 </section>
             </article>
         </>

diff --git a/src/style/Knowledge/Knowledge.css b/src/style/Knowledge/Knowledge.css
@@ -24,11 +24,16 @@
 .knowledge-documents {
     height: 55%;
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     border: solid 1px var(--dark-gray);
     border-radius: 1em;
     background-color: var(--black-gray);
 }
 
+/*-----===| Drag n Drop |===-----*/
 .knowledge-header-description {
     height: 25%;
     width: 90%;
@@ -53,4 +58,17 @@
     display: flex;
     align-items: center;
     justify-content: center;
+}
+
+/*-----===| Documents Listing |===-----*/
+.knowledge-documents-header {}
+
+.knowledge-documents-list-container {
+    height: 90%;
+    width: 95%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    overflow: auto;
 }