Merge pull request #316 from gagan-suie/dev

Fix: delete all messages and added user stats
CodeCrowCorp · Mar 13, 2023 · 58e92a3 · 58e92a3
2 parents cc5dd99 + c04a0ad
commit 58e92a3
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 49 deletions.
diff --git a/src/lib/components/Browse/DrawerCreateChannel.svelte b/src/lib/components/Browse/DrawerCreateChannel.svelte
@@ -30,8 +30,6 @@
 		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
@@ -188,13 +186,7 @@
 					<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"
-							on:click={() => {
-								isProcessing = true
-							}}
-							disabled={isProcessing}>Add</button>
+						<button type="submit" class="btn btn-primary grow">Add</button>
 					</div>
 				</div>
 			</form>

diff --git a/src/lib/components/MainDrawer/DrawerMain.svelte b/src/lib/components/MainDrawer/DrawerMain.svelte
@@ -33,6 +33,8 @@
 
 	import { is_login_modal_open } from '$lib/stores/helperStore'
 	import { colorFromLevel, levelAndBarValueFromExp } from '$lib/utils'
+	import { onMount } from 'svelte'
+	import { get } from '$lib/api'
 
 	export var nav_drawer: HTMLInputElement
 
@@ -43,6 +45,16 @@
 	let progressBarLevel = levelAndBarValue.level //levelFromExp(exp) //currentUser.exp
 	let progressBarValue = levelAndBarValue.barValue //barValueFromExp(exp) //currentUser.exp
 	let progressBarColor = colorFromLevel(progressBarLevel)
+
+	let streamCount = 0
+	let hoursStreamed = 0
+
+	onMount(async () => {
+		if (currentUser) {
+			streamCount = 0 //await get(`TODO: add endpoint here`)
+			hoursStreamed = 0 //await get(`TODO: add endpoint here`)
+		}
+	})
 </script>
 
 <div class="menu p-4 w-80 bg-base-100 text-base-content flex flex-col">
@@ -79,9 +91,13 @@
 									<p class=" text-pink-500 truncate">@{currentUser.username}</p>
 								</div>
 								<IconDrawerStreak />
-								<p class="col-span-2 tooltip text-start" data-tip="62 day streak">62 d</p>
+								<p class="col-span-2 tooltip text-start" data-tip="{streamCount} day streak">
+									{streamCount} d
+								</p>
 								<IconDrawerStreamDuration />
-								<p class="col-span-2 tooltip text-start" data-tip="300 hours streamed">300 h</p>
+								<p class="col-span-2 tooltip text-start" data-tip="{hoursStreamed} hours streamed">
+									{hoursStreamed} h
+								</p>
 							</div>
 						</div>
 						<div class="tooltip" data-tip="level {progressBarLevel}">

diff --git a/src/lib/components/Profile/Elements/SubscriberItem.svelte b/src/lib/components/Profile/Elements/SubscriberItem.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import IconMore from '$lib/assets/icons/IconMore.svelte'
+	export let subscriberItem: any
 </script>
 
 <div class="flex flex-row gap-2 px-4 py-2 rounded-md bg-slate-100 justify-between">

diff --git a/src/lib/components/Profile/ListSubscribe.svelte b/src/lib/components/Profile/ListSubscribe.svelte
@@ -1,16 +1,17 @@
 <script lang="ts">
 	import SubscriberItem from '$lib/components/Profile/Elements/SubscriberItem.svelte'
+	import { subscriber_count, interest_count } from '$lib/stores/profileStore'
 
 	export let subscribers, interests
 </script>
 
 <div class="flex flex-row justify-center gap-5 mt-8">
 	{#await subscribers}
-		Place skeleton layout here
+		Loading...
 	{:then value}
 		{#if value}
 			<div class="flex flex-col w-2/4 gap-2 bg-blue-200 py-4 px-8">
-				<p class="text-start text-black font-semibold">Subscribers (30)</p>
+				<p class="text-start text-black font-semibold">Subscribers ({$subscriber_count})</p>
 
 				<div class="relative w-full">
 					<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
@@ -33,21 +34,18 @@
 						required />
 				</div>
 
-				<SubscriberItem />
-				<SubscriberItem />
-				<SubscriberItem />
-				<SubscriberItem />
-				<SubscriberItem />
-				<SubscriberItem />
+				{#each value as subscriberItem}
+					<SubscriberItem {subscriberItem} />
+				{/each}
 			</div>
 		{/if}
 	{/await}
 	{#await interests}
-		Place skeleton layout here
+		Loading...
 	{:then value}
 		{#if value}
 			<div class="flex flex-col w-2/4 gap-2 bg-pink-100 py-4 px-8">
-				<p class="text-start text-black font-semibold">Interests (30)</p>
+				<p class="text-start text-black font-semibold">Interests ({$interest_count})</p>
 				<div class="relative w-full">
 					<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
 						<svg
@@ -68,12 +66,9 @@
 						placeholder="Search"
 						required />
 				</div>
-				<SubscriberItem />
-				<SubscriberItem />
-				<SubscriberItem />
-				<SubscriberItem />
-				<SubscriberItem />
-				<SubscriberItem />
+				{#each value as subscriberItem}
+					<SubscriberItem {subscriberItem} />
+				{/each}
 			</div>
 		{/if}
 	{/await}

diff --git a/src/lib/components/Profile/TopSection.svelte b/src/lib/components/Profile/TopSection.svelte
@@ -2,6 +2,8 @@
 	import IconMore from '$lib/assets/icons/IconMore.svelte'
 	import AvatarLoader from './Elements/AvatarLoader.svelte'
 	import { page } from '$app/stores'
+	import { onMount } from 'svelte'
+	import { subscriber_count, interest_count } from '$lib/stores/profileStore'
 
 	export let profile: any,
 		subscriberCount: Promise<any>,
@@ -10,6 +12,11 @@
 		showDrawer = false
 
 	$: currentUser = $page.data.user?.user
+
+	onMount(async () => {
+		$subscriber_count = await subscriberCount
+		$interest_count = await interestCount
+	})
 </script>
 
 <div class="flex flex-wrap justify-center">
@@ -31,9 +38,9 @@
 	<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">
 			<form action="?/subscribe" method="post">
-				<div class="gap-4">
+				<div class="flex gap-4">
 					{#await isSubscribed}
-						<span>Loading...</span>
+						<button class="btn btn-secondary" disabled>Unsubscribe</button>
 					{:then value}
 						<button class="btn btn-secondary" disabled={profile?._id === $page.data.user?.userId}
 							>{value.isSubscriber ? 'Subscribe' : 'Unsubscribe'}</button>
@@ -52,30 +59,22 @@
 				<ul tabindex="-1" class="dropdown-content menu p-2 shadow bg-base-200 rounded-box w-52">
 					<li>
 						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<label for="edit-profile-drawer" on:click={() => (showDrawer = true)}> Edit</label>
+						<label for="edit-profile-drawer" on:click={() => (showDrawer = true)}>Edit</label>
 					</li>
 				</ul>
 			</div>
 		</div>
 	</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">
-			{#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="mr-4 p-3 text-center tooltip" data-tip="{$subscriber_count || 0} subscribers">
+				<span class="text-xl font-bold block uppercase tracking-wide">{$subscriber_count || 0}</span
+				><span class="text-sm">Subscribers</span>
+			</div>
+			<div class="mr-4 p-3 text-center tooltip" data-tip="{$interest_count || 0} interests">
+				<span class="text-xl font-bold block uppercase tracking-wide">{$interest_count || 0}</span
+				><span class="text-sm">Interests</span>
+			</div>
 			<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>

diff --git a/src/lib/stores/profileStore.ts b/src/lib/stores/profileStore.ts
@@ -0,0 +1,4 @@
+import { writable, type Writable } from 'svelte/store'
+
+export const subscriber_count: Writable<number> = writable(0)
+export const interest_count: Writable<number> = writable(0)
diff --git a/src/routes/channel/[channelId]/+page.svelte b/src/routes/channel/[channelId]/+page.svelte
@@ -8,7 +8,8 @@
 		emitHistoryToChannel,
 		initChannelSocket,
 		channelSocket,
-		emitChannelSubscribeByUser
+		emitChannelSubscribeByUser,
+		emitDeleteAllMessagesToChannel
 	} from '$lib/websocket'
 	import { channel_connection, channel_message } from '$lib/stores/websocketStore'
 	import { isJsonString } from '$lib/utils'
@@ -65,7 +66,7 @@
 			userId: $page.data.user?.userId,
 			token: $page.data.user?.token
 		})
-		//TODO: delete all channel messages
+		emitDeleteAllMessagesToChannel({ channelId })
 		goto('/browse')
 	}
 </script>

diff --git a/src/routes/profile/[username]/+page.server.ts b/src/routes/profile/[username]/+page.server.ts
@@ -7,7 +7,7 @@ export const load = (async ({ params, locals }) => {
 	return {
 		profile: profile,
 		lazy: {
-			channels: get(`channels/user?userId=${profile._id}skip=${0}&limit=${10}`),
+			channels: get(`channels/user?userId=${profile._id}&skip=${0}&limit=${10}`),
 			subscribers: get(
 				`subscribes?source=${profile._id}&sourceType=source1&skip=${0}&limit=${10}`,
 				{ userId: locals.user?.userId, token: locals.user?.token }