#32 Added New Files for Update Symptoms Form

src/components/formLayout/HeaderSymptoms.tsx

@@ -51,6 +51,11 @@ export default function HeaderSymptoms({ id }: any) {
                   Follow our recommendation!
                 </Typography>
               )}
+              {id === '3' && (
+              <Typography sx={{ fontSize: '1rem', color: '#ffff' }}>
+                Update your symptoms
+              </Typography>
+              )}
             </Typography>
           </Container>
           <Button

src/components/formLayout/UpdateSymptomsDesign/SymptomsUpdateQuestion.tsx

@@ -0,0 +1,159 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Button,
+  Container,
+  Typography,
+  Box,
+  Checkbox,
+  FormControl,
+  FormGroup,
+  FormControlLabel,
+  Paper,
+  useTheme,
+  useMediaQuery,
+} from '@mui/material';
+
+import symptoms from '../../../static/data/formSymptoms.json';
+
+const styles = {
+  centered: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+};
+
+export default function SymptomsUpdateQuestion({ 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' }}>
+      <Paper
+        sx={{
+          margin: 'auto',
+          padding: 4,
+        }}
+      >
+        <Box
+          // minHeight="95vh"
+          width="100%"
+          flexDirection="column"
+          sx={{
+            flexGrow: 1,
+            marginBottom: 1 }}
+          style={styles.centered}
+        >
+          <Container
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+            }}
+          >
+            <Typography variant="h5" 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',
+                width: midSize ? '100%' : '70%',
+              }}
+            >
+              <FormControl component="fieldset">
+                <FormGroup>
+                  {symptoms.map((symptom) => (
+                    <FormControlLabel
+                      sx={{
+                        borderBottom: 1,
+                        borderColor: '#adaeaf',
+                      }}
+                      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>
+      </Paper>
+    </div>
+  );
+}

src/components/formLayout/UpdateSymptomsLayout.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import SymptomsQuestion from './UpdateSymptomsDesign/SymptomsUpdateQuestion';
+// import SymptomsIntensity from './SymptomsIntensity';
+// import SymptomsUpdateResponse from './SymptomsUpdateResponse';
+
+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;
+    // case 'response':
+    //   layout = <SymptomsUpdateResponse />;
+    //   break;
+    default:
+      layout = '';
+  }
+
+  return (
+    <div>
+      {layout}
+    </div>
+  );
+}

src/pages/symptomsForm/SymptomsUpdate.tsx

@@ -1,15 +1,36 @@
-import React from 'react';
-import { Box } from '@mui/material';
-// import UpdateSymptomsLayout from '../../components/UpdateFormLayout/UpdateSymptomsLayout';
-import SideBar from '../../components/layout/SideBar';
+import React, { useState } from 'react';
+import { Box, useMediaQuery, useTheme } from '@mui/material';
+import HeaderSymptoms from '../../components/formLayout/HeaderSymptoms';
+import DrawerSymptoms from '../../components/formLayout/DrawerSymptoms';
+import UpdateSymptomsLayout from '../../components/formLayout/UpdateSymptomsLayout';
+
+export default function SymptomsForm() {
+  const theme = useTheme();
+  const matchesMd = useMediaQuery(theme.breakpoints.down('md'));
+  const matchesSm = useMediaQuery(theme.breakpoints.down('sm'));
+  const [status, setStatus] = useState('3');
 
-export default function SymptomsUpdate() {
   return (
     <div>
-      <div>
-        <Box>
-          {/* <UpdateSymptomsLayout /> */}
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+        }}
+      >
+        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+          {matchesMd && <HeaderSymptoms id={status} />}
+          {!matchesMd && <DrawerSymptoms id={status} />}
 
+          <div
+            style={{
+              justifyContent: 'center',
+              marginTop: matchesMd ? 30 : 0,
+              paddingTop: matchesSm ? 130 : 0,
+            }}
+          >
+            <UpdateSymptomsLayout changeState={setStatus} />
+          </div>
         </Box>
       </div>
     </div>