updated the NewPatientForm

CodeForPhilly · Jul 16, 2023 · 731c20c · 731c20c
1 parent 83d2efd
commit 731c20c
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 40 deletions.
diff --git 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
@@ -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<HTMLFormElement>) => {
     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 = ({
         </div>
         {enterNewPatient && (
           <form onSubmit={handleSubmit}>
-            {/* <img
-            src={linkIcon}
-            alt="link-icon"
-            className="absolute left-0 my-2 ml-3 w-5"
-          /> */}
             <div>
               <label
                 htmlFor="name"
@@ -162,10 +164,14 @@ const NewPatientForm = ({
                 placeholder="Patient ID will be created on submit"
                 value={patientInfo.ID}
                 readOnly
-                className="url_input peer w-1/2"
+                className={
+                  isLoading
+                    ? " url_input_loading peer w-1/2"
+                    : "url_input peer w-1/2"
+                }
               />
             </div>
-            <div className=" mt-5">
+            <div className="mt-5">
               <label
                 htmlFor="diagnosis"
                 className="block font-latoBold text-sm pb-2"
@@ -176,7 +182,11 @@ const NewPatientForm = ({
                 value={patientInfo.Diagnosis}
                 onChange={handleDiagnosisChange}
                 required
-                className="url_input peer"
+                className={
+                  isLoading
+                    ? " url_input_loading peer w-1/2"
+                    : "url_input peer w-1/2"
+                }
               >
                 <option value="Other">Select a diagnosis</option>
                 <option value="Bipolar I mania">Bipolar I mania</option>
@@ -196,7 +206,7 @@ const NewPatientForm = ({
                   Cyclothymic disorder
                 </option>
               </select>
-              {patientInfo.Diagnosis === "Other" && (
+              {/* {patientInfo.Diagnosis === "Other" && (
                 <input
                   type="text"
                   placeholder="Please specify"
@@ -210,7 +220,7 @@ const NewPatientForm = ({
                   required
                   className="url_input peer"
                 />
-              )}
+              )} */}
             </div>
             <div className="items-center mt-5">
               <label
@@ -230,7 +240,11 @@ const NewPatientForm = ({
                   })
                 }
                 required
-                className="url_input peer"
+                className={
+                  isLoading
+                    ? " url_input_loading peer w-1/2"
+                    : "url_input peer w-1/2"
+                }
               />
             </div>
 
@@ -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
               >
-                <p>Submit</p>
+                {isLoading ? ( // Render loading icon if loading
+                  <div className="flex items-center">
+                    <div className="w-4 h-4 rounded-full bg-white animate-ping mr-2"></div>
+                    <p>Loading...</p>
+                  </div>
+                ) : (
+                  <p>Submit</p>
+                )}
               </button>
             </div>
           </form>