Refactor: use Search params for searching

manan-m-shah · Jun 12, 2023 · e21c674 · e21c674
1 parent d68692c
commit e21c674
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 177 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -8,31 +8,16 @@ import BookMarks from './pages/Bookmarks'
 import BackToTopButton from './components/BackToTop'
 import NotFound from './pages/NotFound'
 import Community from './pages/Community'
-import searchProducts from './utils/search/search_products'
 
 const ToolContext = createContext()
 const LOCAL_STORAGE_KEY = 'freehit.bookmarks'
 
 function App() {
-  const [searchTerm, setSearchTerm] = useState('')
   const [gridView, setGridView] = useState(true)
 
-  // all products
-  const [productNames, setProductNames] = useState(
-    products?.map((product) => product.productName) || []
-  )
-  const [filteredSuggestions, setFilteredSuggestions] = useState([])
-
   // all Bookmarks
   const [bookmarks, setBookmarks] = useState([])
 
-  // for menu bar close and open
-  const [isMenuActive, setIsMenuActive] = useState(true)
-
-  const [boomarkNames, setBookmarkNames] = useState(
-    bookmarks?.map((bookmark) => bookmark.productName) || []
-  )
-
   // initial Storage
   useEffect(() => {
     const bookmarkJson = localStorage.getItem(LOCAL_STORAGE_KEY)
@@ -56,28 +41,6 @@ function App() {
     setBookmarks([...bookmarks, newBookmark])
   }
 
-  // Search filter methods
-  useEffect(() => {
-    // Checks if the search term have a word
-    if (searchTerm.length > 1) {
-      // This filters out the names that starts with the given search term.
-      const filterNames = productNames.filter((productName) =>
-        productName.toLowerCase().startsWith(searchTerm.toLowerCase())
-      )
-
-      // the array containing the filtered words gets sorted.
-      const sortedProductNames = filterNames.sort()
-      setFilteredSuggestions(sortedProductNames)
-    } else {
-      setFilteredSuggestions([])
-    }
-  }, [searchTerm, productNames, boomarkNames])
-
-  // filtering methods
-  const filteredProducts = searchProducts(products, searchTerm);
-
-  const bookmarkfilteredProducts = searchProducts(bookmarks, searchTerm)
-
   // Remove Bookmark
   function deleteres(product) {
     setBookmarks(
@@ -87,14 +50,9 @@ function App() {
 
   // values to pass to context hook s
   const toolContextValue = {
-    filteredProducts,
-    searchTerm,
-    setSearchTerm,
     handelBookmarkAdd,
     bookmarks,
     deleteres,
-    filteredSuggestions,
-    bookmarkfilteredProducts,
     gridView,
     setGridView,
   }
@@ -104,11 +62,11 @@ function App() {
      <div className="app">
      <ToolContext.Provider value={toolContextValue}>
         <Routes>
-          <Route path="/" element={<Card length={filteredProducts.length} />} />
+          <Route path="/" element={<Card />} />
           <Route path="/about" element={<About />} />
           <Route
             path="/bookmarks"
-            element={<BookMarks length={bookmarkfilteredProducts.length} />}
+            element={<BookMarks />}
           />
           <Route path="/community" element={<Community />} />
           <Route path="*" element={<NotFound />} />

diff --git a/src/components/Card/GridView.jsx b/src/components/Card/GridView.jsx
@@ -1,19 +1,16 @@
 import { useContext } from 'react'
 import { ToolContext } from '../../App'
-import filterProducts from '../../utils/filter/filter_products'
 
-
-const GridView = ({ filters }) => {
+const GridView = ({ currentProducts }) => {
   const {
-    filteredProducts,
     handelBookmarkAdd,
-    bookmarkfilteredProducts,
+    bookmarks,
     deleteres,
   } = useContext(ToolContext)
 
   return (
     <main className="grid">
-      {filterProducts(filteredProducts, filters).map((product, index) => (
+      {currentProducts.map((product, index) => (
         <article key={index}>
           <div className="text_top">
             {product.image ? (
@@ -39,7 +36,7 @@ const GridView = ({ filters }) => {
                 </font>
               </button>
             </a>
-            {bookmarkfilteredProducts.some(
+            {bookmarks.some(
               (obj) => obj['productName'] === product.productName
             ) ? (
               <button onClick={() => deleteres(product)}>

diff --git a/src/components/Card/ListView.jsx b/src/components/Card/ListView.jsx
@@ -11,112 +11,113 @@ import {
 } from '@chakra-ui/react'
 
 import { BsChevronDown } from 'react-icons/bs'
-import filterProducts from '../../utils/filter/filter_products'
 
-const ListView = ({filters}) => {
+const ListView = ({ currentProducts }) => {
   const {
-    filteredProducts,
     handelBookmarkAdd,
-    bookmarkfilteredProducts,
+    bookmarks
+    ,
     deleteres,
   } = useContext(ToolContext)
   return (
     <Accordion allowToggle className="list">
-      {filterProducts(filteredProducts, filters).map((product, index) => (
-          <AccordionItem
-            borderRadius={'8px'}
-            boxShadow={'8px 8px 2px 0px #373530'}
-            border={'1px solid #373530'}
-            key={index}
-            className="accordion_item"
-          >
-            <AccordionButton>
-              <Box padding={1} py={'3px'} flex="1" className="image">
-                {product.image ? (
-                  <img
+      {currentProducts.map((product, index) => (
+        <AccordionItem
+          borderRadius={'8px'}
+          boxShadow={'8px 8px 2px 0px #373530'}
+          border={'1px solid #373530'}
+          key={index}
+          className="accordion_item"
+        >
+          <AccordionButton>
+            <Box padding={1} py={'3px'} flex="1" className="image">
+              {product.image ? (
+                <img
                   className="card-img"
                   src={product.image}
                   alt=""
                   onError={(e) => {
                     e.target.src = "https://i.ibb.co/9H0s34n/default-img.jpg";
                   }}
-                        />
-                ) : (
-                  <img className="card-img" src="https://i.ibb.co/9H0s34n/default-img.jpg" alt="Default" />
-                )}
-                <div className="accordion_btn">
-                  <h3 className="card-title">{product.productName}</h3>
-                  <div className="btn-cont">
-                    <a target="_blank" href={product.link}>
-                      <button className="visit">
-                        <font color="white" size="3">
-                          Visit
-                        </font>
-                      </button>
-                    </a>
-                    {bookmarkfilteredProducts.some(
+                />
+              ) : (
+                <img className="card-img" src="https://i.ibb.co/9H0s34n/default-img.jpg" alt="Default" />
+              )}
+              <div className="accordion_btn">
+                <h3 className="card-title">{product.productName}</h3>
+                <div className="btn-cont">
+                  <a target="_blank" href={product.link}>
+                    <button className="visit">
+                      <font color="white" size="3">
+                        Visit
+                      </font>
+                    </button>
+                  </a>
+                  {bookmarks
+                    .some(
                       (obj) => obj['productName'] === product.productName
                     ) ? (
-                      <button onClick={(event) =>{event.stopPropagation();  deleteres(product)}}>
-                        <a >
-                          Delete<i className="ri-bookmark-fill"></i>
-                        </a>
-                      </button>
-                    ) : (
+                    <button onClick={(event) => { event.stopPropagation(); deleteres(product) }}>
                       <a >
-                        <button
-                          className="bookmark"
-                          onClick={(event) => { event.stopPropagation(); handelBookmarkAdd(product)}}
-                        >
-                          <font color="white" size="3">
-                            Bookmark
-                          </font>
-                        </button>
+                        Delete<i className="ri-bookmark-fill"></i>
                       </a>
-                    )}
-                  </div>
-                </div>
-              </Box>
-              <AccordionIcon as={BsChevronDown} size={5} fontWeight={'bold'} />
-            </AccordionButton>
-            <AccordionPanel py={2} pt={0}>
-              <div className="text">
-                <div className="accordion_panel">
-                  <p>{product.description}</p>
-                  <div className="btn-cont ">
-                    <a target="_blank" href={product.link}>
-                      <button className="visit">
+                    </button>
+                  ) : (
+                    <a >
+                      <button
+                        className="bookmark"
+                        onClick={(event) => { event.stopPropagation(); handelBookmarkAdd(product) }}
+                      >
                         <font color="white" size="3">
-                          Visit
+                          Bookmark
                         </font>
                       </button>
                     </a>
-                    {bookmarkfilteredProducts.some(
+                  )}
+                </div>
+              </div>
+            </Box>
+            <AccordionIcon as={BsChevronDown} size={5} fontWeight={'bold'} />
+          </AccordionButton>
+          <AccordionPanel py={2} pt={0}>
+            <div className="text">
+              <div className="accordion_panel">
+                <p>{product.description}</p>
+                <div className="btn-cont ">
+                  <a target="_blank" href={product.link}>
+                    <button className="visit">
+                      <font color="white" size="3">
+                        Visit
+                      </font>
+                    </button>
+                  </a>
+                  {bookmarks
+                    .some(
                       (obj) => obj['productName'] === product.productName
                     ) ? (
-                      <button onClick={() => deleteres(product)}>
-                        <a >
-                          Delete<i className="ri-bookmark-fill"></i>
-                        </a>
-                      </button>
-                    ) : (
+                    <button onClick={() => deleteres(product)}>
                       <a >
-                        <button
-                          className="bookmark"
-                          onClick={() => handelBookmarkAdd(product)}
-                        >
-                          <font color="white" size="3">
-                            Bookmark
-                          </font>
-                        </button>
+                        Delete<i className="ri-bookmark-fill"></i>
                       </a>
-                    )}
-                  </div>
+                    </button>
+                  ) : (
+                    <a >
+                      <button
+                        className="bookmark"
+                        onClick={() => handelBookmarkAdd(product)}
+                      >
+                        <font color="white" size="3">
+                          Bookmark
+                        </font>
+                      </button>
+                    </a>
+                  )}
                 </div>
               </div>
-            </AccordionPanel>
-          </AccordionItem>
-        ))}
+            </div>
+          </AccordionPanel>
+        </AccordionItem>
+      ))}
     </Accordion>
   )
 }