Merge branch 'shareablelink' into 'master'

Shareablelink #39

See merge request !39

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/Deffolders.js

@@ -83,7 +83,7 @@ export default function Deffolders( {currentFolder} ){
     }
   return (
     <>
-      <Button style={{maxWidth : "80px"}} onClick={openModel} variant="primary" size="sm">
+      <Button style={{maxWidth : "80px"}} className="mr-2" onClick={openModel} variant="primary" size="sm">
         <FontAwesomeIcon icon={faBolt} />
       </Button>
     </>

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

@@ -5,6 +5,7 @@ import { ROOT_FOLDER, useFolder } from '.././hooks/useFolder'
 import Folder from './Folder'
 import FolderNav from './FolderNav'
 import Deffolders from './Deffolders'
+import Sharelink from './Sharelink'
 import { useParams } from 'react-router-dom'
 import copyright from './copyright'
 import { Link } from 'react-router-dom'
@@ -13,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 (
@@ -41,6 +41,7 @@ const Hero = ({ handleLogout }) => {
           {childFolders.length == 0 && folder.parentId == null && folder.id!=null &&  (
             <Deffolders currentFolder={folder} />
           )}
+          {folder.id!=null &&  ( <Sharelink currentFolder={folder} /> )}
         </div>
 
         {childFolders.length > 0 && (

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, 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 [clipBoard, setClipBoard] = useState(false)
+  function openModal() {
+    setOpen(true)
+  }
+  function closeModal() {
+    setOpen(false)
+  }
+
+  return (
+    <>
+      <Button
+        style={{ maxWidth: '80px' }}
+        onClick={openModal}
+        className='mr-2'
+        variant='primary'
+        size='sm'
+      >
+        <FontAwesomeIcon icon={faLink} />
+      </Button>
+      <Modal show={open} onHide={closeModal}>
+        <Modal.Body>
+          <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}>
+            Close
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  )
+}