🚸 Make the own request status real time

src/routes/requests/+page.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
+	import { PUBLIC_API_URL } from '$env/static/public';
 	import I18n from '$lib/I18n.svelte';
-	import type { RequestResponse, RequestStatus } from '../../types/request';
+	import { onMount } from 'svelte';
+	import type { RequestData, RequestStatus } from '../../types/request';
 
-	export let data: RequestResponse;
+	let data: RequestData | null = null;
 
-	let isDataError = data.status === 'error';
 
 	let colorObj: {
 		[key in RequestStatus]: string;
@@ -13,14 +14,25 @@
 		accepted: 'bg-green-500',
 		rejected: 'bg-red-500'
 	};
-	let color = colorObj[data.data?.status || 'pending'];
+	let color = colorObj['pending'];
+
+	onMount(() => {
+		const reqId = localStorage.getItem('registerRequest');
+		if (!reqId) return;
+		const eventSource = new EventSource(`${PUBLIC_API_URL}/auth/requests/${reqId}/sse`)
+
+		eventSource.onmessage = (event) => {
+			data = JSON.parse(event.data);
+			color = colorObj[data?.status || 'pending'];
+		}
+	})
 </script>
 
 <div class="flex flex-col gap-3">
-	{#if data && !isDataError}
+	{#if data}
 		<h3><I18n key="request.status.status" /></h3>
 		<div class="font-bold text-4xl capitalize p-7 {color} rounded-xl text-center">
-			<I18n key="request.status.{data.data?.status || 'pending'}" />
+			<I18n key="request.status.{data.status || 'pending'}" />
 		</div>
 	{:else}
 		<p><I18n key="request.status.noData" /></p>

src/types/request.ts

@@ -16,12 +16,6 @@ export interface RequestData {
 	processedBy: string | null;
 }
 
-export interface RequestResponse {
-	status: 'success' | 'error';
-	message: 'Request found' | 'Invalid id' | 'Request not found';
-	data?: RequestData;
-}
-
 export interface RequestsData extends RequestData {
 	_id: string;
 }