minor updates

digital-course-file/src/Routes.js

-import React from "react"
-import {BrowserRouter, Switch, Route} from "react-router-dom"
+import React, { useState, useEffect } from 'react'
+import { BrowserRouter, Switch, Route } from 'react-router-dom'
 // import PrivateRoutes from "./auth/helper/PrivateRoutes"
 // import Cart from "./core/Cart"
-import Home from "./core/Home"
-import Hero from "./user/Hero"
-import Signin from "./user/Signin"
+import Home from './core/Home'
+import Hero from './user/Hero'
+import Signin from './user/Signin'
 // import UserDashboard from "./user/UserDashboard"
-import copyright from "./user/copyright"
+import copyright from './user/copyright'
+import { Link } from 'react-router-dom'
+import { Container, Button, Navbar, Nav } from 'react-bootstrap'
+import fire from './fire'
+
 
 const Routes = () => {
+  const [user, setUser] = useState('')
+  const authListener = () => {
+    fire.auth().onAuthStateChanged((user) => {
+      if (user) {
+        setUser(user)
+      } else {
+        setUser('')
+      }
+    })
+  }
+
+  useEffect(() => {
+    authListener()
+  }, [])
+  const handleLogout = () => {
+    fire.auth().signOut()
+    //this.props.history.push('/')
+  }
   return (
     <BrowserRouter>
-        <Switch>
+      <section className='hero'>
+        <nav>
+          <Navbar.Brand as={Link} to='/'>
+            <h2>Course File System</h2>
+          </Navbar.Brand>
 
+          {user && (
+              <Link to="/">
+            <button  className='logoutbutton' onClick={()=>handleLogout}>
+              Logout
+            </button></Link>
+          )}
+        </nav>
+      </section>
+      <Switch>
         {/*Folders*/}
-            <Route path = "/folder/:folderId" component ={Hero}/>
-
-            <Route path="/" exact component={Signin}/>
-            <Route path="/signin" exact component={Signin}/>
-            <Route path="/copyright" exact component={copyright}/>
-            {/* <Route path="/cart" exact component={Cart}/> */}
-            {/* <PrivateRoutes path="/user/dashboard" exact component={UserDashboard}/> */}
+        <Route path='/folder/:folderId' component={Hero} />
+        <Route path='/' exact component={Signin} />
+        <Route path='/signin' exact component={Signin} />
+        <Route path='/copyright' exact component={copyright} />
       </Switch>
+       <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>
     </BrowserRouter>
-    );
-
+  )
 }
 
-export default Routes;
\ No newline at end of file
+export default Routes

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 : [] };
 
@@ -83,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)

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

-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import AddFolder from './AddFolder'
 import { Container, Button, Navbar, Nav } from 'react-bootstrap'
 import { useFolder } from '.././hooks/useFolder'
@@ -8,41 +8,37 @@ import Deffolders from './Deffolders'
 import { useParams } from 'react-router-dom'
 import copyright from './copyright'
 import { Link } from 'react-router-dom'
-import Loader from "react-loader-spinner";
+import Loader from 'react-loader-spinner'
 
 const Hero = ({ handleLogout }) => {
   const { folderId } = useParams()
   const { folder, childFolders } = useFolder(folderId)
-  console.log(folder);
+
   if (!folder) {
-        return <><div className='centered'><Loader
-        type="Puff"
-        color="#00BFFF"
+    return (
+      <>
+        <div className='centered'>
+          <Loader
+            type='Puff'
+            color='#00BFFF'
             height={100}
             width={100}
             timeout={3000} //3 secs
-      /></div></>
+          />
+        </div>
+      </>
+    )
   }
 
   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>
-
       <Container fluid>
         <div className='d-flex align-items-center'>
           <FolderNav currentFolder={folder} />
           <AddFolder currentFolder={folder} />
-          {(childFolders.length == 0  && folder.id==null) && <Deffolders currentFolder={folder} />}
+          {childFolders.length == 0 && folder.id == null && (
+            <Deffolders currentFolder={folder} />
+          )}
         </div>
 
         {childFolders.length > 0 && (
@@ -59,13 +55,6 @@ const Hero = ({ handleLogout }) => {
           </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>
     </>
   )
 }