refactor and optimize search, add RQ for search

client/src/components/Nav/NavLinks.jsx

@@ -1,17 +1,14 @@
-import React from 'react';
 import SearchBar from './SearchBar';
 import ClearConvos from './ClearConvos';
 import DarkMode from './DarkMode';
 import Logout from './Logout';
 import ExportConversation from './ExportConversation';
 
-export default function NavLinks({ fetch, onSearchSuccess, clearSearch, isSearchEnabled }) {
+export default function NavLinks({ clearSearch, isSearchEnabled }) {
   return (
     <>
       {!!isSearchEnabled && (
         <SearchBar
-          fetch={fetch}
-          onSuccess={onSearchSuccess}
           clearSearch={clearSearch}
         />
       )}

client/src/components/Nav/SearchBar.jsx

@@ -1,66 +1,29 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { debounce } from 'lodash';
 import { Search } from 'lucide-react';
 import { useRecoilState } from 'recoil';
-
 import store from '~/store';
 
-export default function SearchBar({ fetch, clearSearch }) {
-  // const dispatch = useDispatch();
-  const [inputValue, setInputValue] = useState('');
+export default function SearchBar({ clearSearch }) {
+
   const [searchQuery, setSearchQuery] = useRecoilState(store.searchQuery);
 
-  // const [inputValue, setInputValue] = useState('');
-
-  const debouncedChangeHandler = useCallback(
-    debounce(q => {
-      setSearchQuery(q);
-    }, 750),
-    [setSearchQuery]
-  );
-
-  useEffect(() => {
-    if (searchQuery.length > 0) {
-      fetch(searchQuery, 1);
-      setInputValue(searchQuery);
-    }
-  }, [searchQuery]);
-
   const handleKeyUp = e => {
     const { value } = e.target;
     if (e.keyCode === 8 && value === '') {
-      // Value after clearing input: ""
-      console.log(`Value after clearing input: "${value}"`);
       setSearchQuery('');
       clearSearch();
     }
   };
 
-  const changeHandler = e => {
-    let q = e.target.value;
-    setInputValue(q);
-    q = q.trim();
-
-    if (q === '') {
-      setSearchQuery('');
-      clearSearch();
-    } else {
-      debouncedChangeHandler(q);
-    }
-  };
-
   return (
     <div className="flex cursor-pointer items-center gap-3 rounded-md py-3 px-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10">
       {<Search className="h-4 w-4" />}
       <input
-        // ref={inputRef}
         type="text"
         className="m-0 mr-0 w-full border-none bg-transparent p-0 text-sm leading-tight outline-none"
-        value={inputValue}
-        onChange={changeHandler}
+        value={searchQuery}
+        onChange={e => setSearchQuery(e.target.value)}
         placeholder="Search messages"
         onKeyUp={handleKeyUp}
-        // onBlur={onRename}
       />
     </div>
   );

client/src/components/Nav/index.jsx

@@ -1,14 +1,12 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import _ from 'lodash';
+import { useState, useEffect, useRef } from 'react';
 import NewChat from './NewChat';
 import Spinner from '../svg/Spinner';
 import Pages from '../Conversations/Pages';
 import Conversations from '../Conversations';
 import NavLinks from './NavLinks';
-import { searchFetcher } from '~/utils/fetchers';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { useGetConversationsQuery } from '~/data-provider';
-
+import { useGetConversationsQuery, useSearchQuery } from '~/data-provider';
+import useDebounce from '~/hooks/useDebounce';
 import store from '~/store';
 
 export default function Nav({ navVisible, setNavVisible }) {
@@ -17,7 +15,6 @@ export default function Nav({ navVisible, setNavVisible }) {
   const containerRef = useRef(null);
   const scrollPositionRef = useRef(null);
 
-  // const dispatch = useDispatch();
   const [conversations, setConversations] = useState([]);
   // current page
   const [pageNumber, setPageNumber] = useState(1);
@@ -43,6 +40,7 @@ export default function Nav({ navVisible, setNavVisible }) {
   const [isFetching, setIsFetching] = useState(false);
 
   const onSearchSuccess = (data, expectedPage) => {
+    console.log('onSearchSuccess', data, expectedPage)
     const res = data;
     setConversations(res.conversations);
     if (expectedPage) {
@@ -55,14 +53,22 @@ export default function Nav({ navVisible, setNavVisible }) {
     setSearchResultMessages(res.messages);
   };
 
-  // TODO: dont need this
-  const fetch = useCallback(
-    _.partialRight(
-      searchFetcher.bind(null, () => setIsFetching(true)),
-      onSearchSuccess
-    ),
-    [setIsFetching]
-  );
+  const debouncedSearchTerm = useDebounce(searchQuery, 750);
+  const searchQueryFn = useSearchQuery(debouncedSearchTerm, 1, { 
+    enabled: !!debouncedSearchTerm && 
+    debouncedSearchTerm.length > 0 &&
+    isSearchEnabled && 
+    isSearching,
+  });
+
+  useEffect(() => {
+    if (searchQueryFn.isInitialLoading) {
+      setIsFetching(true);
+    }
+    else if (searchQueryFn.data) {
+      onSearchSuccess(searchQueryFn.data);
+    }
+  }, [searchQueryFn.data, searchQueryFn.isInitialLoading])
 
   const clearSearch = () => {
     setPageNumber(1);
@@ -178,8 +184,6 @@ export default function Nav({ navVisible, setNavVisible }) {
                 </div>
               </div>
               <NavLinks
-                fetch={fetch}
-                onSearchSuccess={onSearchSuccess}
                 clearSearch={clearSearch}
                 isSearchEnabled={isSearchEnabled}
               />