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';
@@ -149,7 +151,7 @@
 			aria-current={activeTab === 'profile' ? 'page' : undefined}
 			onclick={() => {
 				activeTab = 'profile';
-				goto(`/profile/${ownerId.value}`);
+				goto(`/profile/${ownerId}`);
 			}}
 		>
 			<span
@@ -159,7 +161,7 @@
 					width="24px"
 					height="24px"
 					class="aspect-square rounded-full"
-					src={'https://picsum.photos/200/200'}
+					src={profileSrc}
 					alt="profile"
 				/>
 			</span>

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

@@ -25,3 +25,17 @@ export const 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,9 +5,12 @@
 	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';
 
 	let { children } = $props();
-
+	let ownerId: string | null = $state(null);
 	let route = $derived(page.url.pathname);
 	let heading = $state('');
 	let commentValue: string = $state('');
@@ -16,6 +19,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);
@@ -54,6 +58,7 @@
 
 	// Watch for changes in showComments to fetch comments when opened
 	$effect(() => {
+		ownerId = getAuthId();
 		if (showComments.value && activePostId) {
 			isCommentsLoading = true;
 			commentsError = null;
@@ -66,13 +71,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();
 		}}
@@ -148,7 +164,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,28 +2,60 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import SettingsNavigationButton from '$lib/fragments/SettingsNavigationButton/SettingsNavigationButton.svelte';
+	import type { userProfile } from '$lib/types';
+	import { apiClient, getAuthId } from '$lib/utils';
 	import {
 		DatabaseIcon,
 		Logout01Icon,
 		Notification02FreeIcons
 	} from '@hugeicons/core-free-icons';
 	import { HugeiconsIcon } from '@hugeicons/svelte';
+	import { onMount } from 'svelte';
 
 	let route = $derived(page.url.pathname);
-	let username: string = $state('_.ananyayaya._');
-	let userEmail: string = $state('[email protected]');
-	let userImage: string = $state('https://picsum.photos/200/300');
+	let ownerId: string | null = $state(null);
+
+	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">

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

@@ -2,6 +2,7 @@
 	import { Button, Input, Label } from '$lib/ui';
 	import { InputFile } from '$lib/fragments';
 	import { apiClient } from '$lib/utils/axios';
+	import { goto } from '$app/navigation';
 
 	let handle = $state();
 	let name = $state();
@@ -24,11 +25,16 @@
 	}
 
 	async function saveProfileData() {
-		await apiClient.patch(`/api/users`, {
-			handle,
-			avatar: profileImageDataUrl,
-			name
-		});
+		try {
+			await apiClient.patch(`/api/users/`, {
+				handle,
+				avatar: profileImageDataUrl,
+				name
+			});
+			goto("/settings");
+		} catch (err) {
+			console.log(err instanceof Error ? err.message : 'please check the info again');
+		}
 	}
 
 	$effect(() => {

platforms/pictique/src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onNavigate } from '$app/navigation';
-	import { isNavigatingThroughNav, ownerId } from '$lib/store/store.svelte';
+	import { isNavigatingThroughNav } from '$lib/store/store.svelte';
 	import { onMount } from 'svelte';
 	import '../app.css';
 	import { page } from '$app/state';
@@ -37,7 +37,6 @@
 	});
 
 	onMount(() => {
-		ownerId.value = '1';
 		setTimeout(() => {
 			showSplashScreen = false;
 		}, 2500);