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

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;