Updated Delete API

Author: epythonlab

nodejs/routes/applicant.routes.js

@@ -48,11 +48,19 @@ router.get('/update-applicant/:id', (req, res) =>{
 });
 // url: http://localhost:4000/applicants/update-applicant/document_id
 
-// update a specified applicant data
+// update a specified applicant data using PUT API method
 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' }));
 });
+
+/* Delete a specific applicant data by id requested by api */
+router.delete('/delete-applicant/:id', (req, res) => {
+  applicantSchema.findByIdAndRemove(req.params.id, req.body)
+    .then(data => res.json({msg:'Data is successfully deleted.'}))
+    .catch(err => res.status(400).json({error: 'Data not deleted'}));
+});
+
 // export the router
 module.exports = router

react/reactapp/package-lock.json

@@ -10,6 +10,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",
+    "react-minimal-side-navigation": "^1.9.2",
     "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4",

react/reactapp/package.json

@@ -37,13 +37,8 @@
   }
 }
 .container {
-  display: block;
-  max-width: 90%;
-  width: 100%;
-  margin: 50px auto;
-  padding: 10px;
-  border-radius: 0 #8c6a55;
-  height: 100%;
+  margin-top: 100px;
+  padding: 50px;
 
 }
 

react/reactapp/src/App.css

@@ -10,7 +10,7 @@ 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 Navbar from './components/navbar/Navbar'
 import ApplicationForm from './components/Dashboard/ApplicationForm'
 import ShowApplicants from './components/Dashboard/ShowApplicants'
 import EditApplicant from './components/Dashboard/EditApplicant'
@@ -28,9 +28,7 @@ function App() {
     <>
     <Navbar />
     <div className="container">
-
-      <BrowserRouter>
-        <Routes>
+       <Routes>
           <Route path="/" element={<ApplicationForm />}>
           </Route>
         </Routes>
@@ -47,10 +45,9 @@ function App() {
           <Route path="/edit-applicant/:id" element={<EditApplicant />}>
           </Route>
         </Routes>
-      </BrowserRouter>
     </div>
   </>
   );
 }
 
-export default App;
+export default App;

react/reactapp/src/App2.js

@@ -8,13 +8,13 @@ function EditApplicant(){
   // define states
   const [applicant, setApplicant] = useState([])
   const {id} = useParams();
-  /* useParams is one of the several react hooks in ract router
+  /* useParams is one of the several react hooks in react router
     it used to retreive route paramaters from the component
     rendered by the matching route
   */
    // add title 
   useEffect(() =>{
-    document.title ='Aplicants List';
+    document.title ='Edit applicant';
   })
 
   // API: get a single applicant data by ID

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

@@ -4,13 +4,14 @@ import React from 'react';
 import './table.css';
 import axios from 'axios';
 import {useState, useEffect} from 'react';
-import {Link} from 'react-router-dom'
+import {Link, useNavigate} from 'react-router-dom'
 
 
 function ShowApplicants(){
 
   // define state variable to store data from api
   const [applicants, setApplicants] = useState([]);
+  const navigate = useNavigate()
 
   // add title 
   useEffect(() =>{
@@ -22,14 +23,32 @@ function ShowApplicants(){
     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)
+  /* 
+    DELETE API: 
+      onclickdelete a single data from database
+      the api call with a selected id to delete
+
+  */
+  const onClickDelete =(id) =>{
+    axios.delete(`http://localhost:4000/applicants/delete-applicant/${id}`)
+        .then((res) => {
+          navigate('/') // navigate to list applicates
+        })
+        .catch((err) =>{
+          console.log('Error to delete data.'+err.message)
+
+        });
+  };
 
+  // return the layout
   return (
 
     <div className="table-wraper">
@@ -68,7 +87,8 @@ function ShowApplicants(){
               <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}>
+              <Link onClick = {() => { window.confirm('Are you sure you wish to delete this data?', )
+                                     && onClickDelete(data._id)}}>
                 <i className="fa-sharp fa-solid fa-trash" style={{color:'#f41032'}}></i>
               </Link>
              </td>

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

@@ -15,15 +15,15 @@ h2{
 }
 
 .fl-table {
-    border-radius: 5px;
-    font-size: 12px;
-    font-weight: normal;
-    border: none;
-    border-collapse: collapse;
-    width: 100%;
-    max-width: 100%;
-    white-space: nowrap;
-    background-color: white;
+  border-radius: 5px;
+  font-size: 12px;
+  font-weight: normal;
+  border: none;
+  border-collapse: collapse;
+  width: 100%;
+  max-width: 100%;
+  white-space: nowrap;
+  background-color: white;
 }
 
 .fl-table td, .fl-table th {

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

@@ -3,7 +3,7 @@
 // just checkout the css file in nav.css and modify the layout
 
 import React, {useState, useEffect} from 'react'
-import { BrowserRouter, Link } from "react-router-dom";
+import { Routes, Link } from "react-router-dom";
 import './nav.css'
 
 export default function Navbar() {
@@ -36,19 +36,19 @@ export default function Navbar() {
     <nav>
       {(toggleMenu || screenWidth > 500) && (
       <ul className="list">
-        <BrowserRouter>
+        <Routes>
           <Link to={'/application'}>
             <li className="items">Application</li>
           </Link>
           <Link to={'/list-applicants'}>
             <li className="items">Show Applicants</li>
           </Link>
-        </BrowserRouter>
+        </Routes>
 
     </ul>
       )}
 
       <button onClick={toggleNav} className="btn">=</button>
     </nav>
   )
-}
+}