chore: fix-search-query-value-in-breadcrumbs

#2246 fix search query value in breadcrumbs
rupali-codes · Feb 9, 2024 · 2f1f7e3 · 2f1f7e3
2 parents cd94f1f + 5c0473b
commit 2f1f7e3
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 12 deletions.
diff --git a/components/Breadcrumps/index.tsx b/components/Breadcrumps/index.tsx
@@ -25,7 +25,7 @@ const BreadCrumbs: React.FC<ComponentProps> = ({ sections }) => {
             href={section.url}
             className="flex gap-x-2 bg-theme-quinary bg-opacity-20 text-text-primary-light dark:text-text-quaternary text-lg py-0.5 px-2.5 rounded-lg capitalize cursor-pointer"
           >
-            {section.name}
+            {section.name?.split('-').join(' ')}
           </Link>
         ))}
       </div>

diff --git a/components/Searchbar/Searchbar.tsx b/components/Searchbar/Searchbar.tsx
@@ -63,15 +63,23 @@ export const Searchbar: React.FC<SearchbarProps> = ({
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
-
     dispatchSearch({ type: 'submit' })
-    if (searchQuery.trim() !== '') {
-      router.push({
-        pathname: '/search',
-        query: {
-          query: searchQuery,
-        },
-      })
+    const cleanedSearchQuery = searchQuery.toLocaleLowerCase().trim()
+    if (cleanedSearchQuery !== '') {
+      const { category } = sidebarData.find((item) =>
+        item.subcategory.find((subCat) => subCat.name === cleanedSearchQuery)
+      ) || { category: '' }
+
+      if (category != '') {
+        router.push(`/${category}/${cleanedSearchQuery}`)
+      } else {
+        router.push({
+          pathname: '/search',
+          query: {
+            query: searchQuery,
+          },
+        })
+      }
     }
   }
 

diff --git a/components/TopBar/TopBar.tsx b/components/TopBar/TopBar.tsx
@@ -18,8 +18,9 @@ export const TopBar: FC<TopBarProps> = ({}) => {
   const { theme } = useTheme()
 
   const category = router.asPath
-  const categoryName = category.split('/')[1]
-  const subcategoryName = category?.split('/')[2]
+  const categoryName = category?.split('/')[1]?.split('-').join(' ')
+  const subcategoryName = category?.split('/')[2]?.split('-').join(' ')
+
   const searchQuery = router.query.query?.toString() || ''
 
   let cleanedCategory = ''
@@ -63,7 +64,7 @@ export const TopBar: FC<TopBarProps> = ({}) => {
         <IoIosArrowBack className="md:hidden" />
       </Link>
       <div className="md:bg-[#EDEDED] md:bg-opacity-20 px-[10px] py-[6px] text-xl md:text-base rounded-md truncate ...">
-        <h3>{capitalizeEachWord(cleanedCategory.split('-').join(' '))}</h3>
+        <h3>{capitalizeEachWord(cleanedCategory)}</h3>
       </div>
       <button>
         <FaInfoCircle