Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision

Target

Select target project
  • se-project-team/digital-course-file
1 result
Select Git revision
Show changes
Commits on Source (7)
File added
......@@ -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) {
......
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
)}
</>
)
}
......@@ -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();
......
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
......@@ -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 && (
......