US adding insurers programs and services

Author: Chris Medykiewicz

frontend/src/api/index.js

@@ -16,6 +16,7 @@ import {
   patchVisit,
 } from "./visitEndpoints"
 import { getInsurers } from "./insurersEndpoints"
+import { getPrograms } from "./programEndpoints"
 
 const create = () => {
   const api = apisauce.create({
@@ -46,6 +47,7 @@ const create = () => {
     createVisits: createVisits(api),
     patchVisit: patchVisit(api),
     getInsurers: getInsurers(api),
+    getPrograms: getPrograms(api),
   }
 }
 

frontend/src/api/programEndpoints.js

@@ -0,0 +1 @@
+export const getPrograms = api => async () => await api.get("programs/")

frontend/src/components/ParticipantInfo.js

@@ -74,7 +74,7 @@ const ParticipantInfo = observer(() => {
   const rootStore = useContext(rootStoreContext)
   const participantStore = rootStore.ParticipantStore
   const [participant, setParticipant] = React.useState({
-    id: 0,
+    id: null,
     firstName: "",
     lastName: "",
     lastFourSSN: 0,
@@ -86,24 +86,40 @@ const ParticipantInfo = observer(() => {
     hasInsurance: false,
     insuranceType: "",
     insurer: "",
-    program: "",
-    service: "",
     priority: "",
     note: "",
   })
   const [open, setOpen] = React.useState("")
+  const [insurers, setInsurers] = React.useState([])
+  const [programList, setProgramList] = React.useState([])
+  const [program, setProgram] = React.useState({})
+  const [showServices, setShowServices] = React.useState(false)
+  const [serviceList, setServiceList] = React.useState([])
+  const [service, setService] = React.useState({})
+  const [prevVisit, setPrevVisit] = React.useState({})
   const history = useHistory()
 
   let currentParticipant = participantStore.getParticipant()
   let data = participantStore.getParticipantsList()
   let participantIndex = data.findIndex(
     val => val.pp_id === currentParticipant.pp_id
   )
-  participantStore.getInsurers()
   // useEffect is a hook that gets called after every render/re-render.  Empty array second argument prevents it from running again.
   useEffect(() => {
+    ;(async () => {
+      await participantStore.getInsurers()
+      await participantStore.getPrograms()
+      if (participantIndex > -1) {
+        await participantStore.getVisits()
+        let v = await participantStore.getVisitsList()
+        let result = v.find(val => val.participant.id === currentParticipant.id)
+        // eslint-disable-next-line no-console
+        setPrevVisit(result)
+      }
+      setInsurers(await participantStore.getInsuranceList())
+      setProgramList(await participantStore.getProgramList())
+    })()
     if (participantIndex > -1) {
-      // assign incoming participant data if available
       setParticipant({
         id: data[participantIndex].id,
         firstName: data[participantIndex].first_name,
@@ -117,13 +133,17 @@ const ParticipantInfo = observer(() => {
         hasInsurance: data[participantIndex].is_insured,
         insuranceType: data[participantIndex],
         insurer: data[participantIndex].insurer,
-        program: data[participantIndex].program,
-        service: data[participantIndex].service,
         priority: data[participantIndex].priority,
         note: data[participantIndex].note,
       })
     }
-  }, [data, participantIndex])
+  }, [])
+
+  const setProgramAndShowServices = e => {
+    setProgram(e.target.value)
+    setShowServices(true)
+    setServiceList(e.target.value.services)
+  }
 
   const createStartDate = () => {
     return format(new Date(), "yyyy-MM-dd")
@@ -151,11 +171,17 @@ const ParticipantInfo = observer(() => {
       is_insured: participant.hasInsurance,
       insuranceType: participant.insuranceType,
       insurer: participant.insurer,
-      program: participant.program,
-      service: participant.service,
       priority: participant.priority,
       note: participant.note,
     })
+    participantStore.setVisit({
+      id: prevVisit && prevVisit.id ? prevVisit.id : null,
+      participant: participant.id,
+      program: program.id,
+      service: service.id,
+      notes: participant.note,
+      urgency: participant.priority,
+    })
     participantIndex > -1
       ? participantStore.updateParticipant()
       : participantStore.createParticipant()
@@ -357,22 +383,23 @@ const ParticipantInfo = observer(() => {
                         aria-label="insurance"
                         name="hasInsurance"
                         className={classes.group}
-                        value={participant.hasInsurance}
+                        value={participant.hasInsurance === true ? "yes" : "no"}
                         onChange={e =>
                           setParticipant({
                             ...participant,
-                            hasInsurance: e.target.value,
+                            hasInsurance:
+                              e.target.value === "yes" ? true : false,
                           })
                         }
                         style={{ display: "inline" }}
                       >
                         <FormControlLabel
-                          value={true}
+                          value="yes"
                           control={<Radio />}
                           label="Yes"
                         />
                         <FormControlLabel
-                          value={false}
+                          value="no"
                           control={<Radio />}
                           label="No"
                         />
@@ -401,8 +428,17 @@ const ParticipantInfo = observer(() => {
                           id: "demo-controlled-open-select",
                         }}
                       >
-                        {participantStore.insurers.map((insurer, index) => (
-                          <MenuItem key={index}>{insurer.name}</MenuItem>
+                        {insurers.map((company, index) => (
+                          <MenuItem
+                            key={index}
+                            value={
+                              insurers && insurers.length > 0 ? company : null
+                            }
+                          >
+                            {insurers && insurers.length > 0
+                              ? company.name
+                              : ""}
+                          </MenuItem>
                         ))}
                       </Select>
                     </FormControl>
@@ -435,21 +471,21 @@ const ParticipantInfo = observer(() => {
                       onClose={handleClose.program}
                       onOpen={handleOpen.program}
                       required
-                      value={participant.program}
-                      onChange={e =>
-                        setParticipant({
-                          ...participant,
-                          program: e.target.value,
-                        })
-                      }
+                      value={program && program.name ? program.name : null}
+                      onChange={e => setProgramAndShowServices(e)}
                       inputProps={{
                         name: "program",
                         id: "demo-controlled-open-select",
                       }}
                     >
-                      <MenuItem value={"Program 1"}>Program 1</MenuItem>
-                      <MenuItem value={"Program 2"}>Program 2</MenuItem>
-                      <MenuItem value={"Program 3"}>Program 3</MenuItem>
+                      {programList.map((p, index) => (
+                        <MenuItem
+                          key={index}
+                          value={programList && programList.length > 0 ? p : 0}
+                        >
+                          {programList && programList.length > 0 ? p.name : ""}
+                        </MenuItem>
+                      ))}
                     </Select>
                   </FormControl>
                 </Grid>
@@ -458,27 +494,33 @@ const ParticipantInfo = observer(() => {
                     <InputLabel htmlFor="demo-controlled-open-select">
                       Select Service
                     </InputLabel>
-                    <Select
-                      open={open.service}
-                      onClose={handleClose.service}
-                      onOpen={handleOpen.service}
-                      required
-                      value={participant.service}
-                      onChange={e =>
-                        setParticipant({
-                          ...participant,
-                          service: e.target.value,
-                        })
-                      }
-                      inputProps={{
-                        name: "service",
-                        id: "demo-controlled-open-select",
-                      }}
-                    >
-                      <MenuItem value={"Service 1"}>Service 1</MenuItem>
-                      <MenuItem value={"Service 2"}>Service 2</MenuItem>
-                      <MenuItem value={"Service 3"}>Service 3</MenuItem>
-                    </Select>
+                    {showServices ? (
+                      <Select
+                        open={open.service}
+                        onClose={handleClose.service}
+                        onOpen={handleOpen.service}
+                        required
+                        value={service && service.name ? service.name : null}
+                        onChange={e => setService(e.target.value)}
+                        inputProps={{
+                          name: "service",
+                          id: "demo-controlled-open-select",
+                        }}
+                      >
+                        {serviceList.map((s, index) => (
+                          <MenuItem
+                            key={index}
+                            value={
+                              serviceList && serviceList.length > 0 ? s : 0
+                            }
+                          >
+                            {serviceList && serviceList.length > 0
+                              ? s.name
+                              : ""}
+                          </MenuItem>
+                        ))}
+                      </Select>
+                    ) : null}
                   </FormControl>
                 </Grid>
                 <br />
@@ -503,11 +545,11 @@ const ParticipantInfo = observer(() => {
                         id: "demo-controlled-open-select",
                       }}
                     >
-                      <MenuItem value={"1"}>1 (Lowest)</MenuItem>
-                      <MenuItem value={"2"}>2</MenuItem>
-                      <MenuItem value={"3"}>3</MenuItem>
-                      <MenuItem value={"4"}>4</MenuItem>
-                      <MenuItem value={"5"}>5 (Highest)</MenuItem>
+                      <MenuItem value={"_1"}>1 (Lowest)</MenuItem>
+                      <MenuItem value={"_2"}>2</MenuItem>
+                      <MenuItem value={"_3"}>3</MenuItem>
+                      <MenuItem value={"_4"}>4</MenuItem>
+                      <MenuItem value={"_5"}>5 (Highest)</MenuItem>
                     </Select>
                   </FormControl>
                 </Grid>

frontend/src/components/ParticipantsList.js

@@ -22,6 +22,7 @@ const ParticipantsList = observer(() => {
   useEffect(() => {
     setIsLoading(true)
     participantsStore.getParticipants()
+    participantsStore.getInsurers()
     setIsLoading(false)
   }, [participantsStore])