Refac search reduce debounce time to 300ms and add enter key bypass

frontend/src/pages/Search.tsx

@@ -46,7 +46,7 @@ const Search = () => {
   const viewPlaylists = userMeConfig.view_style_playlist;
   const gridItems = userMeConfig.grid_items || 3;
 
-  const [searchQuery, setSearchQuery] = useState('');
+  const [searchTerm, setSearchTerm] = useState('');
   const [debouncedSearchTerm, setDebouncedSearchTerm] = useState<string>('');
   const [searchResults, setSearchResults] = useState<SearchResultsType>();
 
@@ -59,7 +59,7 @@ const Search = () => {
   const queryType = searchResults?.queryType;
   const showEmbeddedVideo = videoId !== null;
 
-  const hasSearchQuery = searchQuery.length > 0;
+  const hasSearchQuery = searchTerm.length > 0;
   const hasVideos = Number(videoList?.length) > 0;
   const hasChannels = Number(channelList?.length) > 0;
   const hasPlaylist = Number(playlistList?.length) > 0;
@@ -77,24 +77,25 @@ const Search = () => {
 
   useEffect(() => {
     const handler = setTimeout(() => {
-      setDebouncedSearchTerm(searchQuery);
-    }, 500);
+      setDebouncedSearchTerm(searchTerm);
+    }, 300);
 
     return () => {
       clearTimeout(handler);
     };
-  }, [searchQuery]);
+  }, [searchTerm]);
 
   useEffect(() => {
     if (debouncedSearchTerm.trim() !== '') {
-      fetchResults();
+      fetchResults(debouncedSearchTerm);
     } else {
       setSearchResults(EmptySearchResponse);
     }
   }, [debouncedSearchTerm, refresh]);
 
-  const fetchResults = async () => {
-    const searchResults = await loadSearch(debouncedSearchTerm);
+  const fetchResults = async (searchQuery: string) => {
+    const searchResults = await loadSearch(searchQuery);
+
     setSearchResults(searchResults);
     setRefresh(false);
   };
@@ -113,9 +114,14 @@ const Search = () => {
               type="text"
               autoFocus
               autoComplete="off"
-              value={searchQuery}
+              value={searchTerm}
               onChange={event => {
-                setSearchQuery(event.target.value);
+                setSearchTerm(event.currentTarget.value);
+              }}
+              onKeyDown={event => {
+                if (event.key === 'Enter') {
+                  fetchResults(searchTerm);
+                }
               }}
             />
           </div>