added supabase realtime functionality to update the balance in realti…

…me and edited payto route to be only visible when session exists

src/routes/+page.server.ts

@@ -28,7 +28,7 @@ export const actions: Actions = {
 	} //updating the balance of the vendor
 };
 
-//Loading logged in User's Balance to show in the form
+//Loading logged in User's or Vendor's Balance to show in the form
 
 export const load: PageServerLoad = async ({ locals }) => {
 	const session = await locals.getSession();
@@ -38,7 +38,7 @@ export const load: PageServerLoad = async ({ locals }) => {
 		.select('balance')
 		.eq('email', session?.user.email)
 		.single();
-	if (err) console.log(err + 'this error is from 2');
+	if (err) console.log(JSON.stringify(err) + 'this error is from 2');
 	else
 		return {
 			userBalance: loadData

src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { supabase } from '$lib/supabaseClient';
 	import type { PageData } from './$types';
 	import QRCode from 'qrcode';
 	import { onMount } from 'svelte';
@@ -7,6 +8,7 @@
 	let qrDataURL: string;
 	let uuid: string;
 	let showParagraph: boolean = false;
+	let userBalanceVar: any;
 	onMount(async () => {
 		if (data?.session?.user.user_metadata.isVendor == true) {
 			uuid = data.session.user.id;
@@ -16,13 +18,21 @@
 	const toggleBalanceView = () => {
 		showParagraph = !showParagraph;
 	};
+
+	const userBalance = supabase
+		.channel('getUserBalance')
+		.on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'profiles' }, (payload) => {
+			userBalanceVar = payload.new.balance;
+			//console.log('Changes Received', userBalanceVar);
+		})
+		.subscribe();
 </script>
 
 <h1>Welcome to E-Coupons!</h1>
-{#if data.session && data.session.user.user_metadata.isVendor === true}
+{#if data.session !== null && data.session.user.user_metadata.isVendor === true}
 	<p>Welcome to the Vendor Screen, {data.session.user.user_metadata.username}!</p>
 	{#if showParagraph}
-		<p>Current Balance: {data.userBalance?.balance}</p>
+		<p>Current Balance: {userBalanceVar || data.userBalance?.balance}</p>
 	{/if}
 	<button on:click={toggleBalanceView}
 		>{#if showParagraph} Hide Balance {:else} Show Balance{/if}</button
@@ -33,10 +43,10 @@
 	<form method="POST" action="/logout">
 		<button type="submit"> Logout </button>
 	</form>
-{:else if data.session && data.session.user.user_metadata.name != null}
+{:else if data.session !== null && data.session.user.user_metadata.name !== null}
 	<p>Welcome to the User Screen, {data.session.user.user_metadata.name}!</p>
 	{#if showParagraph}
-		<p>Current Balance: {data.userBalance?.balance}</p>
+		<p>Current Balance: {userBalanceVar || data.userBalance?.balance}</p>
 	{/if}
 	<button on:click={toggleBalanceView}
 		>{#if showParagraph} Hide Balance {:else} Show Balance{/if}</button

src/routes/payto/[id]/+page.svelte

@@ -3,7 +3,7 @@
 	import type { PageData } from './$types';
 </script>
 
-{#if data.vendorData[0].raw_user_meta_data.isVendor === true}
+{#if data.session && data.vendorData[0].raw_user_meta_data.isVendor === true}
 	<form action="?/payto" method="POST">
 		<div class="grid">
 			<div>
@@ -18,6 +18,9 @@
 		</div>
 		<button type="submit">Pay</button>
 	</form>
+{:else if !data.session}
+	<h1>Not Logged In</h1>
+	<a href="/login" role="button">Login</a>
 {:else}
 	<h1>Invalid Vendor</h1>
 	<p>Vendor does not exist</p>