[PERF]: Optimized Search Input box and added a delete button to clear…

… the input box. (#459)

* feat: users can now focus on the search bar by pressing ctrl+k together.

* debouncer hook created.

* delete button added to search input box.

* auto focus functionality removed.

src/components/Search/Search.css

@@ -34,6 +34,18 @@
   color: #00a6fb;
 }
 
+.search-bar .delete-icon {
+  position: absolute;
+  margin-right: 40px;
+  font-size: 1.25rem;
+  cursor: pointer;
+  color: #fff;
+}
+
+.delete-icon:hover {
+  color: #00a6fb;
+}
+
 @media (max-width: 768px) {
   .search-bar input {
     width: 100%;

src/components/Search/Search.jsx

@@ -1,7 +1,8 @@
 import React, { useState, useRef, useEffect } from 'react';
+import useDebounce from '../../hooks/useDebouncer';
 import './Search.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
+import { faMagnifyingGlass, faXmark } from '@fortawesome/free-solid-svg-icons';
 
 function Search({ onSearch }) {
   const [searchValue, setSearchValue] = useState('');
@@ -10,9 +11,18 @@ function Search({ onSearch }) {
 
   const handleInputChange = (event) => {
     setSearchValue(event.target.value);
-    onSearch(event.target.value);
   };
 
+  const debouncedValue = useDebounce(searchValue, 500);
+
+  useEffect(() => {
+    if (searchValue !== prevSearchValue) {
+      onSearch(debouncedValue);
+      setPrevSearchValue(searchValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedValue]);
+
   const handleSearch = () => {
     if (searchValue !== prevSearchValue) {
       onSearch(searchValue);
@@ -30,6 +40,15 @@ function Search({ onSearch }) {
     handleSearch();
   };
 
+  const handleDeleteButtonClick = () => {
+    if (searchValue) {
+      setSearchValue('');
+      setPrevSearchValue('');
+      onSearch('');
+      searchInput.current.focus();
+    }
+  };
+
   useEffect(() => {
     searchInput.current.focus();
   }, []);
@@ -45,6 +64,7 @@ function Search({ onSearch }) {
         onKeyDown={handleSearchOnEnter}
       />
       <FontAwesomeIcon onClick={handleSearchButtonClick} className="search-icon" icon={faMagnifyingGlass} />
+      {searchValue && <FontAwesomeIcon onClick={handleDeleteButtonClick} className="delete-icon" icon={faXmark} />}
     </div>
   );
 }

src/hooks/useDebouncer.jsx

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+const useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};
+
+export default useDebounce;