Skip to content

Commit e852343

Browse files
medy-iomedy-io
authored
UStbd: MobX refactoring for Participant Info page (#241)
1 parent 02c9156 commit e852343

File tree

6 files changed

+201
-331
lines changed

6 files changed

+201
-331
lines changed

‎frontend/src/api/index.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import {
1717
} from "./visitEndpoints"
1818
import { getInsurers } from "./insurersEndpoints"
1919
import { getPrograms, getProgram, patchProgram } from "./programEndpoints"
20-
import { getProgramServiceMap } from "./program-service-mapEndpoint"
2120

2221
const create = () => {
2322
const api = apisauce.create({
@@ -51,7 +50,6 @@ const create = () => {
5150
getPrograms: getPrograms(api),
5251
getProgram: getProgram(api),
5352
patchProgram: patchProgram(api),
54-
getProgramServiceMap: getProgramServiceMap(api),
5553
}
5654
}
5755

‎frontend/src/api/program-service-mapEndpoint.js

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎frontend/src/components/ParticipantInfo.js

Lines changed: 52 additions & 162 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,7 @@ import FormLabel from "@material-ui/core/FormLabel"
2020
import Button from "@material-ui/core/Button"
2121
import { observer } from "mobx-react-lite"
2222
import { useHistory } from "react-router-dom"
23-
import { format } from "date-fns"
24-
import { autorun } from "mobx"
23+
import { autorun, toJS } from "mobx"
2524

2625
const useStyles = makeStyles(theme => ({
2726
paper: {
@@ -76,44 +75,18 @@ const ParticipantInfo = observer(() => {
7675
const rootStore = useContext(rootStoreContext)
7776
// particiant store derived from root store
7877
const participantStore = rootStore.ParticipantStore
79-
// init participant state
80-
const [participant, setParticipant] = React.useState({
81-
id: null,
82-
firstName: "",
83-
lastName: "",
84-
lastFourSSN: 0,
85-
dateOfBirth: "",
86-
startDate: "",
87-
ppId: "",
88-
race: "",
89-
gender: "",
90-
hasInsurance: false,
91-
insuranceType: "",
92-
insurer: "",
93-
})
94-
// init visit state
95-
const [visit, setVisit] = React.useState({
96-
id: null,
97-
participant: null,
98-
program: "",
99-
service: "",
100-
notes: "",
101-
urgency: "",
102-
})
103-
// list of all insurerers
10478
const [insurers, setInsurers] = React.useState([])
10579
// list of all programs
10680
const [programList, setProgramList] = React.useState([])
10781
// list of all services
10882
const [serviceList, setServiceList] = React.useState([])
109-
// ???
11083
const [open, setOpen] = React.useState("")
11184
// set up history for routing pushes
11285
const history = useHistory()
11386
// get existing participant if applicable else its undefined
114-
const existingParticipant = participantStore.getParticipant()
87+
const existingParticipant = toJS(participantStore.participant)
11588
// get existing visit if applicable else its undefined
116-
const existingVisit = participantStore.getVisit()
89+
const existingVisit = toJS(participantStore.visit)
11790
// useEffect is a hook that gets called after every render/re-render. Empty array second argument prevents it from running again.
11891
useEffect(() => {
11992
// self invoked async function making api calls for insurers and programs
@@ -126,47 +99,21 @@ const ParticipantInfo = observer(() => {
12699
)
127100
})()
128101
// if existing participant exists then auto fill the fields
129-
if (existingParticipant) {
130-
setParticipant({
131-
id: existingParticipant.id,
132-
firstName: existingParticipant.first_name,
133-
lastName: existingParticipant.last_name,
134-
lastFourSSN: existingParticipant.last_four_ssn,
135-
dateOfBirth: existingParticipant.date_of_birth,
136-
startDate: existingParticipant.start_date,
137-
ppId: existingParticipant.pp_id,
138-
race: existingParticipant.race,
139-
gender: existingParticipant.gender,
140-
hasInsurance: existingParticipant.is_insured,
141-
insuranceType: existingParticipant.insuranceType
142-
? existingParticipant.insuranceType
143-
: "",
144-
insurer: existingParticipant.insurer,
145-
})
146-
if (existingVisit) {
147-
setVisit({
148-
id: existingVisit.id,
149-
participant: existingVisit.participant,
150-
program: existingVisit.program,
151-
service: existingVisit.service,
152-
notes: existingVisit.notes,
153-
urgency: existingVisit.urgency,
154-
})
155-
// preload services
156-
if (existingVisit.program && existingVisit.service) {
157-
let serviceList = participantStore
158-
.getProgramList()
159-
.find(val => val.id === existingVisit.program)
160-
setServiceList(serviceList.services)
161-
}
162-
}
102+
if (
103+
existingParticipant.id &&
104+
existingVisit.id &&
105+
existingVisit.program &&
106+
existingVisit.service
107+
) {
108+
// preload services
109+
let serviceList = participantStore
110+
.getProgramList()
111+
.find(val => val.id === existingVisit.program)
112+
setServiceList(serviceList.services)
163113
}
164114
// eslint-disable-next-line react-hooks/exhaustive-deps
165115
}, [])
166116

167-
const createStartDate = () => {
168-
return format(new Date(), "yyyy-MM-dd")
169-
}
170117
// set store stuff here and update Mobx on submit
171118
const handleClose = () => {
172119
setOpen(false)
@@ -176,36 +123,12 @@ const ParticipantInfo = observer(() => {
176123
}
177124
const handleSubmit = e => {
178125
e.preventDefault()
179-
participantStore.setParticipant({
180-
id: existingParticipant ? participant.id : null,
181-
first_name: participant.firstName,
182-
last_name: participant.lastName,
183-
last_four_ssn: participant.lastFourSSN,
184-
date_of_birth: participant.dateOfBirth,
185-
start_date: existingParticipant
186-
? participant.startDate
187-
: createStartDate(),
188-
pp_id: participant.ppId,
189-
race: participant.race,
190-
gender: participant.gender,
191-
is_insured: participant.hasInsurance,
192-
insuranceType: participant.insuranceType,
193-
insurer: participant.insurer,
194-
})
195-
// if we have a participant and navigated from queuetable or is a new participant set visit
196-
if (
197-
(!existingParticipant && !existingVisit) ||
198-
(existingParticipant && existingVisit)
199-
) {
200-
// set visit in Mobx
201-
participantStore.setVisit(visit)
202-
}
203126
// if existing participant and vist we are coming from QueueTable, so update particiapnt and visit
204-
if (existingParticipant && existingVisit) {
127+
if (existingParticipant.id && existingVisit.id) {
205128
participantStore.updateParticipant()
206129
participantStore.updateVisit()
207130
// if existing participant and no vist we are coming from search, so update particiapnt only
208-
} else if (existingParticipant && !existingVisit) {
131+
} else if (existingParticipant.id && !existingVisit.id) {
209132
participantStore.updateParticipant()
210133
// otherwise we are adding a new participant because both participant and visit will be undefined
211134
} else {
@@ -250,12 +173,9 @@ const ParticipantInfo = observer(() => {
250173
<Input
251174
id="user_first-name"
252175
name="user_first-name"
253-
value={participant.firstName}
176+
value={existingParticipant.first_name}
254177
onChange={e =>
255-
setParticipant({
256-
...participant,
257-
firstName: e.target.value,
258-
})
178+
participantStore.setFirstName(e.target.value)
259179
}
260180
required
261181
/>
@@ -267,12 +187,9 @@ const ParticipantInfo = observer(() => {
267187
<Input
268188
id="user_last-name"
269189
name="user_last-name"
270-
value={participant.lastName}
190+
value={existingParticipant.last_name}
271191
onChange={e =>
272-
setParticipant({
273-
...participant,
274-
lastName: e.target.value,
275-
})
192+
participantStore.setLastName(e.target.value)
276193
}
277194
required
278195
/>
@@ -288,12 +205,9 @@ const ParticipantInfo = observer(() => {
288205
<TextField
289206
id="user_birth-date"
290207
name="user_birth-date"
291-
value={participant.dateOfBirth}
208+
value={existingParticipant.date_of_birth}
292209
onChange={e =>
293-
setParticipant({
294-
...participant,
295-
dateOfBirth: e.target.value,
296-
})
210+
participantStore.setDateOfBirth(e.target.value)
297211
}
298212
required
299213
style={{ marginTop: 40 }}
@@ -311,14 +225,13 @@ const ParticipantInfo = observer(() => {
311225
<Input
312226
id="uuid"
313227
name="uuid"
314-
value={participant.ppId}
315-
onChange={e =>
316-
setParticipant({
317-
...participant,
318-
ppId: e.target.value,
319-
lastFourSSN: +e.target.value.substr(2),
320-
})
321-
}
228+
value={existingParticipant.pp_id}
229+
onChange={e => {
230+
participantStore.setPPId(e.target.value)
231+
participantStore.setLastFourSSN(
232+
+e.target.value.substr(2)
233+
)
234+
}}
322235
required
323236
/>
324237
</FormControl>
@@ -339,13 +252,8 @@ const ParticipantInfo = observer(() => {
339252
onClose={handleClose.race}
340253
onOpen={handleOpen.race}
341254
required
342-
value={participant.race}
343-
onChange={e =>
344-
setParticipant({
345-
...participant,
346-
race: e.target.value,
347-
})
348-
}
255+
value={existingParticipant.race}
256+
onChange={e => participantStore.setRace(e.target.value)}
349257
inputProps={{
350258
name: "race",
351259
id: "demo-controlled-open-select",
@@ -380,12 +288,9 @@ const ParticipantInfo = observer(() => {
380288
onClose={handleClose.gender}
381289
onOpen={handleOpen.gender}
382290
required
383-
value={participant.gender}
291+
value={existingParticipant.gender}
384292
onChange={e =>
385-
setParticipant({
386-
...participant,
387-
gender: e.target.value,
388-
})
293+
participantStore.setGender(e.target.value)
389294
}
390295
inputProps={{
391296
name: "gender",
@@ -419,13 +324,13 @@ const ParticipantInfo = observer(() => {
419324
aria-label="insurance"
420325
name="hasInsurance"
421326
className={classes.group}
422-
value={participant.hasInsurance === true ? "yes" : "no"}
327+
value={
328+
existingParticipant.is_insured === true ? "yes" : "no"
329+
}
423330
onChange={e =>
424-
setParticipant({
425-
...participant,
426-
hasInsurance:
427-
e.target.value === "yes" ? true : false,
428-
})
331+
participantStore.setIsInsured(
332+
e.target.value === "yes" ? true : false
333+
)
429334
}
430335
style={{ display: "inline" }}
431336
>
@@ -452,12 +357,9 @@ const ParticipantInfo = observer(() => {
452357
open={open.insuranceType}
453358
onClose={handleClose.insuranceType}
454359
onOpen={handleOpen.insuranceType}
455-
value={participant.insurer}
360+
value={existingParticipant.insurer}
456361
onChange={e =>
457-
setParticipant({
458-
...participant,
459-
insurer: e.target.value,
460-
})
362+
participantStore.setInsurer(e.target.value)
461363
}
462364
inputProps={{
463365
name: "insuranceType",
@@ -484,8 +386,8 @@ const ParticipantInfo = observer(() => {
484386
</div>
485387
</Grid>
486388

487-
{(!existingParticipant && !existingVisit) ||
488-
(existingParticipant && existingVisit) ? (
389+
{(!existingParticipant.id && !existingVisit.id) ||
390+
(existingParticipant.id && existingVisit.id) ? (
489391
<div>
490392
<Typography
491393
style={{ textAlign: "left" }}
@@ -510,12 +412,9 @@ const ParticipantInfo = observer(() => {
510412
onClose={handleClose.program}
511413
onOpen={handleOpen.program}
512414
required
513-
value={visit.program}
415+
value={existingVisit.program}
514416
onChange={e => {
515-
setVisit({
516-
...visit,
517-
program: e.target.value,
518-
})
417+
participantStore.setVisitProgram(e.target.value)
519418
findAndSaveServiceListings(e)
520419
}}
521420
inputProps={{
@@ -546,18 +445,15 @@ const ParticipantInfo = observer(() => {
546445
<InputLabel htmlFor="demo-controlled-open-select">
547446
Select Service
548447
</InputLabel>
549-
{visit.program && serviceList.length > 0 ? (
448+
{existingVisit.program && serviceList.length > 0 ? (
550449
<Select
551450
open={open.service}
552451
onClose={handleClose.service}
553452
onOpen={handleOpen.service}
554453
required
555-
value={visit.service}
454+
value={existingVisit.service}
556455
onChange={e =>
557-
setVisit({
558-
...visit,
559-
service: e.target.value,
560-
})
456+
participantStore.setVisitService(e.target.value)
561457
}
562458
inputProps={{
563459
name: "service",
@@ -592,12 +488,9 @@ const ParticipantInfo = observer(() => {
592488
open={open.priorityLevel}
593489
onClose={handleClose.priorityLevel}
594490
onOpen={handleOpen.priorityLevel}
595-
value={visit.urgency}
491+
value={existingVisit.urgency}
596492
onChange={e =>
597-
setVisit({
598-
...visit,
599-
urgency: e.target.value,
600-
})
493+
participantStore.setVisitUrgency(e.target.value)
601494
}
602495
inputProps={{
603496
name: "priorityLevel",
@@ -618,12 +511,9 @@ const ParticipantInfo = observer(() => {
618511
style={{ margin: 8, marginTop: 40 }}
619512
placeholder="Add a note"
620513
onChange={e =>
621-
setVisit({
622-
...visit,
623-
notes: e.target.value,
624-
})
514+
participantStore.setVisitNotes(e.target.value)
625515
}
626-
value={visit.notes}
516+
value={existingVisit.notes}
627517
fullWidth
628518
margin="normal"
629519
InputLabelProps={{

0 commit comments

Comments
 (0)