This repository has been archived by the owner on May 2, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
356 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,154 @@ | ||
import React, { useEffect, useState } from 'react'; | ||
import { Button, Container, Typography, Box, useMediaQuery, useTheme } from '@mui/material'; | ||
import questions from '../../static/data/formSymptomsIntensity.json'; | ||
|
||
const styles = { | ||
centered: { | ||
display: 'flex', | ||
justifyContent: 'center', | ||
alignItems: 'center', | ||
}, | ||
}; | ||
|
||
export default function SymptomsIntensity({ changeStatus, selection }: any) { | ||
const [ansOne, setAnsOne] = useState(false); | ||
const [ansTwo, setAnsTwo] = useState(false); | ||
const [ansThree, setAnsThree] = useState(false); | ||
const [value, setValue] = useState('false'); | ||
const [error, setError] = useState(false); | ||
const [pointValue, setPointValue] = useState(0); | ||
const theme = useTheme(); | ||
const matchesSm = useMediaQuery(theme.breakpoints.down('sm')); | ||
|
||
console.log(selection); | ||
const handleClickOne = () => { | ||
if (ansOne !== true) { | ||
setAnsOne(true); | ||
setAnsTwo(false); | ||
setAnsThree(false); | ||
setError(false); | ||
// setPointValue(questions[id].p1); | ||
} else { | ||
setAnsOne(false); | ||
} | ||
}; | ||
|
||
const handleClickTwo = () => { | ||
if (ansTwo !== true) { | ||
setAnsTwo(true); | ||
setAnsOne(false); | ||
setAnsThree(false); | ||
setError(false); | ||
// setPointValue(questions[id].p2); | ||
} else { | ||
setAnsTwo(false); | ||
} | ||
}; | ||
|
||
const handleClickThree = () => { | ||
if (ansThree !== true) { | ||
setAnsThree(true); | ||
setAnsOne(false); | ||
setAnsTwo(false); | ||
setError(false); | ||
// setPointValue(questions[id].p3); | ||
} else { | ||
setAnsThree(false); | ||
} | ||
}; | ||
|
||
useEffect(() => { | ||
if (value !== 'false') { | ||
changeStatus(value); | ||
} | ||
}, [changeStatus, value]); | ||
|
||
const handleSubmit = () => { | ||
if (!ansOne && !ansTwo && !ansThree) { | ||
setError(true); | ||
} else { | ||
setAnsOne(false); | ||
setAnsTwo(false); | ||
setAnsThree(false); | ||
setValue('response'); | ||
} | ||
}; | ||
|
||
return ( | ||
<div style={{ display: 'flex' }}> | ||
<Box | ||
minHeight="95vh" | ||
width="100%" | ||
flexDirection="column" | ||
sx={{ flexGrow: 1 }} | ||
style={styles.centered} | ||
> | ||
<Container | ||
sx={{ | ||
marginLeft: '1rem', | ||
display: 'flex', | ||
flexDirection: 'column', | ||
alignItems: 'flex-start', | ||
}} | ||
> | ||
<Typography variant="h4" sx={{ marginTop: 1, marginBottom: 1 }}> | ||
What is the severity of your | ||
</Typography> | ||
{selection.map((symptom: number) => ( | ||
<> | ||
<Typography variant="h4" sx={{ marginBottom: 3 }}> | ||
{' '} | ||
{questions[symptom]?.label} | ||
{' '} | ||
</Typography> | ||
<Container sx={{ | ||
display: 'flex', | ||
justifyContent: 'space-around', | ||
width: matchesSm ? '100%' : '80%', | ||
}} | ||
> | ||
<Button | ||
onClick={handleClickOne} | ||
variant={ansOne ? 'contained' : 'outlined'} | ||
sx={{ fontSize: '1.1rem' }} | ||
> | ||
Mild | ||
</Button> | ||
<Button | ||
onClick={handleClickTwo} | ||
variant={ansTwo ? 'contained' : 'outlined'} | ||
sx={{ fontSize: '1.1rem' }} | ||
> | ||
Moderate | ||
</Button> | ||
<Button | ||
onClick={handleClickThree} | ||
variant={ansThree ? 'contained' : 'outlined'} | ||
sx={{ fontSize: '1.1rem' }} | ||
> | ||
Severe | ||
</Button> | ||
</Container> | ||
|
||
</> | ||
))} | ||
</Container> | ||
<Container | ||
sx={{ | ||
marginLeft: '1rem', | ||
marginTop: '2rem', | ||
flexDirection: 'column', | ||
}} | ||
style={styles.centered} | ||
> | ||
{error && ( | ||
<p className="validationError">Please select an option.</p> | ||
)} | ||
<Button onClick={handleSubmit} type="submit" variant="contained" color="primary"> | ||
Continue | ||
</Button> | ||
</Container> | ||
</Box> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,155 @@ | ||
import React, { useEffect, useState } from 'react'; | ||
import { | ||
Button, | ||
Container, | ||
Typography, | ||
Box, | ||
Checkbox, | ||
FormControl, | ||
FormGroup, | ||
FormControlLabel, | ||
useTheme, | ||
useMediaQuery, | ||
} from '@mui/material'; | ||
|
||
import symptoms from '../../static/data/formSymptoms.json'; | ||
|
||
const styles = { | ||
centered: { | ||
display: 'flex', | ||
justifyContent: 'center', | ||
alignItems: 'center', | ||
}, | ||
}; | ||
|
||
export default function SymptomsUpdating({ changeStatus, changeSymptoms }: any) { | ||
const theme = useTheme(); | ||
const midSize = useMediaQuery(theme.breakpoints.down('md')); | ||
const [value, setValue] = useState('false'); | ||
const [checkedSymptoms, setCheckedSymptoms] = useState<number[]>([]); | ||
const [nextQuestions, setNextQuestions] = useState<number[]>([]); | ||
const [error, setError] = useState(false); | ||
const [pointValue, setPointValue] = useState(0); | ||
|
||
const handleCheckboxChange = (symptom: any) => { | ||
if (symptom.id === 13) { | ||
setCheckedSymptoms([13]); | ||
setNextQuestions([]); | ||
setPointValue(0); | ||
} else if (checkedSymptoms.includes(symptom.id)) { | ||
setCheckedSymptoms(checkedSymptoms.filter((item) => item !== symptom.id)); | ||
setPointValue(pointValue - symptom.pt); | ||
|
||
if (nextQuestions.includes(symptom.next)) { | ||
setNextQuestions(nextQuestions.filter((item) => item !== symptom.next)); | ||
} | ||
} else { | ||
setCheckedSymptoms([...checkedSymptoms, symptom.id]); | ||
setPointValue(pointValue + symptom.pt); | ||
if (symptom.next !== -1) { | ||
setNextQuestions([...nextQuestions, symptom.next]); | ||
} | ||
} | ||
}; | ||
|
||
useEffect(() => { | ||
if (checkedSymptoms.includes(13) && checkedSymptoms.length > 1) { | ||
setCheckedSymptoms(checkedSymptoms.filter((item) => item !== 13)); | ||
} | ||
}, [checkedSymptoms]); | ||
|
||
useEffect(() => { | ||
if (value !== 'false') { | ||
changeStatus(value); | ||
} | ||
}, [changeStatus, value]); | ||
|
||
const handleSubmit = () => { | ||
if (checkedSymptoms.length === 0) { | ||
setError(true); | ||
} else if (nextQuestions.length !== 0) { | ||
setValue('2'); | ||
changeSymptoms(nextQuestions); | ||
} else { | ||
setValue('response'); | ||
} | ||
}; | ||
|
||
return ( | ||
<div style={{ display: 'flex' }}> | ||
<Box | ||
minHeight="95vh" | ||
width="100%" | ||
flexDirection="column" | ||
sx={{ | ||
flexGrow: 1, | ||
marginBottom: 3 }} | ||
style={styles.centered} | ||
> | ||
<Container | ||
sx={{ | ||
marginLeft: '1rem', | ||
display: 'flex', | ||
flexDirection: 'column', | ||
alignItems: 'center', | ||
}} | ||
> | ||
<Typography variant="h6" sx={{ marginTop: 1 }}> | ||
In the last 10 days have you experienced any of these symptoms? | ||
</Typography> | ||
<Typography variant="subtitle1" sx={{ fontWeight: 400, marginTop: 1, marginBottom: 3 }}> | ||
Choose any/all that are new, worsening, | ||
and not related to other known causes or conditions you already have. | ||
</Typography> | ||
<Container | ||
sx={{ display: 'flex', | ||
justifyContent: 'center', | ||
borderRadius: '10%', | ||
backgroundColor: '#ffff', | ||
border: 2, | ||
borderColor: 'primary.main', | ||
width: midSize ? '70%' : '50%', | ||
paddingBottom: 2, | ||
paddingTop: 2, | ||
}} | ||
> | ||
<FormControl component="fieldset"> | ||
<FormGroup> | ||
{symptoms.map((symptom) => ( | ||
<FormControlLabel | ||
key={Math.random()} | ||
control={( | ||
<Checkbox | ||
onChange={() => handleCheckboxChange(symptom)} | ||
checked={checkedSymptoms.includes(symptom.id)} | ||
name={symptom.label} | ||
|
||
/> | ||
)} | ||
label={symptom.label} | ||
/> | ||
))} | ||
</FormGroup> | ||
</FormControl> | ||
</Container> | ||
|
||
</Container> | ||
|
||
<Container | ||
sx={{ | ||
marginTop: '2rem', | ||
flexDirection: 'column', | ||
}} | ||
style={styles.centered} | ||
> | ||
{error && ( | ||
<p className="validationError">Please select an option.</p> | ||
)} | ||
<Button onClick={handleSubmit} type="submit" variant="contained" color="primary"> | ||
Continue | ||
</Button> | ||
</Container> | ||
</Box> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import React, { useState } from 'react'; | ||
import SymptomsQuestion from './SymptomsUpdating'; | ||
import SymptomsIntensity from './SymptomsIntensity'; | ||
|
||
export default function FormLayout({ changeState }: any) { | ||
const [status, setStatus] = useState('1'); | ||
const [symptomsArray, setSymptomsArray] = useState<number[]>([]); | ||
let layout; | ||
|
||
switch (status) { | ||
case '1': | ||
layout = <SymptomsQuestion changeStatus={setStatus} changeSymptoms={setSymptomsArray} />; | ||
break; | ||
case '2': | ||
layout = <SymptomsIntensity changeStatus={setStatus} selection={symptomsArray} />; | ||
break; | ||
default: | ||
layout = ''; | ||
} | ||
|
||
return ( | ||
<div> | ||
{layout} | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import React from 'react'; | ||
import { Box } from '@mui/material'; | ||
// import UpdateSymptomsLayout from '../../components/UpdateFormLayout/UpdateSymptomsLayout'; | ||
import SideBar from '../../components/layout/SideBar'; | ||
|
||
export default function SymptomsUpdate() { | ||
return ( | ||
<div> | ||
<div> | ||
<Box> | ||
{/* <UpdateSymptomsLayout /> */} | ||
|
||
</Box> | ||
</div> | ||
</div> | ||
); | ||
} |