From cc2e804535e66ba658935dbac0562032feb5eb95 Mon Sep 17 00:00:00 2001
From: Nidharshan A <cb.en.u4cse18036@cb.students.amrita.edu>
Date: Wed, 3 Mar 2021 13:57:29 +0000
Subject: [PATCH] Replace FolderNav.js
---
digital-course-file/src/user/FolderNav.js | 82 +++++++++++------------
1 file changed, 40 insertions(+), 42 deletions(-)
diff --git a/digital-course-file/src/user/FolderNav.js b/digital-course-file/src/user/FolderNav.js
index 87059ab..ca67384 100644
--- a/digital-course-file/src/user/FolderNav.js
+++ b/digital-course-file/src/user/FolderNav.js
@@ -1,48 +1,46 @@
-import React from 'react';
-import AddFolder from "./AddFolder";
-import { Container,Button } from "react-bootstrap";
-import { useFolder } from ".././hooks/useFolder";
-import Folder from "./Folder";
-import FolderNav from "./FolderNav";
-import { useParams } from "react-router-dom";
+import { react } from "react";
+import { Breadcrumb } from "react-bootstrap";
+import { Link } from "react-router-dom";
+import { ROOT_FOLDER } from "../hooks/useFolder";
-const Hero=({handleLogout})=>{
+export default function FolderNav( {currentFolder} ) {
- const { folderId } = useParams();
- const {folder, childFolders} = useFolder(folderId);
+ let path = currentFolder === ROOT_FOLDER ? [] : [ROOT_FOLDER]
+ if (currentFolder){
+ path = [...path,...currentFolder.path];
+ }
+
return(
- <>
- <section className="hero">
- <nav>
- <h2>Course File</h2>
- <button className="logoutbutton" onClick={handleLogout}>Logout</button>
- </nav>
- </section>
+ <Breadcrumb
+ className="flex-grow-1"
+ listProps = {{ className : "bg-white pl-0 m-0"}}
+ >
+ {path.map((folder,index) => (
+ <Breadcrumb.Item
+ key={folder.id}
+ linkAs ={Link}
+ linkProps = {{
+ to : folder.id ? `/folder/${folder.id}` : "/",
+ }}
+ className="text-truncate d-inline-block"
+ style = { {maxWidth : "175px"} }
+ >
+ {folder.name}
+ </Breadcrumb.Item>
+ ))}
+ { currentFolder && (
+ <Breadcrumb.Item
+ className="text-truncate d-inline-block"
+ style = { {maxWidth : "200px"} }
+ active
+ >
+ {currentFolder.name}
+ </Breadcrumb.Item>
+ )
- <Container fluid>Contents</Container>
- <Container fluid>
- <div className="d-flex align-items-center">
- <FolderNav currentFolder={folder}/>
- <AddFolder currentFolder={folder}/>
- </div>
-
- {childFolders.length > 0 && (
- <div className="d-flex flex-wrap">
- {childFolders.map(childFolder => (
- <div
- key = {childFolder.id}
- style = { {maxWidth : "250px"}}
- className="p-2"
- >
- <Folder folder={childFolder}></Folder>
- </div>
- ))}
- </div>
- )}
-
- </Container>
- </>
+ }
+ </Breadcrumb>
);
-}
-export default Hero;
\ No newline at end of file
+
+}
\ No newline at end of file
--
GitLab