feat(frontend): initial search functionality (#78)

src/components/Discover/index.tsx

@@ -73,7 +73,10 @@ const Discover: React.FC = () => {
       </div>
       <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
         {titles?.map((title) => (
-          <li key={title.id} className="col-span-1 flex flex-col text-center">
+          <li
+            key={title.id}
+            className="col-span-1 flex flex-col text-center items-center"
+          >
             <TitleCard
               image={`image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`}
               status={'Not Requested'}
@@ -84,6 +87,16 @@ const Discover: React.FC = () => {
             />
           </li>
         ))}
+        {(isLoadingInitialData ||
+          (isLoadingMore && (titles?.length ?? 0) > 0)) &&
+          [...Array(8)].map((_item, i) => (
+            <li
+              key={`placeholder-${i}`}
+              className="col-span-1 flex flex-col text-center items-center"
+            >
+              <TitleCard.Placeholder />
+            </li>
+          ))}
       </ul>
     </>
   );

src/components/Layout/SearchInput/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import useSearchInput from '../../../hooks/useSearchInput';
+
+const SearchInput: React.FC = () => {
+  const { searchValue, setSearchValue, setIsOpen } = useSearchInput();
+  return (
+    <div className="flex-1 flex">
+      <form className="w-full flex md:ml-0" action="#" method="GET">
+        <label htmlFor="search_field" className="sr-only">
+          Search
+        </label>
+        <div className="relative w-full text-white focus-within:text-gray-200">
+          <div className="absolute inset-y-0 left-0 flex items-center pointer-events-none">
+            <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+              />
+            </svg>
+          </div>
+          <input
+            id="search_field"
+            className="block w-full h-full pl-8 pr-3 py-2 rounded-md bg-cool-gray-600 text-white placeholder-gray-300 focus:outline-none focus:placeholder-gray-400 sm:text-sm"
+            placeholder="Search"
+            type="search"
+            value={searchValue}
+            onChange={(e) => setSearchValue(e.target.value)}
+            onFocus={() => setIsOpen(true)}
+            onBlur={() => setIsOpen(false)}
+          />
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default SearchInput;

src/components/Layout/Sidebar/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Transition from '../../Transition';
+import Link from 'next/link';
 
 interface SidebarProps {
   open?: boolean;
@@ -62,10 +63,8 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                       </span>
                     </div>
                     <nav className="mt-5 px-2 space-y-1">
-                      <a
+                      <Link href="/">
-                        href="#"
+                        <a className="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white bg-gray-900 focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150">
-                        className="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white bg-gray-900 focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150"
-                      >
                           <svg
                             className="mr-3 h-6 w-6 text-gray-300 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150"
                             fill="none"
@@ -82,6 +81,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                           </svg>
                           Dashboard
                         </a>
+                      </Link>
                     </nav>
                   </div>
                 </div>
@@ -102,10 +102,8 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                 <span className="text-2xl text-cool-gray-50">Overseerr</span>
               </div>
               <nav className="mt-5 flex-1 px-2 bg-gray-800 space-y-1">
-                <a
+                <Link href="/">
-                  href="#"
+                  <a className="group flex items-center px-2 py-2 text-sm leading-5 font-medium text-white rounded-md bg-gray-900 focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150">
-                  className="group flex items-center px-2 py-2 text-sm leading-5 font-medium text-white rounded-md bg-gray-900 focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150"
-                >
                     <svg
                       className="mr-3 h-6 w-6 text-gray-300 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150"
                       fill="none"
@@ -122,6 +120,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                     </svg>
                     Dashboard
                   </a>
+                </Link>
               </nav>
             </div>
           </div>

src/components/Layout/UserDropdown/index.tsx

@@ -1,11 +1,14 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import Transition from '../../Transition';
 import { useUser } from '../../../hooks/useUser';
 import axios from 'axios';
+import useClickOutside from '../../../hooks/useClickOutside';
 
 const UserDropdown: React.FC = () => {
+  const dropdownRef = useRef<HTMLDivElement>(null);
   const { user, revalidate } = useUser();
   const [isDropdownOpen, setDropdownOpen] = useState(false);
+  useClickOutside(dropdownRef, () => setDropdownOpen(false));
 
   const logout = async () => {
     const response = await axios.get('/api/v1/auth/logout');
@@ -37,7 +40,10 @@ const UserDropdown: React.FC = () => {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <div className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
+        <div
+          className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg"
+          ref={dropdownRef}
+        >
           <div
             className="py-1 rounded-md bg-white shadow-xs"
             role="menu"

src/components/Layout/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import Search from '../Search';
+import SearchInput from './SearchInput';
 import UserDropdown from './UserDropdown';
 import Sidebar from './Sidebar';
 import Notifications from './Notifications';
@@ -33,7 +33,7 @@ const Layout: React.FC = ({ children }) => {
             </svg>
           </button>
           <div className="flex-1 px-4 flex justify-between">
-            <Search />
+            <SearchInput />
             <div className="ml-4 flex items-center md:ml-6">
               <Notifications />
               <UserDropdown />

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<SearchResult>(
+    (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 <div>{error}</div>;
+  }
+
+  const titles = data?.reduce(
+    (a, v) => [...a, ...v.results],
+    [] as (MovieResult | TvResult | PersonResult)[]
+  );
+
   return (
-    <div className="flex-1 flex">
+    <>
-      <form className="w-full flex md:ml-0" action="#" method="GET">
+      <div className="md:flex md:items-center md:justify-between mb-8 mt-8">
-        <label htmlFor="search_field" className="sr-only">
+        <div className="flex-1 min-w-0">
-          Search
+          <h2 className="text-2xl font-bold leading-7 text-white sm:text-3xl sm:leading-9 sm:truncate">
-        </label>
+            Search Results
-        <div className="relative w-full text-white focus-within:text-gray-200">
+          </h2>
-          <div className="absolute inset-y-0 left-0 flex items-center pointer-events-none">
+        </div>
-            <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+        <div className="mt-4 flex md:mt-0 md:ml-4">
-              <path
+          <span className="relative z-0 inline-flex shadow-sm rounded-md">
-                fillRule="evenodd"
+            <button
-                clipRule="evenodd"
+              type="button"
-                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+              className="relative inline-flex items-center px-4 py-2 rounded-l-md border border-indigo-900 bg-indigo-500 hover:bg-indigo-400 text-sm leading-5 font-medium text-cool-gray-100 hover:text-white focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
+            >
+              Movies
+            </button>
+            <button
+              type="button"
+              className="-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-indigo-900 bg-indigo-500   text-sm leading-5 font-medium text-cool-gray-100 hover:text-white focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
+            >
+              TV Shows
+            </button>
+          </span>
+        </div>
+      </div>
+      {!isLoadingInitialData && titles?.length === 0 && (
+        <div className="w-full mt-64 text-2xl text-center text-cool-gray-400">
+          No Results
+        </div>
+      )}
+      <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+        {titles?.map((title) => {
+          let titleCard: React.ReactNode;
+
+          switch (title.mediaType) {
+            case 'movie':
+              titleCard = (
+                <TitleCard
+                  image={`image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`}
+                  status={'Not Requested'}
+                  summary={title.overview}
+                  title={title.title}
+                  userScore={title.voteAverage}
+                  year={title.releaseDate}
                 />
-            </svg>
+              );
-          </div>
+              break;
-          <input
+            case 'tv':
-            id="search_field"
+              titleCard = (
-            className="block w-full h-full pl-8 pr-3 py-2 rounded-md bg-cool-gray-600 text-white placeholder-gray-300 focus:outline-none focus:placeholder-gray-400 sm:text-sm"
+                <TitleCard
-            placeholder="Search"
+                  image={`image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`}
-            type="search"
+                  status={'Not Requested'}
+                  summary={title.overview}
+                  title={title.name}
+                  userScore={title.voteAverage}
+                  year={title.firstAirDate}
                 />
-        </div>
+              );
-      </form>
+              break;
-    </div>
+            case 'person':
+              titleCard = <div>{title.name}</div>;
+              break;
+          }
+
+          return (
+            <li
+              key={title.id}
+              className="col-span-1 flex flex-col text-center items-center"
+            >
+              {titleCard}
+            </li>
+          );
+        })}
+        {(isLoadingInitialData ||
+          (isLoadingMore && (titles?.length ?? 0) > 0)) &&
+          [...Array(8)].map((_item, i) => (
+            <li
+              key={`placeholder-${i}`}
+              className="col-span-1 flex flex-col text-center items-center"
+            >
+              <TitleCard.Placeholder />
+            </li>
+          ))}
+      </ul>
+    </>
   );
 };
 

src/components/TitleCard/Placeholder.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Placeholder: React.FC = () => {
+  return (
+    <div
+      style={{ width: 250, height: 375 }}
+      className="animate-pulse rounded-lg bg-cool-gray-700"
+    />
+  );
+};
+
+export default Placeholder;

src/components/TitleCard/index.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 import Transition from '../Transition';
+import { withProperties } from '../../utils/typeHelpers';
+import Placeholder from './Placeholder';
 
 interface TitleCardProps {
   image: string;
@@ -93,4 +95,4 @@ const TitleCard: React.FC<TitleCardProps> = ({
   );
 };
 
-export default TitleCard;
+export default withProperties(TitleCard, { Placeholder });

src/hooks/useClickOutside.ts

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+
+/**
+ * useClickOutside
+ *
+ * Simple hook to add an event listener to the body and allow a callback to
+ * be triggered when clicking outside of the target ref
+ *
+ * @param ref Any HTML Element ref
+ * @param callback Callback triggered when clicking outside of ref element
+ */
+const useClickOutside = (
+  ref: React.RefObject<HTMLElement>,
+  callback: (e: MouseEvent) => void
+): void => {
+  useEffect(() => {
+    const handleBodyClick = (e: MouseEvent) => {
+      if (!ref.current?.contains(e.target as Node)) {
+        callback(e);
+      }
+    };
+    document.body.addEventListener('click', handleBodyClick);
+
+    return () => {
+      document.body.removeEventListener('click', handleBodyClick);
+    };
+  }, [ref, callback]);
+};
+
+export default useClickOutside;

src/hooks/useDebouncedState.ts

@@ -0,0 +1,33 @@
+import { useState, useEffect, Dispatch, SetStateAction } from 'react';
+
+/**
+ * A hook to help with debouncing state
+ *
+ * This hook basically acts the same as useState except it is also
+ * returning a deobuncedValue that can be used for things like
+ * debouncing input into a search field
+ *
+ * @param initialValue Initial state value
+ * @param debounceTime Debounce time in ms
+ */
+const useDebouncedState = <S>(
+  initialValue: S,
+  debounceTime = 300
+): [S, S, Dispatch<SetStateAction<S>>] => {
+  const [value, setValue] = useState(initialValue);
+  const [finalValue, setFinalValue] = useState(initialValue);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setFinalValue(value);
+    }, debounceTime);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [value, debounceTime]);
+
+  return [value, finalValue, setValue];
+};
+
+export default useDebouncedState;

src/hooks/useSearchInput.ts

@@ -0,0 +1,115 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import type { UrlObject } from 'url';
+import { useEffect, useState, Dispatch, SetStateAction } from 'react';
+import useDebouncedState from './useDebouncedState';
+import { useRouter } from 'next/router';
+import type { Nullable } from '../utils/typeHelpers';
+
+type Url = string | UrlObject;
+
+interface SearchObject {
+  searchValue: string;
+  searchOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+  setSearchValue: Dispatch<SetStateAction<string>>;
+  clear: () => void;
+}
+
+const useSearchInput = (): SearchObject => {
+  const router = useRouter();
+  const [searchOpen, setIsOpen] = useState(false);
+  const [lastRoute, setLastRoute] = useState<Nullable<Url>>(null);
+  const [searchValue, debouncedValue, setSearchValue] = useDebouncedState(
+    (router.query.query as string) ?? ''
+  );
+
+  /**
+   * This effect handles routing when the debounced search input
+   * value changes.
+   *
+   * If we are not already on the /search route, then we push
+   * in a new route. If we are, then we only replace the history.
+   */
+  useEffect(() => {
+    if (debouncedValue !== '') {
+      if (router.pathname.startsWith('/search')) {
+        router.replace({
+          pathname: router.pathname,
+          query: { ...router.query, query: debouncedValue },
+        });
+      } else {
+        setLastRoute(router.asPath);
+        router
+          .push({
+            pathname: '/search',
+            query: { query: debouncedValue },
+          })
+          .then(() => window.scrollTo(0, 0));
+      }
+    }
+  }, [debouncedValue]);
+
+  /**
+   * This effect is handling behavior when the search input is closed.
+   *
+   * If we have a lastRoute, we will route back to it. If we don't
+   * (in the case of a deeplink) we take the user back to the index route
+   */
+  useEffect(() => {
+    if (
+      searchValue === '' &&
+      router.pathname.startsWith('/search') &&
+      !searchOpen
+    ) {
+      if (lastRoute) {
+        router.push(lastRoute).then(() => window.scrollTo(0, 0));
+      } else {
+        router.replace('/').then(() => window.scrollTo(0, 0));
+      }
+    }
+  }, [searchOpen]);
+
+  /**
+   * This effect handles behavior for when the route is changed.
+   *
+   * If after a route change, the new debounced value is not the same
+   * as the query value then we will update the searchValue to either the
+   * new query or to an empty string (in the case of null). This makes sure
+   * that the value in the searchbox is whatever the user last entered regardless
+   * of routing to something like a detail page.
+   *
+   * If the new route is not /search and query is null, then we will close the
+   * search if it is open.
+   *
+   * In the final case, we want the search to always be open in the case the user
+   * is on /search
+   */
+  useEffect(() => {
+    if (router.query.query !== debouncedValue) {
+      setSearchValue((router.query.query as string) ?? '');
+
+      if (!router.pathname.startsWith('/search') && !router.query.query) {
+        setIsOpen(false);
+      }
+    }
+
+    if (router.pathname.startsWith('/search')) {
+      setIsOpen(true);
+    }
+  }, [router, setSearchValue]);
+
+  const clear = () => {
+    setIsOpen(false);
+    setSearchValue('');
+  };
+
+  return {
+    searchValue,
+    searchOpen,
+    setIsOpen,
+    setSearchValue,
+    clear,
+  };
+};
+
+export default useSearchInput;

src/pages/search.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import Search from '../components/Search';
+
+const SearchPage: React.FC = () => {
+  return <Search />;
+};
+
+export default SearchPage;

src/styles/globals.css

@@ -16,6 +16,6 @@ body {
 }
 
 .titleCard {
-  @apply relative bg-cover rounded-lg;
+  @apply relative bg-cover rounded-lg bg-cool-gray-800;
   padding-bottom: 150%;
 }

src/utils/typeHelpers.ts

@@ -1,3 +1,17 @@
 export type Undefinable<T> = T | undefined;
 export type Nullable<T> = T | null;
 export type Maybe<T> = T | null | undefined;
+
+/**
+ * Helps type objects with an abitrary number of properties that are
+ * usually being defined at export.
+ *
+ * @param component Main object you want to apply properties to
+ * @param properties Object of properties you want to type on the main component
+ */
+export function withProperties<A, B>(component: A, properties: B): A & B {
+  (Object.keys(properties) as (keyof B)[]).forEach((key) => {
+    Object.assign(component, { [key]: properties[key] });
+  });
+  return component as A & B;
+}