great work commited

digital-course-file/package-lock.json

@@ -28,6 +28,7 @@
         "react-github-login-button": "^1.0.1",
         "react-google-button": "^0.7.2",
         "react-icons": "^4.2.0",
+        "react-id-generator": "^3.0.1",
         "react-loader-spinner": "^4.0.0",
         "react-router-bootstrap": "^0.25.0",
         "react-router-dom": "^5.2.0",
@@ -15741,6 +15742,14 @@
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz",
       "integrity": "sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ=="
     },
+    "node_modules/react-id-generator": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/react-id-generator/-/react-id-generator-3.0.1.tgz",
+      "integrity": "sha512-YxorMaYxB8ItXA3Cuadcl/8ZaquU9Tzrrr5ogFL8tNqevF96cmCtx3LZLXYqBEj3BxoV9aBIK5yJjIuX/XHQ1A==",
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
@@ -34276,6 +34285,12 @@
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz",
       "integrity": "sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ=="
     },
+    "react-id-generator": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/react-id-generator/-/react-id-generator-3.0.1.tgz",
+      "integrity": "sha512-YxorMaYxB8ItXA3Cuadcl/8ZaquU9Tzrrr5ogFL8tNqevF96cmCtx3LZLXYqBEj3BxoV9aBIK5yJjIuX/XHQ1A==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",

digital-course-file/package.json

@@ -24,6 +24,7 @@
     "react-github-login-button": "^1.0.1",
     "react-google-button": "^0.7.2",
     "react-icons": "^4.2.0",
+    "react-id-generator": "^3.0.1",
     "react-loader-spinner": "^4.0.0",
     "react-router-bootstrap": "^0.25.0",
     "react-router-dom": "^5.2.0",

digital-course-file/src/user/AddFile.js

-import React, { useState } from "react"
-import ReactDOM from "react-dom"
-import { faFileUpload } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import React, { useState } from 'react'
+import ReactDOM from 'react-dom'
+import { faFileUpload } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { storage, database } from '../fire.js'
-import { ROOT_FOLDER } from "../hooks/useFolder"
-import { v4 as uuidV4 } from "uuid"
-import { ProgressBar, Toast } from "react-bootstrap"
+import { ROOT_FOLDER } from '../hooks/useFolder'
+import { v4 as uuidV4 } from 'uuid'
+import { ProgressBar, Toast } from 'react-bootstrap'
 import firebase from 'firebase'
 
 export default function AddFile({ currentFolder }) {
   const [uploadingFiles, setUploadingFiles] = useState([])
 
-
   function handleUpload(e) {
     const file = e.target.files[0]
     if (currentFolder == null || file == null) return
 
     const id = uuidV4()
-    setUploadingFiles(prevUploadingFiles => [
+    setUploadingFiles((prevUploadingFiles) => [
       ...prevUploadingFiles,
       { id: id, name: file.name, progress: 0, error: false },
     ])
-    const filePath =
-      currentFolder === ROOT_FOLDER
-        ? `${currentFolder.path.join("/")}/${file.name}`
-        : `${currentFolder.path.join("/")}/${currentFolder.name}/${file.name}`
+    const uniqueid = uuidV4()
 
     const uploadTask = storage
-      .ref(`/files/${firebase.auth().currentUser.uid}/${filePath}`)
+      .ref(`/files/${firebase.auth().currentUser.uid}/${uniqueid}`)
       .put(file)
 
     uploadTask.on(
-      "state_changed",
-      snapshot => {
+      'state_changed',
+      (snapshot) => {
         const progress = snapshot.bytesTransferred / snapshot.totalBytes
-        setUploadingFiles(prevUploadingFiles => {
-          return prevUploadingFiles.map(uploadFile => {
+        setUploadingFiles((prevUploadingFiles) => {
+          return prevUploadingFiles.map((uploadFile) => {
             if (uploadFile.id === id) {
               return { ...uploadFile, progress: progress }
             }
@@ -45,8 +41,8 @@ export default function AddFile({ currentFolder }) {
         })
       },
       () => {
-        setUploadingFiles(prevUploadingFiles => {
-          return prevUploadingFiles.map(uploadFile => {
+        setUploadingFiles((prevUploadingFiles) => {
+          return prevUploadingFiles.map((uploadFile) => {
             if (uploadFile.id === id) {
               return { ...uploadFile, error: true }
             }
@@ -55,19 +51,19 @@ export default function AddFile({ currentFolder }) {
         })
       },
       () => {
-        setUploadingFiles(prevUploadingFiles => {
-          return prevUploadingFiles.filter(uploadFile => {
+        setUploadingFiles((prevUploadingFiles) => {
+          return prevUploadingFiles.filter((uploadFile) => {
             return uploadFile.id !== id
           })
         })
 
-        uploadTask.snapshot.ref.getDownloadURL().then(url => {
+        uploadTask.snapshot.ref.getDownloadURL().then((url) => {
           database.files
-            .where("name", "==", file.name)
-            .where("userId", "==", firebase.auth().currentUser.uid)
-            .where("folderId", "==", currentFolder.id)
+            .where('name', '==', file.name)
+            .where('userId', '==', firebase.auth().currentUser.uid)
+            .where('folderId', '==', currentFolder.id)
             .get()
-            .then(existingFiles => {
+            .then((existingFiles) => {
               const existingFile = existingFiles.docs[0]
               if (existingFile) {
                 existingFile.ref.update({ url: url })
@@ -75,6 +71,7 @@ export default function AddFile({ currentFolder }) {
                 database.files.add({
                   url: url,
                   name: file.name,
+                  uniqueid: uniqueid,
                   createdAt: database.getTime(),
                   folderId: currentFolder.id,
                   userId: firebase.auth().currentUser.uid,
@@ -88,31 +85,31 @@ export default function AddFile({ currentFolder }) {
 
   return (
     <>
-      <label className="btn btn-outline-success btn-sm m-0 mr-2">
+      <label className='btn btn-outline-success btn-sm m-0 mr-2'>
         <FontAwesomeIcon icon={faFileUpload} />
         <input
-          name="upload"
-          type="file"
+          name='upload'
+          type='file'
           onChange={handleUpload}
-          style={{ opacity: 0, position: "absolute", left: "-9999px" }}
+          style={{ opacity: 0, position: 'absolute', left: '-9999px' }}
         />
       </label>
       {uploadingFiles.length > 0 &&
         ReactDOM.createPortal(
           <div
             style={{
-              position: "absolute",
-              bottom: "4rem",
-              right: "2rem",
-              maxWidth: "250px",
+              position: 'absolute',
+              bottom: '4rem',
+              right: '2rem',
+              maxWidth: '250px',
             }}
           >
-            {uploadingFiles.map(file => (
+            {uploadingFiles.map((file) => (
               <Toast
                 key={file.id}
                 onClose={() => {
-                  setUploadingFiles(prevUploadingFiles => {
-                    return prevUploadingFiles.filter(uploadFile => {
+                  setUploadingFiles((prevUploadingFiles) => {
+                    return prevUploadingFiles.filter((uploadFile) => {
                       return uploadFile.id !== file.id
                     })
                   })
@@ -120,18 +117,18 @@ export default function AddFile({ currentFolder }) {
               >
                 <Toast.Header
                   closeButton={file.error}
-                  className="text-truncate w-100 d-block"
+                  className='text-truncate w-100 d-block'
                 >
                   {file.name}
                 </Toast.Header>
                 <Toast.Body>
                   <ProgressBar
                     animated={!file.error}
-                    variant={file.error ? "danger" : "primary"}
+                    variant={file.error ? 'danger' : 'primary'}
                     now={file.error ? 100 : file.progress * 100}
                     label={
                       file.error
-                        ? "Error"
+                        ? 'Error'
                         : `${Math.round(file.progress * 100)}%`
                     }
                   />

digital-course-file/src/user/Dropzone.js

@@ -51,13 +51,10 @@ export default function Dropzone({ currentFolder }) {
       ...prevUploadingFiles,
       { id: id, name: file.name, progress: 0, error: false },
     ])
-    const filePath =
-      currentFolder === ROOT_FOLDER
-        ? `${currentFolder.path.join('/')}/${file.name}`
-        : `${currentFolder.path.join('/')}/${currentFolder.name}/${file.name}`
+    const uniqueid = uuidV4()
 
     const uploadTask = storage
-      .ref(`/files/${firebase.auth().currentUser.uid}/${filePath}`)
+      .ref(`/files/${firebase.auth().currentUser.uid}/${uniqueid}`)
       .put(file)
 
     uploadTask.on(
@@ -105,6 +102,7 @@ export default function Dropzone({ currentFolder }) {
                 database.files.add({
                   url: url,
                   name: file.name,
+                  uniqueid:uniqueid,
                   createdAt: database.getTime(),
                   folderId: currentFolder.id,
                   userId: firebase.auth().currentUser.uid,