add upload form, change variables to account for files

summer-cook · summer-cook · commit b30a64563c7a · 2023-02-03T14:02:23.000-06:00
diff --git a/src/assets/fontawesome.js b/src/assets/fontawesome.js
@@ -7,6 +7,7 @@ import {
   faListCheck,
   faPaperclip,
   faSquareCheck,
+  faUpload,
   faVial,
   faVialCircleCheck,
 } from '@fortawesome/free-solid-svg-icons'
@@ -22,9 +23,10 @@ library.add(
   faFileLines,
   faListCheck,
   faMinusSquare,
+  faPaperclip,
   faPlusSquare,
   faSquareCheck,
-  faPaperclip,
+  faUpload,
   faVial,
   faVialCircleCheck,
 )
diff --git a/src/components/FilesTable/FilesTable.jsx b/src/components/FilesTable/FilesTable.jsx
@@ -1,45 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Table } from 'react-bootstrap'
+import { Button, Table } from 'react-bootstrap'
 
-const FilesTable = ({addClass, files}) => {
-  let headers = [{
-    name: 'File Name',
-    key: 'file-name'
-  },
-  {
-    name: 'Uploaded By',
-    key: 'uploaded-by'
-  },
-  {
-    name: 'Size',
-    key:  'size'
-  },
-  {
-    name: 'Created At',
-    key: 'created-at'
-  },
-  {
-    name: '',
-    key: 'buttons'
-  }]
 
+const FilesTable = ({addClass, files, handleDeleteFile}) => {
   if (files.length === 0) {
     return (
-      <h6>You don't have any of these documents yet.</h6>
+      <h6 className='mt-3'>You do not have this type of document yet.</h6>
     )
   } else {
     return (
       <Table striped bordered hover size='sm' className={`${addClass}`}>
         <thead>
           <tr>
-            {headers.map((header) => {
-              return (
-                <th key={header.key}>
-                  {header.name}
-                </th>
-              )
-            })}
+            <th>File Name</th>
+            <th>Uploaded By</th>
+            <th>Size</th>
+            <th>Created At</th>
+            <th> </th>
           </tr>
         </thead>
         <tbody>
@@ -51,7 +29,14 @@ const FilesTable = ({addClass, files}) => {
                   <td>{uploadedBy}</td>
                   <td>{contentLength}</td>
                   <td>{createdAt}</td>
-                  <td><button></button></td>
+                  <td>
+                    {/* TODO: add an X icon here instead of close button, make sure the handleDeleteFile is working */}
+                    <Button 
+                      primary
+                      onClick={handleDeleteFile}>
+                        Remove
+                    </Button>
+                  </td>
               </tr>
             )
           })}
diff --git a/src/compounds/ActionsGroup/ActionsGroup.jsx b/src/compounds/ActionsGroup/ActionsGroup.jsx
@@ -6,7 +6,7 @@ import SendMessage from './actions/SendMessage'
 import ViewFiles from './actions/ViewFiles'
 import './actions-group.scss'
 
-const ActionsGroup = ({ files, handleSendingMessages }) => {
+const ActionsGroup = ({ initialFiles, handleSendingMessagesOrFiles }) => {
   const [show, setShow] = useState(false)
   const [action, setAction] = useState(null)
 
@@ -22,41 +22,44 @@ const ActionsGroup = ({ files, handleSendingMessages }) => {
   return (
     <>
       <ListGroup className='actions-group'>
-        {/* TODO(@summercook): return the below once the direction of
-          https://github.com/scientist-softserv/webstore/issues/156 has been decided */}
+        {/* TODO(@summercook): return the this and the below commented code
+        once the direction of https://github.com/scientist-softserv/webstore/issues/156
+        has been decided */}
         {/* <ListGroup.Item action variant='primary' onClick={() => handleShow('SendMessage')}>
           <FontAwesomeIcon icon='fa-envelope' />
           Send Message
         </ListGroup.Item> */}
-        <ListGroup.Item action variant='primary' onClick={() => handleShow('ViewFiles')} role='presentation'>
+        <ListGroup.Item
+          action
+          variant='primary'
+          onClick={() => handleShow('ViewFiles')}
+          role='presentation'
+        >
           <FontAwesomeIcon icon='fa-file-lines' />
           View Files
         </ListGroup.Item>
       </ListGroup>
-      {/* TODO(@summercook): return the below once the direction of
-          https://github.com/scientist-softserv/webstore/issues/156 has been decided */}
       {/* {(action === 'SendMessage' && show)
         && (
           <SendMessage
             handleClose={handleClose}
-            onSubmit={handleSendingMessages}
+            onSubmit={handleSendingMessagesOrFiles}
           />
         )} */}
       {(action === 'ViewFiles' && show)
         && (
           <ViewFiles
             show={show}
             handleClose={handleClose}
-            files={files}
+            initialFiles={initialFiles}
+            //onSubmit={handleSendingMessagesOrFiles}
           />
         )}
     </>
   )
 }
 
 // ActionsGroup.propTypes = {
-  // TODO(@summercook): return the below once the direction of
-  // https://github.com/scientist-softserv/webstore/issues/156 has been decided
   //handleSendingMessages: PropTypes.func.isRequired,
 // }
 
diff --git a/src/compounds/ActionsGroup/actions/ViewFiles.jsx b/src/compounds/ActionsGroup/actions/ViewFiles.jsx
@@ -1,9 +1,21 @@
-import React, { useState } from 'react'
+import React, { useState, useRef } from 'react'
 import PropTypes from 'prop-types'
-import { Offcanvas, Tab, Tabs } from 'react-bootstrap'
+import { 
+  Button,
+  CloseButton,
+  Form,
+  InputGroup,
+  ListGroup,
+  Offcanvas,
+  Tab,
+  Tabs } from 'react-bootstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import FilesTable from '../../../components/FilesTable/FilesTable'
+import { apiV2CompatibleStrings, convertToBase64 } from '../../../resources/utilityFunctions'
 
-const ViewFiles = ({ files, handleClose, show }) => {
+const ViewFiles = ({ initialFiles, handleClose, show }) => {
+  const fileRef = useRef(null)
+  const [files, setFiles] = useState([])
   const documentTabs = [
     {
       eventKey: 'files',
@@ -22,19 +34,81 @@ const ViewFiles = ({ files, handleClose, show }) => {
       status: 'TODO:FILL THIS IN'
     },
   ]
+
+  // TODO(summercook): update this method once posting messages is working- may need to use the handleSendingMessagesOrFiles to post
+  // need to check if we should just a different endpoint to post attachments
+  const handleSubmit = (event) => {
+    event.preventDefault()
+    onSubmit({ files: apiV2CompatibleStrings(files) })
+  }
+
+  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] }))
+
+      setFiles([...files, ...newFiles])
+      fileRef.current.value = ''
+    } catch (error) {
+      throw new Error(error)
+    }
+  }
+  
+  const handleDeleteFile = (file) => {
+    const remainingFiles = files.filter((obj) => obj !== file)
+    setFiles(remainingFiles)
+  }
+
   return (
       <Offcanvas show={show} onHide={handleClose} placement='end' scroll='true'>
         <Offcanvas.Header className='d-flex border-bottom px-3 py-2 bg-light' 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'>
+              {files.map((file) => {
+                const fileName = Object.keys(file)[0]
+
+                return (
+                  <ListGroup.Item key={fileName} className='d-flex align-items-center'>
+                    <span>{fileName}</span>
+                    <CloseButton onClick={() => handleDeleteFile(file)} className='ms-auto' />
+                  </ListGroup.Item>
+                )
+              })}
+            </ListGroup>
             <Tabs defaultActiveKey="files" id="document-tabs">
               {documentTabs && documentTabs.map(tab => {
                 const { eventKey, title, status } = tab
-                let filteredFiles = files.filter(f => (status === f.status) || (status === 'Other File' && f.status === null))
+                let filteredFiles = initialFiles.filter(f => (status === f.status) || (status === 'Other File' && f.status === null))
                 return (
                   <Tab eventKey={eventKey} title={title} className='p-2'>
-                    <FilesTable files={filteredFiles} status={status} />
+                    <FilesTable
+                      files={filteredFiles}
+                      status={status}
+                      handleDeleteFile={handleDeleteFile}/>
                   </Tab>
                 )
               })}
