Merge branch 'FileContext' into 'master'

FileContextMenu

See merge request !45

digital-course-file/package.json

@@ -9,9 +9,12 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.7.1",
+    "axios": "^0.21.1",
     "bootstrap": "^4.6.0",
     "firebase": "^8.2.9",
     "firebaseui": "^4.7.3",
+    "js-file-download": "^0.4.12",
+    "prismic-reactjs": "^1.3.3",
     "react": "^17.0.1",
     "react-bootstrap": "^1.5.0",
     "react-contexify": "^5.0.0",

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

 import { faFile } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import React from "react"
+import {React, useState }from "react"
+import { storage } from '../fire.js'
+import Axios from 'axios';
+import fileDownload from 'js-file-download';
+import { Button,Modal,Form} from 'react-bootstrap';
+import { useContextMenu, Menu, Item } from "react-contexify";
+import "react-contexify/dist/ReactContexify.css";
 
 export default function File({ file }) {
+  const [showit, setShowit] = useState(false);
+  const MENU_ID = "#asvdsdv/asqrca662";
+  const [fname,setFname] = useState(file.name);
+  const [uploaddetail,setuploadDetail] = useState("");
+
+    const { show } = useContextMenu({
+        id: MENU_ID,
+      });
+
+      function closeModal(){
+        setShowit(false);
+    }
+      function displayMenu(e) {
+        show(e, { props: { id: Number(e.currentTarget.id), fileURL : file.url, fileName : file.name, showit : showit , details : file.createdAt} });
+      }
+    
+      function handleItemClick({ event, props,file}) {
+
+        switch (event.currentTarget.id) {
+
+          case "download":
+            // Getting download url of the file and converting it as data to blob using axios and then downloading it
+            var httpsReference = storage.refFromURL(props.fileURL);
+            httpsReference.getDownloadURL()
+            .then((url) => {
+              Axios.get(url, {
+                responseType: 'blob',
+              }).then(res => {
+                fileDownload(res.data, props.fileName);
+              });
+            })
+            .catch((error) => {
+              console.log("ERROR");
+            });
+            break;
+
+          case "details":
+              setShowit(true);
+              setFname(props.fileName);
+              setuploadDetail(Date((props.details).toMillis()));
+            break;
+
+          case "delete":
+            break;
+        }
+      }
+
   return (
+
+    <div id='root'>
     <a
+      onContextMenu={displayMenu}
       href={file.url}
       target="_blank"
       className="btn btn-outline-dark text-truncate w-100"
@@ -12,5 +68,35 @@ export default function File({ file }) {
       <FontAwesomeIcon icon={faFile} className="mr-2" />
       {file.name}
     </a>
+
+        {/* CONTEXT MENU FOR FILE */}
+        <Menu id={MENU_ID}>
+            <Item id="download" onClick={handleItemClick}>
+              Download
+            </Item>
+            <Item id="details" onClick={handleItemClick}>
+              Details
+            </Item>
+            <Item id="delete" onClick={handleItemClick}>
+              Delete
+            </Item>
+        </Menu>
+
+        {/* FOR SHOWING DETAILS OF THE FILE */}
+         <Modal show={showit} onHide={closeModal}>
+            <Modal.Body>
+                <p>File  :  {fname}</p>
+                <p>Uploaded On : {(""+uploaddetail).substring(0,34)+"(IST)"}</p>
+            </Modal.Body>
+            <Modal.Footer>
+            <Button variant="danger" onClick={closeModal}>
+                  Close
+                </Button>
+              </Modal.Footer>
+          </Modal>
+
+
+    </div>
+
   )
 }

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

-import { React,useState,useEffect } from "react";
+import { React,useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faFolder } from "@fortawesome/free-solid-svg-icons"
-import { Button } from "react-bootstrap";
+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 Folder ({folder}) {
+    const MENU_ID = "#aadsd299dfsdwqwdasc29";
     const history = useHistory();
-    const MENU_ID = "#abcd123141asscsc!1223";
+
+    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) {
-        // e.preventDefault();
-        show(e, { props: { id: Number(e.currentTarget.id) , folderId : folder.id} });
+        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}) {
-        // console.log(props.folderId);
         switch (event.currentTarget.id) {
           case "open":
             history.push(`/folder/${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 (
         <div>
         <Button 
@@ -50,6 +94,7 @@ export default function Folder ({folder}) {
             {folder.name}
         </Button>
         
+        {/* CONTEXT MENU FOR THE COMPONENT */}
         <Menu id={MENU_ID}>
             <Item id="open" onClick={handleItemClick} >
               Open
@@ -62,6 +107,45 @@ export default function Folder ({folder}) {
             </Item>
         </Menu>
 
+
+        {/* FOR SHOWING DETAILS OF THE FOLDER */}
+        <Modal show={showit} onHide={closeModal}>
+            <Modal.Body>
+                <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>
     );
 

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

@@ -16,6 +16,7 @@ import ReactDOM from "react-dom"
 import firebase from "../fire";
 import Loader from 'react-loader-spinner'
 
+
 const Hero = ({ handleLogout }) => {
   const { folderId } = useParams()
   const { state = {} } = useLocation()