diff --git a/pwa/src/App.tsx b/pwa/src/App.tsx index 59ab773..8ac8774 100644 --- a/pwa/src/App.tsx +++ b/pwa/src/App.tsx @@ -11,6 +11,7 @@ import PatientInfoForm from './components/PatientInfoForm' import './scss/App.scss' import './antd-mobile.css' +import DebugShowEasyPeasy from './components/DebugShowEasyPeasy' const App: React.FunctionComponent = () => { return ( @@ -29,9 +30,12 @@ const App: React.FunctionComponent = () => { leftArrowText="Home" leftArrowRoute="/" > - + + + + diff --git a/pwa/src/components/DebugShowEasyPeasy.tsx b/pwa/src/components/DebugShowEasyPeasy.tsx new file mode 100644 index 0000000..5070e89 --- /dev/null +++ b/pwa/src/components/DebugShowEasyPeasy.tsx @@ -0,0 +1,12 @@ +import React, { ReactElement } from 'react' +import { useStoreState } from '../state/storeIndex' + +export default function DebugShowEasyPeasy(): ReactElement { + const patientInfoFormData = useStoreState( + (state) => state.patientInfoFormModel.fields, + ) + + console.log(patientInfoFormData) + + return
patientInfoFormData: {JSON.stringify(patientInfoFormData)}
+} diff --git a/pwa/src/components/PatientInfoForm.tsx b/pwa/src/components/PatientInfoForm.tsx index 18b27ca..de4f5f4 100644 --- a/pwa/src/components/PatientInfoForm.tsx +++ b/pwa/src/components/PatientInfoForm.tsx @@ -1,282 +1,394 @@ -import React, { ReactElement, useState } from "react"; +import React, { ReactElement, useState } from 'react' +import { useStoreActions } from '../state/storeIndex' +import { SEX, Y_N } from '../state/enums' import { - InputItem, - List, - TextareaItem, - Button, - Radio, - WhiteSpace, -} from "antd-mobile"; -import "../scss/PatientInfoForm.scss"; + InputItem, + List, + TextareaItem, + Button, + Radio, + WhiteSpace, +} from 'antd-mobile' +import '../scss/PatientInfoForm.scss' -const RadioItem = Radio.RadioItem; +const RadioItem = Radio.RadioItem export default function Form(): ReactElement { - // State Hooks for Radio Buttons - // useState returns a value, and a function to set that value - const [sex, setSex] = useState(null as Number); // Default: null - const [albendazole, setAlbendazole] = useState(0); // Default: No - const [firstVisit, setFirstVisit] = useState(0); // Default: No - const [pregnant, setPregnant] = useState(0); // Default: No - const [planning, setPlanning] = useState(0); // Default: No - const [bloodPressureValue, setBloodPressureValue] = useState(""); + // State Hooks for Radio Buttons + // useState returns a value, and a function to set that value + const [sex, setSex] = useState(null as number) // Default: null + const [albendazole, setAlbendazole] = useState(0) // Default: No + const [firstVisit, setFirstVisit] = useState(0) // Default: No + const [pregnant, setPregnant] = useState(0) // Default: No + const [planning, setPlanning] = useState(0) // Default: No + const [bloodPressureValue, setBloodPressureValue] = useState('') + const updateCentralState = useStoreActions( + (actions) => actions.patientInfoFormModel.updateFields, + ) - // Data for Radio Buttons - const sexValues = [ - { value: 0, label: "Male" }, - { value: 1, label: "Female" }, - ]; + // Data for Radio Buttons + const sexValues = [ + { value: 0, label: 'Male' }, + { value: 1, label: 'Female' }, + ] - const radioYesNo = [ - { value: 0, label: "No" }, - { value: 1, label: "Yes" }, - ]; + const radioYesNo = [ + { value: 0, label: 'No' }, + { value: 1, label: 'Yes' }, + ] - /* istanbul ignore next */ - const onSubmit = () => { - if (process.env.NODE_ENV === "development") { - // This shows how to access the values of the form - const firstNameField: HTMLInputElement = document.getElementById( - "firstname" - ) as HTMLInputElement; - const lastNameField: HTMLInputElement = document.getElementById( - "lastname" - ) as HTMLInputElement; - const nicknameField: HTMLInputElement = document.getElementById( - "nickname" - ) as HTMLInputElement; - const birthdateField: HTMLInputElement = document.getElementById( - "birthdate" - ) as HTMLInputElement; - const complaintField1: HTMLInputElement = document.getElementById( - "complaint1" - ) as HTMLInputElement; - const complaintField2: HTMLInputElement = document.getElementById( - "complaint2" - ) as HTMLInputElement; - const complaintField3: HTMLInputElement = document.getElementById( - "complaint3" - ) as HTMLInputElement; + /* istanbul ignore next */ + const onSubmit = () => { + const firstNameField: HTMLInputElement = document.getElementById( + 'firstname', + ) as HTMLInputElement + const lastNameField: HTMLInputElement = document.getElementById( + 'lastname', + ) as HTMLInputElement + const nicknameField: HTMLInputElement = document.getElementById( + 'nickname', + ) as HTMLInputElement + const birthdateField: HTMLInputElement = document.getElementById( + 'birthdate', + ) as HTMLInputElement + const age: HTMLInputElement = document.getElementById( + 'age', + ) as HTMLInputElement + const phone: HTMLInputElement = document.getElementById( + 'phone', + ) as HTMLInputElement + const town: HTMLInputElement = document.getElementById( + 'town', + ) as HTMLInputElement + const gravida: HTMLInputElement = document.getElementById( + 'gravida', + ) as HTMLInputElement + const para: HTMLInputElement = document.getElementById( + 'para', + ) as HTMLInputElement + const abortus: HTMLInputElement = document.getElementById( + 'abortus', + ) as HTMLInputElement + const lmp: HTMLInputElement = document.getElementById( + 'lmp', + ) as HTMLInputElement + const weight: HTMLInputElement = document.getElementById( + 'weight', + ) as HTMLInputElement + const height: HTMLInputElement = document.getElementById( + 'height', + ) as HTMLInputElement + const temp: HTMLInputElement = document.getElementById( + 'temp', + ) as HTMLInputElement + const pulse: HTMLInputElement = document.getElementById( + 'pulse', + ) as HTMLInputElement + const zScore: HTMLInputElement = document.getElementById( + 'z-score', + ) as HTMLInputElement + const alergies: HTMLInputElement = document.getElementById( + 'alergies', + ) as HTMLInputElement + const medicines: HTMLInputElement = document.getElementById( + 'medicines', + ) as HTMLInputElement + const complaintField1: HTMLInputElement = document.getElementById( + 'complaint1', + ) as HTMLInputElement + const complaintField2: HTMLInputElement = document.getElementById( + 'complaint2', + ) as HTMLInputElement + const complaintField3: HTMLInputElement = document.getElementById( + 'complaint3', + ) as HTMLInputElement + const history: HTMLInputElement = document.getElementById( + 'history', + ) as HTMLInputElement + const exam: HTMLInputElement = document.getElementById( + 'exam', + ) as HTMLInputElement + updateCentralState({ + firstName: firstNameField.value, + lastName: lastNameField.value, + nickname: nicknameField.value, + sex: sex ? SEX.female : SEX.male, + birthDate: new Date(birthdateField.value), + age: parseInt(age.value), + phone: phone.value, + town: town.value, + firstVisit: firstVisit, + pregnant: pregnant, + G: parseInt(gravida.value), + P: parseInt(para.value), + A: parseInt(abortus.value), + LMP: new Date(lmp.value), + wantsPlanning: planning, + weight: parseFloat(weight.value), + height: parseFloat(height.value), + bloodPressure: bloodPressureValue, + temperature: parseFloat(temp.value), + pulse: parseFloat(pulse.value), + zScore: parseFloat(zScore.value), + albendazole: albendazole, + alergies: alergies.value, + medicines: medicines.value, + chiefComplaint: [ + complaintField1.value, + complaintField2.value, + complaintField3.value, + ], + history: history.value, + exam: exam.value, + }) - console.log("First name:", firstNameField.value); - console.log("Last name:", lastNameField.value); - console.log("Nickname:", nicknameField.value); - console.log("Birth Date:", birthdateField.value); - console.log( - "Complaints: ", - complaintField1.value + - " " + - complaintField2.value + - " " + - complaintField3.value - ); - console.log("Wants Planning?: " + planning); + if (process.env.NODE_ENV === 'development') { + console.log( + 'bday?: ' + birthdateField.value, + new Date(birthdateField.value), + ) + console.log('lmp?: ' + lmp.value, new Date(lmp.value)) + } } - }; - const validateAndSetBloodPressure = (value: string) => { - const newChar = value.slice(-1); - if (newChar.match(/[0-9]|\/|^$/) && value.length < 8) { - setBloodPressureValue(value); + const validateAndSetBloodPressure = (value: string) => { + const newChar = value.slice(-1) + if (newChar.match(/[0-9]|\/|^$/) && value.length < 8) { + setBloodPressureValue(value) + } } - }; - return ( -
- + return ( +
+ - + - + - "Sex"}> - {sexValues.map((i) => ( - setSex(i.value)} - > - {i.label} - - ))} - + 'Sex'}> + {sexValues.map((i) => ( + setSex(i.value)} + > + {i.label} + + ))} + - + - - Birth Date - + + Birth Date + - - Age{" "} - + + Age{' '} + - - Phone - + + Phone + - + - "First Visit?"}> - {radioYesNo.map((i) => ( - setFirstVisit(i.value)} - > - {i.label} - - ))} - + 'First Visit?'}> + {radioYesNo.map((i) => ( + setFirstVisit(i.value)} + > + {i.label} + + ))} + - {/* Only display the 'female-only' div if the patient is female */} - {sex ? ( -
- - "Pregnant?"}> - {radioYesNo.map((i) => ( - setPregnant(i.value)} - > - {i.label} - - ))} - + {/* Only display the 'female-only' div if the patient is female */} + {sex ? ( +
+ + 'Pregnant?'}> + {radioYesNo.map((i) => ( + setPregnant(i.value)} + > + {i.label} + + ))} + - - G - + + G + - - P - + + P + - - A - + + A + - - LMP - + + LMP + - "Wants Planning?"}> - {radioYesNo.map((i) => ( - setPlanning(i.value)} - > - {i.label} - - ))} - + 'Wants Planning?'}> + {radioYesNo.map((i) => ( + setPlanning(i.value)} + > + {i.label} + + ))} + +
+ ) : null} + + + + + Weight (kg) + + + + Height (cm) + + + + BP + + + + Temp (F) + + + + Pulse + + + + Z-Score + + + 'Albendazole?'}> + {radioYesNo.map((i) => ( + setAlbendazole(i.value)} + > + {i.label} + + ))} + + + 'Alergies'}> + + + + 'Medicines'}> + + + + 'Chief Complaint'}> + + + + + + 'History'}> + + + + 'Exam'}> + + + + + +
+ + + +
- ) : null} - - - - - Weight (kg) - - - - Height (cm) - - - - BP - - - - Temp (F) - - - - Pulse - - - - Z-Score - - - "Albendazole?"}> - {radioYesNo.map((i) => ( - setAlbendazole(i.value)} - > - {i.label} - - ))} - - - "Alergies"}> - - - - "Medicines"}> - - - - "Chief Complaint"}> - - - - - - "History"}> - - - - "Exam"}> - - - - - -
- - - -
-
- ); + ) } diff --git a/pwa/src/state/enums.ts b/pwa/src/state/enums.ts index 551557c..2b18d7a 100644 --- a/pwa/src/state/enums.ts +++ b/pwa/src/state/enums.ts @@ -1,3 +1,5 @@ +/* istanbul ignore file */ + export enum SEX { male = 'male', female = 'female', diff --git a/pwa/src/state/models/newPatientFormModels.ts b/pwa/src/state/models/newPatientFormModels.ts index 4287ec1..f3192b3 100644 --- a/pwa/src/state/models/newPatientFormModels.ts +++ b/pwa/src/state/models/newPatientFormModels.ts @@ -11,6 +11,12 @@ interface PatientInfoFormFields { phone?: string town?: string firstVisit?: Y_N + pregnant?: Y_N + G?: number + P?: number + A?: number + LMP?: Date + wantsPlanning?: Y_N weight?: number height?: number bloodPressure?: string @@ -32,8 +38,11 @@ export interface PatientInfoFormModel { const patientInfoFormModel: PatientInfoFormModel = { fields: {}, - updateFields: action((state, payload) => { - state.fields = payload + updateFields: action((state, formObject) => { + console.log('updating with: ', formObject) + console.log('state pre', state) + state.fields = formObject + console.log('state post', state) }), } diff --git a/pwa/src/state/store.ts b/pwa/src/state/store.ts index e8cf686..7142739 100644 --- a/pwa/src/state/store.ts +++ b/pwa/src/state/store.ts @@ -1,6 +1,8 @@ -import { createStore } from 'easy-peasy' +/* istanbul ignore file */ + +import { createStore, persist } from 'easy-peasy' import storeIndex from './storeIndex' -const store = createStore(storeIndex) +const store = createStore(persist(storeIndex)) export default store diff --git a/pwa/src/state/storeIndex.ts b/pwa/src/state/storeIndex.ts index bdb4ed9..4302283 100644 --- a/pwa/src/state/storeIndex.ts +++ b/pwa/src/state/storeIndex.ts @@ -1,3 +1,4 @@ +/* istanbul ignore file */ import { createTypedHooks } from 'easy-peasy' import patientInfoFormModel from './models/newPatientFormModels'