feat: search bar working, still in progress

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>
+  );
+}