fix: search route without path and stale debounce

src/components/Router/Router.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { createBrowserRouter, createRoutesFromElements, createHashRouter, RouterProvider, Route } from 'react-router-dom';
+import { createBrowserRouter, createHashRouter, createRoutesFromElements, Route, RouterProvider } from 'react-router-dom';
 
 import ErrorPage from '../ErrorPage/ErrorPage';
 import Root from '../Root/Root';
@@ -29,7 +29,7 @@ export default function Router({ error }: Props) {
           <Route path="/p/:id" element={<Playlist />} />
           <Route path="/m/:id/:slug" element={<Movie />} />
           <Route path="/s/:id/:slug" element={<Series />} />
-          <Route path="/q/:query" element={<Search />} />
+          <Route path="/q/*" element={<Search />} />
           <Route path="/u/:page/*" element={<User />} />
           <Route path="/o/about" element={<About />} />
           <Route

src/hooks/useDebounce.ts

@@ -0,0 +1,20 @@
+import { MutableRefObject, useEffect, useRef } from 'react';
+
+import { debounce } from '#src/utils/common';
+
+const useDebounce = <T extends (...args: any[]) => unknown>(callback: T, time: number) => {
+  const fnRef = useRef() as MutableRefObject<T | undefined>;
+  const debounceRef = useRef(
+    debounce((...rest) => {
+      if (fnRef.current) fnRef.current(...rest);
+    }, time),
+  );
+
+  useEffect(() => {
+    fnRef.current = callback;
+  }, [callback]);
+
+  return debounceRef.current;
+};
+
+export default useDebounce;

src/hooks/useSearchQueryUpdater.ts

@@ -1,22 +1,21 @@
-import { useCallback, useRef } from 'react';
+import { useCallback } from 'react';
 import { useNavigate } from 'react-router';
 
-import { debounce } from '../utils/common';
 import { useUIStore } from '../stores/UIStore';
 
+import useDebounce from '#src/hooks/useDebounce';
+
 const useSearchQueryUpdater = () => {
   const navigate = useNavigate();
 
-  const updateSearchPath = useRef(
-    debounce((query: string) => {
-      navigate(`/q/${encodeURIComponent(query)}`);
-    }, 250),
-  );
+  const updateSearchPath = useDebounce((query: string) => {
+    navigate(`/q/${encodeURIComponent(query)}`);
+  }, 350);
   const updateSearchQuery = useCallback((query: string) => {
     useUIStore.setState({
       searchQuery: query,
     });
-    updateSearchPath.current(query);
+    updateSearchPath(query);
   }, []);
   const resetSearchQuery = useCallback(() => {
     const returnPage = useUIStore.getState().preSearchPage;

src/screens/Search/Search.tsx

@@ -29,7 +29,7 @@ const Search = () => {
   const { updateSearchQuery } = useSearchQueryUpdater();
   const navigate = useNavigate();
   const params = useParams();
-  const query = params.query;
+  const query = params['*'];
   const { isFetching, error, data: { playlist } = { playlist: [] } } = usePlaylist(features?.searchPlaylist || '', { search: query || '' }, true, !!query);
 
   const updateBlurImage = useBlurImageUpdater(playlist);