US-adding insurers, services and programs

Author: Chris Medykiewicz

frontend/src/api/index.js

@@ -15,6 +15,7 @@ import {
   createVisits,
   patchVisit,
 } from "./visitEndpoints"
+import { getInsurers } from "./insurersEndpoints"
 
 const create = () => {
   const api = apisauce.create({
@@ -44,6 +45,7 @@ const create = () => {
     updateVisits: updateVisits(api),
     createVisits: createVisits(api),
     patchVisit: patchVisit(api),
+    getInsurers: getInsurers(api),
   }
 }
 

frontend/src/api/insurersEndpoints.js

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

frontend/src/components/ParticipantInfo.js

@@ -99,6 +99,7 @@ const ParticipantInfo = observer(() => {
   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(() => {
     if (participantIndex > -1) {
@@ -122,7 +123,7 @@ const ParticipantInfo = observer(() => {
         note: data[participantIndex].note,
       })
     }
-  }, [])
+  }, [data, participantIndex])
 
   const createStartDate = () => {
     return format(new Date(), "yyyy-MM-dd")
@@ -400,18 +401,9 @@ const ParticipantInfo = observer(() => {
                           id: "demo-controlled-open-select",
                         }}
                       >
-                        <MenuItem value="">
-                          <em>None</em>
-                        </MenuItem>
-                        <MenuItem value={"Insurance Plan 1"}>
-                          Insurance Plan 1
-                        </MenuItem>
-                        <MenuItem value={"Insurance Plan 2"}>
-                          Insurance Plan 2
-                        </MenuItem>
-                        <MenuItem value={"Insurance Plan 3"}>
-                          Insurance Plan 3
-                        </MenuItem>
+                        {participantStore.insurers.map((insurer, index) => (
+                          <MenuItem key={index}>{insurer.name}</MenuItem>
+                        ))}
                       </Select>
                     </FormControl>
                   </Grid>

frontend/src/stores/ParticipantStore.js

@@ -10,6 +10,8 @@ export class ParticipantStore {
   // Store Params
   participants = []
   participant = {}
+  programs = {}
+  insurers = {}
   params = {}
 
   // Setters
@@ -28,6 +30,9 @@ export class ParticipantStore {
   setParticipant = data => {
     this.participant = data
   }
+  setInsurers = data => {
+    this.insurers = data
+  }
 
   // Getters
   getParticipantsList = () => {
@@ -39,6 +44,9 @@ export class ParticipantStore {
   getParticipant = () => {
     return toJS(this.participant)
   }
+  getInsuranceList = () => {
+    return toJS(this.insurers)
+  }
 
   // API Calls
   getParticipants = flow(function*() {
@@ -60,6 +68,15 @@ export class ParticipantStore {
     }
   })
 
+  getInsurers = flow(function*() {
+    const { ok, data } = yield api.getInsurers()
+    if (ok) {
+      this.setInsurers(data)
+    } else {
+      // TODO: Handle errors
+    }
+  })
+
   updateParticipant = flow(function*() {
     const { ok, data } = yield api.updateParticipant(
       toJS(this.participant.id),