Skip to content
Snippets Groups Projects
Commit 84a1ea99 authored by Nishita Dash's avatar Nishita Dash
Browse files

Update Hero.js

parent 4ab5ff28
No related branches found
No related tags found
No related merge requests found
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 { useFolder } from '.././hooks/useFolder' import { useFolder } from '.././hooks/useFolder'
import Folder from './Folder' import Folder from './Folder'
import FolderNav from './FolderNav' import FolderNav from './FolderNav'
import Deffolders from './Deffolders' import Deffolders from './Deffolders'
import { useParams } from 'react-router-dom' import { useParams,useLocation } 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 'C:/Users/Dell/Desktop/try/digital-course-file/digital-course-file/src/user/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()
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} />
<AddFolder currentFolder={folder} /> <AddFolder currentFolder={folder} />
{childFolders.length == 0 && folder.parentId == null && folder.id!=null && ( <AddFile currentFolder={folder}/>
<Deffolders currentFolder={folder} /> {childFolders.length == 0 && <Deffolders currentFolder={folder} />}
)}
</div> </div>
{childFolders.length > 0 && ( {childFolders.length > 0 && (
...@@ -54,7 +53,29 @@ const Hero = ({ handleLogout }) => { ...@@ -54,7 +53,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% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment