#32 Added Update Symptoms Logic

src/components/App.tsx

@@ -14,6 +14,7 @@ import Dashboard from '../pages/dashboard/dashboard';
 import ChangePassword from '../pages/auth/change';
 import ForgotPassword from '../pages/auth/forgot';
 import SymptomsForm from '../pages/symptomsForm/SymptomsForm';
+import SymptomsUpdate from '../pages/symptomsForm/SymptomsUpdate';
 import { LayoutContext } from '../context/LayoutContext';
 import { UserContext, UserProvider } from '../context/UserContext';
 
@@ -40,6 +41,7 @@ function App() {
               />
               <Route path="/styleguide" element={<StyleGuide />} />
               <Route path="/symptomsForm" element={<AuthRequired component={<SymptomsForm />} />} />
+              <Route path="/symptomsUpdate" element={<AuthRequired component={<SymptomsUpdate />} />} />
               <Route path="/change" element={<AuthRequired component={<ChangePassword />} />} />
             </Routes>
           </UserProvider>

src/components/UpdateFormLayout/SymptomsIntensity.tsx

@@ -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>
+  );
+}

src/components/UpdateFormLayout/SymptomsUpdating.tsx

@@ -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>
+  );
+}

src/components/UpdateFormLayout/UpdateSymptomsLayout.tsx

@@ -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>
+  );
+}

src/components/dashboard/PatientDashboard.tsx

@@ -22,6 +22,8 @@ import { UserContext } from '../../context/UserContext';
 import UpdateTestResult from './patienttestresult';
 import theme from '../../static/style/theme';
 
+import UpdateSymptomsLayout from '../UpdateFormLayout/UpdateSymptomsLayout';
+
 const style = {
   position: 'absolute' as const,
   top: '50%',
@@ -72,6 +74,7 @@ function PatientDashboard() {
       </SideBar>
       <MainContent>
         <Typography paragraph>{state.firstName}</Typography>
+        <UpdateSymptomsLayout />
       </MainContent>
 
       <Modal

src/pages/symptomsForm/SymptomsUpdate.tsx

@@ -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>
+  );
+}