Skip to content
Snippets Groups Projects
Commit 852d9f00 authored by Nidharshan A's avatar Nidharshan A
Browse files

Merge branch 'master' into 'minorchange' 

# Conflicts:
#   digital-course-file/src/user/Hero.js
parents 25acc1db 357f7d21
No related branches found
No related tags found
1 merge request!37Restore OldState
Show whitespace changes
Inline Side-by-side
digital-course-file/public/index.html
+ 1
− 1
View file @ 852d9f00
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Digital Course File System</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
......
digital-course-file/src/fire.js
+ 6
− 3
View file @ 852d9f00
import firebase from 'firebase' import firebase from 'firebase'
// import "firebase/firestore" import "firebase/auth"
import "firebase/firestore"
import "firebase/storage"
// Your web app's Firebase configuration // Your web app's Firebase configuration
var firebaseConfig = { var firebaseConfig = {
...@@ -23,5 +25,6 @@ import firebase from 'firebase' ...@@ -23,5 +25,6 @@ import firebase from 'firebase'
getTime : firebase.firestore.FieldValue.serverTimestamp, getTime : firebase.firestore.FieldValue.serverTimestamp,
formatDoc : doc => { return {id : doc.id, ...doc.data()} }, formatDoc : doc => { return {id : doc.id, ...doc.data()} },
} }
export const storage = fire.storage()
export const auth = fire.auth()
export default fire; export default fire;
digital-course-file/src/hooks/useFolder.js
+ 21
− 14
View file @ 852d9f00
import { useState,useReducer, useEffect } from "react"; import { useState,useReducer, useEffect } from "react";
import { database } from '../fire.js' import { database } from '../fire.js'
import firebase from 'firebase' import firebase from 'firebase'
import Loader from "react-loader-spinner";
export const ROOT_FOLDER = {name: 'Root', id : null , path : [] , parents : []}; export const ROOT_FOLDER = {name: 'Root', id : null , path : [] , parents : []};
...@@ -14,6 +12,7 @@ export function useFolder( folderId = null, folder= null) { ...@@ -14,6 +12,7 @@ export function useFolder( folderId = null, folder= null) {
SELECT_FOLDER : 'select-folder', SELECT_FOLDER : 'select-folder',
UPDATE_FOLDER : 'update-folder', UPDATE_FOLDER : 'update-folder',
SET_CHILD_FOLDERS : 'set_child_folders', SET_CHILD_FOLDERS : 'set_child_folders',
SET_CHILD_FILES: "set-child-files",
} }
function reducer( state, { type,payload } ){ function reducer( state, { type,payload } ){
...@@ -38,6 +37,11 @@ export function useFolder( folderId = null, folder= null) { ...@@ -38,6 +37,11 @@ export function useFolder( folderId = null, folder= null) {
...state, ...state,
childFolders : payload.childFolders, childFolders : payload.childFolders,
}; };
case ACTIONS.SET_CHILD_FILES:
return {
...state,
childFiles: payload.childFiles,
};
default: default:
return state; return state;
...@@ -85,15 +89,6 @@ export function useFolder( folderId = null, folder= null) { ...@@ -85,15 +89,6 @@ export function useFolder( folderId = null, folder= null) {
useEffect( () => { useEffect( () => {
if (!firebase.auth().currentUser) {
return <><div className='centered'><Loader
type="Puff"
color="#00BFFF"
height={100}
width={100}
timeout={3000} //3 secs
/></div></>
}
return database.folders return database.folders
.where("parentId", "==" ,folderId) .where("parentId", "==" ,folderId)
.where("userId","==", firebase.auth().currentUser.uid) .where("userId","==", firebase.auth().currentUser.uid)
...@@ -105,6 +100,18 @@ export function useFolder( folderId = null, folder= null) { ...@@ -105,6 +100,18 @@ export function useFolder( folderId = null, folder= null) {
}) })
}) })
},[folderId]) },[folderId])
useEffect(() => {
return (
database.files
.where("folderId", "==", folderId)
.where("userId", "==", firebase.auth().currentUser.uid)
.onSnapshot(snapshot => {
dispatch({
type: ACTIONS.SET_CHILD_FILES,
payload: { childFiles: snapshot.docs.map(database.formatDoc) },
})
})
)
}, [folderId])
return state; return state;
} }
digital-course-file/src/user/AddFile.js 0 → 100644
+ 145
− 0
View file @ 852d9f00
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 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/File.js 0 → 100644
+ 16
− 0
View file @ 852d9f00
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
+ 42
− 21
View file @ 852d9f00
import React, { useEffect, useState } from 'react' import React from 'react'
import AddFolder from './AddFolder' import AddFolder from './AddFolder'
import AddFile from './AddFile'
import { Container, Button, Navbar, Nav } from 'react-bootstrap' import { Container, Button, Navbar, Nav } from 'react-bootstrap'
import { ROOT_FOLDER, useFolder } from '.././hooks/useFolder' import { ROOT_FOLDER, useFolder } from '.././hooks/useFolder'
import Folder from './Folder' import Folder from './Folder'
...@@ -9,31 +10,29 @@ import DeleteFolder from './DeleteFolder' ...@@ -9,31 +10,29 @@ import DeleteFolder from './DeleteFolder'
import { useParams } from 'react-router-dom' import { useParams } from 'react-router-dom'
import copyright from './copyright' import copyright from './copyright'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import Loader from 'react-loader-spinner' import File from './File'
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import firebase from "../fire";
const Hero = ({ handleLogout }) => { const Hero = ({ handleLogout }) => {
const { folderId } = useParams() const { folderId } = useParams()
const { folder, childFolders } = useFolder(folderId) const { state = {} } = useLocation()
console.log(folder); const { folder, childFolders, childFiles } = useFolder(folderId, state.folder)
if (!folder) {
return ( return (
<> <>
<div className='centered'> <section className='hero'>
<Loader <nav>
type='Puff' <Navbar.Brand as={Link} to='/'>
color='#00BFFF' <h2>Course File System</h2>
height={100} </Navbar.Brand>
width={100}
timeout={3000} //3 secs <button className='logoutbutton' onClick={handleLogout}>
/> Logout
</div> </button>
</> </nav>
) </section>
}
return (
<>
<Container fluid> <Container fluid>
<div className='d-flex align-items-center'> <div className='d-flex align-items-center'>
<FolderNav currentFolder={folder} /> <FolderNav currentFolder={folder} />
...@@ -57,7 +56,29 @@ const Hero = ({ handleLogout }) => { ...@@ -57,7 +56,29 @@ const Hero = ({ handleLogout }) => {
))} ))}
</div> </div>
)} )}
{childFolders.length > 0 && childFiles.length > 0 && <hr />}
{childFiles.length > 0 && (
<div className="d-flex flex-wrap">
{childFiles.map(childFile => (
<div
key={childFile.id}
style={{ maxWidth: "250px" }}
className="p-2"
>
<File file={childFile} />
</div>
))}
</div>
)}
</Container>
<Navbar fixed='bottom' variant='light' bg='light'>
<Container className='ml-sm-2'>
<Nav.Link eventKey={2} href='copyright'>
&copy; Digital Course File Group 2
</Nav.Link>
</Container> </Container>
</Navbar>
</> </>
) )
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment