refactor filestable and actions

Author: summer-cook

src/components/FilesTable/FilesTable.jsx

@@ -2,33 +2,63 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Table } from 'react-bootstrap'
 
-const FilesTable = (addClass, files) => {
-  let headers = ['']
-  return (
-    <Table striped bordered hover size='sm' className={`${addClass}`}>
-      <thead>
-        <tr>
-          {headers.map((header) => {
-            return (
-              <th>
+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'
+  }]
 
-              </th>
+  if (files.length === 0) {
+    return (
+      <h6>You don't have any of these documents 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>
+              )
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {files.map((file) => {
+            const { uuid, filename, uploadedBy, contentLength, createdAt } = file
+            return (
+              <tr key={uuid} className='small'>
+                  <td>{filename}</td>
+                  <td>{uploadedBy}</td>
+                  <td>{contentLength}</td>
+                  <td>{createdAt}</td>
+                  <td><button></button></td>
+              </tr>
             )
           })}
-        </tr>
-      </thead>
-      <tbody>
-        {/* {files.map((file) => {
-          return (
-            <tr>
-
-            </tr>
-          )
-        })} */}
-      </tbody>
-    </Table>
-  )
-}
+        </tbody>
+      </Table>
+    )
+  }}
 
 FilesTable.propTypes = {
   addClass: PropTypes.string,

src/compounds/ActionsGroup/ActionsGroup.jsx

@@ -7,7 +7,6 @@ import ViewFiles from './actions/ViewFiles'
 import './actions-group.scss'
 
 const ActionsGroup = ({ files, handleSendingMessages }) => {
-  console.log(files)
   const [show, setShow] = useState(false)
   const [action, setAction] = useState(null)
 
@@ -20,7 +19,6 @@ const ActionsGroup = ({ files, handleSendingMessages }) => {
     setAction(null)
     setShow(false)
   }
-
   return (
     <>
       <ListGroup className='actions-group'>

src/compounds/ActionsGroup/actions/ViewFiles.jsx

@@ -4,25 +4,40 @@ import { Offcanvas, Tab, Tabs } from 'react-bootstrap'
 import FilesTable from '../../../components/FilesTable/FilesTable'
 
 const ViewFiles = ({ files, handleClose, show }) => {
+  const documentTabs = [
+    {
+      eventKey: 'files',
+      title: 'Attachments',
+      status: 'Other File'
+    },
+    {
+      eventKey: 'status-updates',
+      title: 'Status Updates',
+      status: 'Status Update'
+    },
+    {
+      eventKey: 'payment-status-files',
+      title: 'Payment Status Files',
+      // TODO(@summer-cook): fill this in when Sherman adds a file of this type
+      status: 'TODO:FILL THIS IN'
+    },
+  ]
   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'>
-            <Tabs
-              defaultActiveKey="files"
-              id="document-tabs"
-            >
-              <Tab eventKey="files" title="Attachments" className='p-2'>
-                <FilesTable files={files} />
-              </Tab>
-              <Tab eventKey="status-updates" title="Status Updates" className='p-2'>
-                goodbye
-              </Tab>
-              <Tab eventKey="payment-status-files" title="Payment Status Files" className='p-2'>
-                goodbye
-              </Tab>
+            <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))
+                return (
+                  <Tab eventKey={eventKey} title={title} className='p-2'>
+                    <FilesTable files={filteredFiles} status={status} />
+                  </Tab>
+                )
+              })}
             </Tabs>
         </Offcanvas.Body>
       </Offcanvas>