feat(frontend): request update logic

frontend/src/Requests.svelte

@@ -1,9 +1,13 @@
 <script>
- import { onMount } from 'svelte';
+  import { onMount } from 'svelte';
 
   let requests = [];
 
   onMount(async () => {
+    await fetchRequests();
+  });
+
+  async function fetchRequests() {
     try {
       const response = await fetch('/api/requests');
       if (response.ok) {
@@ -14,37 +18,58 @@
     } catch (error) {
       console.error('Error fetching requests:', error);
     }
-  });
-  function acceptRequest(id) {
-    // Handle accept logic here
   }
 
-  function denyRequest(id) {
-    // Handle deny logic here
+  async function updateRequestState(userEmail, siteURL, newState) {
+    try {
+      const response = await fetch('/api/requests/update', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ userEmail, siteURL, newState })
+      });
+
+      if (response.ok) {
+        await fetchRequests(); // Refetch the requests to update the UI
+      } else {
+        console.error('Failed to update request state:', response.statusText);
+      }
+    } catch (error) {
+      console.error('Error updating request state:', error);
+    }
+  }
+
+  function acceptRequest(request) {
+    updateRequestState(request.user, request.site, 'authorized');
+  }
+
+  function denyRequest(request) {
+    updateRequestState(request.user, request.site, 'declined');
   }
 </script>
 
 <div class="container mt-5">
   <h2>Access Requests</h2>
   <table class="table">
     <thead>
-      <tr>
-        <th>User</th>
-        <th>Site</th>
-        <th>Actions</th>
-      </tr>
+    <tr>
+      <th>User</th>
+      <th>Site</th>
+      <th>Actions</th>
+    </tr>
     </thead>
     <tbody>
-    {#each requests as request, index (index)}
-        <tr>
-          <td>{request.user}</td>
-          <td>{request.site}</td>
-          <td>
-            <button class="btn btn-success btn-sm" on:click={() => acceptRequest(request.id)}>Accept</button>
-            <button class="btn btn-danger btn-sm" on:click={() => denyRequest(request.id)}>Deny</button>
-          </td>
-        </tr>
-      {/each}
+    {#each requests as request (request.id)}
+      <tr>
+        <td>{request.user}</td>
+        <td>{request.site}>
+        <td>
+          <button class="btn btn-success btn-sm" on:click={() => acceptRequest(request)}>Accept</button>
+          <button class="btn btn-danger btn-sm" on:click={() => denyRequest(request)}>Deny</button>
+        </td>
+      </tr>
+    {/each}
     </tbody>
   </table>
-</div>
+</div>