From 64df58da0ec4f36314d0ce1ea68c0668702e4ba6 Mon Sep 17 00:00:00 2001
From: RAGHAV <94848646+raghav1030@users.noreply.github.com>
Date: Tue, 3 Oct 2023 19:26:39 +0000
Subject: [PATCH] added '/' as search shortcut

---
 components/Searchbar/Searchbar.tsx       |  5 +++-
 components/SideNavbar/SideNavbarBody.tsx | 10 ++++----
 hooks/useSearchShortcut.tsx              | 32 ++++++++++++++++++++++++
 3 files changed, 41 insertions(+), 6 deletions(-)
 create mode 100644 hooks/useSearchShortcut.tsx

diff --git a/components/Searchbar/Searchbar.tsx b/components/Searchbar/Searchbar.tsx
index e74fcc447..86b77ef1f 100644
--- a/components/Searchbar/Searchbar.tsx
+++ b/components/Searchbar/Searchbar.tsx
@@ -1,4 +1,4 @@
-import { useRef, useEffect } from 'react'
+import { useRef, useEffect, Ref } from 'react'
 
 import SearchIcon from 'assets/icons/SearchIcon'
 import { SearchbarSuggestions } from './SearchbarSuggestions'
@@ -14,6 +14,7 @@ interface SearchbarProps {
   searchQuery: string
   showSuggestions: boolean
   searchQueryIsValid: boolean
+  inputRef : Ref<HTMLInputElement>
 }
 
 const searchOptions = subcategoryArray
@@ -24,6 +25,7 @@ export const Searchbar: React.FC<SearchbarProps> = ({
   searchQuery,
   showSuggestions,
   searchQueryIsValid,
+  inputRef,
 }) => {
   const formRef = useRef<HTMLFormElement>(null)
   const router = useRouter()
@@ -88,6 +90,7 @@ export const Searchbar: React.FC<SearchbarProps> = ({
             Quick search
           </label>
           <input
+          ref={inputRef}
             type="text"
             id="simple-search"
             name="simple-search"
diff --git a/components/SideNavbar/SideNavbarBody.tsx b/components/SideNavbar/SideNavbarBody.tsx
index f995151e4..1fb5f46c9 100644
--- a/components/SideNavbar/SideNavbarBody.tsx
+++ b/components/SideNavbar/SideNavbarBody.tsx
@@ -1,17 +1,17 @@
-import { FC, memo } from 'react'
+import { FC, memo, useRef } from 'react'
 import { Searchbar } from 'components/Searchbar/Searchbar'
 import classNames from 'classnames'
 import { useTheme } from 'next-themes'
-
 import { SideNavbarCategoryList } from './SideNavbarCategoryList'
-
 import { useSearchReducer } from 'hooks/useSearchReducer'
-
+import useSearchShortcut from 'hooks/useSearchShortcut'
 const MemoizedSideNavbarCategoryList = memo(SideNavbarCategoryList)
 
 export const SideNavbarBody: FC = () => {
   const { theme } = useTheme()
   const [searchState, dispatchSearch] = useSearchReducer()
+  const inputRef : React.RefObject<HTMLInputElement> = useRef(null);
+  useSearchShortcut({inputRef})
 
   return (
     <div
@@ -21,7 +21,7 @@ export const SideNavbarBody: FC = () => {
       )}
     >
       <div className="bg-primary-light transiton-all w-full p-4 transition-none ease-in dark:bg-dark">
-        <Searchbar {...searchState} dispatchSearch={dispatchSearch} />
+        <Searchbar inputRef={inputRef} {...searchState} dispatchSearch={dispatchSearch} />
       </div>
       <MemoizedSideNavbarCategoryList query={searchState.categoryQuery} />
     </div>
diff --git a/hooks/useSearchShortcut.tsx b/hooks/useSearchShortcut.tsx
new file mode 100644
index 000000000..f8e4b60f4
--- /dev/null
+++ b/hooks/useSearchShortcut.tsx
@@ -0,0 +1,32 @@
+import  { useEffect, Ref, RefObject } from "react";
+
+interface useSearchShortcutProps  {
+    inputRef : RefObject<HTMLInputElement | null>,
+}
+
+const useSearchShortcut = ({inputRef} : useSearchShortcutProps) => {
+    useEffect(() => {
+        const handleSlashKeyPress = (event: KeyboardEvent) => {
+          // Check if the pressed key is '/'
+          if (event.key === '/') {
+            // Prevent the default behavior (e.g., adding '/' to an input field)
+            event.preventDefault();
+    
+            // Focus the input element
+            if (inputRef.current) {
+              inputRef.current.focus();
+            }
+          }
+        };
+    
+        // Attach the event listener when the component mounts
+        document.addEventListener('keydown', handleSlashKeyPress);
+    
+        // Detach the event listener when the component unmounts
+        return () => {
+          document.removeEventListener('keydown', handleSlashKeyPress);
+        };
+      }, [inputRef]);
+}
+
+export default useSearchShortcut
\ No newline at end of file