Fix routing

src/backend/metadata/search.ts

@@ -5,7 +5,7 @@ import { MWMediaMeta, MWQuery } from "./types/mw";
 
 const cache = new SimpleCache<MWQuery, MWMediaMeta[]>();
 cache.setCompare((a, b) => {
-  return a.type === b.type && a.searchQuery.trim() === b.searchQuery.trim();
+  return a.searchQuery.trim() === b.searchQuery.trim();
 });
 cache.initialize();
 

src/backend/metadata/types/mw.ts

@@ -43,7 +43,6 @@ export type MWMediaMeta = MWMediaMetaBase & MWMediaMetaSpecific;
 
 export interface MWQuery {
   searchQuery: string;
-  type: MWMediaType;
 }
 
 export interface DetailedMeta {

src/hooks/useSearchQuery.ts

@@ -1,14 +1,16 @@
 import { useState } from "react";
-import { generatePath, useHistory, useRouteMatch } from "react-router-dom";
+import { generatePath, useHistory, useParams } from "react-router-dom";
 
-import { MWMediaType, MWQuery } from "@/backend/metadata/types/mw";
+import { MWQuery } from "@/backend/metadata/types/mw";
+import { useQueryParams } from "@/hooks/useQueryParams";
 
-function getInitialValue(params: { type: string; query: string }) {
-  const type =
-    Object.values(MWMediaType).find((v) => params.type === v) ||
-    MWMediaType.MOVIE;
-  const searchQuery = decodeURIComponent(params.query || "");
-  return { type, searchQuery };
+function getInitialValue(
+  query: Record<string, string>,
+  params: Record<string, string>
+) {
+  let searchQuery = decodeURIComponent(params.query || "");
+  if (query.q) searchQuery = query.q;
+  return { searchQuery };
 }
 
 export function useSearchQuery(): [
@@ -17,28 +19,34 @@ export function useSearchQuery(): [
   () => void
 ] {
   const history = useHistory();
-  const { path, params } = useRouteMatch<{ type: string; query: string }>();
-  const [search, setSearch] = useState<MWQuery>(getInitialValue(params));
+  const query = useQueryParams();
+  const params = useParams<{ query: string }>();
+  const [search, setSearch] = useState<MWQuery>(getInitialValue(query, params));
 
   const updateParams = (inp: Partial<MWQuery>, force: boolean) => {
-    const copySearch: MWQuery = { ...search };
+    const copySearch = { ...search };
     Object.assign(copySearch, inp);
     setSearch(copySearch);
     if (!force) return;
+    if (copySearch.searchQuery.length === 0) {
+      history.replace("/");
+      return;
+    }
     history.replace(
-      generatePath(path, {
-        query:
-          copySearch.searchQuery.length === 0 ? undefined : inp.searchQuery,
-        type: copySearch.type,
+      generatePath("/browse/:query", {
+        query: copySearch.searchQuery,
       })
     );
   };
 
   const onUnFocus = () => {
+    if (search.searchQuery.length === 0) {
+      history.replace("/");
+      return;
+    }
     history.replace(
-      generatePath(path, {
-        query: search.searchQuery.length === 0 ? undefined : search.searchQuery,
-        type: search.type,
+      generatePath("/browse/:query", {
+        query: search.searchQuery,
       })
     );
   };

src/setup/App.tsx

@@ -84,8 +84,12 @@ function App() {
                 <Route exact path="/search/:type">
                   <Redirect to="/browse" />
                 </Route>
-                <Route exact path="/browse/:query" component={SearchView} />
-                <Route exact path="/" component={SearchView} />
+                <Route
+                  exact
+                  path={["/browse/:query?", "/"]}
+                  component={SearchView}
+                />
+
                 {/* other */}
                 <Route
                   exact

src/state/watched/migrations/v2.ts

@@ -48,7 +48,6 @@ async function getMetas(
       const year = Number(item.year.toString().split("-")[0]);
       const data = await searchForMedia({
         searchQuery: `${item.title} ${year}`,
-        type: item.mediaType,
       });
       const relevantItem = data.find(
         (res) =>

src/views/search/SearchLoadingView.tsx

@@ -1,19 +1,10 @@
 import { useTranslation } from "react-i18next";
 
 import { Loading } from "@/components/layout/Loading";
-import { useSearchQuery } from "@/hooks/useSearchQuery";
 
 export function SearchLoadingView() {
   const { t } = useTranslation();
-  const [query] = useSearchQuery();
   return (
-    <Loading
-      className="mb-24 mt-40 "
-      text={
-        t(`search.loading_${query.type}`) ||
-        t("search.loading") ||
-        "Fetching your favourite shows..."
-      }
-    />
+    <Loading className="mb-24 mt-40 " text={t("search.loading") || "..."} />
   );
 }