Fix: migrated most endpoints to handle new D1

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.1.15",
+	"version": "0.2.0",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",

src/app.d.ts

@@ -6,7 +6,7 @@ declare namespace App {
 	interface Locals {
 		user: {
 			token?: string
-			userId?: string
+			userId?: number
 			user?: any
 		}
 		platform: {

src/hooks.server.ts

@@ -52,7 +52,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 		//TODO: if need to update platform object, visit app.d.ts file
 		event.locals = {
 			user: {
-				userId,
+				userId: parseInt(userId),
 				token,
 				user
 			},
@@ -83,7 +83,6 @@ export const handle: Handle = async ({ event, resolve }) => {
 	} else {
 		return await resolve(event)
 	}
-	return await resolve(event)
 }
 
 export const handleError = ({ error }: { error: any }) => {

src/lib/components/Browse/Sections/ItemCarousel.svelte

@@ -23,12 +23,10 @@
 						LIVE
 					</span>
 				{/if}
-				<div
-					class="tooltip"
-					data-tip="{getNumberInThousands(channel.viewDetails?.count || 0)} views">
+				<div class="tooltip" data-tip="{getNumberInThousands(channel.viewCount || 0)} views">
 					<span class="btn btn-sm rounded-md font-medium gap-2 btn-neutral text-white border-none">
 						<IconViews />
-						{getNumberInThousands(channel.viewDetails?.count || 0)}
+						{getNumberInThousands(channel.viewCount || 0)}
 					</span>
 				</div>
 				<div class="tooltip" data-tip="{getNumberInThousands(channel.memberCount || 0)} watching">
@@ -52,18 +50,15 @@
 			<p class="text-2xl truncate text-white font-semibold">{channel.title || ''}</p>
 			<div class="flex flex-row items-center gap-2">
 				<div class="avatar">
-					<div
-						class="w-14 mask {channel?.planDetails?.planTier > 1
-							? 'mask-hexagon'
-							: 'mask-squircle'}">
-						<img src={channel.userDetails.avatar} alt="" />
+					<div class="w-14 mask {channel?.planTier > 1 ? 'mask-hexagon' : 'mask-squircle'}">
+						<img src={channel.avatar} alt="" />
 					</div>
 				</div>
 				<div class="w-4/5 flex gap-1">
 					<p class="truncate text-white">
-						@{channel.userDetails.username}
+						@{channel.username}
 					</p>
-					{#if channel.planDetails?.planTier > 1}
+					{#if channel.planTier > 1}
 						<div class="text-accent font-bold">
 							<IconDrawerVerification />
 						</div>

src/lib/components/Browse/Sections/ItemChannel.svelte

@@ -20,12 +20,10 @@
 						LIVE
 					</span>
 				{/if}
-				<div
-					class="tooltip"
-					data-tip="{getNumberInThousands(channel.viewDetails?.count || 0)} views">
+				<div class="tooltip" data-tip="{getNumberInThousands(channel.viewCount || 0)} views">
 					<span class="btn btn-sm rounded-md font-medium gap-2 btn-neutral text-white border-none">
 						<IconViews />
-						{getNumberInThousands(channel.viewDetails?.count || 0)}
+						{getNumberInThousands(channel.viewCount || 0)}
 					</span>
 				</div>
 				<div class="tooltip" data-tip="{getNumberInThousands(channel.memberCount || 0)} watching">
@@ -54,14 +52,13 @@
 	<p class="text-lg font-semibold truncate">{channel.title}</p>
 	<div class="flex flex-row gap-2 max-w-[25rem]">
 		<div class="avatar">
-			<div
-				class="w-12 mask {channel?.planDetails?.planTier > 1 ? 'mask-hexagon' : 'mask-squircle'}">
-				<img src={channel.userDetails.avatar} alt="" />
+			<div class="w-12 mask {channel?.planTier > 1 ? 'mask-hexagon' : 'mask-squircle'}">
+				<img src={channel.avatar} alt="" />
 			</div>
 		</div>
 		<div class="flex items-center gap-1">
-			<p>@{channel.userDetails.username}</p>
-			{#if channel.planDetails?.planTier > 1}
+			<p>@{channel.username}</p>
+			{#if channel.planTier > 1}
 				<div class="text-accent font-bold">
 					<IconDrawerVerification />
 				</div>

src/lib/components/Browse/Sections/ItemTable.svelte

@@ -14,16 +14,15 @@
 	<td>
 		<div class="flex items-center space-x-2 pl-3">
 			<div class="avatar">
-				<div
-					class="w-12 mask {channel.planDetails?.planTier > 1 ? 'mask-hexagon' : 'mask-squircle'}">
-					<img src={channel.userDetails.avatar} alt="" />
+				<div class="w-12 mask {channel.planTier > 1 ? 'mask-hexagon' : 'mask-squircle'}">
+					<img src={channel.avatar} alt="" />
 				</div>
 			</div>
 			<div>
-				<div class="font-bold">{channel.userDetails.displayName || ''}</div>
+				<div class="font-bold">{channel.displayName || ''}</div>
 				<div class="text-sm flex gap-1">
-					@{channel.userDetails.username || ''}
-					{#if channel.planDetails?.planTier > 1}
+					@{channel.username || ''}
+					{#if channel.planTier > 1}
 						<div class="text-accent font-bold">
 							<IconDrawerVerification />
 						</div>
@@ -42,9 +41,9 @@
 		<div class="flex gap-4">
 			<div
 				class="flex gap-2 tooltip"
-				data-tip="{getNumberInThousands(channel.viewDetails?.count || 0)} views">
+				data-tip="{getNumberInThousands(channel.viewCount || 0)} views">
 				<IconViews />
-				<span>{getNumberInThousands(channel.viewDetails?.count || 0)}</span>
+				<span>{getNumberInThousands(channel.viewCount || 0)}</span>
 			</div>
 			<div
 				class="flex gap-2 tooltip"

src/lib/components/Browse/Sections/ItemUser.svelte

@@ -8,15 +8,15 @@
 <a class="p-4 bg-base-100 hover:bg-base-300 shrink-0 rounded-md my-4" href="/{user.username}">
 	<div class="text-center space-y-3 w-[200px]">
 		<div class="avatar">
-			<div class="w-36 mask {user?.planDetails?.planTier > 1 ? 'mask-hexagon' : 'mask-squircle'}">
+			<div class="w-36 mask {user?.planTier > 1 ? 'mask-hexagon' : 'mask-squircle'}">
 				<img src={user.avatar} alt="" />
 			</div>
 		</div>
 		<div class="tooltip w-full flex gap-1 justify-center" data-tip="@{user.username}">
 			<p class="text-lg font-semibold truncate">
 				@{user.username}
 			</p>
-			{#if user.planDetails?.planTier > 1}
+			{#if user.planTier > 1}
 				<div class="text-accent font-bold">
 					<IconDrawerVerification />
 				</div>

src/lib/components/Browse/Sections/SectionTable.svelte

@@ -8,15 +8,15 @@
 	export let channels: any = [],
 		profileId: string = ''
 
-	let skip = 100
+	let lastId = 100
 	let limit = 100
 	let moreChannels: any[] = []
 	const loadMore = async () => {
 		let endpoint = profileId ? `channels/user?userId=${profileId}&` : 'channels?'
-		const infiniteChannels = await get(`${endpoint}skip=${skip}&limit=${limit}`)
+		const infiniteChannels = await get(`${endpoint}lastId=${lastId}&limit=${limit}`)
 		if (infiniteChannels?.length) {
 			moreChannels = [...moreChannels, ...infiniteChannels]
-			skip += limit
+			lastId = infiniteChannels[infiniteChannels.length - 1]._id
 		}
 	}
 </script>

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

@@ -18,10 +18,10 @@
 
 	$: chatMessage = ''
 	$: isChannelSocketConnected = $channel_connection === `open-${channel._id}`
-	$: isHost = channel.user === $page.data.user?.userId
+	$: isHost = channel.userId === $page.data.user?.userId
 
 	$: viewersWithOutHost = viewers.filter(
-		(viewer) => viewer.userId !== channel.user && viewer.userId !== 'anon'
+		(viewer) => viewer.userId !== channel.userId && viewer.userId !== 'anon'
 	)
 
 	function insert(str: string, index: number, value: string) {
@@ -123,7 +123,7 @@
 	// toggle commands handlers
 
 	const toggleBan = (userId: string) => {
-		if (channel.user === userId) return
+		if (channel.userId === userId) return
 		let isEnabled = false
 		if (!channel.bans.includes(userId)) {
 			channel.bans.push(userId)
@@ -141,7 +141,7 @@
 	}
 
 	const toggleMod = (userId: string) => {
-		if (channel.user === userId) return
+		if (channel.userId === userId) return
 		if (!channel.bans.includes(userId)) {
 			let isEnabled = false
 			if (!channel.mods?.includes(userId)) {
@@ -159,7 +159,7 @@
 	}
 
 	const toggleGuest = (userId: string) => {
-		if (channel.user === userId) return
+		if (channel.userId === userId) return
 		if (!channel.bans.includes(userId)) {
 			let isEnabled = false
 			if (!channel.guests.includes(userId) && channel.guests.length < 9) {
@@ -212,7 +212,8 @@
 		chatMessage.startsWith('/') &&
 		!chatMessage.startsWith('/ai ') &&
 		!chatMessage.includes('@') &&
-		(channel.user === $page.data.user?.userId || channel.mods?.includes($page.data.user?.userId)) &&
+		(channel.userId === $page.data.user?.userId ||
+			channel.mods?.includes($page.data.user?.userId)) &&
 		!showUsers
 </script>
 

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

@@ -57,7 +57,11 @@
 			$channel_connection === `open-${channel._id}` &&
 			channel.socket?.readyState === WebSocket.OPEN
 		) {
-			emitChatHistoryToChannel({ channelSocket: channel.socket, channelId: channel._id, skip: 100 })
+			emitChatHistoryToChannel({
+				channelSocket: channel.socket,
+				channelId: channel._id,
+				limit: 100
+			})
 		}
 	})
 
@@ -73,7 +77,7 @@
 			emitChatHistoryToChannel({
 				channelSocket: channel.socket,
 				channelId: channel._id,
-				skip: 100,
+				limit: 100,
 				cursor: cursor || 'none'
 			})
 		}
@@ -104,7 +108,7 @@
 			bind:userId={selectedUser}
 			onOutsideClick={closeProfile} />
 		{#each chatHistory as sender}
-			<Message bind:sender bind:hostId={channel.user} bind:channel {onUsernameClick} />
+			<Message bind:sender bind:hostId={channel.userId} bind:channel {onUsernameClick} />
 		{/each}
 		<span use:LastItemInViewport on:loadMore={loadMore} />
 	</div>

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

@@ -57,7 +57,7 @@
 	const getAll = async () => {
 		if ($page.data.user?.userId) {
 			loading = true
-			urlList = await get('outputs', auth)
+			urlList = await get(`outputs`, auth)
 			loading = false
 		}
 	}

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

@@ -42,9 +42,9 @@
 	})
 
 	const getHostRelationship = async () => {
-		isHost = channel.user === $page?.data?.user?.userId
+		isHost = channel.userId === $page?.data?.user?.userId
 		if ($page.data.user?.userId) {
-			const relationship = await get(`follows/relationship?source=${channel.user}`, {
+			const relationship = await get(`follows/relationship?source=${channel.userId}`, {
 				userId: $page.data.user?.userId,
 				token: $page.data.user?.token
 			})
@@ -57,11 +57,11 @@
 		if (isFollowing) {
 			await put(
 				`follows`,
-				{ source1: channel.user, source2: $page.data.user?.userId },
+				{ source1: channel.userId, source2: $page.data.user?.userId },
 				{ userId: $page.data.user?.userId, token: $page.data.user?.token }
 			)
 		} else {
-			await del(`follows?source1=${channel.user}&source2=${$page.data.user?.userId}`, {
+			await del(`follows?source1=${channel.userId}&source2=${$page.data.user?.userId}`, {
 				userId: $page.data.user?.userId,
 				token: $page.data.user?.token
 			})
@@ -139,23 +139,20 @@
 			</a>
 		</li>
 		<li>
-			<a href="/{channel.userDetails?.username}">
+			<a href="/{channel.username}">
 				<div class="flex flex-wrap gap-2">
 					<div class="avatar online">
-						<div
-							class="w-12 mask {channel.planDetails?.planTier > 1
-								? 'mask-hexagon'
-								: 'mask-squircle'}">
-							<img src={channel.userDetails?.avatar} alt="" />
+						<div class="w-12 mask {channel.planTier > 1 ? 'mask-hexagon' : 'mask-squircle'}">
+							<img src={channel?.avatar} alt="" />
 						</div>
 					</div>
 					<div>
 						<div class="col-span-3 flex">
-							<p class="truncate">{channel.userDetails?.displayName}</p>
+							<p class="truncate">{channel?.displayName}</p>
 						</div>
 						<div class="col-span-3 flex gap-1">
-							<p class="truncate">@{channel.userDetails?.username}</p>
-							{#if channel.planDetails?.planTier > 1}
+							<p class="truncate">@{channel.username}</p>
+							{#if channel.planTier > 1}
 								<div class="text-accent font-bold">
 									<IconDrawerVerification />
 								</div>

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

@@ -16,7 +16,7 @@
 			locale: 'en'
 		})
 
-		container.appendChild(picker)
+		container?.appendChild(picker)
 		if (onSelect)
 			picker.addEventListener('emoji-click', (event) => {
 				onSelect(event.detail.unicode)

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

@@ -137,7 +137,7 @@
 					<p class="mb-3 text-sm font-normal">
 						<a class="link link-hover flex gap-1" href="/{profileData?.profile?.username}"
 							>@{profileData?.profile?.username}
-							{#if profileData?.profile?.planDetails?.planTier > 1}
+							{#if profileData?.profile?.planTier > 1}
 								<div class="text-accent font-bold">
 									<IconDrawerVerification />
 								</div>