From 63de9c82a4ab7d15a9c3591b32413723a230d15b Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Wed, 10 Apr 2024 22:03:37 +0100
Subject: [PATCH] feat(*): Make the user object available and reactive in any
 component

---
 src/lib/stores/user.ts    |  5 +++++
 src/routes/+layout.svelte | 18 +++++++++++++-----
 src/routes/+page.svelte   |  9 +++++++++
 3 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/stores/user.ts

diff --git a/src/lib/stores/user.ts b/src/lib/stores/user.ts
new file mode 100644
index 0000000..fc3cad2
--- /dev/null
+++ b/src/lib/stores/user.ts
@@ -0,0 +1,5 @@
+import { writable } from 'svelte/store';
+import { type User } from '@supabase/auth-js';
+
+// Create a user store with null as the initial value
+export const user = writable<User | null>(null);
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0f05290..544f346 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import 'tailwindcss/tailwind.css';
-	import { onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
+	import { user } from '$lib/stores/user.js';
 	import { type User } from '@supabase/auth-js';
 	import SignIn from '$lib/components/SignIn.svelte';
 	import SignOut from '$lib/components/SignOut.svelte';
@@ -9,7 +10,11 @@
 	let { supabase } = data;
 	$: ({ supabase } = data);
 
-	let user = null as User | null;
+	let localUser = null as User | null;
+	const unsubscribe = user.subscribe((value) => {
+		localUser = value;
+	});
+	onDestroy(unsubscribe);
 
 	onMount(async () => {
 		await getUser();
@@ -22,10 +27,13 @@
 
 		if (session) {
 			console.log(session.user);
-			user = session.user;
+			localUser = session.user;
 		} else {
-			user = null;
+			localUser = null;
 		}
+
+		// Update the store so that user is available to all components
+		user.set(localUser);
 	}
 </script>
 
@@ -55,7 +63,7 @@
 					tabindex="-1"
 					class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box min-w-[13rem] w-auto"
 				>
-					{#if user}
+					{#if localUser}
 						<li>
 							<a href="/profile"> Profile </a>
 						</li>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ed7e56c..d320844 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,9 +1,18 @@
 <script lang="ts">
+	import { onDestroy } from 'svelte';
+	import { user } from '$lib/stores/user.js';
+	import { type User } from '@supabase/auth-js';
 	import SignUp from '$lib/components/SignUp.svelte';
 
 	export let data;
 	let { supabase } = data;
 	$: ({ supabase } = data);
+
+	let localUser: User | null;
+	const unsubscribe = user.subscribe((value) => {
+		localUser = value;
+	});
+	onDestroy(unsubscribe);
 </script>
 
 <div class="hero min-h-screen bg-base-200">