Fix/author details

platforms/pictique/src/lib/fragments/BottomNav/BottomNav.svelte

@@ -2,11 +2,14 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { Camera, CommentsTwo, Home, Search } from '$lib/icons';
-	import { isNavigatingThroughNav, ownerId } from '$lib/store/store.svelte';
+	import { isNavigatingThroughNav } from '$lib/store/store.svelte';
     import { uploadedImages } from '$lib/store/store.svelte';
-	import { revokeImageUrls } from '$lib/utils';
+	import { getAuthId, revokeImageUrls } from '$lib/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
 
+	let ownerId: string | null = $state(null);
+
+
 	interface IBottomNavProps extends HTMLAttributes<HTMLElement> {
 		activeTab?: string;
 		profileSrc: string;
@@ -44,6 +47,7 @@
 	};
 
 	$effect(() => {
+		ownerId = getAuthId()
 		activeTab = _activeTab.split('/').pop() ?? '';
 		if (images && images.length > 0 && activeTab !== 'post' && previousTab === 'post' && !_activeTab.includes('post/audience')) {
             if (uploadedImages.value)

platforms/pictique/src/lib/fragments/Profile/Profile.svelte

@@ -13,7 +13,7 @@
 <div class="flex flex-col gap-4 p-4">
 	<div class="flex items-center gap-4">
 		<img
-			src={profileData.avatar ?? 'https://picsum.photos/200/200'}
+			src={profileData.avatarUrl ?? 'https://picsum.photos/200/200'}
 			alt={profileData.username}
 			class="h-20 w-20 rounded-full object-cover"
 		/>

platforms/pictique/src/lib/fragments/SideBar/SideBar.svelte

@@ -4,8 +4,9 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import Button from '$lib/ui/Button/Button.svelte';
-	import { cn } from '$lib/utils';
-	import { ownerId } from '$lib/store/store.svelte';
+	import { cn, getAuthId } from '$lib/utils';
+
+	let ownerId: string | null = $state(null);
 
 	interface ISideBarProps extends HTMLAttributes<HTMLElement> {
 		activeTab?: string;
@@ -20,6 +21,7 @@
 	}: ISideBarProps = $props();
 
 	$effect(() => {
+		ownerId = getAuthId();
 		const pathname = page.url.pathname;
 		if (pathname.includes('/home')) {
 			activeTab = 'home';
@@ -142,33 +144,32 @@
 				Settings
 			</h3>
 		</button>
-
-		<!-- <button -->
-		<!-- 	type="button" -->
-		<!-- 	class="flex items-center gap-2" -->
-		<!-- 	aria-current={activeTab === 'profile' ? 'page' : undefined} -->
-		<!-- 	onclick={() => { -->
-		<!-- 		activeTab = 'profile'; -->
-		<!-- 		goto(`/profile/${ownerId.value}`); -->
-		<!-- 	}} -->
-		<!-- > -->
-		<!-- 	<span -->
-		<!-- 		class={`inline-block w-full rounded-full border ${activeTab === 'profile' ? 'border-brand-burnt-orange' : 'border-transparent'}`} -->
-		<!-- 	> -->
-		<!-- 		<img -->
-		<!-- 			width="24px" -->
-		<!-- 			height="24px" -->
-		<!-- 			class="aspect-square rounded-full" -->
-		<!-- 			src={'https://picsum.photos/200/200'} -->
-		<!-- 			alt="profile" -->
-		<!-- 		/> -->
-		<!-- 	</span> -->
-		<!-- 	<h3 -->
-		<!-- 		class={`${activeTab === 'profile' ? 'text-brand-burnt-orange' : 'text-black-800'} mt-[4px]`} -->
-		<!-- 	> -->
-		<!-- 		Profile -->
-		<!-- 	</h3> -->
-		<!-- </button> -->
+		<button
+			type="button"
+			class="flex items-center gap-2"
+			aria-current={activeTab === 'profile' ? 'page' : undefined}
+			onclick={() => {
+				activeTab = 'profile';
+				goto(`/profile/${ownerId}`);
+			}}
+		>
+			<span
+				class={`inline-block w-full rounded-full border ${activeTab === 'profile' ? 'border-brand-burnt-orange' : 'border-transparent'}`}
+			>
+				<img
+					width="24px"
+					height="24px"
+					class="aspect-square rounded-full"
+					src={profileSrc}
+					alt="profile"
+				/>
+			</span>
+			<h3
+				class={`${activeTab === 'profile' ? 'text-brand-burnt-orange' : 'text-black-800'} mt-[4px]`}
+			>
+				Profile
+			</h3>
+		</button>
 		{#if handlePost}
 			<Button size="sm" variant="secondary" callback={handlePost}>Post a photo</Button>
 		{/if}

platforms/pictique/src/lib/store/store.svelte.ts

@@ -8,10 +8,6 @@ export const showComments = $state({
     value: false,
 });
 
-export const ownerId = $state({
-    value: "1",
-});
-
 export const selectedPost: { value: PostData | null } = $state({
     value: null,
 });
@@ -22,4 +18,4 @@ export const uploadedImages: { value: Image[] | null } = $state({
 
 export const audience: { value: string } = $state({
     value: "Everyone",
-});
+});

platforms/pictique/src/lib/types.ts

@@ -34,7 +34,7 @@ export type PostData = {
 export type userProfile = {
     userId: string;
     username: string;
-    avatar: string;
+    avatarUrl: string;
     totalPosts: number;
     followers: number;
     following: number;

platforms/pictique/src/lib/utils/axios.ts

@@ -30,3 +30,17 @@ export function getAuthToken() {
 export const removeAuthToken = (): void => {
     localStorage.removeItem(TOKEN_KEY);
 };
+
+// Utility function to store auth id
+export const setAuthId = (id: string): void => {
+    localStorage.setItem("ownerId", id);
+};
+
+export const getAuthId = () => {
+    return localStorage.getItem("ownerId");
+};
+
+// Utility function to remove auth token
+export const removeAuthId = (): void => {
+    localStorage.removeItem("ownerId");
+};

platforms/pictique/src/routes/(auth)/auth/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Qr } from '$lib/ui';
 	import { onMount } from 'svelte';
-	import { apiClient, setAuthToken } from '$lib/utils';
+	import { apiClient, setAuthId, setAuthToken } from '$lib/utils';
 	import { PUBLIC_PICTIQUE_BASE_URL } from '$env/static/public';
 	import { goto } from '$app/navigation';
 
@@ -21,6 +21,8 @@
 
 			eventSource.onmessage = function (e) {
 				const data = JSON.parse(e.data);
+				const {user} =  data
+				setAuthId(user.id);
 				const { token } = data;
 				setAuthToken(token);
 				goto('/home');

platforms/pictique/src/routes/(protected)/+layout.svelte

@@ -5,10 +5,13 @@
 	import { openCreatePostModal, isCreatePostModalOpen } from '$lib/stores/posts';
 	import { comments, fetchComments, createComment, activePostId } from '$lib/stores/comments';
 	import CreatePostModal from '$lib/fragments/CreatePostModal/CreatePostModal.svelte';
+	import { onMount } from 'svelte';
+	import { apiClient, getAuthId } from '$lib/utils';
+	import type { userProfile } from '$lib/types';
 	import { heading } from '../store';
 
 	let { children } = $props();
-
+	let ownerId: string | null = $state(null);
 	let route = $derived(page.url.pathname);
 
 	let commentValue: string = $state('');
@@ -17,6 +20,7 @@
 	let idFromParams = $state();
 	let isCommentsLoading = $state(false);
 	let commentsError = $state<string | null>(null);
+	let profile = $state<userProfile | null>(null);
 
 	const handleSend = async () => {
 		console.log($activePostId, commentValue);
@@ -55,6 +59,7 @@
 
 	// Watch for changes in showComments to fetch comments when opened
 	$effect(() => {
+		ownerId = getAuthId();
 		if (showComments.value && activePostId) {
 			isCommentsLoading = true;
 			commentsError = null;
@@ -67,13 +72,24 @@
 				});
 		}
 	});
+
+	async function fetchProfile() {
+		try {
+			const response = await apiClient.get(`/api/users/${ownerId}`);
+			profile = response.data;
+		} catch (err) {
+			console.log(err instanceof Error ? err.message : 'Failed to load profile');
+		}
+	}
+
+	onMount(fetchProfile)
 </script>
 
 <main
-	class={`block h-[100dvh] ${route !== '/home' && route !== '/messages' && route !== '/profile' && route !== '/settings' && !route.includes('/profile') ? 'grid-cols-[20vw_auto]' : 'grid-cols-[20vw_auto_30vw]'} md:grid`}
+	class={`block h-[100dvh] ${route !== '/home' && route !== '/messages' && route !== '/profile' && !route.includes('settings') && !route.includes('/profile') ? 'grid-cols-[20vw_auto]' : 'grid-cols-[20vw_auto_30vw]'} md:grid`}
 >
 	<SideBar
-		profileSrc="https://picsum.photos/200"
+		profileSrc={profile?.avatarUrl}
 		handlePost={async () => {
 			openCreatePostModal();
 		}}
@@ -149,7 +165,7 @@
 	{/if}
 
 	{#if route !== `/messages/${idFromParams}`}
-		<BottomNav class="btm-nav" profileSrc="https://picsum.photos/200" />
+		<BottomNav class="btm-nav" profileSrc={profile?.avatarUrl ?? ""} />
 	{/if}
 </main>
 

platforms/pictique/src/routes/(protected)/profile/+page.svelte

@@ -1,2 +1,3 @@
-<script lang="ts">
+<script>
 </script>
+

platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte

@@ -2,23 +2,24 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { Profile } from '$lib/fragments';
-	import { ownerId, selectedPost } from '$lib/store/store.svelte';
+	import { selectedPost } from '$lib/store/store.svelte';
 	import type { userProfile, PostData } from '$lib/types';
-	import { apiClient } from '$lib/utils/axios';
+	import { apiClient, getAuthId } from '$lib/utils/axios';
 	import { onMount } from 'svelte';
-	import Post from '../../../../lib/fragments/Post/Post.svelte';
 
 	let profileId = $derived(page.params.id);
 	let profile = $state<userProfile | null>(null);
 	let error = $state<string | null>(null);
 	let loading = $state(true);
+	let ownerId: string | null = $state(null);
 
 	async function fetchProfile() {
 		try {
 			loading = true;
 			error = null;
 			const response = await apiClient.get(`/api/users/${profileId}`);
 			profile = response.data;
+			console.log(JSON.stringify(profile));
 		} catch (err) {
 			error = err instanceof Error ? err.message : 'Failed to load profile';
 		} finally {
@@ -38,7 +39,7 @@
 	async function handleMessage() {
 		try {
 			await apiClient.post(`/api/chats/`, {
-				name: profile.username,
+				name: profile?.username,
 				participantIds: [profileId]
 			});
 			goto('/messages');
@@ -52,6 +53,9 @@
 		selectedPost.value = post;
 		goto('/profile/post');
 	}
+	$effect(()=> {
+		ownerId = getAuthId();
+	})
 
 	onMount(fetchProfile);
 </script>
@@ -67,7 +71,7 @@
 		</div>
 	{:else if profile}
 		<Profile
-			variant={ownerId.value === profileId ? 'user' : 'other'}
+			variant={ownerId === profileId ? 'user' : 'other'}
 			profileData={profile}
 			handleSinglePost={(post) => handlePostClick(post)}
 			{handleFollow}

platforms/pictique/src/routes/(protected)/settings/+page.svelte

@@ -2,7 +2,8 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import SettingsNavigationButton from '$lib/fragments/SettingsNavigationButton/SettingsNavigationButton.svelte';
-	import { apiClient } from '$lib/utils';
+	import type { userProfile } from '$lib/types';
+	import { apiClient, getAuthId } from '$lib/utils';
 	import {
 		DatabaseIcon,
 		Logout01Icon,
@@ -12,27 +13,49 @@
 	import { onMount } from 'svelte';
 
 	let route = $derived(page.url.pathname);
-	let username: string = $state('');
-	let userEmail: string = $state('');
-	let userImage: string = $state('');
+	let ownerId: string | null = $state(null);
 
-	onMount(async () => {
-		const { data } = await apiClient.get('/api/users');
-		username = data.displayName;
-		userEmail = data.handle;
-		userImage = data.avatarUrl;
-	});
+	let profile = $state<userProfile | null>(null);
+	let error = $state<string | null>(null);
+	let loading = $state(true);
+
+	async function fetchProfile() {
+		try {
+			loading = true;
+			error = null;
+			const response = await apiClient.get(`/api/users/${ownerId}`);
+			profile = response.data;
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to load profile';
+		} finally {
+			loading = false;
+		}
+	}
+	$effect(()=> { 
+		ownerId = getAuthId();
+	})
+	onMount(fetchProfile)
 </script>
 
 <div class="bg-grey rounded-xl p-3 md:p-5">
-	<SettingsNavigationButton onclick={() => goto(`/settings/account`)} profileSrc={userImage}>
+	{#if loading}
+		<div class="flex h-64 items-center justify-center">
+			<p class="text-gray-500">Loading profile...</p>
+		</div>
+	{:else if error}
+		<div class="flex h-64 items-center justify-center">
+			<p class="text-red-500">{error}</p>
+		</div>
+	{:else if profile}
+	<SettingsNavigationButton onclick={() => goto(`/settings/account`)} profileSrc={profile?.avatarUrl}>
 		{#snippet children()}
 			<div class="flex flex-col items-start">
-				<h2 class="text-lg">{username}</h2>
-				<p class="text-sm">{userEmail}</p>
+				<h2 class="text-lg">{profile?.handle}</h2>
+				<p class="text-sm">{profile?.description}</p>
 			</div>
 		{/snippet}
 	</SettingsNavigationButton>
+	{/if}
 </div>
 <hr class="text-grey" />
 <div class="flex flex-col gap-3">