diff --git a/platforms/pictique/src/lib/fragments/BottomNav/BottomNav.svelte b/platforms/pictique/src/lib/fragments/BottomNav/BottomNav.svelte index c0dff182..3a4ff9eb 100644 --- a/platforms/pictique/src/lib/fragments/BottomNav/BottomNav.svelte +++ b/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 { 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) diff --git a/platforms/pictique/src/lib/fragments/Profile/Profile.svelte b/platforms/pictique/src/lib/fragments/Profile/Profile.svelte index 661c9f71..a1eacb36 100644 --- a/platforms/pictique/src/lib/fragments/Profile/Profile.svelte +++ b/platforms/pictique/src/lib/fragments/Profile/Profile.svelte @@ -13,7 +13,7 @@
{profileData.username} diff --git a/platforms/pictique/src/lib/fragments/SideBar/SideBar.svelte b/platforms/pictique/src/lib/fragments/SideBar/SideBar.svelte index 4f500994..af7f0d6d 100644 --- a/platforms/pictique/src/lib/fragments/SideBar/SideBar.svelte +++ b/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 { 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 - - - - - - - - - - - - - - - - - - - - - - - - - - - + {#if handlePost} {/if} diff --git a/platforms/pictique/src/lib/store/store.svelte.ts b/platforms/pictique/src/lib/store/store.svelte.ts index 7a219adf..50bb6e04 100644 --- a/platforms/pictique/src/lib/store/store.svelte.ts +++ b/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", -}); +}); \ No newline at end of file diff --git a/platforms/pictique/src/lib/types.ts b/platforms/pictique/src/lib/types.ts index 8ab5647f..d996ec22 100644 --- a/platforms/pictique/src/lib/types.ts +++ b/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; diff --git a/platforms/pictique/src/lib/utils/axios.ts b/platforms/pictique/src/lib/utils/axios.ts index 1b1b6cb5..8cfb2546 100644 --- a/platforms/pictique/src/lib/utils/axios.ts +++ b/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"); +}; diff --git a/platforms/pictique/src/routes/(auth)/auth/+page.svelte b/platforms/pictique/src/routes/(auth)/auth/+page.svelte index 5d7c49f6..092a077e 100644 --- a/platforms/pictique/src/routes/(auth)/auth/+page.svelte +++ b/platforms/pictique/src/routes/(auth)/auth/+page.svelte @@ -1,7 +1,7 @@
{ openCreatePostModal(); }} @@ -149,7 +165,7 @@ {/if} {#if route !== `/messages/${idFromParams}`} - + {/if}
diff --git a/platforms/pictique/src/routes/(protected)/profile/+page.svelte b/platforms/pictique/src/routes/(protected)/profile/+page.svelte index 0fbba997..b396987d 100644 --- a/platforms/pictique/src/routes/(protected)/profile/+page.svelte +++ b/platforms/pictique/src/routes/(protected)/profile/+page.svelte @@ -1,2 +1,3 @@ - + diff --git a/platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte b/platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte index 2aeea589..063bb67b 100644 --- a/platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte +++ b/platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte @@ -2,16 +2,16 @@ 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(null); let error = $state(null); let loading = $state(true); + let ownerId: string | null = $state(null); async function fetchProfile() { try { @@ -19,6 +19,7 @@ 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); @@ -67,7 +71,7 @@
{:else if profile} handlePostClick(post)} {handleFollow} diff --git a/platforms/pictique/src/routes/(protected)/settings/+page.svelte b/platforms/pictique/src/routes/(protected)/settings/+page.svelte index 56fb8361..e060344a 100644 --- a/platforms/pictique/src/routes/(protected)/settings/+page.svelte +++ b/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(null); + let error = $state(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)
- goto(`/settings/account`)} profileSrc={userImage}> + {#if loading} +
+

Loading profile...

+
+ {:else if error} +
+

{error}

+
+ {:else if profile} + goto(`/settings/account`)} profileSrc={profile?.avatarUrl}> {#snippet children()}
-

{username}

-

{userEmail}

+

{profile?.handle}

+

{profile?.description}

{/snippet} + {/if}
diff --git a/platforms/pictique/src/routes/(protected)/settings/account/username/+page.svelte b/platforms/pictique/src/routes/(protected)/settings/account/username/+page.svelte index 8d33f6c3..92fba565 100644 --- a/platforms/pictique/src/routes/(protected)/settings/account/username/+page.svelte +++ b/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'; import { onMount } from 'svelte'; let handle = $state(); @@ -25,11 +26,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(() => { diff --git a/platforms/pictique/src/routes/+layout.svelte b/platforms/pictique/src/routes/+layout.svelte index d2583c88..fbd2bb6f 100644 --- a/platforms/pictique/src/routes/+layout.svelte +++ b/platforms/pictique/src/routes/+layout.svelte @@ -1,6 +1,6 @@