From df91b924af83daa8aca52e9c98ba8160b173541e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A9lina=20Deneuve?= Date: Sat, 2 Apr 2022 16:50:37 -0400 Subject: [PATCH] 2 different pages for symptoms and profile UPDATE --- src/App.js | 3 +- .../PatientProfileUpdate.js | 137 ++---- .../PatientSymptomsUpdate.js | 390 ++++++++++++++++++ .../PatientProfile/PatientProfilePage.js | 69 ++-- .../PatientProfile/mockPatientInfo.json | 31 +- src/components/UserProfile/UserProfile.css | 14 +- 6 files changed, 490 insertions(+), 154 deletions(-) create mode 100644 src/Services/ProfileUpdateSercices/PatientProfileUpdate/PatientSymptomsUpdate.js diff --git a/src/App.js b/src/App.js index 8e92a96..ca6fe88 100644 --- a/src/App.js +++ b/src/App.js @@ -18,7 +18,7 @@ import UserProfileFacade from "./components/UserProfile/UserProfileFacade"; import PatientProfileUpdate from './Services/ProfileUpdateSercices/PatientProfileUpdate/PatientProfileUpdate' - +import PatientSymptomsUpdate from './Services/ProfileUpdateSercices/PatientProfileUpdate/PatientSymptomsUpdate' import DoctorProfileUpdate from './Services/ProfileUpdateSercices/DoctorProfileUpdate/DoctorProfileUpdate' import AppointmentScheduler from "./Services/AppointmentService/AppointmentScheduler"; import QuarantineTab from './components/Dashboard/PatientDashboard/QuarantineTab'; @@ -42,6 +42,7 @@ function App() { , ]} /> , ]} /> ]} /> + ]} /> ]} /> ]} /> diff --git a/src/Services/ProfileUpdateSercices/PatientProfileUpdate/PatientProfileUpdate.js b/src/Services/ProfileUpdateSercices/PatientProfileUpdate/PatientProfileUpdate.js index c88e2f4..29ab4f6 100644 --- a/src/Services/ProfileUpdateSercices/PatientProfileUpdate/PatientProfileUpdate.js +++ b/src/Services/ProfileUpdateSercices/PatientProfileUpdate/PatientProfileUpdate.js @@ -381,126 +381,39 @@ export default function ProfilePatient() { onChange={handleFormChange} />
-

Insurance Number

+

Private insurance

-
- -
-

Covid symptoms

- - } - checked={editFormData.symptom1} - onChange={() => setEditFormData((val) => { - return {...val, symptom1: !val.symptom1} - })} - name="symptom1" label="New or worsening cough"/> - } - checked={editFormData.symptom2} - onChange={() => setEditFormData((val) => { - return {...val, symptom2: !val.symptom2} - })} - name="symptom2" - label="Shortness of breath or difficulty breathing"/> - } - checked={editFormData.symptom3} - onChange={() => setEditFormData((val) => { - return {...val, symptom3: !val.symptom3} - })} - name="symptom3" - label="Temperature equal or more than 38 C"/> - } - checked={editFormData.symptom4} - onChange={() => setEditFormData((val) => { - return {...val, symptom4: !val.symptom4} - })} - name="symptom4" - label="feeling feverish"/> - } - checked={editFormData.symptom5} - onChange={() => setEditFormData((val) => { - return {...val, symptom5: !val.symptom5} - })} - name="symptom5" - label="Chills"/> - } - checked={editFormData.symptom6} - onChange={() => setEditFormData((val) => { - return {...val, symptom6: !val.symptom6} - })} - name="symptom6" - label="Fatigue and/or weakness"/> - } - checked={editFormData.symptom7} - onChange={() => setEditFormData((val) => { - return {...val, symptom7: !val.symptom7} - })} - name="symptom7" - label="muscles and/or body ache"/> - } - checked={editFormData.symptom8} - onChange={() => setEditFormData((val) => { - return {...val, symptom8: !val.symptom8} - })} - name="symptom8" - label="headache"/> - } - checked={editFormData.symptom9} - onChange={() => setEditFormData((val) => { - return {...val, symptom9: !val.symptom9} - })} - name="symptom9" - label="abdominal pain"/> - } - checked={editFormData.symptom10} - onChange={() => setEditFormData((val) => { - return {...val, symptom10: !val.symptom10} - })} - name="symptom10" - label="diarrhea and vomiting"/> - } - checked={editFormData.symptom11} - onChange={() => setEditFormData((val) => { - return {...val, symptom11: !val.symptom11} - })} - name="symptom11" - label="feelings of malaise"/> - - -

Other comments

- - -
+ + + diff --git a/src/Services/ProfileUpdateSercices/PatientProfileUpdate/PatientSymptomsUpdate.js b/src/Services/ProfileUpdateSercices/PatientProfileUpdate/PatientSymptomsUpdate.js new file mode 100644 index 0000000..c51620d --- /dev/null +++ b/src/Services/ProfileUpdateSercices/PatientProfileUpdate/PatientSymptomsUpdate.js @@ -0,0 +1,390 @@ +import CssBaseline from "@material-ui/core/CssBaseline"; +import Paper from "@material-ui/core/Paper"; +import Grid from "@material-ui/core/Grid"; +import Typography from "@material-ui/core/Typography"; +import {makeStyles} from "@material-ui/core/styles"; +import '../../../components/profile.css' +import * as React from 'react'; +import TextField from "@material-ui/core/TextField"; +import Button from "@material-ui/core/Button"; +import {Checkbox, FormControlLabel, FormGroup} from "@material-ui/core"; +import geometricImage from "../../../images/geometric_gradient.jpg"; +import {useState, Fragment, useEffect} from "react"; +import Navbar from "../../../components/Navbar/Navbar"; +import * as PatientProfileUpdateDatabaseServices from "./PatientProfileUpdateDatabaseServices"; + +const useStyles = makeStyles((theme) => ({ + image: { + backgroundImage: `url(${geometricImage})`, + backgroundRepeat: "no-repeat", + backgroundColor: + theme.palette.type === "light" + ? theme.palette.grey[50] + : theme.palette.grey[900], + backgroundSize: "cover", + backgroundPosition: "center", + }, + paper: { + margin: theme.spacing(17, 15, 50), + display: "flex", + flexDirection: "column", + alignItems: "center", + }, + title: { + marginBottom: theme.spacing(3), + color: "rgba(1, 5, 96, 1)", + fontWeight: "bold", + }, + submit: { + margin: theme.spacing(8, 0, 3), + color: "white", + backgroundColor: "rgba(1, 5, 96, 1)", + }, + paragraph: { + marginTop: theme.spacing(4), + }, + centerGrid: { + justifyContent: "center", + }, + field:{ + marginTop: theme.spacing(3) + } +})); + +export default function ProfilePatient() { + const classes = useStyles(); + + const [patients, setPatients] = useState(null); + + const [notifyDoctor, setNotifyDoctor] = useState({ + firstName: '', + lastName: '', + dob: '', + streetNumber: '', + streetName: '', + apartmentNumber: '', + postalCode: '', + city: '', + province: '', + phoneNumber: '', + email: '', + ramQNumber: '', + insurance: '', + insuranceNumber: '', + symptom1: '', + symptom2: '', + symptom3: '', + symptom4: '', + symptom5: '', + symptom6: '', + symptom7: '', + symptom8: '', + symptom9: '', + symptom10: '', + symptom11: '', + comments: '', + flag: '', + doctor: '' + }); + + const [editFormData, setEditFormData] = useState({ + firstName: '', + lastName: '', + dob: '', + streetNumber: '', + streetName: '', + apartmentNumber: '', + postalCode: '', + city: '', + province: '', + phoneNumber: '', + email: '', + ramQNumber: '', + insurance: '', + insuranceNumber: '', + symptom1: '', + symptom2: '', + symptom3: '', + symptom4: '', + symptom5: '', + symptom6: '', + symptom7: '', + symptom8: '', + symptom9: '', + symptom10: '', + symptom11: '', + comments: '', + flag: '', + doctor: '' + }); + + const dateModified = new Date(); + //fetches patient information on patient profile page render + useEffect(async () => { + setPatients(await PatientProfileUpdateDatabaseServices.fetchData('patients')) + }, []); + + //loads patient information on patients state change when the state is not null + useEffect(() => { + if (patients !== null) + handleFormInformationLoad(); + }, [patients]) + + const handleFormInformationLoad = () => { + const patient = patients[0]; + + const formValues = { + firstName: patient.firstName, + lastName: patient.lastName, + dob: patient.dob, + streetNumber: patient.streetNumber, + streetName: patient.streetName, + apartmentNumber: patient.apartmentNumber, + postalCode: patient.postalCode, + city: patient.city, + province: patient.province, + phoneNumber: patient.phoneNumber, + email: patient.email, + ramQNumber: patient.ramQNumber, + insurance: patient.insurance, + insuranceNumber: patient.insuranceNumber, + symptom1: patient.symptom1, + symptom2: patient.symptom2, + symptom3: patient.symptom3, + symptom4: patient.symptom4, + symptom5: patient.symptom5, + symptom6: patient.symptom6, + symptom7: patient.symptom7, + symptom8: patient.symptom8, + symptom9: patient.symptom9, + symptom10: patient.symptom10, + symptom11: patient.symptom11, + comments: patient.comments, + flag: patient.flag, + doctor: patient.doctor + }; + + setEditFormData(formValues); + }; + + const handleFormChange = (event) => { + event.preventDefault(); + + const fieldName = event.target.getAttribute("name"); + const fieldValue = event.target.value; + //create new object on new values + const newFormData = {...editFormData}; + newFormData[fieldName] = fieldValue; + setEditFormData(newFormData); + // console.log(event.target); + } + + const handleEditFormSubmit = (event) => { + event.preventDefault(); + + const editedPatient = { + firstName: editFormData.firstName, + lastName: editFormData.lastName, + dob: editFormData.dob, + streetNumber: editFormData.streetNumber, + streetName: editFormData.streetName, + apartmentNumber: editFormData.apartmentNumber, + postalCode: editFormData.postalCode, + city: editFormData.city, + province: editFormData.province, + phoneNumber: editFormData.phoneNumber, + email: editFormData.email, + ramQNumber: editFormData.ramQNumber, + insurance: editFormData.insurance, + insuranceNumber: editFormData.insuranceNumber, + symptom1: editFormData.symptom1, + symptom2: editFormData.symptom2, + symptom3: editFormData.symptom3, + symptom4: editFormData.symptom4, + symptom5: editFormData.symptom5, + symptom6: editFormData.symptom6, + symptom7: editFormData.symptom7, + symptom8: editFormData.symptom8, + symptom9: editFormData.symptom9, + symptom10: editFormData.symptom10, + symptom11: editFormData.symptom11, + comments: editFormData.comments, + flag: editFormData.flag, + doctor: editFormData.doctor + }; + + const newPatients = [...patients]; + newPatients[0] = editedPatient; + setPatients(newPatients); + const user = JSON.parse(localStorage.getItem("email")) + const url = user.split("@"); + PatientProfileUpdateDatabaseServices.updateData('patients', newPatients[0]).then( () => { + window.location.assign("/profile/" + url[0]) + }); + }; + + //TODO: add database update function for doctor notifications once notification functionality is implemented + const handleNotifyDoctorButtonClick = (event) => { + event.preventDefault(); + + const editedNotifyDoctor = { + firstName: editFormData.firstName, + lastName: editFormData.lastName, + dob: editFormData.dob, + streetNumber: editFormData.streetNumber, + streetName: editFormData.streetName, + apartmentNumber: editFormData.apartmentNumber, + postalCode: editFormData.postalCode, + city: editFormData.city, + province: editFormData.province, + phoneNumber: editFormData.phoneNumber, + email: editFormData.email, + ramQNumber: editFormData.ramQNumber, + insurance: editFormData.insurance, + insuranceNumber: editFormData.insuranceNumber, + symptom1: editFormData.symptom1, + symptom2: editFormData.symptom2, + symptom3: editFormData.symptom3, + symptom4: editFormData.symptom4, + symptom5: editFormData.symptom5, + symptom6: editFormData.symptom6, + symptom7: editFormData.symptom7, + symptom8: editFormData.symptom8, + symptom9: editFormData.symptom9, + symptom10: editFormData.symptom10, + symptom11: editFormData.symptom11, + comments: editFormData.comments, + flag: editFormData.flag + }; + setNotifyDoctor(editedNotifyDoctor); + console.log(JSON.stringify(editedNotifyDoctor)); + } + + + return ( + <> + +
+ + + +
+ + Profile page + +
+
+

Covid symptoms

+ + } + checked={editFormData.symptom1} + onChange={() => setEditFormData((val) => { + return {...val, symptom1: !val.symptom1} + })} + name="symptom1" label="New or worsening cough"/> + } + checked={editFormData.symptom2} + onChange={() => setEditFormData((val) => { + return {...val, symptom2: !val.symptom2} + })} + name="symptom2" + label="Shortness of breath or difficulty breathing"/> + } + checked={editFormData.symptom3} + onChange={() => setEditFormData((val) => { + return {...val, symptom3: !val.symptom3} + })} + name="symptom3" + label="Temperature equal or more than 38 C"/> + } + checked={editFormData.symptom4} + onChange={() => setEditFormData((val) => { + return {...val, symptom4: !val.symptom4} + })} + name="symptom4" + label="Feeling feverish"/> + } + checked={editFormData.symptom5} + onChange={() => setEditFormData((val) => { + return {...val, symptom5: !val.symptom5} + })} + name="symptom5" + label="Chills"/> + } + checked={editFormData.symptom6} + onChange={() => setEditFormData((val) => { + return {...val, symptom6: !val.symptom6} + })} + name="symptom6" + label="Fatigue and/or weakness"/> + } + checked={editFormData.symptom7} + onChange={() => setEditFormData((val) => { + return {...val, symptom7: !val.symptom7} + })} + name="symptom7" + label="Muscles and/or body ache"/> + } + checked={editFormData.symptom8} + onChange={() => setEditFormData((val) => { + return {...val, symptom8: !val.symptom8} + })} + name="symptom8" + label="Headache"/> + } + checked={editFormData.symptom9} + onChange={() => setEditFormData((val) => { + return {...val, symptom9: !val.symptom9} + })} + name="symptom9" + label="Abdominal pain"/> + } + checked={editFormData.symptom10} + onChange={() => setEditFormData((val) => { + return {...val, symptom10: !val.symptom10} + })} + name="symptom10" + label="Diarrhea and vomiting"/> + } + checked={editFormData.symptom11} + onChange={() => setEditFormData((val) => { + return {...val, symptom11: !val.symptom11} + })} + name="symptom11" + label="Feelings of malaise"/> + +

Other comments

+ + + +
+
+
+ + +
+ + ); +} \ No newline at end of file diff --git a/src/components/UserProfile/PatientProfile/PatientProfilePage.js b/src/components/UserProfile/PatientProfile/PatientProfilePage.js index 33a5b90..4b03445 100644 --- a/src/components/UserProfile/PatientProfile/PatientProfilePage.js +++ b/src/components/UserProfile/PatientProfile/PatientProfilePage.js @@ -29,10 +29,14 @@ export default class PatientProfilePage extends React.Component { return ((this.userType === "patient") && this.userFetch === this.userEmail.split("@")[0]); } - editRedirect() { + editProfileRedirect() { window.location = "/patient-profile-edit" } + editSymptomsRedirect() { + window.location = "/patient-symptoms-edit" + } + scheduleRedirect() { window.location = "/schedule-appointment" } @@ -113,62 +117,73 @@ export default class PatientProfilePage extends React.Component {

{PatientMock.name}

-
-
-
-
-
-
-
- + {PatientMock.ramqNum !== "" ? PatientMock.ramqNum : "No RAMQ number"}
-
- + {PatientMock.insurance !== "" ? PatientMock.insurance : "No private insurance"}
-
- + {PatientMock.insuranceNumber !== "" ? PatientMock.insuranceNumber : "No insurance number"}
{this.canEditProfile() ? - + : <> }
-
+
+ +
+ My Symptoms: +
+ {PatientMock.symptom1 === true ?
New or worsening cough
: null} + {PatientMock.symptom2 === true ?
Shortness of breath or difficulty breathing
: null} + {PatientMock.symptom3 === true ?
Temperature equal or more than 38 C
: null} + {PatientMock.symptom4 === true ?
Feeling feverish
: null} + {PatientMock.symptom5 === true ?
Chills
: null} + {PatientMock.symptom6 === true ?
Fatigue and/or weakness
: null} + {PatientMock.symptom7 === true ?
Muscles and/or body ache
: null} + {PatientMock.symptom8 === true ?
Headache
: null} + {PatientMock.symptom9 === true ?
Abdominal pain
: null} + {PatientMock.symptom10 === true ?
Diarrhea and vomiting
:null} + {PatientMock.symptom11 === true ?
Feelings of malaise
: null} +
+ {this.canEditProfile() ? + + : <> } +
+ +
+

My doctor : Dr. {PatientMock.doctorName}

diff --git a/src/components/UserProfile/PatientProfile/mockPatientInfo.json b/src/components/UserProfile/PatientProfile/mockPatientInfo.json index fc3d096..8d14eae 100644 --- a/src/components/UserProfile/PatientProfile/mockPatientInfo.json +++ b/src/components/UserProfile/PatientProfile/mockPatientInfo.json @@ -1,12 +1,23 @@ { - "name": "Tiger Wood", - "address": "100 software Street, H4E 6K2, QC, Montreal", - "phone": "514-451-5005", - "email": "apatient@gmail.com", - "ramqNum": "No RAMQ Number", - "insurance": "Blue Cross Insurance", - "insuranceNumber": "001SQ906102", - "doctorName": "Anya", - "appointmentDate": "March 16 2022", - "appointmentTime": "11:00" + "name": "Tiger Wood", + "address": "100 software Street, H4E 6K2, QC, Montreal", + "phone": "514-451-5005", + "email": "apatient@gmail.com", + "ramqNum": "", + "insurance": "Blue Cross Insurance", + "insuranceNumber": "001SQ906102", + "doctorName": "Anya", + "appointmentDate": "March 16 2022", + "appointmentTime": "11:00", + "symptom1": true, + "symptom2": false, + "symptom3": false, + "symptom4": true, + "symptom5": false, + "symptom6": false, + "symptom7": false, + "symptom8": true, + "symptom9": false, + "symptom10": false, + "symptom11": false } \ No newline at end of file diff --git a/src/components/UserProfile/UserProfile.css b/src/components/UserProfile/UserProfile.css index 989c08b..52b49e1 100644 --- a/src/components/UserProfile/UserProfile.css +++ b/src/components/UserProfile/UserProfile.css @@ -10,7 +10,6 @@ padding-top: 50px; } - .myAvatar { display: flex; margin: auto; @@ -19,7 +18,7 @@ } .myName { - color: #010560; + color: #7F7FD5; display: flex; margin: auto; justify-content: center; @@ -33,7 +32,7 @@ display: flex; margin: auto; justify-content: center; - align-items: center; + text-align: center; padding-bottom: 20px; } @@ -44,8 +43,15 @@ } .colored-button { - color: #7F7FD5 !important; + color: white !important; + background-color: #4c4c7f !important; } + +.colored-button:hover { + background-color: #7F7FD5; + opacity: 80%; +} + .myName2 { color: #010560; display: flex;