fix bug: text overlap in search result

rupali-codes · Aug 2, 2023 · 86f8d01 · 86f8d01
1 parent 1cfc30f
commit 86f8d01
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 35 deletions.
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -6,9 +6,11 @@ import { GlobalContext } from 'context/GlobalContext'
 import { ThemeToggler } from '../ThemeToggler/themeToggler'
 import { TopBar } from '../TopBar/TopBar'
 import { SocialMediaIconsList } from 'components/SocialMedia/SocialMediaIconsList'
+import { useResults } from 'hooks/ResultsContext'
 
 export const Header: FC = () => {
   const { toggleNav } = useContext(GlobalContext)
+  const { results } = useResults()
 
   return (
     <header className="fixed top-0 left-0 z-30 row-start-1 row-end-2 flex h-[76px] w-screen items-center justify-between bg-light-primary dark:bg-dark">
@@ -18,7 +20,10 @@ export const Header: FC = () => {
         </Link>
       </div>
       <div className="bg-light-primary relative h-full grow px-8 dark:bg-dark lg:dark:bg-dark-primary">
-        <TopBar className="absolute left-8 hidden h-full md:flex" />
+        <TopBar
+          className="absolute left-8 hidden h-full md:flex"
+          results={results}
+        />
         <div className="absolute right-8 flex h-full gap-4">
           <SocialMediaIconsList className="hidden lg:flex" />
           <ThemeToggler />

diff --git a/components/TopBar/TopBar.tsx b/components/TopBar/TopBar.tsx
@@ -1,18 +1,34 @@
-import { FC, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { FaSlackHash, FaInfoCircle } from 'react-icons/fa'
 import PopupDesc from 'components/popup/popupCategoryDesc'
 import { ICategoryData } from 'types'
 import categoryDescriptions from './CategoryDescriptions'
+import { useResults } from 'hooks/ResultsContext'
 
-export const TopBar: FC<{ className?: string | undefined }> = (props) => {
-  const { className } = props
+interface TopBarProps {
+  className?: string
+  results: number
+}
+
+export const TopBar: FC<TopBarProps> = ({ className }) => {
+  const { results } = useResults()
+  const [isSearchFound, setIsSearchFound] = useState(false)
   const [currentCategory, setCurrentCategory] = useState<ICategoryData | null>(
     null
   )
   const router = useRouter()
   const category = router.asPath.replace('/', '')
   const categoryName = category.split('-').join(' ')
+  const regEx = /[ `!@#$%^&*()_+\=\[\]{};':"\\|,.<>\/?~]/
+
+  useEffect(() => {
+    if (results > 0) {
+      setIsSearchFound(true)
+    } else if (results === 0) {
+      setIsSearchFound(false)
+    }
+  }, [results])
 
   if (router.pathname.length === 1) {
     return null
@@ -32,21 +48,45 @@ export const TopBar: FC<{ className?: string | undefined }> = (props) => {
   }
 
   return (
-    <div
-      className={`flex items-center text-xl dark:text-gray-300 ${className}`}
-    >
-      <FaSlackHash className="mr-2 text-gray-600 dark:text-gray-300" />
-      <span className="flex uppercase text-gray-900 dark:text-gray-100">
-        {category.split('-').join(' ')}
-        <FaInfoCircle
-          className="ml-4 mt-2 text-sm cursor-pointer"
-          onClick={handleCardClick}
-        />
-        <PopupDesc
-          currentCategory={currentCategory}
-          onClose={removeCurrentCard}
-        />
-      </span>
-    </div>
+    <>
+      {regEx.test(category) ? (
+        <div
+          className={`flex items-center text-xl dark:text-gray-300 ${className}`}
+        >
+          <FaSlackHash className="mr-2 text-gray-600 dark:text-gray-300" />
+          <span className="flex uppercase text-gray-900 dark:text-gray-100">
+            {isSearchFound
+              ? `Search: Results Found`
+              : `Search: Results Not Found`}
+            <FaInfoCircle
+              className="ml-4 mt-2 text-sm cursor-pointer"
+              onClick={handleCardClick}
+            />
+            <PopupDesc
+              currentCategory={currentCategory}
+              onClose={removeCurrentCard}
+            />
+          </span>
+        </div>
+      ) : (
+        <div
+          className={`flex items-center text-xl dark:text-gray-300 ${className}`}
+        >
+          <FaSlackHash className="mr-2 text-gray-600 dark:text-gray-300" />
+          <span className="flex uppercase text-gray-900 dark:text-gray-100">
+            {category.split('-').join(' ')}
+
+            <FaInfoCircle
+              className="ml-4 mt-2 text-sm cursor-pointer"
+              onClick={handleCardClick}
+            />
+            <PopupDesc
+              currentCategory={currentCategory}
+              onClose={removeCurrentCard}
+            />
+          </span>
+        </div>
+      )}
+    </>
   )
 }
diff --git a/hooks/ResultsContext.tsx b/hooks/ResultsContext.tsx
@@ -0,0 +1,28 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react'
+
+interface ResultsContextValue {
+  results: number
+  setResults: React.Dispatch<React.SetStateAction<number>>
+}
+
+const ResultsContext = createContext<ResultsContextValue | null>(null)
+
+export const ResultsProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [results, setResults] = useState<number>(-1)
+
+  return (
+    <ResultsContext.Provider value={{ results, setResults }}>
+      {children}
+    </ResultsContext.Provider>
+  )
+}
+
+export const useResults = () => {
+  const context = useContext(ResultsContext)
+  if (!context) {
+    throw new Error('useResults must be used within a ResultsProvider')
+  }
+  return context
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -4,15 +4,18 @@ import GeneralLayout from 'layouts/GeneralLayout'
 import { GlobalProvider } from 'context/GlobalContext'
 import { Preloader } from 'components/Loader/Preloader'
 import { ThemeProvider } from 'next-themes'
+import { ResultsProvider } from 'hooks/ResultsContext'
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <ThemeProvider defaultTheme="dark">
       <GlobalProvider>
-        <Preloader backgroundColor="bg-violet-800" color="#8b5cf6" size={40}>
-          <GeneralLayout>
-            <Component {...pageProps} />
-          </GeneralLayout>
-        </Preloader>
+        <ResultsProvider>
+          <Preloader backgroundColor="bg-violet-800" color="#8b5cf6" size={40}>
+            <GeneralLayout>
+              <Component {...pageProps} />
+            </GeneralLayout>
+          </Preloader>
+        </ResultsProvider>
       </GlobalProvider>
     </ThemeProvider>
   )

diff --git a/pages/search.tsx b/pages/search.tsx
@@ -7,8 +7,10 @@ import { TopBar } from 'components/TopBar/TopBar'
 import ComingSoon from 'components/NewIssue/NewIssue'
 
 import useFilterSearch from 'hooks/useFilterSearch'
+import { useResults } from 'hooks/ResultsContext'
 
 const Search = () => {
+  const { results, setResults } = useResults()
   const router = useRouter()
   const title = `LinksHub - ${router.asPath
     .charAt(1)
@@ -24,6 +26,14 @@ const Search = () => {
 
   const data = filterSearch(query as string)
 
+  useEffect(() => {
+    if (data.length > 0 && data.length !== -1) {
+      setResults(data.length)
+    } else {
+      setResults(0)
+    }
+  }, [data])
+
   if (data.length > 0) {
     content = <CardsList cards={data} />
   } else {
@@ -41,18 +51,18 @@ const Search = () => {
           content="LinksHub is the ultimate hub of ready-to-use tech resources. Discover free tools and libraries to streamline your development process and build better projects."
         />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="keywords" content="LinksHub, developers, free resources, tools, software, libraries, frameworks, applications, websites" />
+        <meta
+          name="keywords"
+          content="LinksHub, developers, free resources, tools, software, libraries, frameworks, applications, websites"
+        />
         <meta name="author" content="Rupali Haldiya" />
         <meta name="robots" content="index, follow" />
         <meta name="revisit-after" content="7 days" />
 
         {/* Open Graph */}
         <meta property="og:url" content="https://linkshub.dev" />
         <meta property="og:type" content="website" />
-        <meta
-          property="og:title"
-          content={title}
-        />
+        <meta property="og:title" content={title} />
         <meta
           property="og:description"
           content="LinksHub aims to provide developers with access to a wide range of free resources and tools that they can use in their work."
@@ -66,10 +76,7 @@ const Search = () => {
         {/* Twitter */}
         <meta name="twitter:card" content="summary_large_image" />
         <meta property="twitter:url" content="https://linkshub.dev" />
-        <meta
-          property="twitter:title"
-          content={title}
-        />
+        <meta property="twitter:title" content={title} />
         <meta
           property="twitter:description"
           content="LinksHub aims to provide developers with access to a wide range of free resources and tools that they can use in their work."
@@ -89,7 +96,10 @@ const Search = () => {
           content="https://discord.com/invite/NvK67YnJX5"
         />
       </Head>
-      <TopBar className="shadow-black-500/50 fixed top-[76px] z-30 flex w-full -translate-x-4 items-center bg-gray-100 px-4 pt-6 pb-4 shadow-xl dark:bg-gray-900 md:hidden" />
+      <TopBar
+        className="shadow-black-500/50 fixed top-[76px] z-30 flex w-full -translate-x-4 items-center bg-gray-100 px-4 pt-6 pb-4 shadow-xl dark:bg-gray-900 md:hidden"
+        results={results}
+      />
       <div className="min-h-[calc(100%-68px)] w-full pt-[85px] pb-4 md:min-h-[calc(100%-76px)] md:px-10 md:pt-10">
         {content}
       </div>