Fix search misbehaving, closes #53

src/components/DefaultLayout.tsx

@@ -291,8 +291,8 @@ function Search({ className }: { className?: string }) {
         e.preventDefault();
         let form = e.currentTarget;
         let query = form.query.value;
-        if (query === "") router.push("/search");
-        router.push("/search?q=" + encodeURIComponent(query));
+        const newPath = query === "" ? "/search" : "/search?q=" + encodeURIComponent(query);
+        if (router.pathname !== newPath) router.push(newPath);
     };
     const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         setQuery(e.target.value);

src/pages/search.tsx

@@ -62,7 +62,9 @@ export default function Search() {
     // TODO: this code needs more cleanup, variable names are not very descriptive
 
     useEffect(() => {
-        setQuery(params.get("q"));
+        if (params.has("q")) setQuery(params.get("q"));
+        else if (query !== undefined && query !== null && query.length > 0) setQuery("");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [params]);
 
     const updateSearchResults = () => {
@@ -91,7 +93,7 @@ export default function Search() {
     };
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(updateSearchResults, [query, api, router]);
+    useEffect(updateSearchResults, [query, api]);
 
     const [updateQueryDeferred, updateQueryNow] = useDebounce(() => {
         setQuery(workingQuery.current);