search: improved state handling and removed not need fetches

src/app/results/Playlist.tsx

@@ -6,8 +6,10 @@ import NextLink from "next/link";
 import { Card, CardBody } from "@nextui-org/card";
 import { Image } from "@nextui-org/image";
 import { Link } from "@nextui-org/link";
+import { Listbox, ListboxItem } from "@nextui-org/listbox";
 
 import { PlaylistItem } from "@/client/typings/item";
+import { videoUrl } from "@/utils/urls";
 import { videoSize } from "@/utils/videoSize";
 
 import { Component } from "@/typings/component";
@@ -16,14 +18,16 @@ export const Playlist: Component<{ data: PlaylistItem }> = ({ data }) => {
 	const url = `/playlist/${data.id}`;
 	const channelUrl = `/channel/${data.author.id}`;
 
-	const [width, height] = videoSize([16, 9], 30);
+	const [width, height] = videoSize(30);
+
+	const [playlistItemWidth, playlistItemHeight] = videoSize(5);
 
 	return (
-		<NextLink href={url}>
-			<Card>
-				<CardBody>
-					<div className="flex flex-col lg:flex-row gap-4">
-						<div className="relative">
+		<Card>
+			<CardBody>
+				<div className="flex flex-col lg:flex-row gap-4">
+					<div className="relative">
+						<NextLink href={url}>
 							<Image
 								width={width}
 								height={height}
@@ -33,37 +37,53 @@ export const Playlist: Component<{ data: PlaylistItem }> = ({ data }) => {
 								as={NextImage}
 								unoptimized
 							/>
-							<p className="text-small rounded-md z-10 absolute bottom-2 right-2 bg-content2 p-1">
-								{data.numberOfVideos} videos
-							</p>
-						</div>
-
-						<div className="flex flex-col gap-2">
-							<div>
-								<h1 className="text-xl">{data.title}</h1>
+						</NextLink>
+						<p className="text-small rounded-md z-10 absolute bottom-2 right-2 bg-content2 p-1">
+							{data.numberOfVideos} videos
+						</p>
+					</div>
 
-								<Link
-									as={NextLink}
-									href={channelUrl}
-									className="flex flex-row gap-2 items-center"
-								>
-									<h1 className="text-lg text-default-600">
-										{data.author.name}
-									</h1>
-								</Link>
-							</div>
+					<div className="flex flex-col gap-2">
+						<div>
+							<Link as={NextLink} href={url}>
+								<h1 className="text-xl text-default-foreground">
+									{data.title}
+								</h1>
+							</Link>
 
-							{data.videos && (
-								<div className="flex flex-col gap-1">
-									{data.videos.map((video) => (
-										<h1 key={video.id}>{video.title}</h1>
-									))}
-								</div>
-							)}
+							<Link
+								as={NextLink}
+								href={channelUrl}
+								className="flex flex-row gap-2 items-center"
+							>
+								<h1 className="text-lg text-default-600">{data.author.name}</h1>
+							</Link>
 						</div>
+
+						{data.videos && (
+							<Listbox>
+								{data.videos.map((video) => (
+									<ListboxItem
+										as={NextLink}
+										startContent={
+											<Image
+												alt={video.title}
+												src={video.thumbnail}
+												height={playlistItemHeight}
+												width={playlistItemWidth}
+											/>
+										}
+										key={video.id}
+										href={videoUrl(video.id)}
+									>
+										{video.title}
+									</ListboxItem>
+								))}
+							</Listbox>
+						)}
 					</div>
-				</CardBody>
-			</Card>
-		</NextLink>
+				</div>
+			</CardBody>
+		</Card>
 	);
 };

src/app/results/Search.tsx

@@ -45,13 +45,14 @@ export const Search: Component = () => {
 			return new Error(`The provided filter \`${filter}\` is invalid`);
 	}, [filter]);
 
+	const canSearch = !(!!invalidQuery || !!invalidFilter);
+
 	const {
 		data,
 		error: fetchError,
 		fetchNextPage,
-		// hasNextPage,
 		refetch,
-		isFetching,
+		isPending,
 		isFetchingNextPage
 	} = useInfiniteQuery({
 		queryKey: ["search", query, filter],
@@ -61,12 +62,12 @@ export const Search: Component = () => {
 				type: filter
 			});
 		},
-		enabled: !!invalidQuery || !!invalidFilter,
+		enabled: canSearch,
 		initialPageParam: "",
 		getNextPageParam: (lastPage) => lastPage.nextCursor
 	});
 
-	const error = invalidQuery ?? invalidFilter ?? fetchError ?? undefined;
+	const error = invalidFilter ?? fetchError ?? undefined;
 
 	const searchFor = useSearch();
 
@@ -84,6 +85,13 @@ export const Search: Component = () => {
 		[isFetchingNextPage, fetchNextPage]
 	);
 
+	const hasLoadedData =
+		canSearch && data?.pages.flat().length
+			? data?.pages.flat().length !== 0
+			: false;
+
+	const isLoadingInitialData = canSearch && !isFetchingNextPage && isPending;
+
 	return (
 		<>
 			<Container>
@@ -91,12 +99,13 @@ export const Search: Component = () => {
 					<div className="flex-1">
 						<SearchInput initialQueryValue={query ?? undefined} />
 					</div>
-					<div>
-						<Filter filter={filter} setFilter={setFilter} />
-					</div>
+					{canSearch && (
+						<div>
+							<Filter filter={filter} setFilter={setFilter} />
+						</div>
+					)}
 				</div>
-				<Spacer y={4} />
-				{isFetching && !error && <LoadingPage />}
+				{isLoadingInitialData && <LoadingPage />}
 				{error && (
 					<div className="flex-1 flex items-center justify-center">
 						<div className="text-center">
@@ -111,32 +120,34 @@ export const Search: Component = () => {
 						</div>
 					</div>
 				)}
-				<div className="flex flex-col gap-4">
-					{!error &&
-						data?.pages.map((page, i) => {
-							return (
-								<Fragment key={i}>
-									{page.items.map((result) => {
-										switch (result.type) {
-											case "channel":
-												return <Channel key={result.id} data={result} />;
-
-											case "video":
-												return <Video key={result.id} data={result} />;
-
-											case "playlist":
-												return <Playlist key={result.id} data={result} />;
-										}
-									})}
-								</Fragment>
-							);
-						})}
-
-					<Loading
-						isFetching={isFetchingNextPage}
-						onVisible={handleUserReachedPageEnd}
-					/>
-				</div>
+				{hasLoadedData && (
+					<>
+						<div className="flex flex-col gap-4 mt-4">
+							{data?.pages.map((page, i) => {
+								return (
+									<Fragment key={i}>
+										{page.items.map((result) => {
+											switch (result.type) {
+												case "channel":
+													return <Channel key={result.id} data={result} />;
+
+												case "video":
+													return <Video key={result.id} data={result} />;
+
+												case "playlist":
+													return <Playlist key={result.id} data={result} />;
+											}
+										})}
+									</Fragment>
+								);
+							})}
+						</div>
+						<Loading
+							isFetching={isFetchingNextPage && !isPending}
+							onVisible={handleUserReachedPageEnd}
+						/>
+					</>
+				)}
 			</Container>
 		</>
 	);

src/app/results/Video.tsx

@@ -20,14 +20,14 @@ export const Video: Component<{ data: VideoItem }> = ({ data }) => {
 	const url = `/watch?v=${data.id}`;
 	const channelUrl = `/channel/${data.author.id}`;
 
-	const [width, height] = videoSize([16, 9], 30);
+	const [width, height] = videoSize(30);
 
 	return (
-		<NextLink href={url}>
-			<Card>
-				<CardBody>
-					<div className="flex flex-row gap-4">
-						<div className="relative">
+		<Card>
+			<CardBody>
+				<div className="flex flex-row gap-4">
+					<div className="relative">
+						<NextLink href={url}>
 							<Image
 								width={width}
 								height={height}
@@ -36,43 +36,46 @@ export const Video: Component<{ data: VideoItem }> = ({ data }) => {
 								as={NextImage}
 								unoptimized
 							/>
-							<p className="text-small rounded-md z-10 absolute bottom-2 right-2 bg-content2 p-1">
-								{formatDuration(data.duration)}
+						</NextLink>
+
+						<p className="text-small rounded-md z-10 absolute bottom-2 right-2 bg-content2 p-1">
+							{formatDuration(data.duration)}
+						</p>
+						{data.live && (
+							<p className="text-small rounded-md z-10 absolute bottom-2 left-2 bg-danger p-1">
+								LIVE
 							</p>
-							{data.live && (
-								<p className="text-small rounded-md z-10 absolute bottom-2 left-2 bg-danger p-1">
-									LIVE
-								</p>
-							)}
-						</div>
+						)}
+					</div>
 
-						<div className="flex flex-col gap-2">
-							<h1 className="text-xl">{data.title}</h1>
-							<div className="flex flex-row gap-4 items-center font-semibold text-default-600">
-								<h1>{formatBigNumber(data.views)} views</h1>
-								{data.uploaded && <h1>{formatUploadedTime(data.uploaded)}</h1>}
-							</div>
-							<Link
-								as={NextLink}
-								href={channelUrl}
-								className="flex flex-row gap-2 items-center"
-							>
-								{data.author.avatar && (
-									<Avatar
-										isBordered
-										name={data.author.name}
-										size="lg"
-										src={data.author.avatar}
-										alt={data.author.name}
-									/>
-								)}
-								<h1 className="text-lg text-default-600">{data.author.name}</h1>
-							</Link>
-							<p className="text-default-600">{data.description}</p>
+					<div className="flex flex-col gap-2">
+						<Link as={NextLink} href={url}>
+							<h1 className="text-xl text-default-foreground">{data.title}</h1>
+						</Link>
+						<div className="flex flex-row gap-4 items-center font-semibold text-default-600">
+							<h1>{formatBigNumber(data.views)} views</h1>
+							{data.uploaded && <h1>{formatUploadedTime(data.uploaded)}</h1>}
 						</div>
+						<Link
+							as={NextLink}
+							href={channelUrl}
+							className="flex flex-row gap-2 items-center"
+						>
+							{data.author.avatar && (
+								<Avatar
+									isBordered
+									name={data.author.name}
+									size="lg"
+									src={data.author.avatar}
+									alt={data.author.name}
+								/>
+							)}
+							<h1 className="text-lg text-default-600">{data.author.name}</h1>
+						</Link>
+						<p className="text-default-600">{data.description}</p>
 					</div>
-				</CardBody>
-			</Card>
-		</NextLink>
+				</div>
+			</CardBody>
+		</Card>
 	);
 };

src/app/trending/Trending.tsx

@@ -70,11 +70,11 @@ export const Trending: Component = ({}) => {
 	return (
 		<>
 			<Container>
-				<div className="flex items-center">
+				<div className="flex flex-row items-center gap-4">
 					<RegionSwitcher currentRegion={region} regions={validRegions} />
-					<Spacer x={4} />
 					<h1 className="text-xl">Trending</h1>
 				</div>
+
 				{isLoading && !data && <LoadingPage />}
 				{error && (
 					<div className="flex-1 flex items-center justify-center">

src/app/trending/page.tsx

@@ -1,6 +1,7 @@
 import { NextPage } from "next";
 import { Suspense } from "react";
 
+import { Container } from "@/components/Container";
 import { LoadingPage } from "@/components/LoadingPage";
 
 import { Trending } from "./Trending";
@@ -8,7 +9,13 @@ import { Trending } from "./Trending";
 const Page: NextPage = () => {
 	return (
 		<>
-			<Suspense fallback={<LoadingPage />}>
+			<Suspense
+				fallback={
+					<Container>
+						<LoadingPage />
+					</Container>
+				}
+			>
 				<Trending />
 			</Suspense>
 		</>

src/app/watch/Description.tsx

@@ -14,6 +14,8 @@ import { highlight, ItemType } from "@/utils/highlight";
 
 import { Component } from "@/typings/component";
 
+const shortenedDescriptionLength = 200;
+
 export const Description: Component<{ data: string }> = ({ data }) => {
 	const [expandedDescription, setExpandedDescription] = useState(false);
 
@@ -32,7 +34,7 @@ export const Description: Component<{ data: string }> = ({ data }) => {
 		() =>
 			expandedDescription
 				? sanitizedDescription
-				: sanitizedDescription?.substring(0, 200) + "...",
+				: sanitizedDescription.substring(0, shortenedDescriptionLength) + "...",
 		[sanitizedDescription, expandedDescription]
 	);
 

src/components/Nav/index.tsx

@@ -10,8 +10,6 @@ import {
 	NavbarItem
 } from "@nextui-org/navbar";
 
-// import { Search } from "./Search";
-
 export const navHeight = 64;
 
 export const Nav: FC<{ pathname: string }> = ({ pathname }) => {
@@ -20,6 +18,10 @@ export const Nav: FC<{ pathname: string }> = ({ pathname }) => {
 			title: "Trending",
 			link: "/trending"
 		},
+		{
+			title: "Search",
+			link: "/results"
+		},
 		{
 			title: "Subscriptions",
 			link: "/subscriptions"

src/components/Search.tsx

@@ -3,7 +3,7 @@
 import { useDebounce } from "use-debounce";
 
 import { useQuery } from "@tanstack/react-query";
-import { useMemo, useState } from "react";
+import { FC, useMemo, useState } from "react";
 import { FiSearch as SearchIcon } from "react-icons/fi";
 
 import { Autocomplete, AutocompleteItem } from "@nextui-org/autocomplete";
@@ -11,9 +11,7 @@ import { Autocomplete, AutocompleteItem } from "@nextui-org/autocomplete";
 import { useClient } from "@/hooks/useClient";
 import { useSearch } from "@/hooks/useSearch";
 
-import { Component } from "@/typings/component";
-
-export const Search: Component<{
+export const Search: FC<{
 	initialQueryValue?: string;
 }> = ({ initialQueryValue }) => {
 	const client = useClient();
@@ -73,7 +71,7 @@ export const Search: Component<{
 				required
 				type="text"
 				label="Search"
-				variant="flat"
+				variant="bordered"
 				placeholder="Search for videos"
 			>
 				{(suggestion) => (

src/components/Video.tsx

@@ -25,7 +25,7 @@ export const Video: Component<{ data: VideoProps; size?: number }> = ({
 }) => {
 	const url = videoUrl(data.id);
 
-	const [width, height] = videoSize([16, 9], size);
+	const [width, height] = videoSize(size);
 
 	const menuItems = useMemo(() => {
 		const items: ContextMenuItem[] = [

src/utils/highlight.ts

@@ -19,8 +19,6 @@ const itemPatterns: ItemPattern[] = [
 		regex:
 			/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g,
 		convert: (match): Link => {
-			console.log(match);
-
 			return {
 				type: ItemType.Link,
 				href: match[0],

src/utils/videoSize.ts

@@ -1,6 +1,6 @@
 export const videoSize = (
-	aspectRatio: [number, number],
-	size: number
+	size: number,
+	aspectRatio: [number, number] = [16, 9]
 ): [number, number] => {
 	return [aspectRatio[0] * size, aspectRatio[1] * size];
 };