Auth api integration

package.json

@@ -13,7 +13,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.4.0",
-    "ethers": "^6.6.0",
+    "ethers": "^5.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",

src/App.js

@@ -10,12 +10,14 @@ import Register from "./pages/Register";
 import Login from "./pages/Login";
 import DashboardLayout from "./components/DashboardLayout";
 import ViewMedicalRecords from "./pages/ViewMedicalRecords";
-import ViewOtherRecords from "./pages/ViewOtherRecords";
+import MyRecords from "./pages/MyRecords";
 import ConnectWalletDr from "./pages/ConnectWalletDr";
 import ManageAccess from "./containers/ManageAccess/ManageAccess";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import ConnectWallets from "./pages/ConnectWallet";
+import AuthorizedAddresses from "./pages/AuthorizedAddresses";
+import GetAllInfo from "./pages/GetAllInfo";
 
 const App = () => {
   return (
@@ -35,13 +37,18 @@ const App = () => {
           <Route path="/login" element={<Login />} />
           <Route path="/connectwallet" element={<ConnectWallets />} />
           <Route path="/connectwalletdr" element={<ConnectWalletDr />} />
+          <Route path="/getallinfo" element={<GetAllInfo />} />
           <Route path="/dashboard" element={<DashboardLayout />}>
             <Route
               path="/dashboard/medicalrecords"
               element={<ViewMedicalRecords />}
             />
-            <Route path="/dashboard/medical" element={<ViewOtherRecords />} />
+            <Route path="/dashboard/myrecords" element={<MyRecords />} />
             <Route path="/dashboard/manageaccess" element={<ManageAccess />} />
+            <Route
+              path="/dashboard/authorizedaddresses"
+              element={<AuthorizedAddresses />}
+            />
           </Route>
         </Routes>
       </BrowserRouter>

src/api/auth.js

@@ -6,8 +6,8 @@ export const signUp = async (userDataObj) => {
   return response;
 };
 
-export const logIN = async () => {
-  const response = await request.post("/user/login");
+export const logIn = async (logInObj) => {
+  const response = await request.post("/user/login", logInObj);
 
   return response;
 };

src/api/dashboard.js

@@ -0,0 +1,10 @@
+import request from "./request";
+
+export const allergy = async (allergyDetail) => {
+  const response = await request.post(
+    "https://fakestoreapi.com/products/1",
+    allergyDetail
+  );
+
+  return response;
+};

src/components/Allergies.js

@@ -2,17 +2,20 @@ import React, { useState } from "react";
 import AllergyModal from "../components/AllergyModal";
 import no_records from "../images/no_record.png";
 import entry from "../images/entry.png";
+import { useSnapshot } from "valtio";
+import store from "../store/Index";
 
 const Allergies = () => {
   const [show, setShow] = useState(false);
+  const snap = useSnapshot(store);
 
   return (
     <div className="allergy">
       <h3>Allergies</h3>
       <span>
         <div className="allergies_card">
           <img src={no_records} alt="" />
-          <p>No Record Yet</p>
+          <p>{snap.allergyData}</p>
         </div>
         <div className="new-entry_section" onClick={() => setShow(true)}>
           <img src={entry} alt="" />

src/components/AllergyModal.js

@@ -1,41 +1,101 @@
-import React from "react";
+import React, { useState } from "react";
+import { ethers, BigNumber } from 'ethers';
+import contractABI from "./contractABI.json";
 
+
 const AllergyModal = (props) => {
+  const [allergyDetails, setAllergyDetails] = useState({
+    allergyName: "",
+    description: "",
+    startDate: "",
+    medication: "",
+  });
+  const contractAddress = '0x8084B71fd847053621f36a3A87DDC885f45A467D';
+  const contractAbi = contractABI; 
+  const provider = new ethers.providers.Web3Provider(window.ethereum);
+  const signer = provider.getSigner();
+
+
   if (!props.show) {
     return null;
   }
+
+
+
+  const addAllergy = async () => {
+    try {
+      const contract = new ethers.Contract(contractAddress, contractAbi, signer);
+      const { allergyName, description, startDate, medication } = allergyDetails;
+
+      const startDateValue = BigNumber.from(Date.parse(startDate) / 1000);
+      await contract.addAllergy(allergyName, description, startDateValue, medication);
+
+      setAllergyDetails({
+        allergyName: "",
+        description: "",
+        startDate: "",
+        medication: "",
+      });
+
+      alert("Allergy added successfully!");
+
+      props.onClose();
+    } catch (error) {
+      console.error("Error adding allergy:", error);
+      alert("Error adding allergy. Please try again.");
+    }
+  };
+
+  const handleInputChange = (e) => {
+    setAllergyDetails({
+      ...allergyDetails,
+      [e.target.name]: e.target.value,
+    });
+  };
+
   return (
     <div className="modal allergy_modal" onClick={props.onClose}>
       <div className="modal_content" onClick={(e) => e.stopPropagation()}>
         <div className="modal_title">
           <h2>Add Allergy</h2>
         </div>
         <div className="modal_body">
-          <h4>Allergy Type</h4>
-          <form>
-            <select>
-              <option>Allergy Type</option>
-              <option>Hay fever</option>
-              <option>Atopic dermatitis</option>
-              <option>Anaphylaxis</option>
-              <option>Latex</option>
-              <option>Beciomethasone nasal</option>
-              <option>Aceta-Gesic</option>
-              <option>Acuflex</option>
-              <option>Loratadine</option>
-              <option>Verbena</option>
-              <option>Zymine</option>
-            </select>
-          </form>
-          <input type="text" placeholder="Enter Allergy Name" />
-          <h4>Diagnosed date</h4>
-          <input type="date" className="calendar" />
-          <input type="text" placeholder="Disease" />
-          <input type="text" placeholder="Description" />
-          <input type="text" placeholder="Medication" />
+          <h4>Allergy Name</h4>
+          <input
+            type="text"
+            name="allergyName"
+            value={allergyDetails.allergyName}
+            onChange={handleInputChange}
+            placeholder="Enter Allergy Name"
+          />
+          <h4>Description</h4>
+          <input
+            type="text"
+            name="description"
+            value={allergyDetails.description}
+            onChange={handleInputChange}
+            placeholder="Description"
+          />
+          <h4>Start Date</h4>
+          <input
+            type="date"
+            name="startDate"
+            value={allergyDetails.startDate}
+            onChange={handleInputChange}
+            pattern="\d{4}-\d{2}-\d{2}"
+            placeholder="YYYY-MM-DD"
+          />
+          <h4>Medication</h4>
+          <input
+            type="text"
+            name="medication"
+            value={allergyDetails.medication}
+            onChange={handleInputChange}
+            placeholder="Put in the meds"
+          />
         </div>
         <div className="modal_footer">
-          <button>Add</button>
+          <button onClick={addAllergy}>Add</button>
           <button onClick={props.onClose} className="close_button">
             Close
           </button>

src/components/DashboardLayout.js

@@ -1,16 +1,10 @@
-import React, { useEffect } from "react";
+import React from "react";
 import "../css/styles.css";
 import SideBar from "../components/SideBar";
+import { Outlet } from "react-router-dom";
 import Navbar from "../components/NavBar";
-import { Outlet, useNavigate } from "react-router-dom";
 
 const DashboardLayout = () => {
-  const navigate = useNavigate();
-  useEffect(() => {
-    // navigate("/connectwallet");
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   return (
     <div className="app_container">
       <SideBar />

src/components/DisabilitiesModal.js

@@ -1,30 +1,79 @@
-import React from "react";
+import React, { useState } from "react";
+import { ethers } from "ethers";
+import contractAbi from "./contractABI.json";
+
+const contractAddress = "0x8084B71fd847053621f36a3A87DDC885f45A467D";
+const contractABI = contractAbi;
+const provider = new ethers.providers.Web3Provider(window.ethereum);
+const signer = provider.getSigner();
+const contract = new ethers.Contract(contractAddress, contractABI, signer);
 
 const DisabilitiesModal = (props) => {
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const handleAddDisability = async () => {
+    try {
+      const disability = document.getElementById("disabilityInput").value;
+      const diagnosisDateInput =
+        document.getElementById("diagnosisDateInput").value;
+      const description = document.getElementById("descriptionInput").value;
+      const medication = document.getElementById("medicationInput").value;
+
+      // Convert diagnosisDate to a Unix timestamp
+      const diagnosisDate = new Date(diagnosisDateInput).getTime() / 2000;
+
+      await contract.addDisability(
+        disability,
+        diagnosisDate,
+        description,
+        medication
+      );
+
+      document.getElementById("disabilityInput").value = "";
+      document.getElementById("diagnosisDateInput").value = "";
+      document.getElementById("descriptionInput").value = "";
+      document.getElementById("medicationInput").value = "";
+
+      props.onClose();
+    } catch (error) {
+      console.error("Error adding disability:", error);
+      setErrorMessage(
+        "An error occurred while adding the disability. Please try again."
+      );
+    }
+  };
+
   if (!props.show) {
     return null;
   }
+
   return (
     <div className="modal disabilities_modal" onClick={props.onClose}>
       <div className="modal_content" onClick={(e) => e.stopPropagation()}>
         <div className="modal_title">
           <h2>Add Disability</h2>
         </div>
         <div className="modal_body">
-          <h4>Disability Type</h4>
-          <input type="checkbox" />
-          <p>Learning Disability</p>
-          <h4>Diagnosed date</h4>
-          <input type="date" className="calendar" />
-          <input type="text" placeholder="Description" />
-          <input type="text" placeholder="Medication" />
+          <h4>Disability</h4>
+          <input
+            id="disabilityInput"
+            type="text"
+            placeholder="What is your disease state?"
+          />
+          <h4>Diagnosis date</h4>
+          <input id="diagnosisDateInput" type="date" placeholder="YYYY-MM-DD" />
+          <h4>Description</h4>
+          <input id="descriptionInput" type="text" placeholder="Description" />
+          <h4>Medication</h4>
+          <input id="medicationInput" type="text" placeholder="Add your meds" />
         </div>
         <div className="modal_footer">
-          <button>Add</button>
+          <button onClick={handleAddDisability}>Add</button>
           <button onClick={props.onClose} className="close_button">
             Close
           </button>
         </div>
+        {errorMessage && <p className="error_message">{errorMessage}</p>}
       </div>
     </div>
   );

src/components/InfoSection.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+const InfoSection = () => {
+  return (
+    <div>
+      <section>
+        <h2>Blood Group</h2>
+        <input type="text" />
+      </section>
+      <section>
+        <h2>Genotype</h2>
+        <input type="text" />
+        <h2>Weight (kg)</h2>
+        <input type="text" />
+      </section>
+      <button>add</button>
+    </div>
+  );
+};
+
+export default InfoSection;

src/components/MyRecordAllergies.js

@@ -0,0 +1,17 @@
+import no_records from "../images/no_record.png";
+
+const MyRecordAllergies = () => {
+  return (
+    <>
+      <h3>Allergies</h3>
+      <span>
+        <div className="disabilities_card">
+          <img src={no_records} alt="" />
+          <p>No Record Yet</p>
+        </div>
+      </span>
+    </>
+  );
+};
+
+export default MyRecordAllergies;