Merge pull request #642 from sitaradev/search-fixes

fix serach page issues

package.json

@@ -19,7 +19,7 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@playwright/test": "1.36.1",
+		"@playwright/test": "1.36.2",
 		"@sveltejs/adapter-cloudflare": "^2.2.0",
 		"@sveltejs/kit": "^1.10.0",
 		"@sveltejs/svelte-virtual-list": "^3.0.1",

src/routes/search/+page.svelte

@@ -9,6 +9,8 @@
 	import LoadingItemSearchChannel from '$lib/components/Search/LoadingItemSearchChannel.svelte'
 	import ItemSearchUser from '$lib/components/Search/ItemSearchUser.svelte'
 	import LoadingItemSearchUser from '$lib/components/Search/LoadingItemSearchUser.svelte'
+	import { createEffect } from '$lib/utils'
+
 	// @ts-ignore
 	import NProgress from 'nprogress'
 	$: {
@@ -19,29 +21,42 @@
 		}
 	}
 
-	let sectionId = $page.url.searchParams.get('section') || ''
-	let query = $page.url.searchParams.get('query') || ''
+	const useOueryEffect = createEffect()
 
+	let sectionId = $page.url.searchParams.get('section') || ''
+	let queryInUrl = $page.url.searchParams.get('query') || ''
+	let query: string = queryInUrl
 	let title = '',
 		skip = 0,
 		limit = 10,
 		isLoading = false,
 		searchList: any[] = [],
 		placeholderText = 'channels',
 		initialLoad = true
+	let listElement: any
+	let allLoaded = false
 
 	const loadMore = async () => {
+		if (isLoading) return
 		isLoading = true
 		const url = getSectionUrl({ sectionId, query, skip, limit })
 		const moreChannels = await get(`${url}&userId=${$page.data.user?.userId}`, {
 			userId: $page.data.user?.userId,
 			token: $page.data.user?.token
 		})
-		searchList = skip === 0 ? moreChannels : [...searchList, ...moreChannels]
+		allLoaded = moreChannels.length === 0
+		searchList = searchList.concat(moreChannels)
 		skip += limit
 		isLoading = false
 	}
 
+	const resetSkipLimit = () => {
+		skip = 0
+		limit = 10
+		allLoaded = false
+		searchList = []
+	}
+
 	onMount(async () => {
 		switch (sectionId) {
 			case 'weekly':
@@ -62,49 +77,56 @@
 				title = `Fav channels`
 				break
 		}
-		await loadMore()
-		initialLoad = false
+		if (listElement) {
+			listElement.addEventListener('scroll', async () => {
+				if (
+					!allLoaded &&
+					listElement.scrollTop + listElement.clientHeight >= listElement.scrollHeight
+				) {
+					loadMore()
+				}
+			})
+		}
 	})
 
-	const resetSkipLimit = () => {
-		skip = 0
-		limit = 10
-	}
+	$: useOueryEffect(async () => {
+		initialLoad = true
+		resetSkipLimit()
+		await loadMore()
+		initialLoad = false
+	}, [$page.url])
 </script>
 
-<div class="px-9 py-9 md:px-24">
-	<div class="flex flex-col md:flex-row gap-4 pb-10">
+<div bind:this={listElement} class="px-9 py-9 md:px-24 flex flex-col h-screen overflow-auto">
+	<div class="flex flex-col md:flex-row gap-4 \ z-10">
 		<div class="flex flex-col md:flex-row gap-4">
-			<form on:submit|preventDefault={loadMore}>
+			<form action="/search">
 				<div class="form-control">
-					<div class="input-group relative">
+					<div class="input-group relative pb-12">
 						<input
 							name="query"
 							bind:value={query}
 							type="search"
 							placeholder="Search {placeholderText}"
 							class="input input-bordered input-primary w-96" />
-						<button
-							class="btn btn-square btn-neutral text-white"
-							on:click={() => {
-								resetSkipLimit()
-								loadMore()
-							}}>
+						{#if sectionId}
+							<input type="hidden" name="section" value={sectionId} />
+						{/if}
+						<button class="btn btn-square btn-neutral text-white">
 							<IconSearch />
 						</button>
 					</div>
+					{#if title}
+						<div class="font-semibold">
+							<a class="link link-secondary text-lg">{title}</a>
+						</div>
+					{/if}
 				</div>
 			</form>
 		</div>
 	</div>
 
-	{#if title}
-		<div class="font-semibold py-5">
-			<a class="link link-secondary text-lg">{title}</a>
-		</div>
-	{/if}
-
-	<div class="flex flex-col gap-4 justify-around">
+	<div class="flex flex-col gap-4 pt-4 justify-around">
 		{#if initialLoad}
 			{#each Array(10) as _}
 				{#if placeholderText === 'users'}
@@ -125,5 +147,8 @@
 			{/each}
 			<span use:LastItemInViewport on:loadMore={loadMore} />
 		{/if}
+		{#if isLoading}
+			<progress class="progress w-full" />
+		{/if}
 	</div>
 </div>