feat: search bar working, still in progress

client/src/components/Nav/NavLinks.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import NavLink from './NavLink';
 import LogOutIcon from '../svg/LogOutIcon';
+import SearchBar from './SearchBar';
 import ClearConvos from './ClearConvos';
 import DarkMode from './DarkMode';
 import Logout from './Logout';
@@ -8,6 +9,7 @@ import Logout from './Logout';
 export default function NavLinks() {
   return (
     <>
+      <SearchBar />
       <ClearConvos />
       <DarkMode />
       <Logout />

client/src/components/Nav/SearchBar.jsx

@@ -0,0 +1,66 @@
+import React, { useState, useCallback } from 'react';
+import { debounce } from 'lodash';
+import { useDispatch, useSelector } from 'react-redux';
+import { Search } from 'lucide-react';
+import { setQuery } from '~/store/searchSlice';
+import { setPage, refreshConversation } from '~/store/convoSlice';
+
+export default function SearchBar() {
+  const dispatch = useDispatch();
+  const [inputValue, setInputValue] = useState('');
+  const { search } = useSelector((state) => state.search);
+
+  const debouncedChangeHandler = useCallback(
+    debounce((q) => {
+      dispatch(setQuery(q));
+    }, 750),
+    [dispatch]
+  );
+
+  const handleKeyUp = (e) => {
+    const { value } = e.target;
+    if (e.keyCode === 8 && value === '') { 
+      // Value after clearing input: ""
+      console.log(`Value after clearing input: "${value}"`);
+      dispatch(setPage(1));
+      dispatch(setQuery(''));
+      dispatch(refreshConversation());
+     }
+  };
+
+
+  const changeHandler = (e) => {
+    if (!search) {
+      console.log('setting page to 1');
+      dispatch(setPage(1));
+    }
+
+    let q = e.target.value;
+    setInputValue(q);
+    q = q.trim();
+
+    if (q === '' || !q) {
+      dispatch(setPage(1));
+      dispatch(setQuery(''));
+      dispatch(refreshConversation());
+    } 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}
+        placeholder="Search messages"
+        onKeyUp={handleKeyUp}
+        // onBlur={onRename}
+      />
+    </div>
+  );
+}

client/src/components/Nav/index.jsx

@@ -10,7 +10,8 @@ import { increasePage, decreasePage, setPage, setConvos, setPages } from '~/stor
 export default function Nav({ navVisible, setNavVisible }) {
   const dispatch = useDispatch();
   const [isHovering, setIsHovering] = useState(false);
-  const { conversationId, convos, search, pages, pageNumber, refreshConvoHint } = useSelector(
+  const { search, query } = useSelector((state) => state.search);
+  const { conversationId, convos, pages, pageNumber, refreshConvoHint } = useSelector(
     (state) => state.convo
   );
   const onSuccess = (data) => {
@@ -24,8 +25,12 @@ export default function Nav({ navVisible, setNavVisible }) {
     }
   };
 
-  const { data, isLoading, mutate } = swr(`/api/${search ? 'search?q=' : `convos?pageNumber=${pageNumber}`}`, onSuccess, {
-    revalidateOnMount: false
+  const { data, isLoading, mutate } = swr(`/api/${search ? `search?q=${query}&pageNumber=${pageNumber}` : `convos?pageNumber=${pageNumber}`}`, onSuccess, {
+    revalidateOnMount: false,
+    revalidateIfStale: !search,
+    revalidateOnFocus: !search,
+    revalidateOnReconnect: !search,
+    populateCache: !search,
   });
 
   const containerRef = useRef(null);
@@ -103,7 +108,7 @@ export default function Nav({ navVisible, setNavVisible }) {
                 ref={containerRef}
               >
                 <div className={containerClasses}>
-                  {isLoading && pageNumber === 1 ? (
+                  {isLoading && (pageNumber === 1 || search) ? (
                     <Spinner />
                   ) : (
                     <Conversations