From 68dc758d15b94d0dee1bd47711c96e71af6a1898 Mon Sep 17 00:00:00 2001 From: taichan03 Date: Fri, 14 Jul 2023 17:18:12 -0400 Subject: [PATCH 1/8] Update to NavBar --- index.html | 2 +- package-lock.json | 43 ++- package.json | 3 +- src/App.css | 28 +- src/assets/account.svg | 7 + src/assets/close.svg | 5 + src/assets/hamburger.svg | 6 + src/components/Header/Header.tsx | 283 +++++++++++++++++--- src/components/Header/header.css | 23 ++ src/pages/PatientManager/NewPatientForm.tsx | 12 +- src/pages/PatientManager/PatientManager.tsx | 13 +- src/pages/PatientManager/PatientSummary.tsx | 18 +- tailwind.config.js | 1 + 13 files changed, 381 insertions(+), 63 deletions(-) create mode 100644 src/assets/account.svg create mode 100644 src/assets/close.svg create mode 100644 src/assets/hamburger.svg create mode 100644 src/components/Header/header.css diff --git a/index.html b/index.html index cd4d9d5a..98e9c54a 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ Balancer diff --git a/package-lock.json b/package-lock.json index 6ea4a39a..670450d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,11 +15,12 @@ "react-redux": "^8.0.7", "react-router": "^6.14.0", "react-router-dom": "^6.14.0", + "react-typed": "^1.2.0", "redux-toolkit": "^1.1.2", "uuid": "^9.0.0" }, "devDependencies": { - "@types/react": "^18.0.37", + "@types/react": "^18.2.14", "@types/react-dom": "^18.0.11", "@types/uuid": "^9.0.2", "@typescript-eslint/eslint-plugin": "^5.59.0", @@ -1016,9 +1017,9 @@ "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" }, "node_modules/@types/react": { - "version": "18.2.13", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.13.tgz", - "integrity": "sha512-vJ+zElvi/Zn9cVXB5slX2xL8PZodPCwPRDpittQdw43JR2AJ5k3vKdgJJyneV/cYgIbLQUwXa9JVDvUZXGba+Q==", + "version": "18.2.14", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.14.tgz", + "integrity": "sha512-A0zjq+QN/O0Kpe30hA1GidzyFjatVvrpIvWLxD+xv67Vt91TWWgco9IvrJBkeyHm1trGaFS/FSGqPlhyeZRm0g==", "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -2779,7 +2780,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -3094,6 +3094,21 @@ "url": "https://github.com/prettier/prettier?sponsor=1" } }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, + "node_modules/prop-types/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/punycode": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz", @@ -3233,6 +3248,19 @@ "react-dom": ">=16.8" } }, + "node_modules/react-typed": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/react-typed/-/react-typed-1.2.0.tgz", + "integrity": "sha512-aDsaA6zkjAFJs8285APOqE85l/kwJ0/ZJmBhARwUrza4TTttrMM5FcMCGEDdThdfUdHo/0l9WXmxp1m2ik4qdw==", + "dependencies": { + "prop-types": "^15.6.0", + "typed.js": "^2.0.6" + }, + "peerDependencies": { + "react": "^16.3.0", + "react-dom": "^16.3.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -3706,6 +3734,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/typed.js": { + "version": "2.0.16", + "resolved": "https://registry.npmjs.org/typed.js/-/typed.js-2.0.16.tgz", + "integrity": "sha512-IBB52GlJiTUOnomwdVVf7lWgC6gScn8md+26zTHj5oJWA+4pSuclHE76rbGI2hnyO+NT+QXdIUHbfjAY5nEtcw==" + }, "node_modules/typescript": { "version": "5.1.3", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.3.tgz", diff --git a/package.json b/package.json index e0e5d521..d96e3508 100644 --- a/package.json +++ b/package.json @@ -17,11 +17,12 @@ "react-redux": "^8.0.7", "react-router": "^6.14.0", "react-router-dom": "^6.14.0", + "react-typed": "^1.2.0", "redux-toolkit": "^1.1.2", "uuid": "^9.0.0" }, "devDependencies": { - "@types/react": "^18.0.37", + "@types/react": "^18.2.14", "@types/react-dom": "^18.0.11", "@types/uuid": "^9.0.2", "@typescript-eslint/eslint-plugin": "^5.59.0", diff --git a/src/App.css b/src/App.css index 3e66fcad..8be71e70 100644 --- a/src/App.css +++ b/src/App.css @@ -13,10 +13,6 @@ } } -.card { - padding: 2em; -} - .read-the-docs { color: #888; } @@ -71,10 +67,10 @@ hsla(215, 98%, 61%, 1) 0px, transparent 0% ), - radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 1) 0px, transparent 50%), + radial-gradient(at 97% 21%, F5F6F9(125, 98%, 72%, 1) 0px, transparent 50%), radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 1) 0px, transparent 50%), radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 1) 0px, transparent 50%), - radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 1) 0px, transparent 50%), + radial-gradient(at 97% 96%, F5F6F9(38, 60%, 74%, 1) 0px, transparent 50%), radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 1) 0px, transparent 50%), radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 1) 0px, transparent 50%); position: absolute; @@ -95,15 +91,15 @@ /* Tailwind Styles */ .container { - @apply relative z-10 flex justify-center items-center flex-col max-w-7xl mx-auto sm:px-16 px-6; + @apply relative z-10 flex items-center flex-col w-full mx-auto; } .black_btn { - @apply rounded-full border border-black bg-black py-1.5 px-5 text-sm text-white transition-all hover:bg-white hover:text-black; + @apply rounded-full border border-black bg-blue-600 py-2.5 px-6 text-sm text-white transition-all hover:bg-white hover:text-black; } .head_text { - @apply mt-5 text-5xl font-extrabold leading-[1.15] text-black sm:text-6xl text-center; + @apply mt-16 text-5xl font-extrabold leading-[1.15] text-black sm:text-6xl text-center; } .orange_gradient { @@ -111,7 +107,16 @@ } .desc { - @apply mt-5 text-lg text-gray-600 sm:text-xl text-center max-w-2xl; + @apply mt-7 text-lg text-gray-800 sm:text-xl text-center max-w-2xl font-sans; + font-size: 270%; + letter-spacing: 0.05em; + font-weight: 500; + line-height: 1; +} +.desc1 { + @apply mt-5 text-lg text-gray-800 sm:text-xl text-center max-w-2xl font-sans; + font-size: 100%; + letter-spacing: 0.03em; } .url_input { @@ -135,5 +140,6 @@ } .summary_box { - @apply rounded-xl border border-gray-200 bg-white/20 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur p-4; + @apply rounded-xl border border-gray-300 bg-white/20 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] p-4; + /* backdrop-blur */ } diff --git a/src/assets/account.svg b/src/assets/account.svg new file mode 100644 index 00000000..5931e5f1 --- /dev/null +++ b/src/assets/account.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/close.svg b/src/assets/close.svg new file mode 100644 index 00000000..9fe198e2 --- /dev/null +++ b/src/assets/close.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/assets/hamburger.svg b/src/assets/hamburger.svg new file mode 100644 index 00000000..aec84178 --- /dev/null +++ b/src/assets/hamburger.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 79cbfc5a..661d8402 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,43 +1,262 @@ import logo from "../../assets/balancer.png"; import { Link } from "react-router-dom"; import { useLocation } from "react-router-dom"; +import accountLogo from "../../assets/account.svg"; +import closeLogo from "../../assets/close.svg"; +import hamburgerLogo from "../../assets/hamburger.svg"; +import "../../components/Header/header.css"; +import Typed from "react-typed"; +import React, { useState, useRef, useEffect } from "react"; const Header = () => { const { pathname } = useLocation(); + const [nav, setNav] = useState(true); + const [showFeaturesMenu, setShowFeaturesMenu] = useState(false); + const dropdownRef = useRef(null); + let delayTimeout: number | null = null; + + const handleNav = () => { + setNav(!nav); + }; + + const handleMouseEnter = () => { + if (delayTimeout !== null) { + clearTimeout(delayTimeout); + } + setShowFeaturesMenu(true); + }; + + const handleMouseLeave = () => { + delayTimeout = setTimeout(() => { + setShowFeaturesMenu(false); + }, 300); // Adjust the delay time as needed + }; + + useEffect(() => { + return () => { + if (delayTimeout !== null) { + clearTimeout(delayTimeout); + } + }; + }, []); return ( -
- - -

- {/* AI-powered Bipolar Medication:
*/} - Balancer -

-

- Balancer is an innovative AI-powered web application designed to assist - medication prescribers in selecting the most appropriate bipolar medication for - first-time patients. It is open-source and free to use. -

+
+ {/*
+ WELCOME! STAY TUNE FOR OUR FIRST RELEASE! - + +
*/} +
+ + + +
+
+ +
+ {nav && ( + logo + )} +
+
+
+ {!nav ? ( + logo + ) : ( + logo + )} +
+
+ logo +
+
    +
  • + {pathname === "/" && ( + <> + + About Balancer + + + )} +
    • +
  • + {pathname === "/" && ( + <> + + Support + + + )} +
    • +
  • + + Features + {/* + ↑ + */} + +
    • +
  • + + Information + {/* + ↑ + */} + +
    • +
+
+
); }; diff --git a/src/components/Header/header.css b/src/components/Header/header.css new file mode 100644 index 00000000..f5c56227 --- /dev/null +++ b/src/components/Header/header.css @@ -0,0 +1,23 @@ +@keyframes arrowMove { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-5px); + } + 100% { + transform: translateY(0); + } +} + +.arrow { + display: inline-block; + width: 10px; + height: 10px; + background-color: blue; + animation: arrowMove 1s infinite; +} + +.arrow:hover { + animation: none; +} diff --git a/src/pages/PatientManager/NewPatientForm.tsx b/src/pages/PatientManager/NewPatientForm.tsx index bc36ff2a..4a3c91ea 100644 --- a/src/pages/PatientManager/NewPatientForm.tsx +++ b/src/pages/PatientManager/NewPatientForm.tsx @@ -111,14 +111,16 @@ const NewPatientForm = ({
diff --git a/src/pages/PatientManager/PatientManager.tsx b/src/pages/PatientManager/PatientManager.tsx index 44af935d..d4d2e0d9 100644 --- a/src/pages/PatientManager/PatientManager.tsx +++ b/src/pages/PatientManager/PatientManager.tsx @@ -27,8 +27,17 @@ const PatientManager = () => { // TODO: add error and loading state guards return ( -
-
+
+

+ {/* AI-powered Bipolar Medication:
*/} + Balancer +

+

Designed to assist prescribers

+

+ Balancer is an AI-powered tool for selecting bipolar medication for + patients. We are open-source and available for free use. +

+
{ return ( -
+
{getMedicationInfo.isFetching ? ( loader ) : getMedicationInfo.error ? ( @@ -29,31 +29,35 @@ const PatientSummary = ({

Patient Summary

-
+

diff --git a/tailwind.config.js b/tailwind.config.js index 7d4ff209..5760ef53 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,6 +6,7 @@ export default { fontFamily: { satoshi: ["Satoshi", "sans-serif"], inter: ["Inter", "sans-serif"], + lora: "'Lora', serif", }, }, }, From 2e6b7b319695caa815fd0357da9d29c3938d6d55 Mon Sep 17 00:00:00 2001 From: taichan03 Date: Sat, 15 Jul 2023 06:52:46 -0400 Subject: [PATCH 2/8] Diagnosis and NavBar --- package-lock.json | 93 ++++++++++++++++++++- package.json | 1 + src/App.css | 6 ++ src/components/Header/Header.tsx | 61 ++++++++++---- src/components/Header/MdNavBar.tax | 0 src/pages/PatientManager/NewPatientForm.tsx | 34 ++++++-- src/pages/PatientManager/PatientSummary.tsx | 2 +- 7 files changed, 170 insertions(+), 27 deletions(-) create mode 100644 src/components/Header/MdNavBar.tax diff --git a/package-lock.json b/package-lock.json index 670450d8..d5223f25 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "@reduxjs/toolkit": "^1.9.5", + "axios": "^1.4.0", "formik": "^2.4.2", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -1030,7 +1031,7 @@ "version": "18.2.6", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.6.tgz", "integrity": "sha512-2et4PDvg6PVCyS7fuTc4gPoksV58bW0RwSxWKcPRcHZf0PRUGq03TKcD/rUHe3azfV6/5/biUBJw+HhCQjaP0A==", - "devOptional": true, + "dev": true, "dependencies": { "@types/react": "*" } @@ -1361,6 +1362,11 @@ "node": ">=8" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, "node_modules/autoprefixer": { "version": "10.4.14", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz", @@ -1394,6 +1400,16 @@ "postcss": "^8.1.0" } }, + "node_modules/axios": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz", + "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==", + "dependencies": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -1569,6 +1585,17 @@ "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", "dev": true }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/commander": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", @@ -1652,6 +1679,14 @@ "node": ">=0.10.0" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/didyoumean": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", @@ -2172,6 +2207,38 @@ "lodash.isplainobject": "^3.2.0" } }, + "node_modules/follow-redirects": { + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", + "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/formik": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.2.tgz", @@ -2693,6 +2760,25 @@ "node": ">=8.6" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -3109,6 +3195,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/punycode": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz", diff --git a/package.json b/package.json index d96e3508..59b1a054 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "@reduxjs/toolkit": "^1.9.5", + "axios": "^1.4.0", "formik": "^2.4.2", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/src/App.css b/src/App.css index 8be71e70..d742d374 100644 --- a/src/App.css +++ b/src/App.css @@ -21,6 +21,12 @@ @tailwind components; @tailwind utilities; +@layer components { + .sidebar-icon { + @apply; + } +} + /* Note: The styles for this gradient grid background is heavily inspired by the creator of this amazing site (https://dub.sh) – all credits go to them! */ diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 661d8402..007bc11a 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -12,6 +12,7 @@ const Header = () => { const { pathname } = useLocation(); const [nav, setNav] = useState(true); const [showFeaturesMenu, setShowFeaturesMenu] = useState(false); + const [showLoginMenu, setShowLoginMenu] = useState(false); const dropdownRef = useRef(null); let delayTimeout: number | null = null; @@ -19,6 +20,10 @@ const Header = () => { setNav(!nav); }; + const handleLoginMenu = () => { + setShowLoginMenu(!showLoginMenu); + }; + const handleMouseEnter = () => { if (delayTimeout !== null) { clearTimeout(delayTimeout); @@ -51,7 +56,7 @@ const Header = () => { "hidden lg:flex items-center border-b border-gray-300 h-20 mx-auto bg-white justify-between px-4 sm:px-6 md:px-8 lg:px-8 xl:px-50 2xl:px-56" } > -
- {!showLoginMenu && ( -
- )} -
-
- {!showLoginMenu && ( - logo - )} -
-
+ )}
-
- -
- {nav && ( - logo - )} -
-
-
- {!nav && ( - logo - )} -
-
- logo -
-
    -
  • - {pathname === "/" && ( - <> - - About Balancer - - - )} -
    • -
  • - {pathname === "/" && ( - <> - - Support - - - )} -
    • -
  • - - Features - {/* - ↑ - */} - -
    • -
  • - - Information - {/* - ↑ - */} - -
    • -
-
-
+
); }; diff --git a/src/components/Header/LoginMenuDropDown.tsx b/src/components/Header/LoginMenuDropDown.tsx new file mode 100644 index 00000000..f98bd126 --- /dev/null +++ b/src/components/Header/LoginMenuDropDown.tsx @@ -0,0 +1,42 @@ +import React, { useState } from "react"; +import closeLogo from "../../assets/close.svg"; + +interface LoginMenuDropDownProps { + showLoginMenu: boolean; + handleLoginMenu: () => void; +} + +const LoginMenuDropDown: React.FC = ({ + showLoginMenu, + handleLoginMenu, +}) => { + return ( + <> + {!showLoginMenu && ( +
+ )} +
+
+ {!showLoginMenu && ( + logo + )} +
+
+ + ); +}; + +export default LoginMenuDropDown; diff --git a/src/components/Header/MdNavBar.tax b/src/components/Header/MdNavBar.tax deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/Header/MdNavBar.tsx b/src/components/Header/MdNavBar.tsx new file mode 100644 index 00000000..3676ce3b --- /dev/null +++ b/src/components/Header/MdNavBar.tsx @@ -0,0 +1,111 @@ +import closeLogo from "../../assets/close.svg"; +import hamburgerLogo from "../../assets/hamburger.svg"; +import { Link } from "react-router-dom"; +import logo from "../../assets/balancer.png"; +import React, { useState, useRef, useEffect } from "react"; +import { useLocation } from "react-router-dom"; + +const MdNavBar = () => { + const [nav, setNav] = useState(true); + const { pathname } = useLocation(); + const handleNav = () => { + setNav(!nav); + }; + + return ( +
+ +
+ {nav && ( + logo + )} +
+
+
+ {!nav && ( + logo + )} +
+
+ logo +
+
    +
  • + {pathname === "/" && ( + <> + + About Balancer + + + )} +
    • +
  • + {pathname === "/" && ( + <> + + Support + + + )} +
    • +
  • + + Features + {/* + ↑ + */} + +
    • +
  • + + Information + {/* + ↑ + */} + +
    • +
+
+
+ ); +}; + +export default MdNavBar; From 0cd2723c3652b64e0aa3f75751db7e8f3d31a52d Mon Sep 17 00:00:00 2001 From: taichan03 Date: Sat, 15 Jul 2023 08:33:56 -0400 Subject: [PATCH 4/8] added login menu --- src/components/Header/Header.tsx | 12 ++--- src/components/Header/LoginMenuDropDown.tsx | 54 ++++++++++++++++++--- 2 files changed, 53 insertions(+), 13 deletions(-) diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 4fd2891b..2c40e439 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -151,13 +151,11 @@ const Header = () => { Support
- - logo - + logo
= ({
-
- {!showLoginMenu && ( +
+
+

Balance account

+
+
+ {!showLoginMenu && ( + logo + )} +
+
+
+
+
logo - )} +
+
+
+

Log into your Balance account

+
+
+

+ Log into an existing Balance account or create a new one. With a + Balance account, you can get access to additional features and store + data. +

+

+

+ You can log in or sign up for a Balance account using your email, + gmail or Facebook account. +

+
+
+ {" "} + +
From e84dce78783a5714e5056c4efb79b95eec893e1c Mon Sep 17 00:00:00 2001 From: taichan03 Date: Sat, 15 Jul 2023 10:40:16 -0400 Subject: [PATCH 5/8] Research drop down --- index.html | 2 +- src/components/Header/FeatureMenuDropDown.tsx | 42 ++++ src/components/Header/Header.tsx | 182 +++++++++--------- src/components/Header/LoginMenuDropDown.tsx | 43 +++-- src/components/ResearchMenuDropDown.tsx | 42 ++++ 5 files changed, 200 insertions(+), 111 deletions(-) create mode 100644 src/components/Header/FeatureMenuDropDown.tsx create mode 100644 src/components/ResearchMenuDropDown.tsx diff --git a/index.html b/index.html index 98e9c54a..1305547d 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ href="https://fonts.googleapis.com/css2?family=DM+Mono:ital@0;1&family=Lora:wght@700&display=swap" rel="stylesheet" /> - Balancer + Balancer -Tool To Assist & Clarify
diff --git a/src/components/Header/FeatureMenuDropDown.tsx b/src/components/Header/FeatureMenuDropDown.tsx new file mode 100644 index 00000000..74bf2e18 --- /dev/null +++ b/src/components/Header/FeatureMenuDropDown.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import { Link } from "react-router-dom"; + +export const FeatureMenuDropDown = () => { + return ( +
+
+
+
    + + Diagnosis + +
+
    + + Drug Summary and Comparison + {/* + ↑ + */} + +
+
    + + Drug Review Lookup + {/* + ↑ + */} + +
+
+
+ ); +}; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 2c40e439..59c47775 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -9,11 +9,15 @@ import Typed from "react-typed"; import React, { useState, useRef, useEffect } from "react"; import MdNavBar from "./MdNavBar"; import LoginMenuDropDown from "./LoginMenuDropDown"; +import { FeatureMenuDropDown } from "./FeatureMenuDropDown"; +import { ResearchMenuDropDown } from "../ResearchMenuDropDown"; const Header = () => { const { pathname } = useLocation(); const [showFeaturesMenu, setShowFeaturesMenu] = useState(false); + const [showResearchMenu, setShowResearchMenu] = useState(false); const dropdownRef = useRef(null); + const dropdownResearchRef = useRef(null); let delayTimeout: number | null = null; const [showLoginMenu, setShowLoginMenu] = useState(false); @@ -26,6 +30,7 @@ const Header = () => { clearTimeout(delayTimeout); } setShowFeaturesMenu(true); + setShowResearchMenu(false); }; const handleMouseLeave = () => { @@ -34,6 +39,20 @@ const Header = () => { }, 300); // Adjust the delay time as needed }; + const handleMouseEnterResearch = () => { + if (delayTimeout !== null) { + clearTimeout(delayTimeout); + } + setShowResearchMenu(true); + setShowFeaturesMenu(false); + }; + + const handleMouseLeaveResearch = () => { + delayTimeout = setTimeout(() => { + setShowResearchMenu(false); + }, 300); // Adjust the delay time as needed + }; + useEffect(() => { return () => { if (delayTimeout !== null) { @@ -57,112 +76,89 @@ const Header = () => { logo - {pathname === "/" && ( - <> -
+
+ + Features - Features - - ↑ - + ↑ - {showFeaturesMenu && ( -
-
-
-
    - - Diagnosis - -
-
    - - Drug Summary and Comparison - {/* - ↑ - */} - -
-
    - - Drug Review Lookup - {/* - ↑ - */} - -
-
-
- )} -
+ + {showFeaturesMenu && } +
- + - Information - {/* + Research Information + ↑ - */} - - - )} + + {showResearchMenu && } + +
+ diff --git a/src/components/Header/LoginMenuDropDown.tsx b/src/components/Header/LoginMenuDropDown.tsx index 489fcb62..4f4db48f 100644 --- a/src/components/Header/LoginMenuDropDown.tsx +++ b/src/components/Header/LoginMenuDropDown.tsx @@ -1,6 +1,7 @@ import React, { useState } from "react"; import closeLogo from "../../assets/close.svg"; import logo from "../../assets/balancer.png"; +import { Link } from "react-router-dom"; interface LoginMenuDropDownProps { showLoginMenu: boolean; @@ -13,7 +14,7 @@ const LoginMenuDropDown: React.FC = ({ }) => { return ( <> - {!showLoginMenu && ( + {showLoginMenu && (
= ({ )}
= ({

Balance account

- {!showLoginMenu && ( - logo + {showLoginMenu && ( + logo )}
@@ -42,7 +47,7 @@ const LoginMenuDropDown: React.FC = ({ logo @@ -63,18 +68,22 @@ const LoginMenuDropDown: React.FC = ({
{" "} - - + + + + + +
diff --git a/src/components/ResearchMenuDropDown.tsx b/src/components/ResearchMenuDropDown.tsx new file mode 100644 index 00000000..81d1869d --- /dev/null +++ b/src/components/ResearchMenuDropDown.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import { Link } from "react-router-dom"; + +export const ResearchMenuDropDown = () => { + return ( +
+
+
+
    + + PubMed + +
+
    + + Google Scholar + {/* + ↑ + */} + +
+
    + + ScienceDirect + {/* + ↑ + */} + +
+
+
+ ); +}; From c1b3e3138e6493060cea8e762e729754d04ea3e7 Mon Sep 17 00:00:00 2001 From: taichan03 Date: Sat, 15 Jul 2023 17:32:44 -0400 Subject: [PATCH 6/8] typescript annorying errors --- Dockerfile | 2 +- index.html | 2 +- src/App.css | 2 +- src/components/Header/FeatureMenuDropDown.tsx | 3 +- src/components/Header/Header.tsx | 10 +++--- src/components/Header/LoginMenuDropDown.tsx | 2 +- src/components/Header/MdNavBar.tsx | 2 +- src/components/ResearchMenuDropDown.tsx | 1 - src/pages/PatientManager/NewPatientForm.tsx | 18 +++++----- src/pages/PatientManager/PatientManager.tsx | 2 +- src/pages/PatientManager/PatientSummary.tsx | 33 ++++++++++++++----- src/pages/PatientManager/PatientTypes.ts | 4 +-- 12 files changed, 47 insertions(+), 34 deletions(-) diff --git a/Dockerfile b/Dockerfile index ca441e5b..3b0b404f 100644 --- a/Dockerfile +++ b/Dockerfile @@ -8,7 +8,7 @@ WORKDIR /usr/src/app COPY package*.json ./ # Install dependencies -RUN npm ci +RUN npm ci --legacy-peer-deps # Copy project files COPY . . diff --git a/index.html b/index.html index 1305547d..96e3f165 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ href="https://fonts.googleapis.com/css2?family=DM+Mono:ital@0;1&family=Lora:wght@700&display=swap" rel="stylesheet" /> - Balancer -Tool To Assist & Clarify + Balancer -A Tool To Assist & Clarify
diff --git a/src/App.css b/src/App.css index d742d374..78326a5c 100644 --- a/src/App.css +++ b/src/App.css @@ -146,6 +146,6 @@ } .summary_box { - @apply rounded-xl border border-gray-300 bg-white/20 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] p-4; + @apply rounded-xl border border-gray-300 bg-white/20 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] p-4 max-w-[670px]; /* backdrop-blur */ } diff --git a/src/components/Header/FeatureMenuDropDown.tsx b/src/components/Header/FeatureMenuDropDown.tsx index 74bf2e18..0a65907f 100644 --- a/src/components/Header/FeatureMenuDropDown.tsx +++ b/src/components/Header/FeatureMenuDropDown.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { Link } from "react-router-dom"; export const FeatureMenuDropDown = () => { @@ -8,7 +7,7 @@ export const FeatureMenuDropDown = () => {
    Diagnosis diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 59c47775..d3048cdf 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,19 +1,17 @@ import logo from "../../assets/balancer.png"; import { Link } from "react-router-dom"; -import { useLocation } from "react-router-dom"; +// import { useLocation } from "react-router-dom"; import accountLogo from "../../assets/account.svg"; -import closeLogo from "../../assets/close.svg"; -import hamburgerLogo from "../../assets/hamburger.svg"; import "../../components/Header/header.css"; -import Typed from "react-typed"; -import React, { useState, useRef, useEffect } from "react"; +// import Typed from "react-typed"; +import { useState, useRef, useEffect } from "react"; import MdNavBar from "./MdNavBar"; import LoginMenuDropDown from "./LoginMenuDropDown"; import { FeatureMenuDropDown } from "./FeatureMenuDropDown"; import { ResearchMenuDropDown } from "../ResearchMenuDropDown"; const Header = () => { - const { pathname } = useLocation(); + // const { pathname } = useLocation(); const [showFeaturesMenu, setShowFeaturesMenu] = useState(false); const [showResearchMenu, setShowResearchMenu] = useState(false); const dropdownRef = useRef(null); diff --git a/src/components/Header/LoginMenuDropDown.tsx b/src/components/Header/LoginMenuDropDown.tsx index 4f4db48f..d0129e89 100644 --- a/src/components/Header/LoginMenuDropDown.tsx +++ b/src/components/Header/LoginMenuDropDown.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React from "react"; import closeLogo from "../../assets/close.svg"; import logo from "../../assets/balancer.png"; import { Link } from "react-router-dom"; diff --git a/src/components/Header/MdNavBar.tsx b/src/components/Header/MdNavBar.tsx index 3676ce3b..a2526e85 100644 --- a/src/components/Header/MdNavBar.tsx +++ b/src/components/Header/MdNavBar.tsx @@ -2,7 +2,7 @@ import closeLogo from "../../assets/close.svg"; import hamburgerLogo from "../../assets/hamburger.svg"; import { Link } from "react-router-dom"; import logo from "../../assets/balancer.png"; -import React, { useState, useRef, useEffect } from "react"; +import { useState } from "react"; import { useLocation } from "react-router-dom"; const MdNavBar = () => { diff --git a/src/components/ResearchMenuDropDown.tsx b/src/components/ResearchMenuDropDown.tsx index 81d1869d..a284d499 100644 --- a/src/components/ResearchMenuDropDown.tsx +++ b/src/components/ResearchMenuDropDown.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { Link } from "react-router-dom"; export const ResearchMenuDropDown = () => { diff --git a/src/pages/PatientManager/NewPatientForm.tsx b/src/pages/PatientManager/NewPatientForm.tsx index 600ad507..243ff4a7 100644 --- a/src/pages/PatientManager/NewPatientForm.tsx +++ b/src/pages/PatientManager/NewPatientForm.tsx @@ -1,7 +1,7 @@ import { FormEvent, ChangeEvent, useEffect } from "react"; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore -import { loader } from "../../assets"; +// import { loader } from "../../assets"; import { v4 as uuidv4 } from "uuid"; import { PatientInfo } from "./PatientTypes"; import axios from "axios"; @@ -21,7 +21,6 @@ const NewPatientForm = ({ setPatientInfo, allPatientInfo, setAllPatientInfo, - getMedicationInfo, }: NewPatientFormProps) => { useEffect(() => { const patientInfoFromLocalStorage = JSON.parse( @@ -43,7 +42,7 @@ const NewPatientForm = ({ }; // const { data } = await getMedicationInfo(""); const { data } = await axios.post( - "http://localhost:5000/diagnosis", + "http://localhost:3001/diagnosis", payload ); console.log(data); @@ -133,7 +132,7 @@ const NewPatientForm = ({ required className="url_input peer" > - + @@ -166,14 +165,17 @@ const NewPatientForm = ({ htmlFor="ageInput" className="block font-latoBold text-sm pb-2" > - Age: + Current Medications: - setPatientInfo({ ...patientInfo, Age: Number(e.target.value) }) + setPatientInfo({ + ...patientInfo, + CurrentMedications: String(e.target.value), + }) } required className="url_input peer" diff --git a/src/pages/PatientManager/PatientManager.tsx b/src/pages/PatientManager/PatientManager.tsx index d4d2e0d9..12519082 100644 --- a/src/pages/PatientManager/PatientManager.tsx +++ b/src/pages/PatientManager/PatientManager.tsx @@ -14,7 +14,7 @@ const PatientManager = () => { Diagnosis: "", OtherDiagnosis: "", Description: "", - Age: 18, + CurrentMedications: "", }); const [allPatientInfo, setAllPatientInfo] = useState([]); diff --git a/src/pages/PatientManager/PatientSummary.tsx b/src/pages/PatientManager/PatientSummary.tsx index 6426654a..712c2aad 100644 --- a/src/pages/PatientManager/PatientSummary.tsx +++ b/src/pages/PatientManager/PatientSummary.tsx @@ -1,4 +1,5 @@ import { PatientInfo } from "./PatientTypes"; +// import { loader } from "../../assets"; interface PatientSummaryProps { patientInfo: PatientInfo; @@ -25,21 +26,21 @@ const PatientSummary = ({

    ) : ( patientInfo.Description && ( -
    +

    Patient Summary

    -
    +

    + 

    
+                    {/* {patientInfo.Description} */}
+                  
    
                 
               
    
             
    
diff --git a/src/pages/PatientManager/PatientTypes.ts b/src/pages/PatientManager/PatientTypes.ts
index 3bee0d90..3f7675c0 100644
--- a/src/pages/PatientManager/PatientTypes.ts
+++ b/src/pages/PatientManager/PatientTypes.ts
@@ -3,7 +3,5 @@ export interface PatientInfo {
   Diagnosis: string;
   OtherDiagnosis: string;
   Description: string;
-  Age: number;
+  CurrentMedications: string;
 }
-
-

From 83d2efd1f0a9dd4a06d599a878ebf3e65e1e08cc Mon Sep 17 00:00:00 2001
From: taichan03 
Date: Sun, 16 Jul 2023 07:37:06 -0400
Subject: [PATCH 7/8] Add close and open function to landing page

---
 index.html                                    |   2 +-
 src/assets/max.svg                            |  11 +
 src/assets/min.svg                            |  11 +
 src/components/Header/Header.tsx              |   2 +-
 .../{ => Header}/ResearchMenuDropDown.tsx     |   0
 src/pages/PatientManager/NewPatientForm.tsx   | 233 +++++++++++-------
 src/pages/PatientManager/PatientID.tsx        |   4 +-
 src/pages/PatientManager/PatientSummary.tsx   | 138 +++++++----
 8 files changed, 260 insertions(+), 141 deletions(-)
 create mode 100644 src/assets/max.svg
 create mode 100644 src/assets/min.svg
 rename src/components/{ => Header}/ResearchMenuDropDown.tsx (100%)

diff --git a/index.html b/index.html
index 96e3f165..b72f8204 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
       href="https://fonts.googleapis.com/css2?family=DM+Mono:ital@0;1&family=Lora:wght@700&display=swap"
       rel="stylesheet"
     />
-    Balancer -A Tool To Assist & Clarify
+    Balancer - A Tool To Assist
   
   
     
    
diff --git a/src/assets/max.svg b/src/assets/max.svg
new file mode 100644
index 00000000..c39c6eb9
--- /dev/null
+++ b/src/assets/max.svg
@@ -0,0 +1,11 @@
+
+  
+  
+  
+  
+  
+  
+  
+  
+  
+
diff --git a/src/assets/min.svg b/src/assets/min.svg
new file mode 100644
index 00000000..f1904342
--- /dev/null
+++ b/src/assets/min.svg
@@ -0,0 +1,11 @@
+
+  
+  
+  
+  
+  
+  
+  
+  
+  
+
\ No newline at end of file
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index d3048cdf..02227c2a 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -8,7 +8,7 @@ import { useState, useRef, useEffect } from "react";
 import MdNavBar from "./MdNavBar";
 import LoginMenuDropDown from "./LoginMenuDropDown";
 import { FeatureMenuDropDown } from "./FeatureMenuDropDown";
-import { ResearchMenuDropDown } from "../ResearchMenuDropDown";
+import { ResearchMenuDropDown } from "./ResearchMenuDropDown";
 
 const Header = () => {
   // const { pathname } = useLocation();
diff --git a/src/components/ResearchMenuDropDown.tsx b/src/components/Header/ResearchMenuDropDown.tsx
similarity index 100%
rename from src/components/ResearchMenuDropDown.tsx
rename to src/components/Header/ResearchMenuDropDown.tsx
diff --git a/src/pages/PatientManager/NewPatientForm.tsx b/src/pages/PatientManager/NewPatientForm.tsx
index 243ff4a7..caf58add 100644
--- a/src/pages/PatientManager/NewPatientForm.tsx
+++ b/src/pages/PatientManager/NewPatientForm.tsx
@@ -1,10 +1,12 @@
-import { FormEvent, ChangeEvent, useEffect } from "react";
+import { FormEvent, ChangeEvent, useEffect, useState } from "react";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 // import { loader } from "../../assets";
 import { v4 as uuidv4 } from "uuid";
 import { PatientInfo } from "./PatientTypes";
 import axios from "axios";
+import minLogo from "../../assets/min.svg";
+import maxLogo from "../../assets/max.svg";
 
 // TODO: refactor with Formik
 
@@ -22,6 +24,16 @@ const NewPatientForm = ({
   allPatientInfo,
   setAllPatientInfo,
 }: NewPatientFormProps) => {
+  const [isPressed, setIsPressed] = useState(false);
+
+  const handleMouseDown = () => {
+    setIsPressed(true);
+  };
+
+  const handleMouseUp = () => {
+    setIsPressed(false);
+  };
+  const [enterNewPatient, setEnterNewPatient] = useState(true);
   useEffect(() => {
     const patientInfoFromLocalStorage = JSON.parse(
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -45,23 +57,25 @@ const NewPatientForm = ({
       "http://localhost:3001/diagnosis",
       payload
     );
-    console.log(data);
+
     const generatedGuid = uuidv4();
+    const firstFiveCharacters = generatedGuid.substring(0, 5);
+    console.log(firstFiveCharacters);
 
-    setPatientInfo({ ...patientInfo, ID: generatedGuid });
+    setPatientInfo({ ...patientInfo, ID: firstFiveCharacters });
     if (data) {
       const description = data.message.choices[0].message.content;
 
       const newDescription = {
         ...patientInfo,
         Description: description,
-        ID: generatedGuid,
+        ID: firstFiveCharacters,
       };
-      console.log(data);
+
       const updatedAllPatientInfo = [newDescription, ...allPatientInfo];
       setPatientInfo(newDescription);
 
-      console.log("Logged new description");
+      // console.log("Logged new description");
       setAllPatientInfo(updatedAllPatientInfo);
 
       localStorage.setItem(
@@ -89,108 +103,153 @@ const NewPatientForm = ({
     }
   };
 
+  const handleClickSummary = () => {
+    setEnterNewPatient(!enterNewPatient);
+  };
+
   return (
     
    
       {/* {search} */}
       
    
         
    
-        
    
-          {" "}
-          
    
-            Enter New Patient
-          
    
+        
    
+          {enterNewPatient ? (
+            
    
+              
    
+                Enter New Patient
+              
    
+            
    
+          ) : (
+            
    
+              
    
+                Click To Enter New
+                 Patient
+              
    
+            
    
+          )}
+          
    
+            {enterNewPatient ? (
+              logo
+            ) : (
+              logo
+            )}
+          
    
         
    
-
-        
    
-          {/* 
+            {/* link-icon */}
-          
    
-            
-            
-          
    
-          
    
-            
-            
-            {patientInfo.Diagnosis === "Other" && (
+            
    
+              
               
+            
    
+            
    
+              
+              
+              {patientInfo.Diagnosis === "Other" && (
+                
+                    setPatientInfo({
+                      ...patientInfo,
+                      OtherDiagnosis: e.target.value,
+                    })
+                  }
+                  required
+                  className="url_input peer"
+                />
+              )}
+            
    
+            
    
+              
+              
                   setPatientInfo({
                     ...patientInfo,
-                    OtherDiagnosis: e.target.value,
+                    CurrentMedications: String(e.target.value),
                   })
                 }
                 required
                 className="url_input peer"
               />
-            )}
-          
    
-          
    
-            
-            
-                setPatientInfo({
-                  ...patientInfo,
-                  CurrentMedications: String(e.target.value),
-                })
-              }
-              required
-              className="url_input peer"
-            />
-          
    
+            
    
 
-          
    
-            
-          
    
-        
    
+            
    
+              
+            
    
+          
+        )}
         
    
       
    
 
diff --git a/src/pages/PatientManager/PatientID.tsx b/src/pages/PatientManager/PatientID.tsx
index c4c0cf40..dfdbd5ea 100644
--- a/src/pages/PatientManager/PatientID.tsx
+++ b/src/pages/PatientManager/PatientID.tsx
@@ -10,7 +10,9 @@ interface PatientIDInputProps {
 function PatientIDInput({ patientInfo, setPatientInfo }: PatientIDInputProps) {
   useEffect(() => {
     const generatedGuid = uuidv4();
-    setPatientInfo({ ...patientInfo, ID: generatedGuid });
+    const firstFiveCharacters = generatedGuid.substring(0, 5);
+    console.log(firstFiveCharacters);
+    setPatientInfo({ ...patientInfo, ID: firstFiveCharacters });
   }, []);
 
   return (
diff --git a/src/pages/PatientManager/PatientSummary.tsx b/src/pages/PatientManager/PatientSummary.tsx
index 712c2aad..2605852b 100644
--- a/src/pages/PatientManager/PatientSummary.tsx
+++ b/src/pages/PatientManager/PatientSummary.tsx
@@ -1,5 +1,8 @@
 import { PatientInfo } from "./PatientTypes";
 // import { loader } from "../../assets";
+import minLogo from "../../assets/min.svg";
+import maxLogo from "../../assets/max.svg";
+import { useState } from "react";
 
 interface PatientSummaryProps {
   patientInfo: PatientInfo;
@@ -12,6 +15,12 @@ const PatientSummary = ({
   getMedicationInfo,
   loader,
 }: PatientSummaryProps) => {
+  const [showSummary, setShowSummary] = useState(true);
+
+  const handleClickSummary = () => {
+    setShowSummary(!showSummary);
+  };
+
   return (
     
    
       {getMedicationInfo.isFetching ? (
@@ -26,58 +35,85 @@ const PatientSummary = ({
         
    
       ) : (
         patientInfo.Description && (
-          
    
-            
    
-              Patient Summary
-            
    
-            
    
-              
    
-                
-                
-                
-                
    
-                    
    
-                    {/* {patientInfo.Description} */}
-                  
    
-                
-              
    
+          
    
+            
    
+              
    
+                
    
+                  Patient Summary
+                
    
+              
    
+              
    
+                {showSummary ? (
+                  logo
+                ) : (
+                  logo
+                )}
+              
    
             
    
+            {showSummary && (
+              
    
+                
    
+                  
+                  
+                  
+                  
    
+                      
    
+                      {/* {patientInfo.Description} */}
+                    
    
+                  
+                
    
+              
    
+            )}
           
    
         )
       )}

From 731c20cc1e36e6e4c12752e8d5ad22bd6dc53f45 Mon Sep 17 00:00:00 2001
From: taichan03 
Date: Sun, 16 Jul 2023 11:13:13 -0400
Subject: [PATCH 8/8] updated the NewPatientForm

---
 src/App.css                                 |   6 +-
 src/pages/PatientManager/NewPatientForm.tsx | 104 ++++++++++++--------
 2 files changed, 70 insertions(+), 40 deletions(-)

diff --git a/src/App.css b/src/App.css
index 78326a5c..7b2c7349 100644
--- a/src/App.css
+++ b/src/App.css
@@ -101,7 +101,7 @@
 }
 
 .black_btn {
-  @apply rounded-full border border-black bg-blue-600 py-2.5 px-6 text-sm text-white transition-all hover:bg-white hover:text-black;
+  @apply rounded-full border border-black bg-blue-500 py-2.5 px-6 text-sm text-white transition-all hover:bg-white hover:text-black;
 }
 
 .head_text {
@@ -129,6 +129,10 @@
   @apply block w-full rounded-md border border-gray-300 bg-white py-2.5 pl-5 pr-5 text-sm shadow-lg font-satoshi font-medium focus:border-black focus:outline-none focus:ring-0;
 }
 
+.url_input_loading {
+  @apply block w-full rounded-md border border-gray-300 bg-white py-2.5 pl-5 pr-5 text-sm shadow-lg font-satoshi font-medium focus:border-black focus:outline-none focus:ring-0 bg-gray-300 bg-opacity-50;
+}
+
 .submit_btn {
   @apply hover:border-gray-700 hover:text-gray-700 absolute inset-y-0 right-0 my-1.5 mr-1.5 flex w-10 items-center justify-center rounded border border-gray-200 font-sans text-sm font-medium text-gray-400;
 }
diff --git a/src/pages/PatientManager/NewPatientForm.tsx b/src/pages/PatientManager/NewPatientForm.tsx
index caf58add..85b1f45d 100644
--- a/src/pages/PatientManager/NewPatientForm.tsx
+++ b/src/pages/PatientManager/NewPatientForm.tsx
@@ -1,7 +1,7 @@
 import { FormEvent, ChangeEvent, useEffect, useState } from "react";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-// import { loader } from "../../assets";
+import { loader } from "../../assets";
 import { v4 as uuidv4 } from "uuid";
 import { PatientInfo } from "./PatientTypes";
 import axios from "axios";
@@ -25,6 +25,7 @@ const NewPatientForm = ({
   setAllPatientInfo,
 }: NewPatientFormProps) => {
   const [isPressed, setIsPressed] = useState(false);
+  const [isLoading, setIsLoading] = useState(false); // Added loading state
 
   const handleMouseDown = () => {
     setIsPressed(true);
@@ -49,41 +50,47 @@ const NewPatientForm = ({
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
 
+    setIsLoading(true); // Start loading
+
     const payload = {
       diagnosis: patientInfo.Diagnosis,
     };
-    // const { data } = await getMedicationInfo("");
-    const { data } = await axios.post(
-      "http://localhost:3001/diagnosis",
-      payload
-    );
 
-    const generatedGuid = uuidv4();
-    const firstFiveCharacters = generatedGuid.substring(0, 5);
-    console.log(firstFiveCharacters);
+    try {
+      const { data } = await axios.post(
+        "http://localhost:3001/diagnosis",
+        payload
+      );
 
-    setPatientInfo({ ...patientInfo, ID: firstFiveCharacters });
-    if (data) {
-      const description = data.message.choices[0].message.content;
+      const generatedGuid = uuidv4();
+      const firstFiveCharacters = generatedGuid.substring(0, 5);
 
-      const newDescription = {
-        ...patientInfo,
-        Description: description,
-        ID: firstFiveCharacters,
-      };
+      setPatientInfo({ ...patientInfo, ID: firstFiveCharacters });
 
-      const updatedAllPatientInfo = [newDescription, ...allPatientInfo];
-      setPatientInfo(newDescription);
+      if (data) {
+        const description = data.message.choices[0].message.content;
 
-      // console.log("Logged new description");
-      setAllPatientInfo(updatedAllPatientInfo);
+        const newDescription = {
+          ...patientInfo,
+          Description: description,
+          ID: firstFiveCharacters,
+        };
 
-      localStorage.setItem(
-        "patientInfos",
-        JSON.stringify(updatedAllPatientInfo)
-      );
-    } else {
-      console.log("No description came back");
+        const updatedAllPatientInfo = [newDescription, ...allPatientInfo];
+        setPatientInfo(newDescription);
+        setAllPatientInfo(updatedAllPatientInfo);
+
+        localStorage.setItem(
+          "patientInfos",
+          JSON.stringify(updatedAllPatientInfo)
+        );
+      } else {
+        console.log("No description came back");
+      }
+    } catch (error) {
+      console.log("Error occurred:", error);
+    } finally {
+      setIsLoading(false); // Stop loading
     }
   };
 
@@ -145,11 +152,6 @@ const NewPatientForm = ({
         
    
         {enterNewPatient && (
           
    
-            {/* link-icon */}
             
    
               
    
-            
    
+            
    
               
    
             
    
               
    
 
@@ -241,11 +255,23 @@ const NewPatientForm = ({
                   isPressed
                     ? ""
                     : "transition-transform hover:scale-105 focus:outline-none focus:ring focus:ring-blue-500"
+                }${
+                  isLoading
+                    ? "transition-transform bg-white-600 scale-105 focus:outline-none focus:ring focus:ring-blue-500"
+                    : ""
                 }`}
                 onMouseDown={handleMouseDown}
                 onMouseUp={handleMouseUp}
+                disabled={isLoading} // Disable the button while loading
               >
-                
    Submit
    
+                {isLoading ? ( // Render loading icon if loading
+                  
    
+                    
    
+                    
    Loading...
    
+                  
    
+                ) : (
+                  
    Submit
    
+                )}