Skip to content

Commit 54ccacd

Browse files
coodoscoodos
committed
chore: merge
2 parents e627ae3 + f88d3d5 commit 54ccacd

11 files changed

Lines changed: 130 additions & 95 deletions

File tree

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

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<script lang="ts">
2-
import type { HTMLAttributes } from 'svelte/elements';
3-
import { Home, CommentsTwo, Search, Camera } from '$lib/icons';
42
import { goto } from '$app/navigation';
5-
import { isNavigatingThroughNav, ownerId } from '$lib/store/store.svelte';
63
import { page } from '$app/state';
4+
import { Camera, CommentsTwo, Home, Search } from '$lib/icons';
5+
import { isNavigatingThroughNav, ownerId } from '$lib/store/store.svelte';
6+
import { uploadedImages } from '$lib/store/store.svelte';
7+
import { revokeImageUrls } from '$lib/utils';
8+
import type { HTMLAttributes } from 'svelte/elements';
79
810
interface IBottomNavProps extends HTMLAttributes<HTMLElement> {
911
activeTab?: string;
@@ -19,6 +21,9 @@
1921
let _activeTab = $derived(page.url.pathname);
2022
let fullPath = $derived(page.url.pathname);
2123
24+
let imageInput: HTMLInputElement;
25+
let images: FileList | null = $state(null);
26+
2227
const handleNavClick = (newTab: string) => {
2328
// activeTab = newTab;
2429
isNavigatingThroughNav.value = true;
@@ -29,16 +34,33 @@
2934
previousTab = newTab;
3035
if (newTab === 'profile') {
3136
goto(`/profile/${ownerId}`);
37+
} else if (newTab === "post") {
38+
uploadedImages.value = null;
39+
imageInput.value = "";
40+
imageInput.click();
3241
} else {
3342
goto(`/${newTab}`);
3443
}
3544
};
3645
3746
$effect(() => {
3847
activeTab = _activeTab.split('/').pop() ?? '';
48+
if (images && images.length > 0 && activeTab !== 'post' && previousTab === 'post' && !_activeTab.includes('post/audience')) {
49+
if (uploadedImages.value)
50+
revokeImageUrls(uploadedImages.value);
51+
uploadedImages.value = Array.from(images).map(file => ({
52+
url: URL.createObjectURL(file),
53+
alt: file.name
54+
}));
55+
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
56+
if (uploadedImages.value.length > 0) {
57+
goto("/post");
58+
}
59+
}
3960
});
4061
</script>
4162

63+
<input type="file" accept="image/*" multiple bind:files={images} bind:this={imageInput} class="hidden" />
4264
<!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
4365
<nav
4466
aria-label="Main navigation"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
>
9191
<HugeiconsIcon icon={menuButton[variant]} size={24} color="var(--color-black-500)" />
9292
</button>
93-
{:else if variant === 'secondary' && options}
93+
{:else if variant === 'secondary' && options && isCallBackNeeded}
9494
<ActionMenu {options} />
9595
{/if}
9696
</header>

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

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
<script lang="ts">
22
import { Cross } from '$lib/icons';
3+
import type { Image } from '$lib/types';
34
import { cn } from '$lib/utils';
45
import type { HTMLAttributes } from 'svelte/elements';
56
6-
interface IImage {
7-
url: string;
8-
alt: string;
9-
}
107
118
interface IUploadedPostViewProps extends HTMLAttributes<HTMLElement> {
12-
images: IImage[];
9+
images: Image[];
1310
width?: string;
1411
height?: string;
1512
callback: (i: number) => void;
@@ -26,14 +23,12 @@
2623

2724
<article
2825
{...restProps}
29-
class={cn(
30-
['flex max-w-screen flex-row items-center gap-4 scroll-auto', restProps.class].join(' ')
31-
)}
26+
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(' '))}
3227
>
3328
{#each images as image, i}
34-
<div class={cn(['group relative shrink-0'])}>
29+
<div class={cn(['group relative shrink-0 mt-3 mb-2'])}>
3530
<Cross
36-
class="absolute top-0 right-0 hidden translate-x-1/2 -translate-y-1/2 cursor-pointer group-hover:block"
31+
class="absolute right-0 top-0 hidden -translate-y-1/2 translate-x-1/2 cursor-pointer group-hover:block"
3732
onclick={() => callback(i)}
3833
/>
3934
<img

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
1-
import type { PostData } from '$lib/types';
1+
import type { Image, PostData } from "$lib/types";
22

33
export const isNavigatingThroughNav = $state({
4-
value: false
4+
value: false,
55
});
66

77
export const showComments = $state({
8-
value: false
8+
value: false,
99
});
1010

1111
export const ownerId = $state({
12-
value: '1'
12+
value: "1",
1313
});
1414

1515
export const selectedPost: { value: PostData | null } = $state({
16-
value: null
16+
value: null,
17+
});
18+
19+
export const uploadedImages: { value: Image[] | null } = $state({
20+
value: null,
21+
});
22+
23+
export const audience: { value: string } = $state({
24+
value: "Everyone",
1725
});

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

Lines changed: 36 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,48 @@
1-
import type { SVGAttributes } from 'svelte/elements';
1+
import type { SVGAttributes } from "svelte/elements";
22

33
export interface ISvgProps extends SVGAttributes<SVGElement> {
4-
size?: number | string;
5-
color?: string;
4+
size?: number | string;
5+
color?: string;
66
}
77

88
export type CommentType = {
9-
commentId: string;
10-
name: string;
11-
userImgSrc: string;
12-
comment: string;
13-
isUpVoted: boolean;
14-
isDownVoted: boolean;
15-
upVotes: number;
16-
time: string;
17-
replies: CommentType[];
9+
commentId: string;
10+
name: string;
11+
userImgSrc: string;
12+
comment: string;
13+
isUpVoted: boolean;
14+
isDownVoted: boolean;
15+
upVotes: number;
16+
time: string;
17+
replies: CommentType[];
1818
};
1919

2020
export type PostData = {
21-
id: string;
22-
avatar: string;
23-
userId: string;
24-
username: string;
25-
imgUris: string[];
26-
caption: string;
27-
time: string;
28-
count: {
29-
likes: number;
30-
comments: number;
31-
};
21+
id: string;
22+
avatar: string;
23+
userId: string;
24+
username: string;
25+
imgUris: string[];
26+
caption: string;
27+
time: string;
28+
count: {
29+
likes: number;
30+
comments: number;
31+
};
3232
};
3333

3434
export type userProfile = {
35-
userId: string;
36-
username: string;
37-
avatar: string;
38-
totalPosts: number;
39-
followers: number;
40-
following: number;
41-
userBio: string;
42-
posts: PostData[];
35+
userId: string;
36+
username: string;
37+
avatar: string;
38+
totalPosts: number;
39+
followers: number;
40+
following: number;
41+
userBio: string;
42+
posts: PostData[];
43+
};
44+
45+
export type Image = {
46+
url: string;
47+
alt: string;
4348
};

‎platforms/pictique/src/lib/ui/Input/Input.stories.ts‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,54 @@
1-
import { Input } from '..';
1+
import { Input } from "..";
22

33
export default {
4-
title: 'UI/Input',
5-
component: Input,
6-
tags: ['autodocs'],
7-
render: (args: { type: string; placeholder: string }) => ({
8-
Component: Input,
9-
props: args
10-
})
4+
title: "UI/Input",
5+
component: Input,
6+
tags: ["autodocs"],
7+
render: (args: { type: string; placeholder: string }) => ({
8+
Component: Input,
9+
props: args,
10+
}),
1111
};
1212

1313
export const Text = {
14-
args: {
15-
type: 'text',
16-
placeholder: 'Joe Biden'
17-
}
14+
args: {
15+
type: "text",
16+
placeholder: "Joe Biden",
17+
},
1818
};
1919

2020
export const Tel = {
21-
args: {
22-
type: 'tel',
23-
placeholder: '987654321'
24-
}
21+
args: {
22+
type: "tel",
23+
placeholder: "987654321",
24+
},
2525
};
2626

2727
export const NumberInput = {
28-
args: {
29-
type: 'number',
30-
placeholder: 'Enter something'
31-
}
28+
args: {
29+
type: "number",
30+
placeholder: "Enter something",
31+
},
3232
};
3333

3434
export const Email = {
35-
args: {
36-
type: 'email',
37-
placeholder: 'example@email.com'
38-
}
35+
args: {
36+
type: "email",
37+
placeholder: "example@email.com",
38+
},
3939
};
4040

4141
export const Invalid = {
42-
args: {
43-
type: 'email',
44-
placeholder: 'Invalid email',
45-
value: 'not-an-email'
46-
}
42+
args: {
43+
type: "email",
44+
placeholder: "Invalid email",
45+
value: "not-an-email",
46+
},
4747
};
4848

4949
export const Password = {
50-
args: {
51-
type: 'password',
52-
placeholder: 'Please enter password'
53-
}
50+
args: {
51+
type: "password",
52+
placeholder: "Please enter password",
53+
},
5454
};

‎platforms/pictique/src/lib/ui/Input/Input.svelte‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,16 @@
1717
...restProps
1818
}: IInputProps = $props();
1919
20-
const cbase = $derived(
21-
'w-full bg-grey py-3.5 px-6 text-[15px] text-black-800 font-geist font-normal placeholder:text-black-600 rounded-4xl outline-0 border border-transparent invalid:border-red invalid:text-red focus:invalid:text-black-800 focus:invalid:border-transparent'
22-
);
20+
const cbase =
21+
'w-full bg-grey py-3.5 px-6 text-[15px] text-black-800 font-geist font-normal placeholder:text-black-600 rounded-4xl outline-0 border border-transparent invalid:border-red invalid:text-red focus:invalid:text-black-800 focus:invalid:border-transparent';
2322
</script>
2423

2524
<input
2625
{...restProps}
2726
{type}
2827
{placeholder}
29-
bind:value
3028
bind:this={input}
29+
bind:value
3130
class={cn([cbase, restProps.class].join(' '))}
3231
tabindex="0"
3332
/>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export * from './mergeClasses';
22
export * from './clickOutside';
33
export * from './axios';
4+
export * from './memoryHelper';

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import type { Image } from '$lib/types';
2+
3+
export const revokeImageUrls = (imageArray: Image[]) => {
4+
imageArray?.forEach((img) => URL.revokeObjectURL(img.url));
5+
};

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
<script lang="ts">
22
import { page } from '$app/state';
3-
import { BottomNav, Header, Comment, MessageInput, SideBar } from '$lib/fragments';
4-
import UserRequest from '$lib/fragments/UserRequest/UserRequest.svelte';
3+
import { BottomNav, Comment, Header, MessageInput, SideBar } from '$lib/fragments';
54
import { showComments } from '$lib/store/store.svelte';
65
import { openCreatePostModal, isCreatePostModalOpen } from '$lib/stores/posts';
76
import { comments, fetchComments, createComment, activePostId } from '$lib/stores/comments';
87
import CreatePostModal from '$lib/fragments/CreatePostModal/CreatePostModal.svelte';
9-
import { ArrowLeft01Icon, ArrowLeft02Icon } from '@hugeicons/core-free-icons';
10-
import { HugeiconsIcon } from '@hugeicons/svelte';
118
129
let { children } = $props();
1310
@@ -40,8 +37,10 @@
4037
heading = 'Feed';
4138
} else if (route.includes('discover')) {
4239
heading = 'Search';
40+
} else if (route.includes('/post/audience')) {
41+
heading = 'Audience';
4342
} else if (route.includes('post')) {
44-
heading = 'Post';
43+
heading = 'Upload photo';
4544
} else if (route === `/messages/${idFromParams}`) {
4645
heading = 'User Name';
4746
} else if (route.includes('messages')) {
@@ -81,7 +80,7 @@
8180
<section class="hide-scrollbar h-[100dvh] overflow-y-auto px-4 pb-8 md:px-8 md:pt-8">
8281
<div class="flex flex-col">
8382
<Header
84-
variant={route === `/messages/${idFromParams}`
83+
variant={route === `/messages/${idFromParams}` || route.includes('/post')
8584
? 'secondary'
8685
: route.includes('profile')
8786
? 'tertiary'

0 commit comments

Comments
 (0)