diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index e9bdfdbf8..3437f7043 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -1,31 +1,141 @@
import React from 'react';
+import { useRouter } from 'next/router';
+import {
+ TvResult,
+ MovieResult,
+ PersonResult,
+} from '../../../server/models/Search';
+import { useSWRInfinite } from 'swr';
+import useVerticalScroll from '../../hooks/useVerticalScroll';
+import TitleCard from '../TitleCard';
+
+interface SearchResult {
+ page: number;
+ totalResults: number;
+ totalPages: number;
+ results: (MovieResult | TvResult | PersonResult)[];
+}
const Search: React.FC = () => {
+ const router = useRouter();
+ const { data, error, size, setSize } = useSWRInfinite
(
+ (pageIndex: number, previousPageData: SearchResult | null) => {
+ if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
+ return null;
+ }
+
+ return `/api/v1/search/?query=${router.query.query}&page=${
+ pageIndex + 1
+ }`;
+ },
+ {
+ initialSize: 3,
+ }
+ );
+
+ const isLoadingInitialData = !data && !error;
+ const isLoadingMore =
+ isLoadingInitialData ||
+ (size > 0 && data && typeof data[size - 1] === 'undefined');
+
+ useVerticalScroll(() => {
+ setSize(size + 1);
+ }, !isLoadingMore && !isLoadingInitialData);
+
+ if (error) {
+ return {error}
;
+ }
+
+ const titles = data?.reduce(
+ (a, v) => [...a, ...v.results],
+ [] as (MovieResult | TvResult | PersonResult)[]
+ );
+
return (
-