From 43c7dab2eedc6adf0d87b6d1a607304669c71e2c Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Sun, 28 Apr 2024 13:39:33 +0100
Subject: [PATCH] feat(#32): Link profile page to actual profile

---
 src/routes/profile/+page.svelte | 98 ++++++++++++++++++++-------------
 1 file changed, 59 insertions(+), 39 deletions(-)

diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index 7441604..dfb351d 100644
--- a/src/routes/profile/+page.svelte
+++ b/src/routes/profile/+page.svelte
@@ -1,45 +1,65 @@
-<div class="h-screen">
-	<div id="banner">
-		<div id="avatar">
-			<div
-				class="avatar mt-10 ml-20 w-14 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2"
-			>
-				<div class="rounded-full"><img src="/OIG5.jpg" alt="profile icon" /></div>
-			</div>
-			<button class="btn btn-outline btn-primary">Upload new avatar</button>
-		</div>
-		<div id="personal-information">
-			<p class="text-white font-mono text-3xl font-bold">Username</p>
-			<p class="text-white font-mono text-3xl font-bold">Title</p>
-			<p class="text-white font-mono text-3xl font-bold">Level</p>
-		</div>
-	</div>
-	<div id="profile-content">
-		<div id="pokemon-collection-summary">
-			<div class="radial-progress top-0 left-0" style="--value:70;" role="progressbar">70%</div>
-			<div class="caught-text top-20 left-30 font-mono text-xl">
-				<p>Total Pokemon Caught</p>
-			</div>
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import { user } from '$lib/stores/user.js';
+	import { type User } from '@supabase/auth-js';
 
-			<h2 class="">Types Collected</h2>
-			<ul>
-				<li class="type-list-item font-mono">Fire</li>
-			</ul>
-			<br />
-			any other relevant statistics or achievements
+	export let data;
+	let { supabase } = data;
+	$: ({ supabase } = data);
+
+	let localUser: User | null;
+	const unsubscribe = user.subscribe((value) => {
+		localUser = value;
+	});
+	onDestroy(unsubscribe);
+</script>
+
+<div class="h-screen">
+	{#if localUser}
+		<div id="banner">
+			<div id="avatar">
+				<div
+					class="avatar mt-10 ml-20 w-14 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2"
+				>
+					<div class="rounded-full"><img src="/OIG5.jpg" alt="profile icon" /></div>
+				</div>
+				<button class="btn btn-outline btn-primary">Upload new avatar</button>
+			</div>
+			<div id="personal-information">
+				<p class="text-white font-mono text-3xl font-bold">{localUser?.email}</p>
+				<p class="text-white font-mono text-3xl font-bold">Title</p>
+				<p class="text-white font-mono text-3xl font-bold">Level</p>
+			</div>
 		</div>
-		<div id="customisation-options">
-			theme selection
-			<br />
-			profile background
-			<br />
-			any other features that enhance user experience and personalisation
+		<div id="profile-content">
+			<div id="pokemon-collection-summary">
+				<div class="radial-progress top-0 left-0" style="--value:70;" role="progressbar">70%</div>
+				<div class="caught-text top-20 left-30 font-mono text-xl">
+					<p>Total Pokemon Caught</p>
+				</div>
+
+				<h2 class="">Types Collected</h2>
+				<ul>
+					<li class="type-list-item font-mono">Fire</li>
+				</ul>
+				<br />
+				any other relevant statistics or achievements
+			</div>
+			<div id="customisation-options">
+				theme selection
+				<br />
+				profile background
+				<br />
+				any other features that enhance user experience and personalisation
+			</div>
+			<div id="social-sharing">
+				options for users to share their profile or achievements on social media platforms,
+				encouraging engagement and interaction with other users
+			</div>
 		</div>
-		<div id="social-sharing">
-			options for users to share their profile or achievements on social media platforms,
-			encouraging engagement and interaction with other users
-		</div>
-	</div>
+	{:else}
+		<p>Please log in to view this page</p>
+	{/if}
 </div>
 
 <style>