Reset

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

 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 } ){
@@ -37,11 +38,6 @@ export function useFolder( folderId = null, folder= null) {
                     ...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

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/Hero.js

-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 { 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)
+  const { folder, childFolders } = useFolder(folderId)
+  console.log(folder);
 
+  if (!folder) {
     return (
       <>
-      <section className='hero'>
-        <nav>
-          <Navbar.Brand as={Link} to='/'>
-            <h2>Course File System</h2>
-          </Navbar.Brand>
-
-          <button className='logoutbutton' onClick={handleLogout}>
-            Logout
-          </button>
-        </nav>
-      </section>
+        <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'>
-            &copy; Digital Course File Group 2
-          </Nav.Link>
       </Container>
-      </Navbar>
     </>
   )
 }