subscriptino

craigkai · Jul 8, 2024 · cbfe9f7 · cbfe9f7
1 parent 19b35c5
commit cbfe9f7
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/src/components/Matches.svelte b/src/components/Matches.svelte
@@ -3,7 +3,7 @@
 	import * as Table from '$components/ui/table';
 	import ViewMatch from './Match.svelte';
 	import { Matches } from '$lib/matches.svelte';
-	import type { RealtimeChannel } from '@supabase/supabase-js';
+	import type { RealtimeChannel, CHANNEL_STATES } from '@supabase/supabase-js';
 	import * as Alert from '$components/ui/alert/index.js';
 	import type { HttpError } from '@sveltejs/kit';
 	import type { Teams } from '$lib/teams.svelte';
@@ -27,7 +27,8 @@
 	} = $props();
 
 	let showGenerateMatchesAlert = $state(false);
-	let matchesSubscription: RealtimeChannel | undefined = $state(undefined);
+	let matchesSubscription: RealtimeChannel | undefined = $state();
+	let subscriptionStatus: CHANNEL_STATES | undefined = $state(matches?.subscriptionStatus);
 
 	async function checkGenerateMatches() {
 		if ((matches?.matches?.length ?? 0) > 0) {
@@ -38,9 +39,7 @@
 	}
 
 	onMount(async () => {
-		if ((matches?.matches?.length ?? 0) > 0) {
-			await subscribeToMatches();
-		}
+		if ((matches?.matches?.length ?? 0) > 0) await subscribeToMatches();
 	});
 
 	async function subscribeToMatches() {
@@ -75,7 +74,7 @@
 </script>
 
 <div class="block text-gray-700 text-sm font-bold mb-4 flex">
-	Matches {#if matchesSubscription && matchesSubscription?.state === 'joined'}
+	Matches {#if subscriptionStatus && subscriptionStatus === 'SUBSCRIBED'}
 		<Zap class="text-green-500 fill-green-200" />
 	{:else}
 		<Zapoff class="text-red-500 fill-red-200" />

diff --git a/src/lib/database/supabaseDatabaseService.svelte.ts b/src/lib/database/supabaseDatabaseService.svelte.ts
@@ -109,6 +109,7 @@ export class SupabaseDatabaseService {
 				// We call the load function to update in case our content is stale
 				// when we re-connect to the web socket.
 				self.load();
+				self.subscriptionStatus = status;
 				console.debug('Realtime status', status);
 			});
 	}

diff --git a/src/lib/matches.svelte.ts b/src/lib/matches.svelte.ts
@@ -8,6 +8,7 @@ export class Matches extends Base {
 	public databaseService: MatchesSupabaseDatabaseService;
 	event_id: number;
 	matches?: MatchRow[] = $state();
+	subscriptionStatus?: string;
 
 	constructor(event_id: number, databaseService: MatchesSupabaseDatabaseService) {
 		super();