Skip to content

Commit 4178da1

Browse files
grv-saini-20coodos
grv-saini-20
and
coodos
authored
Fix/author details (#229)
* fix: author-details * fix: owner-details * fix: author avatar * fix: auth user avatar * fix: error handling * fix: author image in bottom nav --------- Co-authored-by: Merul Dhiman <[email protected]>
1 parent ed8268a commit 4178da1

File tree

13 files changed

+135
-69
lines changed

13 files changed

+135
-69
lines changed

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@
22
import { goto } from '$app/navigation';
33
import { page } from '$app/state';
44
import { Camera, CommentsTwo, Home, Search } from '$lib/icons';
5-
import { isNavigatingThroughNav, ownerId } from '$lib/store/store.svelte';
5+
import { isNavigatingThroughNav } from '$lib/store/store.svelte';
66
import { uploadedImages } from '$lib/store/store.svelte';
7-
import { revokeImageUrls } from '$lib/utils';
7+
import { getAuthId, revokeImageUrls } from '$lib/utils';
88
import type { HTMLAttributes } from 'svelte/elements';
99
10+
let ownerId: string | null = $state(null);
11+
12+
1013
interface IBottomNavProps extends HTMLAttributes<HTMLElement> {
1114
activeTab?: string;
1215
profileSrc: string;
@@ -44,6 +47,7 @@
4447
};
4548
4649
$effect(() => {
50+
ownerId = getAuthId()
4751
activeTab = _activeTab.split('/').pop() ?? '';
4852
if (images && images.length > 0 && activeTab !== 'post' && previousTab === 'post' && !_activeTab.includes('post/audience')) {
4953
if (uploadedImages.value)

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<div class="flex flex-col gap-4 p-4">
1414
<div class="flex items-center gap-4">
1515
<img
16-
src={profileData.avatar ?? 'https://picsum.photos/200/200'}
16+
src={profileData.avatarUrl ?? 'https://picsum.photos/200/200'}
1717
alt={profileData.username}
1818
class="h-20 w-20 rounded-full object-cover"
1919
/>

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

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@
44
import { goto } from '$app/navigation';
55
import { page } from '$app/state';
66
import Button from '$lib/ui/Button/Button.svelte';
7-
import { cn } from '$lib/utils';
8-
import { ownerId } from '$lib/store/store.svelte';
7+
import { cn, getAuthId } from '$lib/utils';
8+
9+
let ownerId: string | null = $state(null);
910
1011
interface ISideBarProps extends HTMLAttributes<HTMLElement> {
1112
activeTab?: string;
@@ -20,6 +21,7 @@
2021
}: ISideBarProps = $props();
2122
2223
$effect(() => {
24+
ownerId = getAuthId();
2325
const pathname = page.url.pathname;
2426
if (pathname.includes('/home')) {
2527
activeTab = 'home';
@@ -142,33 +144,32 @@
142144
Settings
143145
</h3>
144146
</button>
145-
146-
<!-- <button -->
147-
<!-- type="button" -->
148-
<!-- class="flex items-center gap-2" -->
149-
<!-- aria-current={activeTab === 'profile' ? 'page' : undefined} -->
150-
<!-- onclick={() => { -->
151-
<!-- activeTab = 'profile'; -->
152-
<!-- goto(`/profile/${ownerId.value}`); -->
153-
<!-- }} -->
154-
<!-- > -->
155-
<!-- <span -->
156-
<!-- class={`inline-block w-full rounded-full border ${activeTab === 'profile' ? 'border-brand-burnt-orange' : 'border-transparent'}`} -->
157-
<!-- > -->
158-
<!-- <img -->
159-
<!-- width="24px" -->
160-
<!-- height="24px" -->
161-
<!-- class="aspect-square rounded-full" -->
162-
<!-- src={'https://picsum.photos/200/200'} -->
163-
<!-- alt="profile" -->
164-
<!-- /> -->
165-
<!-- </span> -->
166-
<!-- <h3 -->
167-
<!-- class={`${activeTab === 'profile' ? 'text-brand-burnt-orange' : 'text-black-800'} mt-[4px]`} -->
168-
<!-- > -->
169-
<!-- Profile -->
170-
<!-- </h3> -->
171-
<!-- </button> -->
147+
<button
148+
type="button"
149+
class="flex items-center gap-2"
150+
aria-current={activeTab === 'profile' ? 'page' : undefined}
151+
onclick={() => {
152+
activeTab = 'profile';
153+
goto(`/profile/${ownerId}`);
154+
}}
155+
>
156+
<span
157+
class={`inline-block w-full rounded-full border ${activeTab === 'profile' ? 'border-brand-burnt-orange' : 'border-transparent'}`}
158+
>
159+
<img
160+
width="24px"
161+
height="24px"
162+
class="aspect-square rounded-full"
163+
src={profileSrc}
164+
alt="profile"
165+
/>
166+
</span>
167+
<h3
168+
class={`${activeTab === 'profile' ? 'text-brand-burnt-orange' : 'text-black-800'} mt-[4px]`}
169+
>
170+
Profile
171+
</h3>
172+
</button>
172173
{#if handlePost}
173174
<Button size="sm" variant="secondary" callback={handlePost}>Post a photo</Button>
174175
{/if}

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@ export const showComments = $state({
88
value: false,
99
});
1010

11-
export const ownerId = $state({
12-
value: "1",
13-
});
14-
1511
export const selectedPost: { value: PostData | null } = $state({
1612
value: null,
1713
});
@@ -22,4 +18,4 @@ export const uploadedImages: { value: Image[] | null } = $state({
2218

2319
export const audience: { value: string } = $state({
2420
value: "Everyone",
25-
});
21+
});

‎platforms/pictique/src/lib/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export type PostData = {
3434
export type userProfile = {
3535
userId: string;
3636
username: string;
37-
avatar: string;
37+
avatarUrl: string;
3838
totalPosts: number;
3939
followers: number;
4040
following: number;

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,17 @@ export function getAuthToken() {
3030
export const removeAuthToken = (): void => {
3131
localStorage.removeItem(TOKEN_KEY);
3232
};
33+
34+
// Utility function to store auth id
35+
export const setAuthId = (id: string): void => {
36+
localStorage.setItem("ownerId", id);
37+
};
38+
39+
export const getAuthId = () => {
40+
return localStorage.getItem("ownerId");
41+
};
42+
43+
// Utility function to remove auth token
44+
export const removeAuthId = (): void => {
45+
localStorage.removeItem("ownerId");
46+
};

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
22
import { Qr } from '$lib/ui';
33
import { onMount } from 'svelte';
4-
import { apiClient, setAuthToken } from '$lib/utils';
4+
import { apiClient, setAuthId, setAuthToken } from '$lib/utils';
55
import { PUBLIC_PICTIQUE_BASE_URL } from '$env/static/public';
66
import { goto } from '$app/navigation';
77
@@ -21,6 +21,8 @@
2121
2222
eventSource.onmessage = function (e) {
2323
const data = JSON.parse(e.data);
24+
const {user} = data
25+
setAuthId(user.id);
2426
const { token } = data;
2527
setAuthToken(token);
2628
goto('/home');

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

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,13 @@
55
import { openCreatePostModal, isCreatePostModalOpen } from '$lib/stores/posts';
66
import { comments, fetchComments, createComment, activePostId } from '$lib/stores/comments';
77
import CreatePostModal from '$lib/fragments/CreatePostModal/CreatePostModal.svelte';
8+
import { onMount } from 'svelte';
9+
import { apiClient, getAuthId } from '$lib/utils';
10+
import type { userProfile } from '$lib/types';
811
import { heading } from '../store';
912
1013
let { children } = $props();
11-
14+
let ownerId: string | null = $state(null);
1215
let route = $derived(page.url.pathname);
1316
1417
let commentValue: string = $state('');
@@ -17,6 +20,7 @@
1720
let idFromParams = $state();
1821
let isCommentsLoading = $state(false);
1922
let commentsError = $state<string | null>(null);
23+
let profile = $state<userProfile | null>(null);
2024
2125
const handleSend = async () => {
2226
console.log($activePostId, commentValue);
@@ -55,6 +59,7 @@
5559
5660
// Watch for changes in showComments to fetch comments when opened
5761
$effect(() => {
62+
ownerId = getAuthId();
5863
if (showComments.value && activePostId) {
5964
isCommentsLoading = true;
6065
commentsError = null;
@@ -67,13 +72,24 @@
6772
});
6873
}
6974
});
75+
76+
async function fetchProfile() {
77+
try {
78+
const response = await apiClient.get(`/api/users/${ownerId}`);
79+
profile = response.data;
80+
} catch (err) {
81+
console.log(err instanceof Error ? err.message : 'Failed to load profile');
82+
}
83+
}
84+
85+
onMount(fetchProfile)
7086
</script>
7187

7288
<main
73-
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`}
89+
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`}
7490
>
7591
<SideBar
76-
profileSrc="https://picsum.photos/200"
92+
profileSrc={profile?.avatarUrl}
7793
handlePost={async () => {
7894
openCreatePostModal();
7995
}}
@@ -149,7 +165,7 @@
149165
{/if}
150166

151167
{#if route !== `/messages/${idFromParams}`}
152-
<BottomNav class="btm-nav" profileSrc="https://picsum.photos/200" />
168+
<BottomNav class="btm-nav" profileSrc={profile?.avatarUrl ?? ""} />
153169
{/if}
154170
</main>
155171

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1-
<script lang="ts">
1+
<script>
22
</script>
3+

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,24 @@
22
import { goto } from '$app/navigation';
33
import { page } from '$app/state';
44
import { Profile } from '$lib/fragments';
5-
import { ownerId, selectedPost } from '$lib/store/store.svelte';
5+
import { selectedPost } from '$lib/store/store.svelte';
66
import type { userProfile, PostData } from '$lib/types';
7-
import { apiClient } from '$lib/utils/axios';
7+
import { apiClient, getAuthId } from '$lib/utils/axios';
88
import { onMount } from 'svelte';
9-
import Post from '../../../../lib/fragments/Post/Post.svelte';
109
1110
let profileId = $derived(page.params.id);
1211
let profile = $state<userProfile | null>(null);
1312
let error = $state<string | null>(null);
1413
let loading = $state(true);
14+
let ownerId: string | null = $state(null);
1515
1616
async function fetchProfile() {
1717
try {
1818
loading = true;
1919
error = null;
2020
const response = await apiClient.get(`/api/users/${profileId}`);
2121
profile = response.data;
22+
console.log(JSON.stringify(profile));
2223
} catch (err) {
2324
error = err instanceof Error ? err.message : 'Failed to load profile';
2425
} finally {
@@ -38,7 +39,7 @@
3839
async function handleMessage() {
3940
try {
4041
await apiClient.post(`/api/chats/`, {
41-
name: profile.username,
42+
name: profile?.username,
4243
participantIds: [profileId]
4344
});
4445
goto('/messages');
@@ -52,6 +53,9 @@
5253
selectedPost.value = post;
5354
goto('/profile/post');
5455
}
56+
$effect(()=> {
57+
ownerId = getAuthId();
58+
})
5559
5660
onMount(fetchProfile);
5761
</script>
@@ -67,7 +71,7 @@
6771
</div>
6872
{:else if profile}
6973
<Profile
70-
variant={ownerId.value === profileId ? 'user' : 'other'}
74+
variant={ownerId === profileId ? 'user' : 'other'}
7175
profileData={profile}
7276
handleSinglePost={(post) => handlePostClick(post)}
7377
{handleFollow}

0 commit comments

Comments
 (0)