Skip to content

Commit b74c1ea

Browse files
medy-iomedy-io
authored
US253: Refactoring ParticipantInfo component (#254)
* US253: Refactoring ParticipantInfo component * US253: Refactoring ParticipantInfo component * US253: Refactoring PR
1 parent 9421b6f commit b74c1ea

File tree

4 files changed

+47
-81
lines changed

4 files changed

+47
-81
lines changed

‎frontend/src/components/ParticipantInfo.js‎

Lines changed: 33 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
// TODO:
2+
/**
3+
* 1. Breakup into participant and visit child components
4+
* 2. Break fields into smaller individual components for re-use in other forms
5+
* 3. Break up state in MobX for field re-use
6+
*/
7+
18
/* eslint-disable indent */
29
import React, { useContext, useEffect } from "react"
310
import { rootStoreContext } from "../stores/RootStore"
@@ -75,52 +82,39 @@ const ParticipantInfo = observer(() => {
7582
const rootStore = useContext(rootStoreContext)
7683
// particiant store derived from root store
7784
const participantStore = rootStore.ParticipantStore
78-
const [insurers, setInsurers] = React.useState([])
79-
// list of all programs
80-
const [programList, setProgramList] = React.useState([])
81-
// list of all services
82-
const [serviceList, setServiceList] = React.useState([])
83-
const [open, setOpen] = React.useState("")
8485
// set up history for routing pushes
8586
const history = useHistory()
8687
// get existing participant if applicable else its undefined
8788
const existingParticipant = toJS(participantStore.participant)
8889
// get existing visit if applicable else its undefined
8990
const existingVisit = toJS(participantStore.visit)
90-
// useEffect is a hook that gets called after every render/re-render. Empty array second argument prevents it from running again.
91+
const insurers = toJS(participantStore.insurers)
92+
const programList = toJS(participantStore.programs)
93+
const serviceList = toJS(participantStore.services)
94+
95+
// useEffect is a hook that gets called after every render/re-render. Empty array second argument prevents it from running again.
9196
useEffect(() => {
92-
// self invoked async function making api calls for insurers and programs
9397
;(async () => {
94-
// save insurers locally
95-
await setInsurers(participantStore.getInsuranceList())
96-
// save programs locally
97-
await setProgramList(
98-
participantStore.getProgramList().filter(item => !item.is_frozen)
99-
)
98+
// kick off api calls for insurance list from Mobx
99+
await participantStore.getInsurers()
100+
// kick off api calls for program list from Mobx
101+
await participantStore.getPrograms()
100102
})()
101-
// if existing participant exists then auto fill the fields
102103
if (
103104
existingParticipant.id &&
104105
existingVisit.id &&
105106
existingVisit.program &&
106107
existingVisit.service
107108
) {
108-
// preload services
109-
let serviceList = participantStore
110-
.getProgramList()
111-
.find(val => val.id === existingVisit.program)
112-
setServiceList(serviceList.services)
109+
// preload chosen services based on visit programs
110+
participantStore.setServiceList(
111+
programList.find(program => program.id === existingVisit.program)
112+
.services
113+
)
113114
}
114115
// eslint-disable-next-line react-hooks/exhaustive-deps
115116
}, [])
116-
117117
// set store stuff here and update Mobx on submit
118-
const handleClose = () => {
119-
setOpen(false)
120-
}
121-
const handleOpen = () => {
122-
setOpen(true)
123-
}
124118
const handleSubmit = e => {
125119
e.preventDefault()
126120
// if existing participant and vist we are coming from QueueTable, so update particiapnt and visit
@@ -141,10 +135,11 @@ const ParticipantInfo = observer(() => {
141135
}
142136
})
143137
}
144-
138+
// set service listings based on chosen program
145139
const findAndSaveServiceListings = e => {
146-
let serviceList = programList.find(val => val.id === e.target.value)
147-
setServiceList(serviceList.services)
140+
participantStore.setServiceList(
141+
programList.find(program => program.id === e.target.value).services
142+
)
148143
}
149144

150145
const classes = useStyles()
@@ -248,9 +243,6 @@ const ParticipantInfo = observer(() => {
248243
Select Race
249244
</InputLabel>
250245
<Select
251-
open={open.race}
252-
onClose={handleClose.race}
253-
onOpen={handleOpen.race}
254246
required
255247
value={existingParticipant.race}
256248
onChange={e => participantStore.setRace(e.target.value)}
@@ -259,9 +251,6 @@ const ParticipantInfo = observer(() => {
259251
id: "demo-controlled-open-select",
260252
}}
261253
>
262-
{/* <MenuItem value={"American Indian or Alaska Native"}>
263-
American Indian or Alaska Native
264-
</MenuItem> */}
265254
<MenuItem value={"asian pi"}>Asian</MenuItem>
266255
<MenuItem value={"black (african american)"}>
267256
Black or African American
@@ -284,9 +273,6 @@ const ParticipantInfo = observer(() => {
284273
Select Gender
285274
</InputLabel>
286275
<Select
287-
open={open.gender}
288-
onClose={handleClose.gender}
289-
onOpen={handleOpen.gender}
290276
required
291277
value={existingParticipant.gender}
292278
onChange={e =>
@@ -354,9 +340,6 @@ const ParticipantInfo = observer(() => {
354340
Select Insurance
355341
</InputLabel>
356342
<Select
357-
open={open.insuranceType}
358-
onClose={handleClose.insuranceType}
359-
onOpen={handleOpen.insuranceType}
360343
value={existingParticipant.insurer}
361344
onChange={e =>
362345
participantStore.setInsurer(e.target.value)
@@ -408,9 +391,6 @@ const ParticipantInfo = observer(() => {
408391
Choose Program
409392
</InputLabel>
410393
<Select
411-
open={open.program}
412-
onClose={handleClose.program}
413-
onOpen={handleOpen.program}
414394
required
415395
value={existingVisit.program}
416396
onChange={e => {
@@ -422,17 +402,17 @@ const ParticipantInfo = observer(() => {
422402
id: "demo-controlled-open-select",
423403
}}
424404
>
425-
{programList.map((p, index) => (
405+
{programList.map(program => (
426406
<MenuItem
427-
key={index}
407+
key={program.id}
428408
value={
429409
programList && programList.length > 0
430-
? p.id
410+
? program.id
431411
: ""
432412
}
433413
>
434414
{programList && programList.length > 0
435-
? p.name
415+
? program.name
436416
: ""}
437417
</MenuItem>
438418
))}
@@ -447,9 +427,6 @@ const ParticipantInfo = observer(() => {
447427
</InputLabel>
448428
{existingVisit.program && serviceList.length > 0 ? (
449429
<Select
450-
open={open.service}
451-
onClose={handleClose.service}
452-
onOpen={handleOpen.service}
453430
required
454431
value={existingVisit.service}
455432
onChange={e =>
@@ -460,17 +437,17 @@ const ParticipantInfo = observer(() => {
460437
id: "demo-controlled-open-select",
461438
}}
462439
>
463-
{serviceList.map((s, index) => (
440+
{serviceList.map(service => (
464441
<MenuItem
465-
key={index}
442+
key={service.id}
466443
value={
467444
serviceList && serviceList.length > 0
468-
? s.id
445+
? service.id
469446
: ""
470447
}
471448
>
472449
{serviceList && serviceList.length > 0
473-
? s.name
450+
? service.name
474451
: ""}
475452
</MenuItem>
476453
))}
@@ -485,9 +462,6 @@ const ParticipantInfo = observer(() => {
485462
Select Priority Level
486463
</InputLabel>
487464
<Select
488-
open={open.priorityLevel}
489-
onClose={handleClose.priorityLevel}
490-
onOpen={handleOpen.priorityLevel}
491465
value={existingVisit.urgency}
492466
onChange={e =>
493467
participantStore.setVisitUrgency(e.target.value)

‎frontend/src/components/ParticipantsList.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,7 @@ const ParticipantsList = observer(() => {
142142
onClick={() => {
143143
participantStore.setDefaultParticipant()
144144
participantStore.setDefaultVisit()
145+
participantStore.setServiceList([])
145146
}}
146147
>
147148
<Grid container>

‎frontend/src/components/QueueTable.js‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useContext, useState, useEffect } from "react"
1+
import React, { useContext, useState } from "react"
22
import { observer } from "mobx-react-lite"
33
import PropTypes from "prop-types"
44
import { makeStyles } from "@material-ui/styles"
@@ -34,17 +34,6 @@ const QueueTable = observer(queueData => {
3434
const [notesVisit, setNotesVisit] = useState(1)
3535
const history = useHistory()
3636

37-
useEffect(() => {
38-
// self invoked async function making api calls for insurers and programs
39-
;(async () => {
40-
// kick off api calls for insurers from Mobx
41-
await participantStore.getInsurers()
42-
// kick off api calls for programs from Mobx
43-
await participantStore.getPrograms()
44-
})()
45-
// eslint-disable-next-line react-hooks/exhaustive-deps
46-
}, [])
47-
4837
const handleNotesClick = visitId => {
4938
setNotesVisit(visitId)
5039
toggleVisibleDialog()

‎frontend/src/stores/ParticipantStore.js‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,27 +9,32 @@ export class ParticipantStore {
99
}
1010

1111
// Store Params
12+
// full participant list
1213
@observable participants = []
14+
// single participant for editing
1315
@observable participant = {}
1416
// list of all insurers fetched via api
1517
@observable insurers = []
1618
// list of all programs with nested services fetched via api
1719
@observable programs = []
20+
// params for participant searching
1821
@observable params = {}
1922
// singular participant visit
2023
@observable visit = {}
2124
// flag for triggering route to Queue table once Participant Info has bee sent
2225
@observable routeToQueueTable = false
26+
@observable services = []
2327

2428
// computed
2529
// if user has input a value for search, enable search else disable search
2630
@computed get toggleSearch() {
27-
let hasString =
31+
// if the params obj has any new prop with a length > 0 and its ppId or fName or lName, then enable
32+
let hasSearchString =
2833
Object.keys(this.params).length > 0 &&
2934
(this.params.pp_id || this.params.first_name || this.params.last_name)
3035
? true
3136
: false
32-
return hasString ? false : true
37+
return !hasSearchString
3338
}
3439

3540
// Setters
@@ -59,6 +64,7 @@ export class ParticipantStore {
5964
urgency: "",
6065
}
6166
}
67+
// ParticipantList Component Actions
6268
@action setParticipantsList = data => {
6369
this.participants = data
6470
}
@@ -87,7 +93,7 @@ export class ParticipantStore {
8793
this.insurers = data
8894
}
8995
@action setPrograms = data => {
90-
this.programs = data
96+
this.programs = data.filter(item => !item.is_frozen)
9197
}
9298
@action setRouteToQueue = data => {
9399
this.routeToQueueTable = data
@@ -139,15 +145,11 @@ export class ParticipantStore {
139145
@action setVisitParticipantId = data => {
140146
this.visit.participant = data
141147
}
142-
143-
// Getters
144-
getInsuranceList = () => {
145-
return toJS(this.insurers)
146-
}
147-
getProgramList = () => {
148-
return toJS(this.programs)
148+
@action setServiceList = data => {
149+
this.services = data
149150
}
150151

152+
// Utils
151153
createStartDate = () => {
152154
return format(new Date(), "yyyy-MM-dd")
153155
}

0 commit comments

Comments
 (0)