Solved by Rasheed Wathiq

package.json

@@ -6,7 +6,9 @@
     "cra-template": "1.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1"
+    "react-scripts": "5.0.1",
+    "uuidv4": "^6.2.13",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -2,37 +2,34 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+table {
+  border: 2px solid rgb(34, 124, 177);
+  width: 800px;
+  height: 200px;
+  position: relative;
+  left: 20px;
+  top: 100px;
 }
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+
+th {
+  border-bottom: 1px solid black;
 }
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+
+td {
+  text-align: center;
 }
-
-.App-link {
-  color: #61dafb;
+form{
+  position: relative;
+  top: 82px;
+  left: -137px;
 }
+.search{
+  position: relative;
+    top: 87px;
+    left: -216px;
+    width: 465px;
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
 }
+input{
+  margin:5px ;
+}

src/App.js

@@ -1,14 +1,104 @@
+import logo from './logo.svg';
 import './App.css';
+import { useState } from 'react';
+import PatientForm from './components/PatientForm';
+import PatientDet from './components/PatientDet';
+
+
+
+function App() {
+  const [patients, setPatients] = useState([
+    {
+        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 [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)
+}
+
+
+
+  const filterBySearch = (event) => {
+
+    const pcopy = patients
+    console.log(pcopy)
+    const query = event.target.value;
+
+    var updatedList = [...patients];
+    updatedList = updatedList.filter((item) => {
+      return item.full_name.toLowerCase().indexOf(query.toLowerCase()) !== -1;
+    });
+
+    if(query){
+      setPatients(updatedList);
+    }
+    else{
+      setPatients(filteredList)
+    }
+
+  };
 
-const App = ()=>{
-  // State here
   return (
     <div className="App">
-      {/* Add new patient FORM */}
-      {/* Search input */}
-      {/* Table */}
+      <PatientForm addPatient={addPatient} />
+      <div>
+      <input className='search' placeholder='search' onChange={filterBySearch} />
+      </div>
+      <PatientDet patients={patients} onDelete={onDelete}/>
+      {/* {patients.map(p=> <li>{p.full_name}</li>)} */}
+      {/* <input  onChange={myFun}/>
+      <button onClick={()=>myFun(person)}>click</button> */}
+
     </div>
   );
 }
 
 export default App;
+
+
+
+// const [arr, setArr] = useState(['Ahmed', 'Fadi', 'Ammar', 'Aws', 'Zaid'])
+// const [person, setPerson] = useState('Ahmed')
+// let [filterArr, setFilterArr] = useState([])
+// let [name, setName] = useState('')
+
+// const myFun =(e)=>{
+//   // console.log(name)
+//   setName(e.target.value)
+//   // const upp = arr.filter((item)=> item==name)
+//   console.log(arr)
+//   setFilterArr(arr.filter((item)=> item==name))
+//   console.log(filterArr)
+
+
+// }

src/components/PatientDet.jsx

@@ -0,0 +1,27 @@
+import '../App.css'
+import PatientRec from './PatientRec';
+
+function PatientDet(props) {
+    return ( 
+        <div>
+            <table>
+            <tr>
+
+    <th>Full Name</th>
+    <th>Birth-Date</th>
+    <th>Gender</th>
+    <th>Phone</th>
+    <th>&nbsp;</th>
+  </tr>
+
+  {
+
+    props.patients.map(p=> <PatientRec patient={p} onDelete={props.onDelete}/>)
+
+  }
+            </table>
+        </div>
+     );
+}
+
+export default PatientDet;

src/components/PatientForm.jsx

@@ -0,0 +1,67 @@
+import { useState } from "react";
+// import { uuid } from 'uuidv4'
+import { v4 as uuidv4 } from 'uuid';
+import '../App.css'
+
+function PatientForm(props) {
+    const [name, setName]=useState('')
+    const [birth, setBirth]= useState('')
+    const [gender, setGender]= useState('m')
+    const [phone, setPhone]= useState('')
+
+
+    const handleName =(e)=>{
+        setName(e.target.value)
+    }
+
+    const handleBirth =(e)=>{
+        setBirth(e.target.value)
+    }
+
+    const handleGender =(e)=>{
+        setGender(e.target.value)
+    }
+
+    const handlePhone =(e)=>{
+        setPhone(e.target.value)
+    }
+
+    // const handleName =(e)=>{
+    //     setName(e.target.value)
+    // }
+    const handleSubmit =(e)=>{
+        e.preventDefault()
+        const patient ={
+           id: uuidv4(),
+            full_name: name,
+            birth_date:birth,
+            gender:gender,
+            phone:phone
+
+        }
+        props.addPatient(patient)
+        setBirth('')
+        setName('')
+        setPhone('')
+    }
+
+
+
+
+
+    return ( 
+        <form onSubmit={handleSubmit}>
+            <input placeholder="full Name" value={name} onChange={handleName}/>
+            <input placeholder="Birth" value={birth} onChange={handleBirth}/>
+            {/* <input placeholder="Gender" value={gender} onChange={handleGender}/> */}
+            <select onChange={handleGender}>
+                <option value='m' selected>Male</option>
+                <option value='f'>Female</option>
+            </select>
+            <input placeholder="Phone" value={phone} onChange={handlePhone}/>
+            <button type="submit">Add</button>
+        </form>
+     );
+}
+
+export default PatientForm;

src/components/PatientRec.jsx

@@ -0,0 +1,12 @@
+function PatientRec(props) {
+    return ( <tr>
+
+        <td>{props.patient.full_name}</td>
+        <td>{props.patient.birth_date}</td>
+        <td>{props.patient.gender}</td>
+        <td>{props.patient.phone}</td>
+        <td><button onClick={()=>props.onDelete(props.patient.id)}>Delete</button></td>
+      </tr> );
+}
+
+export default PatientRec;