AssignNav

digital-course-file/src/Routes.js

@@ -61,9 +61,13 @@ const Routes = () => {
       <Switch>
         {/*Folders*/}
         <Route path='/folder/:folderId' exact component={Hero} />
-        <Route path='/assignment' component={Assignments} />
+        <Route path='/assignment' exact component={Assignments} />
+        <Route path='/assignment/:folderId' exact component={Assignments} />
+        {/* <Route path='/assignment/:assignId' exact component={Assignments} /> */}
+
         <Route path='/' exact component={Signin} />
         <Route path='/signin' exact component={Signin} />
+
         <Route path='/copyright' component={copyright} />
         <Route path='/folder/copyright' component={copyright} />
         <Route path='/forgot-password' component={ForgotPassword} />

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

@@ -100,15 +100,17 @@ export function useAssignment( folderId = null, folder= null) {
 
     return database.a_folders
             .where("userId","==", firebase.auth().currentUser.uid)
+            .where("parentId", "==" ,folderId)
             .orderBy("createdAt")
             .onSnapshot(snapshot => {
                 dispatch({
                     type: ACTIONS.SET_CHILD_FOLDERS,
                     payload : { childFolders : snapshot.docs.map(database.formatDoc) }
                 })
-            console.log(snapshot.docs.map(database.formatDoc))
+            // console.log(snapshot.docs.map(database.formatDoc))
             })
     },[folderId])
+
     // useEffect(() => {
     //     if(firebase.auth().currentUser)
     //     {
@@ -124,7 +126,6 @@ export function useAssignment( folderId = null, folder= null) {
     //         })
     //     )
     //     }
-        
     //   }, [folderId])
 
     return state;

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

+import { React,useState,Fragment } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFolder } from "@fortawesome/free-solid-svg-icons"
+import { Button,Modal,Form } from "react-bootstrap";
+import { Link } from "react-router-dom";
+import { useHistory } from "react-router-dom";
+import { database } from '../fire.js'
+import firebase from 'firebase'
+import { useContextMenu, Menu, Item, Separator } from "react-contexify";
+import "react-contexify/dist/ReactContexify.css";
+
+export default function Assg_folder({folder}) {
+    const MENU_ID = "#aadsd299dfsdwqwdasc29";
+    const history = useHistory();
+
+    const [showit, setShowit] = useState(false);
+    const [showit1, setShowit1] = useState(false);
+    const [fname,setFname] = useState(folder.name);
+    const [fid,setFid] = useState(folder.id);
+    const [uploaddetail,setuploadDetail] = useState("");
+    const [name, setName] = useState(folder.name);
+
+    const { show } = useContextMenu({
+        id: MENU_ID,
+      });
+
+      function closeModal(){
+        setShowit(false);
+        setShowit1(false);
+    }
+      function displayMenu(e) {
+        show(e, { props: { id: Number(e.currentTarget.id) , folderId : folder.id , folderName : folder.name, showit : showit , details : folder.createdAt} });
+      }
+    
+      function handleItemClick({ event, props, data, triggerEvent}) {
+        switch (event.currentTarget.id) {
+          case "open":
+            history.push(`/assignment/${props.folderId}`);
+            break;
+
+          case "rename":
+            setFid(props.folderId);
+            setShowit1(true);
+            setName(props.folderName);
+            break;
+
+          case "details":
+            setShowit(true);
+            setFname(props.folderName);
+            setuploadDetail(Date((props.details).toMillis()));
+            break;
+  
+        }
+      }
+
+
+      function handleSubmit(e){
+
+        //Renaming the current folder in database
+        e.preventDefault();
+        const docRef = database.folders.doc(fid);
+        docRef.update({"name": name});
+        closeModal();
+        
+        //Changing name of path in all child folders
+        var folderdel = database.folders
+        .where("userId","==", firebase.auth().currentUser.uid)
+        .where("parents", "array-contains", fid);
+        folderdel.get().then(function(querySnapshot) {
+            querySnapshot.forEach(function(doc) {
+              const child_folder_id = doc.id;
+              const child_folder_path = doc.data().path;
+              for (var key in child_folder_path) {
+                if(child_folder_path[key].id == fid){
+                  child_folder_path[key].name = name;
+                }
+              }
+              const docRef1 = database.folders.doc(child_folder_id);
+              docRef1.update({"path": child_folder_path});
+            });
+        });
+      }
+
+    return (
+      <Fragment>
+        <div>
+        <Button 
+            onContextMenu={displayMenu}
+            id={folder.id}
+            to={`/assignment/${folder.id}`} 
+            variant="outline-secondary" 
+            className="text-truncate w-100" 
+            as={Link}>
+            <FontAwesomeIcon icon={faFolder} className="mr-2"/>
+            {folder.name}
+        </Button>
+        
+        {/* CONTEXT MENU FOR THE COMPONENT */}
+        <Menu id={MENU_ID}>
+            <Item id="open" onClick={handleItemClick} >
+              Open
+            </Item>
+            <Item id="share" onClick={handleItemClick}>
+              Share
+            </Item>
+            <Item id="delete" onClick={handleItemClick}>
+              Delete
+            </Item>
+        </Menu>
+
+
+        {/* FOR SHOWING DETAILS OF THE FOLDER */}
+        <Modal show={showit} onHide={closeModal}>
+            <Modal.Body>
+            <h3>Folder details</h3>
+                <p>Folder  :  {fname}</p>
+                <p>Created On : {(""+uploaddetail).substring(0,34)+"(IST)"}</p>
+            </Modal.Body>
+            <Modal.Footer>
+            <Button variant="danger" onClick={closeModal}>
+                  Close
+                </Button>
+              </Modal.Footer>
+          </Modal>
+
+          {/* FOR RENAMING THE FOLDER */}
+          <Modal show={showit1} onHide={closeModal} >
+            <Form onSubmit={handleSubmit}>
+              <Modal.Body>
+                <Form.Group>
+                  <Form.Label>RENAME FOLDER</Form.Label>
+                  <Form.Control
+                    type="text"
+                    required
+                    value={name}
+                    onChange={e => setName(e.target.value)}
+                  />
+                </Form.Group>
+              </Modal.Body>
+              <Modal.Footer>
+              <Button variant="success" type="submit">
+                  Rename
+                </Button>
+                <Button variant="danger" onClick={closeModal}>
+                  Cancel
+                </Button>
+              </Modal.Footer>
+            </Form>
+          </Modal>
+
+        </div>
+        </Fragment>
+    );
+
+}
\ No newline at end of file

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

+import { react,Fragment } from 'react'
+import { Breadcrumb } from 'react-bootstrap'
+import { Link } from 'react-router-dom'
+import { ROOT_FOLDER } from '../hooks/useAssignment'
+
+export default function Assg_nav({ currentFolder }) {
+  let path = currentFolder === ROOT_FOLDER ? [] : [ROOT_FOLDER]
+
+  if (currentFolder) {
+    path.push(currentFolder)
+  }
+
+  console.log(path)
+  return (
+    <Fragment>
+    <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 ? `/assignment/${folder.id}` : '/assignment',
+          }}
+          className='text-truncate d-inline-block'
+          style={{ maxWidth: '200px' }}
+        >
+          {folder.name}
+        </Breadcrumb.Item>
+      ))}
+    </Breadcrumb>
+    </Fragment>
+  )
+}
\ No newline at end of file

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

@@ -3,20 +3,15 @@ import AddFolder from './AddFolder'
 import AddFile from './AddFile'
 import { Container, Navbar, Nav } from 'react-bootstrap'
 import { useAssignment } from '.././hooks/useAssignment'
-import Folder from './Folder'
-import FolderNav from './FolderNav'
-import Deffolders from './Deffolders'
-import Sharelink from './Sharelink'
-import Deletefolder from './Deletefolder'
+import Assg_folder from './Assg_folder'
+import Assg_nav from './Assg_nav'
 import { useParams, useLocation } from 'react-router-dom'
-import File from './File'
 import 'firebase/storage'
 import Loader from 'react-loader-spinner'
 import Dropzone from './Dropzone'
 import ParticlesBg from 'particles-bg'
-import Sidebar from './Sidebar'
 
-const Assignments = ({ handleLogout }) => {
+const Assignments = () => {
   const { folderId } = useParams()
 //   const { state = {} } = useLocation()
 
@@ -27,6 +22,8 @@ const Assignments = ({ handleLogout }) => {
 
   const { folder, childFolders } = useAssignment(folderId)
 
+  console.log(childFolders);
+
   if (!folder) {
     return (
       <>
@@ -45,6 +42,9 @@ const Assignments = ({ handleLogout }) => {
   if (folder.id !== 'copyright') {
     return (
       <>
+        
+        <Assg_nav currentFolder={folder} />
+
         {/* <Sidebar/> */}
         <Container fluid >
           <ParticlesBg type='cobweb' bg={true} />
@@ -57,7 +57,7 @@ const Assignments = ({ handleLogout }) => {
                   style={{ maxWidth: '250px' }}
                   className='p-2'
                 >
-                  <Folder folder={childFolder}></Folder>
+                  <Assg_folder folder={childFolder}></Assg_folder>
                 </div>
               ))}
             </div>

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

@@ -14,7 +14,6 @@ import 'firebase/storage'
 import Loader from 'react-loader-spinner'
 import Dropzone from './Dropzone'
 import ParticlesBg from 'particles-bg'
-import Sidebar from './Sidebar'
 
 const Hero = ({ handleLogout }) => {
   const { folderId } = useParams()

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

@@ -26,6 +26,7 @@ export default function CreateAssignment({ currentFolder }) {
     database.a_folders.add({
       name: name,
       userId: firebase.auth().currentUser.uid,
+      parentId: null,
       date: date,
       createdAt: database.getTime(),
       desp: desp,