computiq-training · maryamaltuma · Nov 16, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,8 @@
     "cra-template": "1.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1"
+    "react-scripts": "5.0.1",
+    "web-vitals": "^3.0.4"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Clinical</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -36,3 +36,45 @@
     transform: rotate(360deg);
   }
 }
+.form_class {
+  display: white;
+  margin: 60px auto;
+
+  width: 90%;
+}
+.table {
+  border: 2px solid rgb(34, 124, 177);
+  width: 800px;
+  height: 200px;
+  position: relative;
+  left: 20px;
+  top: 100px;
+}
+
+input{
+  margin:5px ;
+}
+
+.delete {
+  border-radius: 5px;
+  border: 0px;
+  color: white;
+  background-color: #FF5353;
+  font-weight: bold;
+}
+
+.table td {
+  padding: 3px 6px;
+  color: black;
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+
+.table tr:nth-child(even) {
+  background-color: white;
+}
+.button {
+  color: white;
+  background-color: blue;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,12 +1,30 @@
 import './App.css';
+import { useState } from 'react';
+import Patients from './Components/Patients';
+import PTable from './Components/PTable';
+
+function App() {
+  const [patients, setPatients] = useState([])
+  // const [filteredList, setFilteredList] = useState(patients);
+
+  const addPatient=(patient)=>{
+    setPatients([...patients, patient])
+    // setFilteredList([...patients, patient])
+    console.log(patients)
+  }
+
+  const onDelete =(id)=>{
+    const delP = patients.filter(p=> p.id !== id)
+    // const delF = filteredList.filter(p=> p.id !== id)
+    // setFilteredList(delF)
+    setPatients(delP)
+  }
+
+    return (
+      <div className="App">
+         <Patients addPatient={addPatient} />
+      <PTable patients={patients} onDelete={onDelete}/>
 
-const App = ()=>{
-  // State here
-  return (
-    <div className="App">
-      {/* Add new patient FORM */}
-      {/* Search input */}
-      {/* Table */}
     </div>
   );
 }

diff --git a/src/Components/PCard.jsx b/src/Components/PCard.jsx
@@ -0,0 +1,12 @@
+function PCard(props) {
+    return ( <tr>
+        <td>{"#"}</td>
+        <td>{props.patient.full_name}</td>
+        <td>{props.patient.phone}</td>
+        <td>{props.patient.gender}</td>
+        <td>{props.patient.birth_date}</td>
+        <td><button className="delete" onClick={()=>props.onDelete(props.patient.id)}>Delete</button></td>
+      </tr> );
+}
+
+export default PCard;
diff --git a/src/Components/PTable.jsx b/src/Components/PTable.jsx
@@ -0,0 +1,28 @@
+import '../App.css'
+import PCard from './PCard';
+
+function PTable(props) {
+    return ( 
+        <div>
+          <table className="table">
+          <thead>
+            <tr>
+              <td>ID</td>
+              <td>Full Name</td>
+              <td>Phone</td>
+              <td>Gender</td>
+              <td>Birth Date</td>
+              <td></td>
+            </tr>
+          </thead>
+
+          {
+            props.patients.map(p=> <PCard patient={p} onDelete={props.onDelete}/>)
+
+          }
+                    </table>
+                </div>
+            );
+        }
+
+export default PTable;
diff --git a/src/Components/Patients.jsx b/src/Components/Patients.jsx
@@ -0,0 +1,58 @@
+import { useState } from "react";
+import { v4 as uuidv4 } from 'uuid';
+import '../App.css'
+
+function PForm(props) {
+    const [fullName, setFullName]=useState('')
+    const [phone, setPhone]= useState('')
+    const [gender, setGender]= useState('')
+    const [birthDate, setBirthDate]= useState('')
+
+
+    const addName =(e)=>{
+        setFullName(e.target.value)
+    }
+
+    const addBirth =(e)=>{
+        setBirthDate(e.target.value)
+    }
+
+    const addGender =(e)=>{
+        setGender(e.target.value)
+    }
+
+    const addPhone =(e)=>{
+        setPhone(e.target.value)
+    }
+
+    const Submit =(e)=>{
+        e.preventDefault()
+        const patient ={
+           id: uuidv4(),
+            full_name: fullName,
+            birth_date:birthDate,
+            gender:gender,
+            phone:phone
+
+        }
+        props.addPatient(patient)
+        setBirthDate('')
+        setFullName('')
+        setPhone('')
+    }
+
+    return ( 
+        <form className=" form_class" onSubmit={Submit}>
+            <input placeholder="Full Name" value={fullName} onChange={addName}/>
+            <input placeholder="Phone" value={phone} onChange={addPhone}/>
+            <select onChange={addGender} placeholder="Gender">
+                <option value='Male' selected>Male</option>
+                <option value='Female'>Female</option>
+            </select>
+            <input placeholder="Birth Date" value={birthDate} type="date" onChange={addBirth}/>
+            <button type="submit" className ="button">New</button>
+        </form>
+     );
+}
+
+export default PForm;