Merge pull request #315 from gagan-suie/dev

Fix: channel and subscribe layouts

src/lib/components/Browse/DrawerCreateChannel.svelte

@@ -30,6 +30,8 @@
 		maxTag = 3,
 		maxCategory = 4
 
+	let isProcessing = false
+
 	$: maxTagLabel = newChannel.tags.length == maxTag ? 'max reached' : 'max ' + maxTag
 	$: maxCategoryLabel =
 		newChannel.category.length == maxCategory ? 'max reached' : 'max ' + maxCategory
@@ -186,7 +188,13 @@
 					<div class="flex flex-row gap-2 mt-auto md:mb-4 p-3">
 						<button type="button" class="btn btn-default grow" on:click={() => toggleDrawer()}
 							>Cancel</button>
-						<button type="submit" class="btn btn-primary grow">Add</button>
+						<button
+							type="submit"
+							class="btn btn-primary grow"
+							on:click={() => {
+								isProcessing = true
+							}}
+							disabled={isProcessing}>Add</button>
 					</div>
 				</div>
 			</form>

src/lib/components/Browse/SearchBar.svelte

@@ -36,7 +36,7 @@
 				for="create-channel-drawer"
 				class="btn w-[21rem] btn-primary gap-2 drawer-button"
 				on:click={() => {
-					if ($page.data?.user) {
+					if ($page.data.user) {
 						showDrawer = true
 					} else {
 						$is_login_modal_open = true

src/lib/components/Channel/Chat/DropdownViewChannel.svelte

@@ -6,6 +6,7 @@
 	import { page } from '$app/stores'
 	import { copyToClipboard } from '$lib/utils'
 	import IconChatDelete from '$lib/assets/icons/chat/IconChatDelete.svelte'
+	import { enhance } from '$app/forms'
 
 	export let channel: any = undefined
 
@@ -14,7 +15,7 @@
 
 	onMount(async () => {
 		host = await get(`users/search/id?userId=${channel?.user}`)
-		isHost = channel?.user !== $page.data.user.userId
+		isHost = channel?.user === $page.data.user.userId
 	})
 </script>
 
@@ -89,12 +90,21 @@
 					data-tip="Edit channel">
 					Edit channel
 				</button>
-				<label
-					for="modal-delete-channel"
-					class="btn col-span-1 bg-error text-white border-none font-normal normal-case tooltip tooltip-left tooltip-error flex"
-					data-tip="Delete channel">
-					<IconChatDelete />
-				</label>
+				<form
+					action="?/subscribe"
+					method="post"
+					use:enhance={() => {
+						return async ({ update }) => {
+							await update({ reset: false })
+						}
+					}}>
+					<label
+						for="modal-delete-channel"
+						class="btn col-span-1 bg-error text-white border-none font-normal normal-case tooltip tooltip-left tooltip-error flex"
+						data-tip="Delete channel">
+						<IconChatDelete />
+					</label>
+				</form>
 			</div>
 		{/if}
 	</ul>

src/lib/components/MainDrawer/DrawerMain.svelte

@@ -36,7 +36,7 @@
 
 	export var nav_drawer: HTMLInputElement
 
-	$: currentUser = $page.data?.user?.user
+	$: currentUser = $page.data.user?.user
 
 	let exp = 512 //Math.floor(Math.random() * (10000 - 0 + 1) + 0) //currentUser.exp
 	let levelAndBarValue = levelAndBarValueFromExp(exp)

src/lib/components/MainDrawer/DrawerSmall.svelte

@@ -29,7 +29,7 @@
 
 	export let nav_drawer: HTMLInputElement
 
-	$: currentUser = $page.data?.user?.user
+	$: currentUser = $page.data.user?.user
 
 	let exp = 512 //Math.floor(Math.random() * (10000 - 0 + 1) + 0) //currentUser.exp
 	let levelAndBarValue = levelAndBarValueFromExp(exp)

src/lib/components/Profile/TopSection.svelte

@@ -4,8 +4,12 @@
 	import { page } from '$app/stores'
 
 	export let profile: any,
+		subscriberCount: Promise<any>,
+		interestCount: Promise<any>,
+		isSubscribed: Promise<any>,
 		showDrawer = false
-	$: currentUser = $page.data?.user?.user
+
+	$: currentUser = $page.data.user?.user
 </script>
 
 <div class="flex flex-wrap justify-center">
@@ -26,9 +30,18 @@
 	</div>
 	<div class="w-full lg:w-4/12 px-4 lg:order-3 lg:text-right lg:self-center">
 		<div class="py-6 px-3 justify-center flex md:justify-end gap-4">
-			<button class="btn btn-secondary" disabled={profile?._id === $page.data?.user?.userId}
-				>Subscribe</button>
-			<button class="btn btn-primary" disabled>Sponsor</button>
+			<form action="?/subscribe" method="post">
+				<div class="gap-4">
+					{#await isSubscribed}
+						<span>Loading...</span>
+					{:then value}
+						<button class="btn btn-secondary" disabled={profile?._id === $page.data.user?.userId}
+							>{value.isSubscriber ? 'Subscribe' : 'Unsubscribe'}</button>
+					{/await}
+					<!--TODO: open sponsor dialog-->
+					<button class="btn btn-primary" formaction="?/sponsor" disabled>Sponsor</button>
+				</div>
+			</form>
 			<div class="dropdown dropdown-end">
 				<button
 					class="btn btn-circle"
@@ -47,14 +60,22 @@
 	</div>
 	<div class="w-full lg:w-4/12 px-4 lg:order-1">
 		<div class="flex justify-center py-4 lg:pt-4 pt-8">
-			<div class="mr-4 p-3 text-center tooltip" data-tip="22 subscribers">
-				<span class="text-xl font-bold block uppercase tracking-wide">22</span><span class="text-sm"
-					>Subscribers</span>
-			</div>
-			<div class="mr-4 p-3 text-center tooltip" data-tip="10 interests">
-				<span class="text-xl font-bold block uppercase tracking-wide">10</span><span class="text-sm"
-					>Interests</span>
-			</div>
+			{#await subscriberCount}
+				<span>Loading...</span>
+			{:then value}
+				<div class="mr-4 p-3 text-center tooltip" data-tip="{value || 0} subscribers">
+					<span class="text-xl font-bold block uppercase tracking-wide">{value || 0}</span><span
+						class="text-sm">Subscribers</span>
+				</div>
+			{/await}
+			{#await interestCount}
+				<span>Loading...</span>
+			{:then value}
+				<div class="mr-4 p-3 text-center tooltip" data-tip="{value || 0} interests">
+					<span class="text-xl font-bold block uppercase tracking-wide">{value || 0}</span><span
+						class="text-sm">Interests</span>
+				</div>
+			{/await}
 			<div class="lg:mr-4 p-3 text-center tooltip" data-tip="2045 unique profile views">
 				<span class="text-xl font-bold block uppercase tracking-wide">2045</span><span
 					class="text-sm">Views</span>

src/routes/+layout.svelte

@@ -44,7 +44,7 @@
 			console.log('socket connection open')
 			console.log(data)
 			platform_connection.set('open')
-			emitUserConnection({ userId: $page.data?.user?.userId, isOnline: true })
+			emitUserConnection({ userId: $page.data.user?.userId, isOnline: true })
 		})
 		platformSocket.addEventListener('message', (data) => {
 			console.log('listening to messages')
@@ -90,7 +90,7 @@
 			</ul>
 		</div>
 
-		{#if $page.data?.user?.user?.isBanned}
+		{#if $page.data.user?.user?.isBanned}
 			<div class="alert alert-error shadow-lg">
 				<div>
 					<div class="font-bold text-white">

src/routes/browse/+page.server.ts

@@ -21,7 +21,7 @@ export const load = (async ({ locals }) => {
 						token: locals.user.token
 				  })
 				: [],
-			tableChannels: get(`channels?skip=${0}&limit=${50}`)
+			tableChannels: get(`channels?skip=${0}&limit=${100}`)
 		}
 	}
 }) satisfies PageServerLoad

src/routes/browse/+page.svelte

@@ -8,7 +8,7 @@
 	import { page } from '$app/stores'
 
 	export let data: PageData
-	$: user = $page.data?.user
+	$: user = $page.data.user
 </script>
 
 <SectionCarousel bind:channels={data.lazy.mostActiveChannels} />

src/routes/channel/[channelId]/+page.server.ts

@@ -2,16 +2,10 @@ import type { PageServerLoad } from './$types'
 import { get } from '$lib/api'
 
 export const load = (async ({ params, locals }) => {
-	const userId = locals?.user?.userId || ''
-	const token = locals?.user?.token || ''
-	const username = locals?.user?.user?.username || ''
 	return {
 		lazy: {
 			channel: get(`channel?channelId=${params.channelId}`)
 		},
-		channelId: params.channelId,
-		userId,
-		username,
-		token
+		channelId: params.channelId
 	}
 }) satisfies PageServerLoad

src/routes/channel/[channelId]/+page.svelte

@@ -15,10 +15,11 @@
 	import { is_chat_drawer_open } from '$lib/stores/channelStore'
 	import Modal from '$lib/components/Global/Modal.svelte'
 	import { goto } from '$app/navigation'
+	import { page } from '$app/stores'
 
 	export let data: PageData
 
-	$: ({ channelId, userId, token, username } = data)
+	$: ({ channelId } = data)
 
 	let isDeleteModalOpen = false
 
@@ -29,7 +30,7 @@
 			console.log('channel socket connection open')
 			console.log(data)
 			channel_connection.set('open')
-			emitChannelSubscribeByUser({ channelId, userId })
+			emitChannelSubscribeByUser({ channelId, userId: $page.data.user?.userId })
 			emitHistoryToChannel({ channelId, skip: 100 })
 		})
 		channelSocket.addEventListener('message', (data) => {
@@ -60,7 +61,10 @@
 		isDeleteModalOpen = false
 	}
 	const deleteChannelYesAction = async () => {
-		await del(`channels/${channelId}`, { userId, token })
+		await del(`channels?channelId=${channelId}`, {
+			userId: $page.data.user?.userId,
+			token: $page.data.user?.token
+		})
 		//TODO: delete all channel messages
 		goto('/browse')
 	}
@@ -81,7 +85,7 @@
 			</div>
 			<div class="drawer-side m-5 rounded-lg md:w-fit lg:drop-shadow-lg">
 				<label for="chat-drawer" class="drawer-overlay" />
-				<DrawerChat channel={value} bind:userId bind:username />
+				<DrawerChat channel={value} />
 			</div>
 		</div>
 	</div>

src/routes/profile/[username]/+page.server.ts

@@ -1,5 +1,5 @@
 import type { Actions, PageServerLoad } from './$types'
-import { get, patch } from '$lib/api'
+import { get, patch, post, del } from '$lib/api'
 import { redirect } from '@sveltejs/kit'
 
 export const load = (async ({ params, locals }) => {
@@ -17,7 +17,11 @@ export const load = (async ({ params, locals }) => {
 				token: locals.user?.token
 			}),
 			subscriberCount: get(`subscribes/count?source=${profile._id}&sourceType=source1`),
-			interestCount: get(`subscribes/count?source=${profile._id}&sourceType=source2`)
+			interestCount: get(`subscribes/count?source=${profile._id}&sourceType=source2`),
+			isSubscribed: get(`subscribes/relationship?source=${profile._id}`, {
+				userId: locals.user?.userId,
+				token: locals.user?.token
+			})
 		}
 	}
 }) satisfies PageServerLoad
@@ -39,6 +43,30 @@ export const actions = {
 		})
 		locals.user.user = updatedUser
 		throw redirect(303, `/profile/${updatedUser.username}`)
+	},
+	subscribe: async ({ request, locals }: { request: any; locals: any }) => {
+		const data = await request.formData()
+		const isSubscribing = data.get('isSubscribing')
+		const source1 = data.get('source1')
+		const source2 = data.get('source2')
+		if (isSubscribing) {
+			await post(
+				`subscribes?source1=${source1}&source2=${source2}`,
+				{},
+				{
+					userId: locals.user?.userId,
+					token: locals.user?.token
+				}
+			)
+		} else {
+			await del(`subscribes?source1=${source1}&source2=${source2}`, {
+				userId: locals.user?.userId,
+				token: locals.user?.token
+			})
+		}
+	},
+	sponsor: async ({ request, locals }: { request: any; locals: any }) => {
+		await new Promise<any>((resolve) => setTimeout(resolve, 1000))
 	}
 } satisfies Actions
 

src/routes/profile/[username]/+page.svelte

@@ -26,7 +26,12 @@
 			<div
 				class="relative flex flex-col min-w-0 break-words bg-base-100 w-full mb-6 shadow-xl rounded-lg -mt-64">
 				<div class="px-6">
-					<TopSection profile={data.profile} bind:showDrawer />
+					<TopSection
+						profile={data.profile}
+						subscriberCount={data.lazy.subscriberCount}
+						interestCount={data.lazy.interestCount}
+						isSubscribed={data.lazy.isSubscribed}
+						bind:showDrawer />
 					<UserDetails profile={data.profile} />
 					<TabSection
 						channels={data.lazy.channels}