Merge pull request #162 from scientist-softserv/152-remove-add-attachments

152 Add attachments

Author: summer-cook

src/assets/fontawesome.js

@@ -2,6 +2,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faArrowDown,
   faArrowUp,
+  faDownload,
   faEnvelope,
   faFileLines,
   faListCheck,
@@ -19,6 +20,7 @@ import {
 library.add(
   faArrowDown,
   faArrowUp,
+  faDownload,
   faEnvelope,
   faFileLines,
   faListCheck,

src/components/FilesTable/FilesTable.jsx

@@ -1,9 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {
-  // Button,
-  Table,
-} from 'react-bootstrap'
+import { Table } from 'react-bootstrap'
+import Link from '../Link/Link'
 import { allowNull } from '../../resources/utilityFunctions'
 
 const FilesTable = ({ addClass, files }) => {
@@ -21,17 +19,25 @@ const FilesTable = ({ addClass, files }) => {
           <th>Uploaded By</th>
           <th>Size</th>
           <th>Created At</th>
+          <th aria-label='actions' />
         </tr>
       </thead>
       <tbody>
         {files.map((file) => {
-          const { uuid, fileName, uploadedBy, contentLength, createdAt } = file
+          const { contentLength, createdAt, fileName, href, uploadedBy, uuid } = file
           return (
             <tr key={uuid} className='small'>
               <td>{fileName}</td>
               <td>{uploadedBy}</td>
               <td>{contentLength}</td>
               <td>{createdAt}</td>
+              <td className='text-center'>
+                <Link
+                  icon='fa-download'
+                  href={href}
+                  aria-label='download'
+                />
+              </td>
             </tr>
           )
         })}

src/components/Link/Link.jsx

@@ -11,7 +11,7 @@ const Link = ({ addClass, href, icon, label, style, ...props }) => (
     {...props}
   >
     {icon && (
-      <FontAwesomeIcon icon={icon} className='me-2 small' />
+      <FontAwesomeIcon icon={icon} className={`small ${label.length > 0 && 'me-2'}`} />
     )}
     {label}
   </a>
@@ -21,13 +21,14 @@ Link.propTypes = {
   addClass: PropTypes.string,
   href: PropTypes.string.isRequired,
   icon: PropTypes.string,
-  label: PropTypes.string.isRequired,
+  label: PropTypes.string,
   style: PropTypes.shape({}),
 }
 
 Link.defaultProps = {
   addClass: '',
   icon: '',
+  label: '',
   style: {},
 }
 

src/compounds/ActionsGroup/ActionsGroup.jsx

@@ -7,7 +7,7 @@ import ViewFiles from './actions/ViewFiles'
 import { allowNull } from '../../resources/utilityFunctions'
 import './actions-group.scss'
 
-const ActionsGroup = ({ backgroundColor, handleSendingMessagesOrFiles, initialFiles }) => {
+const ActionsGroup = ({ backgroundColor, handleSendingMessagesOrFiles, files }) => {
   const [show, setShow] = useState(false)
   const [action, setAction] = useState(null)
 
@@ -55,7 +55,7 @@ const ActionsGroup = ({ backgroundColor, handleSendingMessagesOrFiles, initialFi
           <ViewFiles
             backgroundColor={backgroundColor}
             handleClose={handleClose}
-            initialFiles={initialFiles}
+            files={files}
             onSubmit={handleSendingMessagesOrFiles}
           />
         )}
@@ -66,7 +66,7 @@ const ActionsGroup = ({ backgroundColor, handleSendingMessagesOrFiles, initialFi
 ActionsGroup.propTypes = {
   backgroundColor: PropTypes.string,
   handleSendingMessagesOrFiles: PropTypes.func.isRequired,
-  initialFiles: PropTypes.arrayOf(
+  files: PropTypes.arrayOf(
     PropTypes.shape({
       contentLength: PropTypes.string.isRequired,
       contentType: PropTypes.string.isRequired,

src/compounds/ActionsGroup/actions/ViewFiles.jsx

@@ -1,15 +1,24 @@
-import React
-  from 'react'
+import React, { useState, useRef } from 'react'
 import PropTypes from 'prop-types'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
+  Alert,
+  Button,
+  CloseButton,
+  Form,
+  InputGroup,
+  ListGroup,
   Offcanvas,
   Tab,
   Tabs,
 } from 'react-bootstrap'
 import FilesTable from '../../../components/FilesTable/FilesTable'
-import { allowNull } from '../../../resources/utilityFunctions'
+import { allowNull, apiV2CompatibleStrings, convertToBase64 } from '../../../resources/utilityFunctions'
 
-const ViewFiles = ({ backgroundColor, initialFiles, handleClose }) => {
+const ViewFiles = ({ backgroundColor, files, handleClose, onSubmit }) => {
+  const fileRef = useRef(null)
+  const [tempFiles, setTempFiles] = useState([])
+  const [showSuccessAlert, setShowSuccessAlert] = useState(false)
   const documentTabs = [
     {
       eventKey: 'files',
@@ -23,16 +32,83 @@ const ViewFiles = ({ backgroundColor, initialFiles, handleClose }) => {
     },
   ]
 
+  const handleAddFile = async (event) => {
+    event.preventDefault()
+    try {
+      // "event.target.files" returns a FileList, which looks like an array but does not respond to array methods
+      // except "length". we are using the spread syntax to set "files" to be an iterable array
+      const fileArray = [...event.target.files]
+      const newBase64Files = await Promise.all(convertToBase64(fileArray))
+      const newFiles = fileArray.map((file, index) => ({ [file.name]: newBase64Files[index] }))
+      setTempFiles([...tempFiles, ...newFiles])
+      if (showSuccessAlert) {
+        setShowSuccessAlert(false)
+      }
+      fileRef.current.value = ''
+    } catch (error) {
+      throw new Error(error)
+    }
+  }
+
+  const handleSubmit = async (event) => {
+    event.preventDefault()
+    await onSubmit({ files: apiV2CompatibleStrings([...tempFiles]) })
+    if (tempFiles.length > 0) {
+      setShowSuccessAlert(true)
+      setTempFiles([])
+    }
+  }
+
+  const handleDeleteTempFile = (file) => {
+    const remainingFiles = tempFiles.filter((obj) => obj !== file)
+    setTempFiles(remainingFiles)
+  }
+
   return (
     <Offcanvas show onHide={handleClose} placement='end' scroll='true'>
       <Offcanvas.Header className={`d-flex border-bottom px-3 py-2 bg-${backgroundColor}-8`} closeButton>
         <Offcanvas.Title>Documents</Offcanvas.Title>
       </Offcanvas.Header>
       <Offcanvas.Body className='border rounded p-2 m-3'>
+        <Form>
+          <h6 className='mt-3'>Upload Additional Documents</h6>
+          <InputGroup controlId='attachments' className='mb-3'>
+            <Form.Control
+              multiple
+              type='file'
+              onChange={handleAddFile}
+              ref={fileRef}
+            />
+            <Button
+              variant='outline-primary'
+              onClick={handleSubmit}
+              type='submit'
+            >
+              <FontAwesomeIcon icon='fa-upload' />
+            </Button>
+          </InputGroup>
+        </Form>
+        <ListGroup variant='flush'>
+          {tempFiles.map((file) => {
+            const fileName = Object.keys(file)[0]
+            return (
+              <ListGroup.Item key={fileName} className='d-flex align-items-center'>
+                <span>{fileName}</span>
+                <CloseButton onClick={() => handleDeleteTempFile(file)} className='ms-auto' />
+              </ListGroup.Item>
+            )
+          })}
+          {showSuccessAlert
+            && (
+              <Alert variant='success' onClose={() => setShowSuccessAlert(false)} dismissible>
+                Your files have been uploaded successfully. It may take some time for them to appear below.
+              </Alert>
+            )}
+        </ListGroup>
         <Tabs defaultActiveKey='files' id='document-tabs' justify fill>
           {documentTabs && documentTabs.map((tab) => {
             const { eventKey, title, status } = tab
-            const filteredFiles = initialFiles.filter((f) => (status === f.status) || (status === 'Other File' && f.status === null))
+            const filteredFiles = files.filter((f) => (status === f.status) || (status === 'Other File' && f.status === null))
             return (
               <Tab
                 eventKey={eventKey}
@@ -43,6 +119,7 @@ const ViewFiles = ({ backgroundColor, initialFiles, handleClose }) => {
                 <FilesTable
                   files={filteredFiles}
                   status={status}
+                  handleDeleteFile={handleDeleteTempFile}
                 />
               </Tab>
             )
@@ -55,7 +132,7 @@ const ViewFiles = ({ backgroundColor, initialFiles, handleClose }) => {
 
 ViewFiles.propTypes = {
   backgroundColor: PropTypes.string,
-  initialFiles: PropTypes.arrayOf(
+  files: PropTypes.arrayOf(
     PropTypes.shape({
       contentLength: PropTypes.string.isRequired,
       contentType: PropTypes.string.isRequired,
@@ -69,10 +146,11 @@ ViewFiles.propTypes = {
     }),
   ).isRequired,
   handleClose: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
 }
 
 ViewFiles.defaultProps = {
-  backgroundColor: 'secondary'
+  backgroundColor: 'secondary',
 }
 
 export default ViewFiles