Merge pull request #3 from EnjoyBacon7/Code-Refactor

Code refactor

Author: EnjoyBacon7

web/src/components/CbToastsContainer.js

@@ -20,16 +20,16 @@ function CbToastsContainer() {
     return (
         <ToastContainer className="p-3" position='bottom-end'>
             {notifications.map((notification) => (
-                <Toast onClick={() => { removeNotification(notification.id) }}>
+                <Toast onClose={() => { removeNotification(notification.id) }}>
                     <Toast.Header>
-                        <strong className="me-auto">Upload in progress...</strong>
+                        <strong className="me-auto">{notification.header}</strong>
                         <small>
                             {toastAge(notification)}
                         </small>
 
                     </Toast.Header>
                     <Toast.Body>
-                        <ProgressBar animated now={notification.progress} />
+                        <ProgressBar animated={notification.progress !== 100} variant={notification.progress !== 100 ? "info" : "success"} now={notification.progress} />
                     </Toast.Body>
                 </Toast>
             ))}
@@ -41,7 +41,7 @@ export default CbToastsContainer;
 
 function toastAge(notification) {
 
-    const ageSeconds = Math.floor((Date.now() - notification.id) / 1000);
+    const ageSeconds = Math.floor((Date.now() - notification.age) / 1000);
     const ageMinutes = Math.floor(ageSeconds / 60);
 
     if (ageSeconds < 60) {

web/src/components/CbToastsContext.js

@@ -6,8 +6,23 @@ const NotificationContext = createContext();
 export function NotificationProvider({ children }) {
   const [notifications, setNotifications] = useState([]);
 
-  const addNotification = (header, progress) => {
-    const newNotification = { id: Date.now(), header, progress };
+  const addNotification = (id, type, progress) => {
+
+    var header = ""
+
+    switch (type) {
+      case 1: // Upload
+        if (progress === 100) {
+          header = "Upload Complete"
+        } else {
+          header = "Upload in progress..."
+        }
+        break;
+      default:
+        break;
+    }
+
+    const newNotification = { id, header, progress, age: Date.now() };
     setNotifications([...notifications, newNotification]);
   };
 

web/src/components/CbUpload.js

@@ -4,6 +4,7 @@ import { useParams } from 'react-router-dom';
 import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
 import { useNavigate } from 'react-router-dom';
+import { v4 as uuidv4 } from 'uuid';
 
 // Local imports
 import { useNotification } from './CbToastsContext';
@@ -66,7 +67,7 @@ export function CbUpload({ loadFiles }) {
     let start = 0;
     let end = 0;
 
-    const uploadFile = (file, start, end, callback) => {
+    const uploadFile = (file, start, end, callback, uploadId) => {
 
         // Ceate form data using chunk info and shareId
         const chunk = file.slice(start, end);
@@ -81,11 +82,11 @@ export function CbUpload({ loadFiles }) {
         request.open('POST', `/api/upload?shareId=${encodeURIComponent(shareId)}`, true);
         request.onreadystatechange = function () {
             if (request.status >= 200 && request.status < 400) {
-                addNotification('Uploading ' + file.name, start / file.size * 100);
+                addNotification(uploadId, 1, start / file.size * 100);
                 start = end;
                 end = Math.min(end + chunkSize, file.size);
                 if (start != end && !lastChunkSent) {
-                    uploadFile(file, start, end, callback)
+                    uploadFile(file, start, end, callback, uploadId)
                 }
                 if (start == end && !lastChunkSent) {
                     callback();
@@ -100,6 +101,8 @@ export function CbUpload({ loadFiles }) {
 
     const handleUpload = (files) => {
 
+        let uploadId = uuidv4();
+
         const uploadNextFile = () => {
             if (files.length > 0) {
                 let start = 0;
@@ -108,7 +111,7 @@ export function CbUpload({ loadFiles }) {
                 uploadFile(files.pop(), start, end, () => {
                     loadFiles(); // Load files after each file is uploaded
                     uploadNextFile(); // Upload the next file
-                });
+                }, uploadId);
             }
         };
 

web/src/routes/CbRoot.js

@@ -15,8 +15,6 @@ export function CbRoot( { isHome } ) {
 
     // Useful hooks
     const [shareId, setShareId] = useState(useParams().shareId);
-    console.log(shareId)
-    console.log(isHome)
     const navigate = useNavigate();
     // Hooks if in share
     const [viewMode, setViewMode] = useState("list");
@@ -34,7 +32,6 @@ export function CbRoot( { isHome } ) {
 
     function loadFiles() {
         const shareId_forLoad = window.location.pathname.split('/')[2]; // Use useRef instead?
-        console.log("loadFiles")
         var request = new XMLHttpRequest();
         request.open('GET', `/api/search?shareId=${shareId_forLoad}`, true);
         request.onload = function () {
@@ -59,7 +56,6 @@ export function CbRoot( { isHome } ) {
             setFileInfo([]);
             loadFiles();
         }
-        console.log("useEffect")
     }, [isHome]);
 
     return (