computiq-training · Ali-Abbas-Jumaa · Nov 14, 2022
diff --git a/src/App.css b/src/App.css
@@ -2,37 +2,93 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+
+
+
+.patient-form {
+  display: flex;
+  justify-content: space-between;
+  margin: 40px auto;
+  width: 90%;
+}
+
+.inputs {
+  width: 60%;
+  display: flex;
+  justify-content: space-between;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.form-input {
+  padding: 8px 16px;
+  box-sizing: border-box;
+  border: 1px solid #ababab;
+  border-radius: 8px;
+  background-color: #f8f8f8;
+  font-size: 1rem;
+  width: 160px;
+  color: #a1a1a1;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.search-wrap {
+  width: 90%;
+  margin: 20px auto;
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
+  justify-content: flex-start;
+}
+
+.search-field {
+  padding: 8px 16px;
+  box-sizing: border-box;
+  border: 1px solid #ababab;
+  border-radius: 8px;
+  background-color: #f8f8f8;
+  font-size: 1rem;
+  width: 400px;
+  color: #a1a1a1;
+
+}
+
+.delete-button {
+  border-radius: 5px;
+  border: 0px;
+  color: white;
+  background-color: #FF5353;
+  font-weight: bold;
+}
+
+.add-button {
+  border-radius: 8px;
+  font-size: 1rem;
+  font-weight: bold;
+  border: 0px;
   color: white;
+  background-color: #3995FF;
+  padding: 8px 60px;
 }
 
-.App-link {
-  color: #61dafb;
+.patients-table {
+  width: 90%;
+  border-collapse: collapse;
+  border: 1px solid #ababab;
+  text-align: center;
+  vertical-align: middle;
+  margin: 2rem auto;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.patients-table td {
+  padding: 6px 12px;
+  color: grey;
+  font-size: 1rem;
 }
+
+.patients-table th {
+  padding: 6px 12px;
+  background: #3995FF;
+  color: white;
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+
+.patients-table tr:nth-child(even) {
+  background-color: #ebebeb;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,12 +1,145 @@
 import './App.css';
+import { useState } from "react"
 
-const App = ()=>{
-  // State here
+
+const PATIENTS = [
+  {
+    id: 1,
+    full_name: "Ali Ahmed",
+    birth_date: "10/10/1999",
+    gender: "m",
+    phone: "+96477889654"
+  },
+  {
+    id: 2,
+    full_name: "Ameer Saad",
+    birth_date: "10/10/2000",
+    gender: "m",
+    phone: "+96477809654"
+  },
+  {
+    id: 3,
+    full_name: "Muna Ali",
+    birth_date: "10/10/1998",
+    gender: "f",
+    phone: "+964777809654"
+  }
+];
+
+const App = () => {
+  const [patients, setPatients] = useState(PATIENTS)
+  const [filteredValues, setFilteredValues] = useState(PATIENTS)
+  const [searchValue, setSearchValue] = useState('')
+  const [fullName, setFullName] = useState('')
+  const [date, setDate] = useState('')
+  const [phone, setPhone] = useState('')
+  const [gender, setGender] = useState('m')
+
+  const addNew = () => {
+    if (!fullName | !phone | !date) {
+      alert('Please fill all fields')
+      return;
+    }
+    let pTemp = !patients ? [] : patients
+    // let pFiltered = !filteredValues ? [] : filteredValues
+    let newObj = {
+      id: patients.length + 1,
+      full_name: fullName,
+      birth_date: date,
+      gender: gender,
+      phone: phone
+    }
+    pTemp.push(newObj)
+
+    setPatients([...pTemp])
+    setFilteredValues([...pTemp])
+    setSearchValue("")
+  }
+  const searchAction = (v) => {
+    // let v = e.target.value
+    var filtered = []
+    setSearchValue(v)
+    if (v === "") {
+      setFilteredValues([...patients])
+    } else {
+      // filtered = patients.filter(p => v.trim().toUpp === p.full_name || v.trim() === p.phone)
+      filtered = patients.filter(p => p.full_name.toUpperCase().indexOf(v.toUpperCase()) > -1 || p.phone.indexOf(v) > -1)
+      setFilteredValues([...filtered])
+    }
+    console.log(v)
+
+  }
+  const changeFullName = (e) => {
+    let v = e.target.value
+    setFullName(v)
+  }
+  const changePhone = (e) => {
+    let v = e.target.value
+    setPhone(v)
+  }
+  const changeDate = (e) => {
+    let v = e.target.value
+    setDate(v)
+  }
+  const deletePatient = (id) => {
+    let index = patients.findIndex((p) => p.id === id)
+    let tempPatients = patients
+    tempPatients.splice(index, 1)
+    setPatients([...tempPatients])
+    setFilteredValues([...tempPatients])
+    searchAction(searchValue)
+  }
+
+
+  const genderOnChange = (e) => {
+    setGender(e.target.value)
+  }
+  const submit = (e) => {
+    e.preventDefault()
+    addNew()
+  }
   return (
     <div className="App">
-      {/* Add new patient FORM */}
-      {/* Search input */}
-      {/* Table */}
+      <form onSubmit={submit} className="patient-form">
+        <div className='inputs'>
+          <input value={fullName} onChange={changeFullName} type="text" placeholder="Full Name" className='form-input' />
+          <input value={phone} onChange={changePhone} type="text" placeholder="Phone" className='form-input' />
+          <input value={date} onChange={changeDate} type="date" placeholder="Birth Date" className='form-input' />
+          <select value={gender} onChange={genderOnChange} className='form-input'>
+            <option value='m'>Male</option>
+            <option value="f">Female</option>
+          </select>
+        </div>
+        <button type="submit" className='add-button'>New</button>
+      </form>
+      <div className='search-wrap'>
+        <input value={searchValue} onChange={(e) => searchAction(e.target.value)} type="text" placeholder="Search..." className='search-field'></input>
+      </div>
+      <table className='patients-table'>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Full Name</th>
+            <th>Phone</th>
+            <th>Gender</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {
+            patients ? filteredValues.map((patient, index) => {
+              return <tr key={patient.id}>
+                <td>{patient.id}</td>
+                <td>{patient.full_name}</td>
+                <td>{patient.phone}</td>
+                <td>{patient.gender}</td>
+                <td><button onClick={() => deletePatient(patient.id)} className={"delete-button"}>Delete</button></td>
+              </tr>
+            }) :
+              <p>No Data</p>
+          }
+        </tbody>
+      </table>
     </div>
   );
 }

diff --git a/src/index.js b/src/index.js
@@ -14,4 +14,4 @@ root.render(
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+// reportWebVitals();
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
@@ -1,13 +1,13 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
+// const reportWebVitals = onPerfEntry => {
+//   if (onPerfEntry && onPerfEntry instanceof Function) {
+//     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+//       getCLS(onPerfEntry);
+//       getFID(onPerfEntry);
+//       getFCP(onPerfEntry);
+//       getLCP(onPerfEntry);
+//       getTTFB(onPerfEntry);
+//     });
+//   }
+// };
 
-export default reportWebVitals;
+// export default reportWebVitals;