minor changes and added copy to clipboard to shareable link

digital-course-file/package.json

@@ -14,6 +14,7 @@
     "firebaseui": "^4.7.3",
     "react": "^17.0.1",
     "react-bootstrap": "^1.5.0",
+    "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "^17.0.1",
     "react-github-login-button": "^1.0.1",
     "react-google-button": "^0.7.2",

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

@@ -14,7 +14,6 @@ import Loader from 'react-loader-spinner'
 const Hero = ({ handleLogout }) => {
   const { folderId } = useParams()
   const { folder, childFolders } = useFolder(folderId)
-  console.log(folder);
 
   if (!folder) {
     return (

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

-import { React , useState } from "react";
-import { Button,Modal,Form} from 'react-bootstrap';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faLink } from "@fortawesome/free-solid-svg-icons";
+import { React, useState } from 'react'
+import { Button, Modal, Form } from 'react-bootstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faLink,faPaste } from '@fortawesome/free-solid-svg-icons'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
 
 export default function Sharelink({ currentFolder }) {
-    const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(false)
+  const [clipBoard, setClipBoard] = useState(false)
   function openModal() {
-        setOpen(true);
+    setOpen(true)
   }
   function closeModal() {
-        setOpen(false);
+    setOpen(false)
   }
 
   return (
     <>
-        <Button style={{maxWidth : "80px" }} onClick={openModal} className="mr-2" variant="primary" size="sm" >
+      <Button
+        style={{ maxWidth: '80px' }}
+        onClick={openModal}
+        className='mr-2'
+        variant='primary'
+        size='sm'
+      >
         <FontAwesomeIcon icon={faLink} />
       </Button>
       <Modal show={open} onHide={closeModal}>
         <Modal.Body>
-                {/* text area that will display link */}
-                <p>Sharable link for this folder : </p>
-                <textarea rows="2" cols="55" utofocus readOnly value={"www.dcfstudentview.com/"+String(currentFolder.id)}> 
-                </textarea>
+          <Form.Group>
+            <Form.Label>Sharable link for this folder :</Form.Label>
+            <Form.Label>
+              {'www.dcfstudentview.com/' + String(currentFolder.id)}
+              <p></p>
+              <CopyToClipboard
+              text={'www.dcfstudentview.com/' + String(currentFolder.id)}
+              onCopy={() =>setClipBoard(true)}
+            >
+              <FontAwesomeIcon icon={faPaste} />
+            </CopyToClipboard>
+            {clipBoard ? <span style={{color: 'red'}}>Copied.</span> : null}
+            </Form.Label>
+            
+          </Form.Group>
         </Modal.Body>
         <Modal.Footer>
-                <Button variant="danger" onClick={closeModal}>
+          <Button variant='danger' onClick={closeModal}>
             Close
           </Button>
         </Modal.Footer>
       </Modal>
     </>
-    );
+  )
 }