digital-course-file/src/hooks/useFolder.js

@@ -2,7 +2,7 @@ import { useState,useReducer, useEffect } from "react";
 import { database } from '../fire.js'
 import firebase from 'firebase'
 
-export const ROOT_FOLDER = {name: 'Root', id : null , path : [] };
+export const ROOT_FOLDER = {name: 'Root', id : null , path : [] , parents : []};
 
 export function useFolder( folderId = null, folder= null) {
 

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 { storage, database } from '../fire.js'
-import { ROOT_FOLDER } from "digital-course-file/digital-course-file/src/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 => [
-      ...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 uploadTask = storage
-      .ref(`/files/${firebase.auth().currentUser.uid}/${filePath}`)
-      .put(file)
-
-    uploadTask.on(
-      "state_changed",
-      snapshot => {
-        const progress = snapshot.bytesTransferred / snapshot.totalBytes
-        setUploadingFiles(prevUploadingFiles => {
-          return prevUploadingFiles.map(uploadFile => {
-            if (uploadFile.id === id) {
-              return { ...uploadFile, progress: progress }
-            }
-
-            return uploadFile
-          })
-        })
-      },
-      () => {
-        setUploadingFiles(prevUploadingFiles => {
-          return prevUploadingFiles.map(uploadFile => {
-            if (uploadFile.id === id) {
-              return { ...uploadFile, error: true }
-            }
-            return uploadFile
-          })
-        })
-      },
-      () => {
-        setUploadingFiles(prevUploadingFiles => {
-          return prevUploadingFiles.filter(uploadFile => {
-            return uploadFile.id !== id
-          })
-        })
-
-        uploadTask.snapshot.ref.getDownloadURL().then(url => {
-          database.files
-            .where("name", "==", file.name)
-            .where("userId", "==", firebase.auth().currentUser.uid)
-            .where("folderId", "==", currentFolder.id)
-            .get()
-            .then(existingFiles => {
-              const existingFile = existingFiles.docs[0]
-              if (existingFile) {
-                existingFile.ref.update({ url: url })
-              } else {
-                database.files.add({
-                  url: url,
-                  name: file.name,
-                  createdAt: database.getTime(),
-                  folderId: currentFolder.id,
-                  userId: firebase.auth().currentUser.uid,
-                })
-              }
-            })
-        })
-      }
-    )
-  }
-
-  return (
-    <>
-      <label className="btn btn-outline-success btn-sm m-0 mr-2">
-        <FontAwesomeIcon icon={faFileUpload} />
-        <input
-          type="file"
-          onChange={handleUpload}
-          style={{ opacity: 0, position: "absolute", left: "-9999px" }}
-        />
-      </label>
-      {uploadingFiles.length > 0 &&
-        ReactDOM.createPortal(
-          <div
-            style={{
-              position: "absolute",
-              bottom: "1rem",
-              right: "1rem",
-              maxWidth: "250px",
-            }}
-          >
-            {uploadingFiles.map(file => (
-              <Toast
-                key={file.id}
-                onClose={() => {
-                  setUploadingFiles(prevUploadingFiles => {
-                    return prevUploadingFiles.filter(uploadFile => {
-                      return uploadFile.id !== file.id
-                    })
-                  })
-                }}
-              >
-                <Toast.Header
-                  closeButton={file.error}
-                  className="text-truncate w-100 d-block"
-                >
-                  {file.name}
-                </Toast.Header>
-                <Toast.Body>
-                  <ProgressBar
-                    animated={!file.error}
-                    variant={file.error ? "danger" : "primary"}
-                    now={file.error ? 100 : file.progress * 100}
-                    label={
-                      file.error
-                        ? "Error"
-                        : `${Math.round(file.progress * 100)}%`
-                    }
-                  />
-                </Toast.Body>
-              </Toast>
-            ))}
-          </div>,
-          document.body
-        )}
-    </>
-  )
-}

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

@@ -28,13 +28,19 @@ export default function AddFolder( {currentFolder} ){
           path.push( { name : currentFolder.name , id : currentFolder.id} )
       }
 
+      const parents =  [...currentFolder.parents];
+      if(currentFolder!== ROOT_FOLDER){
+          parents.push(currentFolder.id)
+      }
+
       e.preventDefault();
       database.folders.add({
         name : name,
         parentId : currentFolder.id,
         userId: firebase.auth().currentUser.uid,
         path : path,
-        createdAt : database.getTime()
+        createdAt : database.getTime(),
+        parents : parents,
       })
       setName("");
       closeModal();

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

-import { faFile } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import React from "react"
-
-export default function File({ file }) {
-  return (
-    <a
-      href={file.url}
-      target="_blank"
-      className="btn btn-outline-dark text-truncate w-100"
-    >
-      <FontAwesomeIcon icon={faFile} className="mr-2" />
-      {file.name}
-    </a>
-  )
-}
\ No newline at end of file

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

@@ -2,14 +2,15 @@ import React from 'react'
 import AddFolder from './AddFolder'
 import AddFile from './AddFile'
 import { Container, Button, Navbar, Nav } from 'react-bootstrap'
-import { useFolder } from '.././hooks/useFolder'
+import { ROOT_FOLDER, useFolder } from '.././hooks/useFolder'
 import Folder from './Folder'
 import FolderNav from './FolderNav'
 import Deffolders from './Deffolders'
-import { useParams,useLocation } from 'react-router-dom'
+import DeleteFolder from './DeleteFolder'
+import { useParams } from 'react-router-dom'
 import copyright from './copyright'
 import { Link } from 'react-router-dom'
-import File from 'digital-course-file/digital-course-file/src/user/File'
+import File from './File'
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import firebase from "../fire";
 
@@ -36,8 +37,10 @@ const Hero = ({ handleLogout }) => {
         <div className='d-flex align-items-center'>
           <FolderNav currentFolder={folder} />
           <AddFolder currentFolder={folder} />
-          <AddFile currentFolder={folder}/>
-          {childFolders.length == 0 && <Deffolders currentFolder={folder} />}
+          
+          {childFolders.length == 0 && folder.parentId == null && (
+            <Deffolders currentFolder={folder} />
+          )}
         </div>
 
         {childFolders.length > 0 && (