Merge pull request #108 from Haiti-Distributed-Healthcare-System/submit-loading-spinner

Submit loading spinner
2026-10-26 17:35:23 +00:00 · 2020-05-07 11:08:58 -05:00
commit 1adc76a70d
@@ -1228,6 +1228,87 @@
        }
      }
    },
+    "@emotion/cache": {
+      "version": "10.0.29",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
+      "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
+      "requires": {
+        "@emotion/sheet": "0.9.4",
+        "@emotion/stylis": "0.8.5",
+        "@emotion/utils": "0.11.3",
+        "@emotion/weak-memoize": "0.2.5"
+      }
+    },
+    "@emotion/core": {
+      "version": "10.0.28",
+      "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.28.tgz",
+      "integrity": "sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@emotion/cache": "^10.0.27",
+        "@emotion/css": "^10.0.27",
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/sheet": "0.9.4",
+        "@emotion/utils": "0.11.3"
+      }
+    },
+    "@emotion/css": {
+      "version": "10.0.27",
+      "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz",
+      "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==",
+      "requires": {
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/utils": "0.11.3",
+        "babel-plugin-emotion": "^10.0.27"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/serialize": {
+      "version": "0.11.16",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
+      "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
+      "requires": {
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/unitless": "0.7.5",
+        "@emotion/utils": "0.11.3",
+        "csstype": "^2.5.7"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
+      "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "@emotion/utils": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
+      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
    "@hapi/address": {
      "version": "2.1.4",
      "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -2842,6 +2923,23 @@
        "object.assign": "^4.1.0"
      }
    },
+    "babel-plugin-emotion": {
+      "version": "10.0.33",
+      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz",
+      "integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/serialize": "^0.11.16",
+        "babel-plugin-macros": "^2.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^1.0.5",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7"
+      }
+    },
    "babel-plugin-import": {
      "version": "1.13.0",
      "resolved": "https://registry.npmjs.org/babel-plugin-import/-/babel-plugin-import-1.13.0.tgz",
@@ -2930,6 +3028,11 @@
      "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz",
      "integrity": "sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA=="
    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
    "babel-plugin-syntax-object-rest-spread": {
      "version": "6.13.0",
      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -6314,6 +6417,11 @@
        "pkg-dir": "^3.0.0"
      }
    },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
    "find-up": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
@@ -12888,6 +12996,14 @@
        }
      }
    },
+    "react-spinners": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.8.3.tgz",
+      "integrity": "sha512-fuYNjH0megp5FLuUqQXWM9mPgBXUjvYD6IkMOiwNGOOlI2UdOP1ZC3vejUAa3Y/q4qWJ6yx8rjfMjIBgEji+9A==",
+      "requires": {
+        "@emotion/core": "^10.0.15"
+      }
+    },
    "react-test-renderer": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.13.1.tgz",
@@ -19,6 +19,7 @@
        "react-dom": "^16.12.0",
        "react-router-dom": "^5.1.2",
        "react-scripts": "3.3.1",
+        "react-spinners": "^0.8.3",
        "typescript": "^3.7.5"
    },
    "scripts": {
@@ -42,6 +42,8 @@ const App: React.FunctionComponent = () => {
                            navTitle="Patient Information"
                            leftArrowText="Home"
                            leftArrowRoute="/"
+                            rightArrowText="Diagnosis"
+                            rightArrowRoute="/diagnosis"
                        >
                            <PatientInfoForm />
                        </Wrapper>
@@ -51,6 +53,8 @@ const App: React.FunctionComponent = () => {
                            navTitle="Diagnosis"
                            leftArrowText="Patient Info"
                            leftArrowRoute="/patientinfo"
+                            rightArrowRoute="/treatment"
+                            rightArrowText="Treatment"
                        >
                            <DiagnosisForm />
                        </Wrapper>
@@ -60,6 +64,8 @@ const App: React.FunctionComponent = () => {
                            navTitle="Treatment"
                            leftArrowText="Diagnosis"
                            leftArrowRoute="/diagnosis"
+                            rightArrowText="Tests"
+                            rightArrowRoute="/tests"
                        >
                            <TreatmentForm />
                        </Wrapper>
@@ -8,34 +8,71 @@ type WrapperProps = {
    navTitle?: string
    leftArrowText?: string
    leftArrowRoute?: string
+    rightArrowText?: string
+    rightArrowRoute?: string
    children: React.ReactNode
 }

 const Wrapper: React.FunctionComponent<WrapperProps> = (
    props: WrapperProps,
 ) => {
-    const { navTitle, leftArrowText, leftArrowRoute } = props
    const hist = useHistory()
-    const needNavBar = navTitle || leftArrowText || leftArrowRoute
+    const {
+        navTitle,
+        leftArrowText,
+        leftArrowRoute,
+        rightArrowText,
+        rightArrowRoute,
+    } = props
+    const needNavBar =
+        navTitle ||
+        leftArrowText ||
+        leftArrowRoute ||
+        rightArrowText ||
+        rightArrowRoute
+    const leftRoute = leftArrowRoute ? `${leftArrowRoute}` : '/'
+    const rightRoute = rightArrowRoute ? `${rightArrowRoute}` : '/'
    const leftContentArr = leftArrowText
        ? [<Icon key={1} type="left" />, `${leftArrowText}`]
        : []
-    const leftRoute = leftArrowRoute ? `${leftArrowRoute}` : '/'
+    const rightContentArr = rightArrowText
+        ? [
+              <div
+                  onClick={(): void => hist.push(rightRoute)}
+                  key={2}
+                  style={{ display: 'flex' }}
+              >
+                  <div style={{ paddingTop: '.1em' }}>{rightArrowText}</div>
+                  <Icon type="right" />
+              </div>,
+          ]
+        : []

    return (
        <div id="primary-wrapper">
            <div id="wrapper-contents">
                {needNavBar && (
-                    <NavBar
-                        id="nav-bar"
-                        mode="light"
-                        onLeftClick={(): void => hist.push(leftRoute)}
-                        leftContent={leftContentArr}
+                    <div
+                        style={{
+                            position: 'fixed',
+                            zIndex: 100000,
+                            top: 0,
+                            marginBottom: '4em',
+                            width: '55em',
+                        }}
                    >
-                        {`${navTitle}`}
-                    </NavBar>
+                        <NavBar
+                            id="nav-bar"
+                            mode="light"
+                            onLeftClick={(): void => hist.push(leftRoute)}
+                            leftContent={leftContentArr}
+                            rightContent={rightContentArr}
+                        >
+                            {`${navTitle}`}
+                        </NavBar>
+                    </div>
                )}
-                {props.children}
+                <div style={{ marginTop: '3em' }}>{props.children}</div>
            </div>
        </div>
    )
@@ -1,12 +1,23 @@
 import React, { ReactElement, useState } from 'react'
-import { Checkbox, List, Radio, WhiteSpace, InputItem } from 'antd-mobile'
+import {
+    Checkbox,
+    List,
+    Radio,
+    WhiteSpace,
+    InputItem,
+    Button,
+} from 'antd-mobile'
 import '../scss/TestResultsForm.scss'
 import * as data from './TestResultsFields.json'
+import ListItem from 'antd-mobile/lib/list/ListItem'
+import BeatLoader from 'react-spinners/BeatLoader'

 const RadioItem = Radio.RadioItem
 const CheckboxItem = Checkbox.CheckboxItem

 export default function TestResultsForm(): ReactElement {
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const [submitted, setSubmitted] = useState(false)
    // State Hooks used for result div visibility
    const [pregnancyTest, setPregnancyTest] = useState(0) // Default: 0 (unchecked)
    const [pregnancyTestPositive, setPregnancyTestPositive] = useState(
@@ -96,6 +107,7 @@ export default function TestResultsForm(): ReactElement {
                    UA (Urine Analysis) Test Performed
                </CheckboxItem>
                {/* Create UA Results internal elements to insert*/}
+                {/* eslint-disable-next-line */}
                {data.uaResultFields.map((fieldName) => {
                    uaResultElements.push(
                        <InputItem
@@ -117,6 +129,37 @@ export default function TestResultsForm(): ReactElement {
                    </div>
                ) : null}
            </List>
+            <div style={{ margin: '2em 20em 0' }}>
+                {!isSubmitting && !submitted && (
+                    <Button
+                        onClick={async () => {
+                            setIsSubmitting(true)
+                            await new Promise((resolve) =>
+                                setTimeout(resolve, 2000),
+                            )
+                            setIsSubmitting(false)
+                            setSubmitted(true)
+                        }}
+                    >
+                        {submitted ? 'Responses Sent' : 'Submit'}
+                    </Button>
+                )}
+                <div
+                    style={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                    }}
+                >
+                    {isSubmitting && (
+                        <div style={{ paddingTop: '1em' }}>
+                            <BeatLoader size={15} color={'#0E8EE9'} />
+                        </div>
+                    )}
+                    {!isSubmitting && submitted && (
+                        <p style={{ fontSize: '1.4em' }}>Record Submitted!</p>
+                    )}
+                </div>
+            </div>
        </div>
    )
 }