fix: avatars (#226)

* fix: avatars

* fix: avatar in follow request page

* fix: images uploaded shown in user profile

* fix: button size

* fix: avatar

---------

Co-authored-by: Merul Dhiman <[email protected]>

Author: grv-saini-20

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

@@ -2,8 +2,8 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { Camera, CommentsTwo, Home, Search } from '$lib/icons';
-	import { isNavigatingThroughNav } from '$lib/store/store.svelte';
-    import { uploadedImages } from '$lib/store/store.svelte';
+	import { isNavigatingThroughNav, ownerId } from '$lib/store/store.svelte';
+	import { uploadedImages } from '$lib/store/store.svelte';
 	import { getAuthId, revokeImageUrls } from '$lib/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
 
@@ -25,7 +25,7 @@
 	let fullPath = $derived(page.url.pathname);
 
 	let imageInput: HTMLInputElement;
-    let images: FileList | null = $state(null);
+	let images: FileList | null = $state(null);
 
 	const handleNavClick = (newTab: string) => {
 		// activeTab = newTab;
@@ -37,9 +37,9 @@
 		previousTab = newTab;
 		if (newTab === 'profile') {
 			goto(`/profile/${ownerId}`);
-		} else if (newTab === "post") {
-            uploadedImages.value = null;
-            imageInput.value = "";
+		} else if (newTab === 'post') {
+			uploadedImages.value = null;
+			imageInput.value = '';
 			imageInput.click();
 		} else {
 			goto(`/${newTab}`);
@@ -49,22 +49,34 @@
 	$effect(() => {
 		ownerId = getAuthId()
 		activeTab = _activeTab.split('/').pop() ?? '';
-		if (images && images.length > 0 && activeTab !== 'post' && previousTab === 'post' && !_activeTab.includes('post/audience')) {
-            if (uploadedImages.value)
-			revokeImageUrls(uploadedImages.value);
-            uploadedImages.value = Array.from(images).map(file => ({
-                url: URL.createObjectURL(file),
-                alt: file.name
-            }));
+		if (
+			images &&
+			images.length > 0 &&
+			activeTab !== 'post' &&
+			previousTab === 'post' &&
+			!_activeTab.includes('post/audience')
+		) {
+			if (uploadedImages.value) revokeImageUrls(uploadedImages.value);
+			uploadedImages.value = Array.from(images).map((file) => ({
+				url: URL.createObjectURL(file),
+				alt: file.name
+			}));
 			images = null; // To prevent re-triggering the effect and thus making an infinite loop with /post route's effect when the length of uploadedImages goes to 0
-            if (uploadedImages.value.length > 0) {
-                goto("/post");
-            }
+			if (uploadedImages.value.length > 0) {
+				goto('/post');
+			}
 		}
 	});
 </script>
 
-<input type="file" accept="image/*" multiple bind:files={images} bind:this={imageInput} class="hidden" />
+<input
+	type="file"
+	accept="image/*"
+	multiple
+	bind:files={images}
+	bind:this={imageInput}
+	class="hidden"
+/>
 <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
 <nav
 	aria-label="Main navigation"

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

@@ -51,13 +51,14 @@
 			<button
 				type="button"
 				class="rounded-full p-2 hover:bg-gray-100"
-				on:click={closeCreatePostModal}
+				onclick={closeCreatePostModal}
 			>
 				✕
 			</button>
 		</div>
 
 		<div class="mb-4">
+			<!-- svelte-ignore element_invalid_self_closing_tag -->
 			<textarea
 				bind:value={text}
 				placeholder="What's on your mind?"
@@ -70,6 +71,7 @@
 			<div class="mb-4 grid grid-cols-2 gap-4">
 				{#each images as image, index}
 					<div class="relative">
+						<!-- svelte-ignore a11y_img_redundant_alt -->
 						<img
 							src={image}
 							alt="Post image"
@@ -78,7 +80,7 @@
 						<button
 							type="button"
 							class="absolute top-2 right-2 rounded-full bg-black/50 p-1 text-white hover:bg-black/70"
-							on:click={() => removeImage(index)}
+							onclick={() => removeImage(index)}
 						>
 							✕
 						</button>
@@ -87,14 +89,17 @@
 			</div>
 		{/if}
 
-		<div class="flex items-center justify-between">
-			<label class="cursor-pointer rounded-lg bg-gray-100 px-4 py-2 hover:bg-gray-200">
-				<input type="file" accept="image/*" class="hidden" on:change={handleImageUpload} />
+		<div class="flex items-center justify-between gap-2">
+			<label
+				class="w-full cursor-pointer rounded-full bg-gray-100 px-4 py-3 text-center hover:bg-gray-200"
+			>
+				<input type="file" accept="image/*" class="hidden" onchange={handleImageUpload} />
 				Add Photo
 			</label>
 
 			<Button
 				variant="secondary"
+				size="sm"
 				callback={handleSubmit}
 				isLoading={isSubmitting}
 				disabled={!text.trim() && images.length === 0}

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

@@ -26,7 +26,7 @@
 
 <label
 	for={uniqueId}
-	class="bg-grey text-black-400 font-geist rounded-4xl flex h-[158px] w-full items-center justify-center text-base font-normal"
+	class="bg-grey text-black-400 font-geist flex h-[158px] w-full items-center justify-center rounded-4xl text-base font-normal"
 >
 	{#if files}
 		<div class="flex flex-col items-center gap-2">

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

@@ -52,7 +52,7 @@
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
-		class="bg-grey h-13 w-13 flex aspect-square items-center justify-center rounded-full"
+		class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full"
 		onclick={handleSend}
 	>
 		<HugeiconsIcon size="24px" icon={SentIcon} color="var(--color-black-400)" />

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

@@ -16,10 +16,10 @@
 	interface IPostProps extends HTMLAttributes<HTMLElement> {
 		avatar: string;
 		username: string;
-		userId: string;
+		userId?: string;
 		imgUris: string[];
-		caption: string;
-		count: {
+		text: string;
+		count?: {
 			likes: number;
 			comments: number;
 		};
@@ -58,6 +58,7 @@
 
 	const {
 		avatar,
+		userId,
 		username,
 		imgUris: uris,
 		text,
@@ -67,9 +68,8 @@
 		...restProps
 	}: IPostProps = $props();
 
-	let imgUris = $derived.by(() => pairAndJoinChunks(uris));
-
-	let galleryRef: HTMLDivElement;
+	let imgUris = $derived(uris);
+	let galleryRef: HTMLDivElement | undefined = $state();
 	let currentIndex = $state(0);
 
 	function scrollLeft() {

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

@@ -3,11 +3,19 @@
 	import type { userProfile, PostData } from '$lib/types';
 	import Post from '../Post/Post.svelte';
 
-	export let variant: 'user' | 'other' = 'user';
-	export let profileData: userProfile;
-	export let handleSinglePost: (post: PostData) => void;
-	export let handleFollow: () => Promise<void>;
-	export let handleMessage: () => Promise<void>;
+	let {
+		variant = 'user',
+		profileData,
+		handleSinglePost,
+		handleFollow,
+		handleMessage
+	}: {
+		variant: 'user' | 'other';
+		profileData: userProfile;
+		handleSinglePost: (post: PostData) => void;
+		handleFollow: () => Promise<void>;
+		handleMessage: () => Promise<void>;
+	} = $props();
 </script>
 
 <div class="flex flex-col gap-4 p-4">
@@ -23,8 +31,8 @@
 		</div>
 		{#if variant === 'other'}
 			<div class="flex gap-2">
-				<Button variant="primary" callback={handleFollow}>Follow</Button>
-				<Button variant="primary" callback={handleMessage}>Message</Button>
+				<Button variant="primary" size="sm" callback={handleFollow}>Follow</Button>
+				<Button variant="primary" size="sm" callback={handleMessage}>Message</Button>
 			</div>
 		{/if}
 	</div>
@@ -46,13 +54,13 @@
 
 	<div class="grid grid-cols-3 gap-1">
 		{#each profileData.posts.filter((e) => e.imgUris && e.imgUris.length > 0) as post}
-			<li class="mb-6">
+			<li class="mb-6 list-none">
 				<Post
-					avatar={'https://picsum.photos/200/200'}
+					avatar={profileData.avatarUrl || 'https://picsum.photos/200/200'}
 					username={profileData?.username}
 					imgUris={post.imgUris ?? []}
-					text={post.text}
-					time={new Date(post.createdAt).toLocaleDateString()}
+					text={post.caption}
+					time={post.time ? new Date(post.time).toLocaleDateString() : ''}
 					callback={{
 						like: async () => {
 							try {

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

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { Cross } from '$lib/icons';
-    import type { Image } from '$lib/types';
+	import type { Image } from '$lib/types';
 	import { cn } from '$lib/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
 
-
 	interface IUploadedPostViewProps extends HTMLAttributes<HTMLElement> {
 		images: Image[];
 		width?: string;
@@ -23,12 +22,17 @@
 
 <article
 	{...restProps}
-	class={cn(['pl-0.5 pr-4 max-w-screen flex flex-row items-center gap-4 overflow-x-auto min-h-max', restProps.class].join(' '))}
+	class={cn(
+		[
+			'flex min-h-max max-w-screen flex-row items-center gap-4 overflow-x-auto pr-4 pl-0.5',
+			restProps.class
+		].join(' ')
+	)}
 >
 	{#each images as image, i}
-		<div class={cn(['group relative shrink-0 mt-3 mb-2'])}>
+		<div class={cn(['group relative mt-3 mb-2 shrink-0'])}>
 			<Cross
-				class="absolute right-0 top-0 hidden -translate-y-1/2 translate-x-1/2 cursor-pointer group-hover:block"
+				class="absolute top-0 right-0 hidden translate-x-1/2 -translate-y-1/2 cursor-pointer group-hover:block"
 				onclick={() => callback(i)}
 			/>
 			<img

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

@@ -1,21 +1,26 @@
-import type { Image, PostData } from "$lib/types";
+import type { Image, PostData } from '$lib/types';
 
 export const isNavigatingThroughNav = $state({
-    value: false,
+	value: false
 });
 
 export const showComments = $state({
-    value: false,
+	value: false
+});
+
+export const ownerId = $state({
+	value: '1'
 });
 
 export const selectedPost: { value: PostData | null } = $state({
-    value: null,
+	value: null
 });
 
 export const uploadedImages: { value: Image[] | null } = $state({
-    value: null,
+	value: null
 });
 
 export const audience: { value: string } = $state({
-    value: "Everyone",
-});
+	value: 'Everyone'
+});
+

platforms/pictique/src/lib/stores/auth.ts

@@ -4,21 +4,21 @@ import { apiClient, setAuthToken, removeAuthToken } from '$lib/utils/axios';
 export const isAuthenticated = writable(false);
 
 export const initializeAuth = () => {
-    const token = localStorage.getItem('pictique_auth_token');
-    if (token) {
-        apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-        isAuthenticated.set(true);
-    }
+	const token = localStorage.getItem('pictique_auth_token');
+	if (token) {
+		apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+		isAuthenticated.set(true);
+	}
 };
 
 export const login = (token: string) => {
-    setAuthToken(token);
-    apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-    isAuthenticated.set(true);
+	setAuthToken(token);
+	apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+	isAuthenticated.set(true);
 };
 
 export const logout = () => {
-    removeAuthToken();
-    delete apiClient.defaults.headers.common['Authorization'];
-    isAuthenticated.set(false);
-}; 
+	removeAuthToken();
+	delete apiClient.defaults.headers.common['Authorization'];
+	isAuthenticated.set(false);
+};