use new participants visits endpoint to display visits on table.

CodeForPhilly · Dec 22, 2020 · 59f5220 · 59f5220
1 parent b54b32d
commit 59f5220
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 40 deletions.
diff --git a/frontend/src/api/index.js b/frontend/src/api/index.js
@@ -6,6 +6,7 @@ import {
   createParticipant,
   updateParticipant,
   getParticipantById,
+  getParticipantVisits,
 } from "./participantEndpoints"
 import { createToken, verifyToken } from "./authEndpoints"
 import { getQueue } from "./queueEndpoints"
@@ -47,6 +48,7 @@ const create = () => {
     createParticipant: createParticipant(api),
     updateParticipant: updateParticipant(api),
     getParticipantById: getParticipantById(api),
+    getParticipantVisits: getParticipantVisits(api),
     getVisits: getVisits(api),
     updateVisits: updateVisits(api),
     createVisits: createVisits(api),

diff --git a/frontend/src/api/participantEndpoints.js b/frontend/src/api/participantEndpoints.js
@@ -25,6 +25,9 @@ export const getParticipantByName = api => async (firstname, lastname) =>
 export const getParticipant = api => async id =>
   await api.get(`/participants/${id}`)
 
+export const getParticipantVisits = api => async id =>
+  await api.get(`/participants/${id}/visits/`)
+
 export const updateParticipant = api => async (id, body) =>
   await api.put(`/participants/${id}/`, body)
 

diff --git a/frontend/src/components/ParticipantTableComponent/PrevPointTableHead.js b/frontend/src/components/ParticipantTableComponent/PrevPointTableHead.js
@@ -18,12 +18,17 @@ const useStyles = makeStyles(theme => ({
   },
 }))
 
-const PrevPointTableHead = ({ headerTitles, sidebarView }) => {
+const PrevPointTableHead = ({
+  headerTitles,
+  sidebarView,
+  forParticipantTable = true,
+}) => {
   const classes = useStyles()
   const [linkTitle, setLinkTitle] = useState({
     mobile: true,
     title: sidebarView === SEARCH ? "Edit Participant" : "Populate SEP Form",
   })
+  const [allTitles, setAllTitles] = useState(headerTitles)
 
   useEffect(() => {
     if (sidebarView === SEARCH) {
@@ -33,11 +38,18 @@ const PrevPointTableHead = ({ headerTitles, sidebarView }) => {
     }
   }, [sidebarView])
 
+  useEffect(() => {
+    if (forParticipantTable) {
+      // if this header component starts to be used a lot, we can swap the default value to false
+      setAllTitles([...headerTitles, linkTitle])
+    }
+  }, [forParticipantTable, headerTitles, linkTitle])
+
   return (
     <TableHead aria-label="thead">
       <TableRow>
         {headerTitles
-          ? [...headerTitles, linkTitle].map(({ title, mobile }, index) => (
+          ? allTitles.map(({ title, mobile }, index) => (
               <TableCell
                 key={`${title}_${index}`}
                 aria-label="cell"
@@ -55,6 +67,7 @@ const PrevPointTableHead = ({ headerTitles, sidebarView }) => {
 PrevPointTableHead.propTypes = {
   headerTitles: PropTypes.array,
   sidebarView: PropTypes.string,
+  forParticipantTable: PropTypes.bool,
 }
 
 export default PrevPointTableHead
diff --git a/frontend/src/components/QueueComponent/QueueTable/QueueTable.js b/frontend/src/components/QueueComponent/QueueTable/QueueTable.js
@@ -124,7 +124,7 @@ const QueueTable = observer(({ queueData }) => {
                 notes: rowData.notes ? rowData.notes : "",
                 urgency: rowData.urgency,
               })
-              history.push(`/participants/${rowData.id}`)
+              history.push(`/participants/${rowData.participantId}`)
             },
           },
         ]}

diff --git a/frontend/src/components/VisitRouter/VisitTable.js b/frontend/src/components/VisitRouter/VisitTable.js
@@ -1,21 +1,28 @@
 import React from "react"
-import { Link, useParams } from "react-router-dom"
+import { Link } from "react-router-dom"
 import Grid from "@material-ui/core/Grid"
+import Paper from "@material-ui/core/Paper"
+import Fab from "@material-ui/core/Fab"
 import Container from "@material-ui/core/Container"
-import { PrevPointHeading } from "../Typography"
-import PrevPointButton from "../PrevPointButton"
+import VerifiedUserIcon from "@material-ui/icons/VerifiedUser"
+import { PrevPointCopy, PrevPointHeading } from "../Typography"
 import PrevPointTableHead from "../ParticipantTableComponent/PrevPointTableHead"
 import { TableBody, TableCell, TableRow, Table } from "@material-ui/core"
 import PropTypes from "prop-types"
+import { useEffect } from "react"
 
-const VisitTable = ({ fullName /** current participants visits*/ }) => {
-  const { participantId } = useParams()
+const VisitTable = ({ fullName, getParticipantVisits, participantVisits }) => {
+  useEffect(() => {
+    getParticipantVisits()
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fullName])
 
   const mockHeaderTitles = [
-    { title: "will be", mobile: true },
-    { title: "for visits", mobile: true },
-    { title: "relating to", mobile: true },
-    { title: "a participant", mobile: true },
+    { title: "Program", mobile: true },
+    { title: "Service", mobile: true },
+    { title: "Date", mobile: true },
+    { title: "See Details", mobile: true },
+    // { title: "a participant", mobile: true },
   ]
 
   return (
@@ -24,34 +31,51 @@ const VisitTable = ({ fullName /** current participants visits*/ }) => {
         <Grid item xs={12}>
           <div>
             <PrevPointHeading>
-              {`${fullName}'s previous visits`}
+              {`${fullName}'s Previous Visits`}
             </PrevPointHeading>
           </div>
-          <Table aria-label="visits table">
-            <PrevPointTableHead headerTitles={mockHeaderTitles} />
-            <TableBody>
-              <TableRow>
-                <TableCell>Lorem</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell>Lorem</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell>Lorem</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell>Lorem</TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-          <div>
-            <PrevPointButton
-              component={Link}
-              to={`/participants/${participantId}/visits/visitId`}
-            >
-              each row would have this button
-            </PrevPointButton>
-          </div>
+          <Paper>
+            <Table class="visits-table" aria-label="visits table">
+              <PrevPointTableHead
+                headerTitles={mockHeaderTitles}
+                forParticipantTable={false}
+              />
+              <TableBody>
+                {participantVisits.map(visit => (
+                  <TableRow key={visit.id}>
+                    <TableCell>
+                      <PrevPointCopy>{visit.program.name}</PrevPointCopy>
+                    </TableCell>
+                    <TableCell>
+                      <PrevPointCopy>{visit.service.name}</PrevPointCopy>
+                    </TableCell>
+                    <TableCell>
+                      <PrevPointCopy>
+                        {new Date(visit.created_at).toLocaleDateString(
+                          "en-US",
+                          {
+                            year: "numeric",
+                            month: "2-digit",
+                            day: "2-digit",
+                            timeZone: "UTC", //the the database's Datefield is not timezone aware, so without the localestring assumes UTC. this was causing an off by one error
+                          }
+                        )}
+                      </PrevPointCopy>
+                    </TableCell>
+                    <TableCell>
+                      <Link
+                        to={`/participants/${visit.participant}/visits/${visit.id}`} //participant is just an id on this object
+                      >
+                        <Fab color="primary" size="small" aria-label="add">
+                          <VerifiedUserIcon />
+                        </Fab>
+                      </Link>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </Paper>
         </Grid>
       </Grid>
     </Container>
@@ -60,6 +84,8 @@ const VisitTable = ({ fullName /** current participants visits*/ }) => {
 
 VisitTable.propTypes = {
   fullName: PropTypes.string,
+  getParticipantVisits: PropTypes.func,
+  participantVisits: PropTypes.array,
 }
 
 export default VisitTable
diff --git a/frontend/src/components/VisitRouter/index.js b/frontend/src/components/VisitRouter/index.js
@@ -41,6 +41,12 @@ const VisitRouter = observer(() => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  const getParticipantVisits = async () => {
+    // the route and the participant in store are validated in this component's parent, ExistingParticipantView
+    // thus there should be no need to pass any other id than the current participant in the store
+    await participantStore.getParticipantVisits(participantStore.participant.id)
+  }
+
   const handleSubmitVisit = async () => {
     // TODO: logic protecting against concurrent queue entries
     // if existing visit we are coming from QueueTable, so update visit
@@ -93,7 +99,11 @@ const VisitRouter = observer(() => {
         ) : null}
       </Route>
       <Route exact path="/participants/:participantId/visits">
-        <VisitTable fullName={fullName} />
+        <VisitTable
+          fullName={fullName}
+          getParticipantVisits={() => getParticipantVisits()}
+          participantVisits={participantStore.visitList}
+        />
       </Route>
       <Route
         exact

diff --git a/frontend/src/stores/ParticipantStore.js b/frontend/src/stores/ParticipantStore.js
@@ -24,7 +24,7 @@ export class ParticipantStore {
   @observable routeToQueueTable = false
   @observable services = []
   @observable visitList = []
-  @observable isEditing = false
+  @observable isEditing = false // 'is editing an existing participant'
   @observable sites = []
   @observable currentSite = ""
   @computed get hasVisit() {
@@ -228,6 +228,22 @@ export class ParticipantStore {
       return false
     }
   })
+
+  getParticipantVisits = flow(function*(participantId) {
+    try {
+      const { ok, data, status } = yield api.getParticipantVisits(participantId)
+      if (!ok || !data) {
+        throw new Error(status)
+      }
+
+      this.setVisitsList(data)
+    } catch (error) {
+      const snackbarError = handleSnackbarError(error.message)
+      this.rootStore.UtilityStore.setSnackbarState(snackbarError.message, {
+        severity: snackbarError.severity,
+      })
+    }
+  })
   // called on  =>  ParticipantList.js
   getParticipants = flow(function*(params) {
     this.rootStore.UtilityStore.setLoadingState(true)