From f60cae5179130cd81709b20d8bf9699001b2b355 Mon Sep 17 00:00:00 2001
From: Aleksi Lassila <aleksi.emil.lassila@gmail.com>
Date: Wed, 29 May 2024 21:24:42 +0300
Subject: [PATCH] feat: Simple search page implementation

---
 src/lib/apis/tmdb/tmdb-api.ts   | 11 +++++
 src/lib/pages/SearchPage.svelte | 88 +++++++++++++++++++++++++++++++--
 2 files changed, 94 insertions(+), 5 deletions(-)

diff --git a/src/lib/apis/tmdb/tmdb-api.ts b/src/lib/apis/tmdb/tmdb-api.ts
index 0c27552..ad4108a 100644
--- a/src/lib/apis/tmdb/tmdb-api.ts
+++ b/src/lib/apis/tmdb/tmdb-api.ts
@@ -231,6 +231,17 @@ export class TmdbApi implements Api<paths> {
 			})
 			.then((res) => res.data);
 
+	searchTitles = (query: string) =>
+		this.getClient()
+			?.GET('/3/search/multi', {
+				params: {
+					query: {
+						query
+					}
+				}
+			})
+			.then((res) => res.data?.results || []) || Promise.resolve([]);
+
 	// OTHER
 
 	// USER
diff --git a/src/lib/pages/SearchPage.svelte b/src/lib/pages/SearchPage.svelte
index 0e69331..46249ba 100644
--- a/src/lib/pages/SearchPage.svelte
+++ b/src/lib/pages/SearchPage.svelte
@@ -1,5 +1,83 @@
-<script lang="ts">
-	import Container from '../../Container.svelte';
-</script>
-
-<Container focusOnMount>SearchPage</Container>
+<script lang="ts">
+	import Container from '../../Container.svelte';
+	import { MagnifyingGlass } from 'radix-icons-svelte';
+	import classNames from 'classnames';
+	import { tmdbApi } from '../apis/tmdb/tmdb-api';
+	import CardGrid from '../components/CardGrid.svelte';
+	import TmdbCard from '../components/Card/TmdbCard.svelte';
+	import { type ComponentProps, onDestroy } from 'svelte';
+	import { scrollIntoView } from '../selectable';
+	import AnimateScale from '../components/AnimateScale.svelte';
+	import type { Readable } from 'svelte/store';
+
+	let searchQuery = '';
+	let typingTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
+	let loadingTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
+	let results: Promise<ComponentProps<TmdbCard>[]> = Promise.resolve([]);
+	let searchInput: HTMLInputElement | undefined = undefined;
+	let inputFocused: Readable<boolean>;
+
+	function handleInput(query: string) {
+		clearTimeout(typingTimeout);
+
+		typingTimeout = setTimeout(async () => {
+			if (!query) return;
+			results = tmdbApi.searchTitles(query).then((results) =>
+				results.map((result) => ({
+					item: result
+				}))
+			);
+			if (query !== searchQuery) return;
+		}, 500);
+	}
+
+	onDestroy(() => {
+		clearTimeout(typingTimeout);
+	});
+</script>
+
+<Container class="px-32 py-16 h-screen flex flex-col" focusOnMount>
+	<Container
+		direction="horizontal"
+		class={classNames('header2 pb-3 border-b-2 w-full mb-4', {
+			'border-secondary-700': true
+			// 'border-secondary-700': !$inputFocused,
+			// 'border-secondary-400': $inputFocused
+		})}
+	>
+		<Container
+			class={classNames('flex items-center space-x-4 font-medium', {
+				// 'text-secondary-300': !$inputFocused
+			})}
+			bind:hasFocus={inputFocused}
+			on:clickOrSelect={() => searchInput?.focus()}
+		>
+			<AnimateScale hasFocus={$inputFocused}>
+				<MagnifyingGlass
+					size={32}
+					class={classNames({
+						'text-secondary-200': !$inputFocused
+					})}
+				/>
+			</AnimateScale>
+			<input
+				class="bg-transparent outline-none placeholder:text-secondary-400"
+				bind:value={searchQuery}
+				on:input={() => handleInput(searchQuery)}
+				placeholder="Search titles..."
+				bind:this={searchInput}
+			/>
+		</Container>
+	</Container>
+	<div class="min-h-0 overflow-y-auto scrollbar-hide pt-4">
+		{#if !!searchQuery}
+			{#await results then results}
+				<CardGrid class="px-4">
+					{#each results as result}
+						<TmdbCard {...result} on:enter={scrollIntoView({ vertical: 128 })} />
+					{/each}
+				</CardGrid>
+			{/await}
+		{/if}
+	</div>
+</Container>