From 20a3f10e0f29291eb562bcd3960b04941564b4f6 Mon Sep 17 00:00:00 2001 From: cbenu4cse18036 <cb.en.u4cse18036@cb.students.amrita.edu> Date: Wed, 24 Mar 2021 11:39:20 +0530 Subject: [PATCH] Reset --- digital-course-file/src/hooks/useFolder.js | 37 +++++------ digital-course-file/src/user/AddFolder.js | 8 ++- digital-course-file/src/user/Hero.js | 75 ++++++++-------------- 3 files changed, 50 insertions(+), 70 deletions(-) diff --git a/digital-course-file/src/hooks/useFolder.js b/digital-course-file/src/hooks/useFolder.js index 0012fb7..bc8aba7 100644 --- a/digital-course-file/src/hooks/useFolder.js +++ b/digital-course-file/src/hooks/useFolder.js @@ -1,8 +1,10 @@ import { useState,useReducer, useEffect } from "react"; import { database } from '../fire.js' import firebase from 'firebase' +import Loader from "react-loader-spinner"; -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) { @@ -12,7 +14,6 @@ export function useFolder( folderId = null, folder= null) { SELECT_FOLDER : 'select-folder', UPDATE_FOLDER : 'update-folder', SET_CHILD_FOLDERS : 'set_child_folders', - SET_CHILD_FILES: "set-child-files", } function reducer( state, { type,payload } ){ @@ -36,12 +37,7 @@ export function useFolder( folderId = null, folder= null) { return{ ...state, childFolders : payload.childFolders, - }; - case ACTIONS.SET_CHILD_FILES: - return { - ...state, - childFiles: payload.childFiles, - }; + }; default: return state; @@ -89,6 +85,15 @@ export function useFolder( folderId = null, folder= null) { 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 .where("parentId", "==" ,folderId) .where("userId","==", firebase.auth().currentUser.uid) @@ -100,18 +105,6 @@ export function useFolder( folderId = null, folder= null) { }) }) },[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; -} +} \ No newline at end of file diff --git a/digital-course-file/src/user/AddFolder.js b/digital-course-file/src/user/AddFolder.js index 046bb10..3cd1a5b 100644 --- a/digital-course-file/src/user/AddFolder.js +++ b/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(); diff --git a/digital-course-file/src/user/Hero.js b/digital-course-file/src/user/Hero.js index 5896cd5..68e3684 100644 --- a/digital-course-file/src/user/Hero.js +++ b/digital-course-file/src/user/Hero.js @@ -1,43 +1,46 @@ -import React from 'react' +import React, { useEffect, useState } 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 copyright from './copyright' +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 FontAwesomeIcon from '@fortawesome/react-fontawesome'; -import firebase from "../fire"; +import Loader from 'react-loader-spinner' const Hero = ({ handleLogout }) => { const { folderId } = useParams() - const { state = {} } = useLocation() - const { folder, childFolders, childFiles } = useFolder(folderId, state.folder) - - return ( - <> - <section className='hero'> - <nav> - <Navbar.Brand as={Link} to='/'> - <h2>Course File System</h2> - </Navbar.Brand> + const { folder, childFolders } = useFolder(folderId) + console.log(folder); - <button className='logoutbutton' onClick={handleLogout}> - Logout - </button> - </nav> - </section> + if (!folder) { + return ( + <> + <div className='centered'> + <Loader + type='Puff' + color='#00BFFF' + height={100} + width={100} + timeout={3000} //3 secs + /> + </div> + </> + ) + } + return ( + <> <Container fluid> <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 && ( @@ -53,29 +56,7 @@ const Hero = ({ handleLogout }) => { ))} </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'> - © Digital Course File Group 2 - </Nav.Link> - </Container> - </Navbar> </> ) } -- GitLab