+ {needNavBar && (
+ hist.push(leftRoute)}
+ leftContent={leftContentArr}
+ >
+ {`${navTitle}`}
+
+ )}
+ {props.children}
+
+
-
-
-
- 
-
-
-
-
+
+
+
+
+
Loading API Fetch: {isLoading.toString()}
- {response && -API Fetch Result: {JSON.stringify(response)}
- } + {response &&API Fetch Result: {JSON.stringify(response)}
} - ) + ); } diff --git a/pwa/src/components/PatientInfoForm.test.tsx b/pwa/src/components/PatientInfoForm.test.tsx new file mode 100644 index 0000000..b1009fd --- /dev/null +++ b/pwa/src/components/PatientInfoForm.test.tsx @@ -0,0 +1,105 @@ +import React from "react"; +import { render, fireEvent, prettyDOM } from "@testing-library/react"; +import PatientInfoForm from "./PatientInfoForm"; + +test("female-only div is only displayed if the sex is selected as female", async () => { + const femaleOnlyFormFields = ["Pregnant?", "LMP", "Wants Planning?"]; + + const dom = render(
+
+ Birth Date
+
+
+
+ Age{" "}
+
+
+
+ Phone
+
+
+
+ Weight (kg)
+
+
+
+ Height (cm)
+
+
+
+ BP
+
+
+
+ Temp (F)
+
+
+
+ Pulse
+
+
+
+ Z-Score
+
+
+
+ );
+}
diff --git a/pwa/src/hooks/useApi.test.tsx b/pwa/src/hooks/useApi.test.tsx
index 42286bf..aafd6d8 100644
--- a/pwa/src/hooks/useApi.test.tsx
+++ b/pwa/src/hooks/useApi.test.tsx
@@ -1,16 +1,28 @@
-import { renderHook } from '@testing-library/react-hooks'
-import useApi from './useApi'
+import { renderHook } from "@testing-library/react-hooks";
+import useApi from "./useApi";
-test('should return loading and then a response', async () => {
- const { result, waitForNextUpdate } = renderHook(() => useApi(""))
-
- expect(result.current.response).toBeNull()
- expect(result.current.error).toBeNull()
- expect(result.current.isLoading).toBeTruthy()
+test("should return loading and then a response", async () => {
+ const { result, waitForNextUpdate } = renderHook(() => useApi(""));
- await waitForNextUpdate()
+ expect(result.current.response).toBeNull();
+ expect(result.current.error).toBeNull();
+ expect(result.current.isLoading).toBeTruthy();
- expect(result.current.response).toBeTruthy()
- expect(result.current.error).toBeNull()
- expect(result.current.isLoading).toBeFalsy()
-})
\ No newline at end of file
+ await waitForNextUpdate();
+
+ expect(result.current.response).toBeTruthy();
+ expect(result.current.error).toBeNull();
+ expect(result.current.isLoading).toBeFalsy();
+});
+
+test("should return an error on a non existent route", async () => {
+ const { result, waitForNextUpdate } = renderHook(() => useApi("/404"));
+
+ expect(result.current.response).toBeNull();
+ expect(result.current.error).toBeNull();
+
+ await waitForNextUpdate();
+
+ expect(result.current.response).toBeFalsy();
+ expect(result.current.error).toBeTruthy();
+});
diff --git a/pwa/src/hooks/useApi.tsx b/pwa/src/hooks/useApi.tsx
index 50eb0cd..a292d8b 100644
--- a/pwa/src/hooks/useApi.tsx
+++ b/pwa/src/hooks/useApi.tsx
@@ -1,19 +1,18 @@
-import React from 'react'
+import React from "react";
const useApi = (route: string) => {
const [response, setResponse] = React.useState(null);
const [error, setError] = React.useState(null);
const [isLoading, setIsLoading] = React.useState(false);
-
+
/* istanbul ignore next */
const getUrl = () => {
- if (process.env.environment === "docker"){
- return "http://api:4000/"
+ if (process.env.environment === "docker") {
+ return "http://api:4000/";
+ } else {
+ return "http://localhost:4000/";
}
- else {
- return "http://localhost:4000/"
- }
- }
+ };
React.useEffect(() => {
const fetchData = async () => {
@@ -22,14 +21,15 @@ const useApi = (route: string) => {
const res = await fetch(getUrl() + route);
const json = await res.json();
setResponse(json);
- setIsLoading(false)
+ setIsLoading(false);
} catch (error) {
setError(error);
}
};
fetchData();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return { response, error, isLoading };
};
-export default useApi
\ No newline at end of file
+export default useApi;
diff --git a/pwa/src/scss/LandingPage.scss b/pwa/src/scss/LandingPage.scss
index 905257e..73ed522 100644
--- a/pwa/src/scss/LandingPage.scss
+++ b/pwa/src/scss/LandingPage.scss
@@ -1,6 +1,4 @@
.button-flex {
- animation-name: fade-in;
- animation-duration: 2s;
display: flex;
justify-content: center;
margin: 2em 0;
diff --git a/pwa/src/scss/Login.scss b/pwa/src/scss/Login.scss
index ea78e88..f2dd399 100644
--- a/pwa/src/scss/Login.scss
+++ b/pwa/src/scss/Login.scss
@@ -21,7 +21,7 @@
#imgWrap {
width: 28%;
margin: auto;
- padding: .2rem;
+ padding: 0.2rem;
background-color: #eee;
border-radius: 5px;
img {
@@ -37,13 +37,13 @@
animation-name: fade-in;
animation-duration: 2s;
}
- #buttonFlex{
+ #buttonFlex {
animation-name: fade-in;
animation-duration: 2s;
display: flex;
justify-content: center;
.am-button {
- background-color: #9BD7FF;
+ background-color: #9bd7ff;
width: 40%;
&.am-button-active {
background-color: #ccebff;
@@ -51,21 +51,29 @@
}
}
}
-}
+ $animationDelay: 1;
+ @for $i from 1 through 15 {
+ .loginGrid :nth-child(#{$i}) {
+ animation-delay: #{0.3+ ($i)/30}s;
+ }
+ }
-$animationDelay: 1;
-@for $i from 1 through 15 {
- .loginGrid :nth-child(#{$i}) {
- animation-delay: #{0.3+($i)/30}s;
+ @keyframes fade-in {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+ }
+
+ @keyframes fade-in-from-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(-100px);
+ }
+ 100% {
+ opacity: 1;
+ }
}
}
-
-@keyframes fade-in {
- 0% { opacity: 0; }
- 100% { opacity: 1; }
-}
-
-@keyframes fade-in-from-up {
- 0% { opacity: 0; transform: translateY(-100px)}
- 100% { opacity: 1; }
-}
\ No newline at end of file
diff --git a/pwa/src/scss/PatientInfoForm.scss b/pwa/src/scss/PatientInfoForm.scss
new file mode 100644
index 0000000..6451bb9
--- /dev/null
+++ b/pwa/src/scss/PatientInfoForm.scss
@@ -0,0 +1,8 @@
+#patient-info-wrapper {
+ display: flex;
+ flex-direction: column;
+
+ height: 100%;
+ width: 100%;
+ }
+
\ No newline at end of file
diff --git a/pwa/src/scss/Wrapper.scss b/pwa/src/scss/Wrapper.scss
new file mode 100644
index 0000000..ed3f753
--- /dev/null
+++ b/pwa/src/scss/Wrapper.scss
@@ -0,0 +1,11 @@
+#primary-wrapper {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: space-around;
+ #wrapper-contents {
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ max-width: 50em;
+ max-height: 94.6vh;
+ }
+}
- "Sex"}>
+ {sexValues.map((i) => (
+
- "Visit?"}>
+ {radioYesNo.map((i) => (
+
+
+ G
+
+
+
+ P
+
+
+
+ A
+
+
+
+ ) : null}
+
+ - "Pregnant?"}>
+ {radioYesNo.map((i) => (
+
- "Wants Planning?"}>
+ {radioYesNo.map((i) => (
+
- "Albendazole?"}>
+ {radioYesNo.map((i) => (
+
- "Alergies"}>
+
- "Medicines"}>
+
- "Chief Complaint"}>
+
- "History"}>
+
- "Exam"}>
+