fix: add toast when multiple subscriptions in the same session

tutors-sdk · Aug 8, 2023 · 1c384f0 · 1c384f0
1 parent 9270696
commit 1c384f0
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 32 deletions.
diff --git a/apps/web/src/lib/ui/navigators/NavUser.svelte b/apps/web/src/lib/ui/navigators/NavUser.svelte
@@ -7,7 +7,6 @@
 	import { Icon } from '$lib/ui/legacy';
 
 	let user: User;
-	let status = false;
 	const timeApp = 'https://time.tutors.dev';
 	let timeUrl = '';
 	let liveUrl = `https://reader.tutors.dev/live/${$currentCourse.id}`;
@@ -21,14 +20,19 @@
 		timeUrl = `${timeApp}/time/${course?.url}/${user.userId}`;
 	}
 
+	let currentStatus: boolean;
+	onlineStatus.subscribe((value) => {
+		currentStatus = value;
+	});
+
 	currentUser.subscribe(async (newUser: User) => {
 		if (newUser) {
 			user = newUser;
 			gitUrl = `https://github.com/${user?.nickname}`;
 			let course = await $currentCourse;
 			if (user && course) {
 				setTimeUrls(user, course);
-				status = user.onlineStatus === 'online';
+				onlineStatus.set(true);
 			}
 		}
 	});
@@ -38,9 +42,8 @@
 	});
 
 	function handleClick() {
-		status = !status;
-		onlineStatus.set(status);
-		analyticsService.setOnlineStatus(status, session);
+		onlineStatus.set(currentStatus);
+		// analyticsService.setOnlineStatus(status, session);
 	}
 
 	const onlineDrawerOpen: any = () => {
@@ -59,10 +62,10 @@
 					>
 				{/if}
 				<span class="badge-icon absolute -bottom-2 -right-2 z-10 text-white">
-					{#if status}
+					{#if currentStatus}
 						<Icon type="online" />
 					{/if}
-					{#if !status}
+					{#if !currentStatus}
 						<Icon type="offline" />
 					{/if}</span
 				>
@@ -87,7 +90,7 @@
 						<div class="ml-2">Share Presence</div>
 					</a>
 				</li>
-				{#if status}
+				{#if currentStatus}
 					<li>
 						<!-- svelte-ignore a11y-missing-attribute -->
 						<!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -102,7 +105,7 @@
 			</ul>
 			<hr />
 			<ul>
-				{#if status}
+				{#if currentStatus}
 					<li>
 						<a href={liveUrl} target="_blank" rel="noreferrer">
 							<Icon type="listOnline" />

diff --git a/apps/web/src/routes/(course-reader)/+layout.svelte b/apps/web/src/routes/(course-reader)/+layout.svelte
@@ -4,7 +4,7 @@
 	import { afterNavigate } from '$app/navigation';
 	import { get } from 'svelte/store';
 
-	import { setInitialClassState } from '@skeletonlabs/skeleton';
+	import { setInitialClassState, toastStore, type ToastSettings } from '@skeletonlabs/skeleton';
 	import {
 		transitionKey,
 		currentLo,
@@ -19,7 +19,6 @@
 	import type { RealtimeChannel } from '@supabase/supabase-js';
 
 	let currentRoute = '';
-	let isSubscribed = false;
 	let presenceChannel: RealtimeChannel;
 
 	export let data: any;
@@ -51,7 +50,6 @@
 				.filter(([key, _]) => key === $page.params.courseid)
 				.map(([, value]) => value[0]);
 
-			console.log(Object.entries(presenceState));
 			studentsOnline.set(onlineUsersObj.length);
 			studentsOnlineList.set(onlineUsersObj);
 		});
@@ -67,33 +65,45 @@
 				list.filter((item) => !leftPresences.includes(item.studentEmail))
 			);
 		});
-		presenceChannel.subscribe(async (status) => {
-			if (status === 'SUBSCRIBED') {
-				const trackingStatus = await presenceChannel.track({
-					online_at: new Date().toISOString(),
-					studentName: session?.user?.user_metadata?.full_name,
-					studentEmail: session?.user?.email,
-					studentImg: session?.user?.user_metadata?.avatar_url,
-					course_id: $page.params.courseid,
-					lo_id: $page.params.loid
-				});
-			}
-		});
+
+		try {
+			presenceChannel.subscribe(async (status) => {
+				if (status === 'SUBSCRIBED') {
+					const trackingStatus = await presenceChannel.track({
+						online_at: new Date().toISOString(),
+						studentName: session?.user?.user_metadata?.full_name,
+						studentEmail: session?.user?.email,
+						studentImg: session?.user?.user_metadata?.avatar_url,
+						course_id: $page.params.courseid,
+						lo_id: $page.params.loid
+					});
+					console.log(trackingStatus);
+				}
+			});
+		} catch (error) {
+			console.log(error);
+			onlineStatus.set(false);
+			const t: ToastSettings = {
+				message: 'Presence can only be re-enabled once per session. Please refresh and try again.',
+				background: 'variant-filled-error'
+			};
+			toastStore.trigger(t);
+		}
 	}
 
 	let currentStatus: boolean;
 	onlineStatus.subscribe((value) => {
 		currentStatus = value;
 	});
 
-	$: if (currentStatus && !isSubscribed) {
-		isSubscribed = true;
-		setupPresenceChannel();
-		console.log('subscribed');
-	} else if (!currentStatus && isSubscribed) {
-		isSubscribed = false;
-		presenceChannel.unsubscribe();
-		console.log('unsubscribed');
+	$: {
+		if (currentStatus) {
+			setupPresenceChannel();
+			console.log('subscribed');
+		} else if (!currentStatus) {
+			presenceChannel.unsubscribe();
+			console.log('unsubscribed');
+		}
 	}
 
 	onMount(() => {