Added Functionality for Delete Button

frontend/src/api/job_tracker.js

@@ -29,5 +29,20 @@ export const recievedOffer = async (post, checkedOffer) => {
         response = err.response
     }
     
+    return response;
+}
+
+export const deleteJob = async (post) => {
+    
+    let response = "";
+
+    try {
+        response = await axios.delete(`${backend_url}/jobs-applied-to/${post.id}/`, {
+            
+        });
+    } catch (err) {
+        response = err.response
+    }
+    
     return response;
 }
\ No newline at end of file

frontend/src/components/home/job_tracker/job_tracker.js

@@ -39,7 +39,8 @@ export default function JobTracker(props) {
 
     return (
         <div>
-            Job Tracker for {user.first_name}
+            <h3>&nbsp;&nbsp;Job Tracker for {user.first_name}</h3>
+
             <table class="table table-hover text-center">
                 <thead>
                     <tr>
@@ -60,6 +61,10 @@ export default function JobTracker(props) {
                     )
                 })}
             </table>
+
+            <h3>&nbsp;&nbsp;Job Search Statistics for {user.first_name}</h3>
+
+            
         </div>
     )
 }

frontend/src/components/home/job_tracker/table_row.js

 import React, { useContext, useEffect, useState, Checkbox } from 'react';
-import {recivedInterview, recievedOffer} from '../../../api/job_tracker';
+import {recivedInterview, recievedOffer, deleteJob} from '../../../api/job_tracker';
 
 const Table_row = ({job}) => {
     const [interview, setInterview] = React.useState(job.receivedInterview);
@@ -17,6 +17,12 @@ const Table_row = ({job}) => {
         console.log(responseOffer)
     }
 
+    const onClickDelete = async () => {
+        const responseOffer = await deleteJob(job)
+        window.location.reload(false);
+        console.log(responseOffer)
+    }
+
     return(
         <tbody>
             <tr key={job.job_id}>
@@ -44,7 +50,7 @@ const Table_row = ({job}) => {
                 </td>
 
                 <td class="align-middle">
-                    <button type="button" class="btn btn-dark">Remove</button>
+                    <button type="button" class="btn btn-dark" onClick={onClickDelete}>Remove</button>
                 </td>
             </tr>
         </tbody>