Merge branch 'rupali-codes:main' into Bug

.github/workflows/check_links.yml

@@ -30,7 +30,7 @@ jobs:
           restore-keys: cache-lychee-
       - name: Link Checker
         id: lychee
-        uses: lycheeverse/lychee-action@v2.1.0
+        uses: lycheeverse/lychee-action@v2.2.0
         with:
           fail: true
           args: --verbose --no-progress --exclude-file .lycheeignore '**/*.md' '**/*.json'

components/Searchbar/Searchbar.tsx

@@ -1,5 +1,7 @@
 import { useRef, useEffect, Ref } from 'react'
 import { useRouter } from 'next/router'
+import { useReducer, useState } from 'react'
+
 import dynamic from 'next/dynamic'
 
 const ShortcutKey = dynamic(() => import('./ShortcutKey'), { ssr: false })
@@ -12,6 +14,7 @@ import { Icons } from 'components/icons'
 import { SubCategories, subcategoryArray } from '../../types'
 import { SearchbarAction } from './SearchbarReducer'
 import { sidebarData } from 'database/data'
+import { searchOptions as importedSearchOptions } from 'database/data'
 
 interface SearchbarProps {
   dispatchSearch: (action: SearchbarAction) => void
@@ -21,7 +24,6 @@ interface SearchbarProps {
   inputRef: Ref<HTMLInputElement>
 }
 
-const searchOptions = subcategoryArray
 const SEARCH_ERROR_MSG = 'Please enter a valid search query'
 
 export const Searchbar: React.FC<SearchbarProps> = ({
@@ -34,20 +36,26 @@ export const Searchbar: React.FC<SearchbarProps> = ({
   const formRef = useRef<HTMLFormElement>(null)
   const router = useRouter()
   const suggestions = getFilteredSuggestions(searchQuery)
+  const [sidebarFilteredData, setSidebarFilteredData] = useState(
+    importedSearchOptions
+  )
+
+  // console.log('Suggestions to Render:', suggestions)
 
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // Dispatch the search query change
     dispatchSearch({
       type: 'search_query_change',
       searchQuery: e.target.value,
     })
 
+    // Handle clearing search query and routing to home
     if (
       !e.target.value &&
       router.asPath != '/' &&
       router.asPath.substring(1, 7) == 'search'
     ) {
       searchQuery = ''
-
       router.push('/')
     }
   }
@@ -62,9 +70,13 @@ export const Searchbar: React.FC<SearchbarProps> = ({
   }
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    // console.log('this is sidebar data', sidebarData)
     e.preventDefault()
-    dispatchSearch({ type: 'submit' })
     const cleanedSearchQuery = searchQuery.toLocaleLowerCase().trim()
+    const filteredData = getFilteredSuggestions(cleanedSearchQuery)
+    setSidebarFilteredData(filteredData)
+    dispatchSearch({ type: 'submit' })
+
     if (cleanedSearchQuery !== '') {
       const { category } = sidebarData.find((item) =>
         item.subcategory.find((subCat) => subCat.name === cleanedSearchQuery)
@@ -151,12 +163,28 @@ export const Searchbar: React.FC<SearchbarProps> = ({
 
 const getFilteredSuggestions = (query: string) => {
   const normalisedQuery = query.trim().toLowerCase()
+
+  // console.log('Search Query:', query)
+  // console.log('Imported Search Options:', importedSearchOptions)
+
   if (normalisedQuery.length === 0) {
+    // console.log('Query is empty, returning no suggestions.')
     return []
   }
-  const suggestions = searchOptions.filter((option) =>
-    option.name.toLowerCase().includes(normalisedQuery)
-  )
+
+  const suggestions = importedSearchOptions.filter((option) => {
+    const optionName = option.name?.toLowerCase().trim()
+    const categoryName = option.category?.toLowerCase().trim()
+
+    // console.log('Checking Option:', { optionName, categoryName })
+
+    return (
+      (optionName && optionName.includes(normalisedQuery)) ||
+      (categoryName && categoryName.includes(normalisedQuery))
+    )
+  })
+
+  // console.log('Filtered Suggestions:', suggestions)
 
   return suggestions
 }

components/Searchbar/SearchbarReducer.ts

@@ -19,6 +19,10 @@ export const searchbarReducer: (
   state: SearchbarState,
   action: SearchbarAction
 ) => SearchbarState = (state, action) => {
+  let updatedState
+  // console.log('Reducer state before action:', state)
+  // console.log('Reducer action:', action)
+
   switch (action.type) {
     case 'search_query_change': {
       const query = action.searchQuery as string
@@ -57,13 +61,16 @@ export const searchbarReducer: (
     case 'close_suggestions': {
       return {
         ...state,
-        searchQuery : "",
-        categoryQuery : "",
+        searchQuery: '',
+        categoryQuery: '',
         showSuggestions: false,
       }
+      break
     }
     default: {
-      return state
+      updatedState = state
     }
   }
+  // console.log('Searchbar state after action: ', updatedState)
+  return updatedState
 }

components/SideNavbar/SideNavbarCategory.tsx

@@ -1,75 +1,71 @@
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { type FC, type MutableRefObject, useEffect, useMemo, useState } from 'react';
 
-import { SideNavbarElement } from './SideNavbarElement';
+import { FC, useState, useEffect, MutableRefObject } from 'react'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
 
-import useOnClickOutside from 'hooks/useOnClickOutside';
-import type { ISidebar } from '../../types';
 
-import { Icons } from 'components/icons';
+import { SideNavbarElement } from './SideNavbarElement'
 
-const categoriesToUppercase = ['ai'];
+import useOnClickOutside from 'hooks/useOnClickOutside'
+import type { ISidebar } from '../../types'
+
+import { Icons } from 'components/icons'
+
+const categoriesToUppercase = ['ai']
 const exceptions: Record<string, string> = {
   youtube: 'YouTube',
-};
+}
 
 const capitalizeCategory = (category: string) => {
-  const lowerCaseCategory = category.toLowerCase();
+  const lowerCaseCategory = category.toLowerCase()
 
   if (exceptions[lowerCaseCategory]) {
-    return exceptions[lowerCaseCategory];
+    return exceptions[lowerCaseCategory]
   }
 
   return category
     .split('-')
-    .map(word =>
+    .map((word) =>
       categoriesToUppercase.includes(word.toLowerCase())
         ? word.toUpperCase()
         : word.charAt(0).toUpperCase() + word.slice(1)
     )
-    .join(' ');
-};
+    .join(' ')
+}
 
 export const SideNavbarCategory: FC<{
-  categoryData: ISidebar;
-  expand: boolean;
-  listRef: MutableRefObject<HTMLUListElement | null>;
+  categoryData: ISidebar
+  expand: boolean
+  listRef: MutableRefObject<HTMLUListElement | null>
 }> = ({ categoryData, expand, listRef }) => {
-  const [isOpen, setIsOpen] = useState(expand);
-  // const [hasUpdated, setHasUpdated] = useState(categoryData);
-  const router = useRouter();
-  const { category, subcategory } = categoryData;
-  const sortedSubcategoryList = useMemo(() => {
-    return subcategory
-      .sort((a, b) => (a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1))
-      .map((subcategoryData, i) => (
-        <li className="-ml-0.5" key={i}>
-          <SideNavbarElement category={category} subcat={subcategoryData} />
-        </li>
-      ));
-  }, [category, subcategory])
+
+  const [isOpen, setIsOpen] = useState(expand)
+  const router = useRouter()
+  const { category, subcategory } = categoryData
+
+  const sortedSubcategoryList = subcategory
+    .sort((a, b) => (a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1))
+    .map((subcategoryData, i) => (
+      <li className="-ml-0.5" key={i}>
+        <SideNavbarElement category={category} subcat={subcategoryData} />
+      </li>
+    ))
 
   useEffect(() => {
-    setIsOpen(expand);
-    // setHasUpdated(categoryData);
-  }, [expand]);
+    setIsOpen(expand)
+  }, [expand])
+
 
   const handleToggle = () => {
-    setIsOpen(!isOpen);
-  };
+    setIsOpen(!isOpen)
+  }
 
   const handleClickOutside = async () => {
-    setIsOpen(false);
-    router.replace('/');
-  };
-
-  // const handleUpdate = () => {
-  //   setHasUpdated(!hasUpdated);
-  //   handleUpdate();
-  // };
+    setIsOpen(false)
+    router.replace('/')
+  }
 
-  useOnClickOutside(listRef, handleClickOutside);
+  useOnClickOutside(listRef, handleClickOutside)
 
   return (
     <li className="w-full transition-all ease-in-out text-primary dark:text-theme-primary dark:bg-opacity-5 hover:text-theme-secondary dark:hover:text-theme-primary rounded-md focus-visible:outline-none focus-visible:ring focus-visible:ring-theme-primary">
@@ -83,20 +79,20 @@ export const SideNavbarCategory: FC<{
           className={`text-slate-500 dark:text-slate-300 text-lg font-sans font-medium w-4/5 truncate ${category.length < 4 ? 'uppercase' : 'capitalize'
             }`}
         >
-          {/* { category === 'open-source' ? '<strong>New' : capitalizeCategory(category)} */}
           {capitalizeCategory(category)}
         </h1>
         <Icons.angleDown
           className={`${isOpen && 'rotate-180'
             } h-5 w-5 text-slate-500 dark:text-slate-300 self-center transition duration-300 ease-in-out`}
         />
       </Link>
+
       <div
         className={`overflow-hidden transition-all duration-500 ease-in-out max-h-0 ${isOpen ? 'max-h-screen' : ''
           }`}
       >
         <ul className="">{sortedSubcategoryList}</ul>
       </div>
     </li>
-  );
-};
+  )
+}

components/SideNavbar/SideNavbarCategoryList.tsx

@@ -20,13 +20,14 @@ export const SideNavbarCategoryList: FC<{
     }
   }, [router.pathname, router.query])
 
-  if (categoriesList.length == 0) {
+  if (categoriesList.length === 0) {
     return (
       <div className="dark:text-gray-200 text-gray-500 text-lg text-center py-2">
         No Links Found
       </div>
     )
   }
+  // console.log('this is cat list', categoriesList)
 
   return (
     <ul
@@ -39,38 +40,59 @@ export const SideNavbarCategoryList: FC<{
           listRef={listRef}
           key={categoryData.category}
           categoryData={categoryData}
-          expand={query.length > 0 || category === categoryData.category}      />
+          expand={query.length > 0 || category === categoryData.category}
+        />
       ))}
     </ul>
   )
 }
 
 const getFilteredCategoryList = (query: string) => {
-  const filteredResults = sidebarData.filter((sidebarItem) =>
-    sidebarItem.subcategory.some((subCategory) =>
-      matchSearch(subCategory, query)
+  const normalizedQuery = query.toLowerCase().trim()
+
+  if (!normalizedQuery) {
+    return sidebarData
+  }
+
+  const filteredResults = sidebarData.filter((sidebarItem) => {
+    const categoryNameMatches = sidebarItem.category
+      .toLowerCase()
+      .includes(normalizedQuery)
+
+    const hasMatchingSubcategories = sidebarItem.subcategory.some(
+      (subCategory) => matchSearch(subCategory, normalizedQuery)
     )
-  )
-  const mappedResults = filteredResults.map((sidebarItem) => ({
-    ...sidebarItem,
-    subcategory: sidebarItem.subcategory.filter((subcategory) =>
-      matchSearch(subcategory, query)
-    ),
-  }))
+
+    return categoryNameMatches || hasMatchingSubcategories
+  })
+
+  // Map results to include all subcategories if the category matches
+  const mappedResults = filteredResults.map((sidebarItem) => {
+    const categoryNameMatches = sidebarItem.category
+      .toLowerCase()
+      .includes(normalizedQuery)
+
+    return {
+      ...sidebarItem,
+      subcategory: categoryNameMatches
+        ? sidebarItem.subcategory
+        : sidebarItem.subcategory.filter((subCategory) =>
+            matchSearch(subCategory, normalizedQuery)
+          ),
+    }
+  })
 
   return mappedResults
 }
 
+// console.log('thsi is the filtered cat list', getFilteredCategoryList)
+
 const matchSearch = (item: SubCategories, query: string) => {
   const itemName = item.name.toLowerCase()
   const matchingResources = item.resources.filter(
-    (resource: { name: string }) =>
-      resource.name.toLowerCase().includes(query.toLowerCase())
+    (resource: { name: string }) => resource.name.toLowerCase().includes(query)
   )
 
-  return (
-    query === '' ||
-    itemName.includes(query.toLowerCase()) ||
-    matchingResources.length > 0
-  )
+  // Match if query matches the subcategory name or  resource
+  return itemName.includes(query) || matchingResources.length > 0
 }