Update api data

nodejs/routes/applicant.routes.js

@@ -34,5 +34,25 @@ router.get('/list-applicants', (req, res) => {
 
 // url: http://localhost:4000/applicants/list-applicants
 
+/* Update applicant data
+  First: get a single applicant data by ID
+*/
+router.get('/update-applicant/:id', (req, res) =>{
+  // findById() takes a single parameter, the document id.
+  // it returns a promise that resolves to the Mongoose document
+  // if MongoDB found a document with the given id
+  // or null if no document was found.
+  applicantSchema.findById(req.params.id)
+    .then(data => res.json(data))
+    .catch(err => res.status(404).json({dataError: 'Data not found in this id'}))
+});
+// url: http://localhost:4000/applicants/update-applicant/document_id
+
+// update a specified applicant data
+router.put('/update-applicant/:id', (req, res) => {
+  applicantSchema.findByIdAndUpdate(req.params.id, req.body)
+    .then(data => res.json({ msg: 'Data updated successfully' }))
+    .catch(err => res.status(400).json({ error: 'Unable to update this data' }));
+});
 // export the router
 module.exports = router

react/reactapp/src/App.css

@@ -36,7 +36,22 @@
     transform: rotate(360deg);
   }
 }
+.container {
+  display: block;
+  max-width: 90%;
+  width: 100%;
+  margin: 50px auto;
+  padding: 10px;
+  border-radius: 0 #8c6a55;
+  height: 100%;
+
+}
+
+@media (max-width: 767px) {
 
-.container{
-  padding: 20px;
+  .container{
+    min-width: 100%;
+    min-height: 100%;
+    margin: 20px auto;
+  }
 }

react/reactapp/src/App2.js

@@ -10,9 +10,10 @@ import './App.css';
 import Login from './components/login/Login'; // Login component from components
 import Dashboard from './components/Dashboard/Dashboard' // import Dashboard component
 import UseToken from './components/useToken';
+import Navbar from './components/Header/Navbar'
 import ApplicationForm from './components/Dashboard/ApplicationForm'
 import ShowApplicants from './components/Dashboard/ShowApplicants'
-import Navbar from './components/Header/Navbar'
+import EditApplicant from './components/Dashboard/EditApplicant'
 
 /* Add BrowserRouter, then add a Routes component as a child
    in the return method
@@ -29,18 +30,23 @@ function App() {
     <div className="container">
 
       <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<ApplicationForm />}>
-        </Route>
-      </Routes>
-      <Routes>
-        <Route path="/application" element={<ApplicationForm />}>
-        </Route>
-      </Routes>
-      <Routes>
-        <Route path="/list-applicants" element={<ShowApplicants />}>
-        </Route>
-      </Routes>
+        <Routes>
+          <Route path="/" element={<ApplicationForm />}>
+          </Route>
+        </Routes>
+        <Routes>
+          <Route path="/application" element={<ApplicationForm />}>
+          </Route>
+        </Routes>
+        <Routes>
+          <Route path="/list-applicants" element={<ShowApplicants />}>
+          </Route>
+        </Routes>
+
+        <Routes>
+          <Route path="/edit-applicant/:id" element={<EditApplicant />}>
+          </Route>
+        </Routes>
       </BrowserRouter>
     </div>
   </>

react/reactapp/src/components/Dashboard/ApplicationForm.js

@@ -58,8 +58,9 @@ function ApplicationForm(){
 //console.log({formValues})
   // return the form layout
   return (
-    <div className="form-container">
-      <div className="title">Application Form</div>
+    <div className='form-wraper'>
+      <div className="form-container">
+        <div className="title">Application Form</div>
         <form onSubmit={handleSubmit} >
           <div className="user__details">
             <div className="input__box">
@@ -103,6 +104,7 @@ function ApplicationForm(){
             <input type="submit" value='Apply' />
           </div>
         </form>
+      </div>
     </div>
   );
 }

react/reactapp/src/components/Dashboard/EditApplicant.js

@@ -0,0 +1,119 @@
+import {useState, useEffect} from 'react';
+import {useParams, useNavigate} from 'react-router-dom'
+import axios from 'axios';
+/* edit applicant data with id */
+
+function EditApplicant(){
+
+  // define states
+  const [applicant, setApplicant] = useState([])
+  const {id} = useParams();
+  /* useParams is one of the several react hooks in ract router
+    it used to retreive route paramaters from the component
+    rendered by the matching route
+  */
+   // add title 
+  useEffect(() =>{
+    document.title ='Aplicants List';
+  })
+
+  // API: get a single applicant data by ID
+  useEffect(() =>{
+    // string formatting: template literals are enclosed in backticks
+    axios.get(`http://localhost:4000/applicants/update-applicant/${id}`)
+          .then((res) =>{
+            setApplicant(res.data);
+          })
+          .catch((err) =>{
+            console.log("Error:" + err.message)
+          });
+  }, [id]);
+
+  //console.log(applicant)
+
+  /* handle onChange and onSubmit to update the specified applicant data */
+  // Define the state with useState hook
+  const navigate = useNavigate();
+  const [formValues, setFormValues] = useState({})
+
+  // define onChange to get form values
+  const handleChange = (event) => {
+    const name = event.target.name;
+    const value = event.target.value;
+
+    setFormValues(values => ({...values, [name]: value}))
+  }
+  //define form submit handler
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    axios.put(
+      `http://localhost:4000/applicants/update-applicant/${id}`, formValues)
+      .then(res => {
+        if(res.status ===200){
+          alert('A record successfuly updated')
+          // Push to /
+          navigate('/list-applicants')
+        }else{
+          Promise.reject()
+        }
+      })
+      .catch(err => alert('Something went wrong! ' +err.message))
+      // Push to /
+      navigate('/list-applicants')
+  }
+
+
+	return (
+    <div className='form-wraper'>
+  		<div className="form-container">
+        <div className="title">Application Form</div>
+          <form onSubmit={handleSubmit} >
+            <div className="user__details">
+              <div className="input__box">
+                <span className="details">First Name</span>
+                <input type="text" name='first_name' placeholder="E.g: Asibeh" 
+                  defaultValue = {applicant.first_name} onChange={handleChange} required />
+              </div>
+              <div className="input__box">
+                <span className="details">Last Name</span>
+                <input type="text" name='last_name' placeholder="E.g: Tenager" 
+                  defaultValue={applicant.last_name} onChange={handleChange} required />
+              </div>
+
+              <div className="input__box">
+                <span className="details">Email</span>
+                <input type="email" name='email' placeholder="asibeh@gmail.com" 
+                  defaultValue= {applicant.email} onChange={handleChange} required />
+              </div>
+              <div className="input__box">
+                <span className="details">Phone Number</span>
+                <input type="tel" name='phone_number' pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" 
+                  defaultValue= {applicant.phone_number} placeholder="092-345-6787" 
+                  onChange={handleChange} required />
+              </div>
+            </div>
+            <div className="gender__details" onChange={handleChange}>
+              <input type="radio" name="gender" id="dot-1" value='Male'/>
+              <input type="radio" name="gender" id="dot-2" value='Female'/>
+              <span className="gender__title">Gender</span>
+              <div className="category">
+                <label htmlFor="dot-1">
+                  <span className="dot one"></span>
+                  <span>Male</span>
+                </label>
+                <label htmlFor="dot-2">
+                  <span className="dot two"></span>
+                  <span>Female</span>
+                </label>
+              </div>
+            </div>
+            <div className="button">
+              <input type="submit" value='Update' />
+            </div>
+          </form>
+        </div>
+      </div>
+		)
+}
+export default EditApplicant;

react/reactapp/src/components/Dashboard/ShowApplicants.js

@@ -9,7 +9,26 @@ import {Link} from 'react-router-dom'
 
 function ShowApplicants(){
 
-  /
+  // define state variable to store data from api
+  const [applicants, setApplicants] = useState([]);
+
+  // add title 
+  useEffect(() =>{
+    document.title ='Aplicants List';
+  })
+
+  // API: get data from mongoDB database
+  useEffect(() =>{
+    axios.get('http://localhost:4000/applicants/list-applicants')
+    .then((res) =>{
+      setApplicants(res.data); // set api data to useState as an array
+    })
+    .catch(err => { // catch error message
+      console.log('Data not found.' +err.message)
+    });
+  }, []);
+
+  //console.log(applicants)
 
   return (
 
@@ -24,7 +43,7 @@ function ShowApplicants(){
             <th>Gender</th>
             <th>Phone Number</th>
             <th>Email</th>
-            <th>Updated Date</th>
+            <th>Last Updated</th>
             <th>Action</th>
           </tr>
         </thead>
@@ -36,10 +55,26 @@ function ShowApplicants(){
 
           add a unique key to the returned component of each tr as prop
           */}
-          <tbody>
-
-          {/* here will display data in a table row */}
-          </tbody>
+          {applicants.map((data, i) =>(
+           <tr key={data._id}>
+             <td>{++i}</td>
+             <td>{data.first_name}</td>
+             <td>{data.last_name}</td>
+             <td>{data.gender}</td>
+             <td>{data.phone_number}</td>
+             <td>{data.email}</td>
+             <td>{data.date_updated}</td>
+             <td>
+              <Link className="edit-link" to={`/edit-applicant/${data._id}`}>
+                <i className="fa-solid fa-pen-to-square"></i></Link>
+                &nbsp;&nbsp;&nbsp;&nbsp;
+              <Link className="edit-link" to={"/delete-applicant/" + data._id}>
+                <i className="fa-sharp fa-solid fa-trash" style={{color:'#f41032'}}></i>
+              </Link>
+             </td>
+           </tr>
+         ))}
+        </tbody>
       </table>
     </div>
   )

react/reactapp/src/components/Dashboard/formStyle.css

@@ -17,12 +17,22 @@
 
 
 /* form-container and form */
+.form-wraper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  min-width: 100%;
+  padding: 10px;
+}
 .form-container {
   max-width: 700px;
   width: 100%;
   background: #fff;
   padding: 25px 30px;
   border-radius: 5px;
+  margin-bottom: 50px;
+  background-color: #f2f2f2;
 }
 .form-container .title {
   font-size: 25px;
@@ -140,8 +150,8 @@ form .button input:hover {
 @media only screen and (max-width: 584px) {
   .form-container {
     max-width: 100%;
-    height: 90%;
-    margin-top: 35%;
+    height: 77%;
+    margin-top: 5%;
     margin-bottom: 25%;
   }