Merge pull request #2659 from dhruv8433/pagination

removed pagination if searched product not found
HimanshuNarware · Aug 6, 2024 · abe6f9b · abe6f9b
2 parents 4d43ec9 + 628f4ae
commit abe6f9b
Showing 1 changed file with 77 additions and 63 deletions.
diff --git a/frontend/src/Component/Home.js b/frontend/src/Component/Home.js
@@ -13,7 +13,7 @@ import Tilt from "react-parallax-tilt";
 import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 import debounce from "lodash.debounce";
-import Testimonials from '../pages/Testimonials';
+import Testimonials from "../pages/Testimonials";
 
 const BACKEND = process.env.REACT_APP_BACKEND;
 
@@ -279,6 +279,8 @@ function Home(props) {
     setSearchResults(results);
   }, 300);
 
+  let filterdata = [];
+
   return (
     <SkeletonTheme>
       <div>
@@ -301,7 +303,10 @@ function Home(props) {
                   </h1>
                 </h1>
 
-                <div className="hero-button-container" style={{display: "flex", justifyContent: "center"}}>
+                <div
+                  className="hero-button-container"
+                  style={{ display: "flex", justifyContent: "center" }}
+                >
                   <button className="hero-button">
                     <NavbarItem description="Get Started" to="/open-source" />
                   </button>
@@ -329,7 +334,13 @@ function Home(props) {
         <br />
         {searchQuery && searchResults.length === 0 && (
           <div className="no-results">
-            <img src="./empty-state.png" height={"300px"} width={"300px"} style={{background: "none"}} alt="empty_state_img"/>
+            <img
+              src="./empty-state.png"
+              height={"300px"}
+              width={"300px"}
+              style={{ background: "none" }}
+              alt="empty_state_img"
+            />
             <h1>No matching tools found.</h1>
           </div>
         )}
@@ -398,6 +409,7 @@ function Home(props) {
                 })
                 .slice(firstPostIndex, lastPostIndex)
                 .map((datalist) => {
+                  filterdata.push(datalist);
                   return (
                     <div
                       className="content-box-home"
@@ -441,67 +453,69 @@ function Home(props) {
                   );
                 })}
           </div>
-          <div className="pagination">
-            <ul>
-              <div className="page-item-prev">
-                <li>
-                  <a href="#!" onClick={prePage}>
-                    &lt;
-                  </a>
-                </li>
-              </div>
-              <div className="page-wrapper">
-                {numbers.map((n, i) => {
-                  // Calculate range of visible page numbers around current page
-                  const start = Math.max(1, currentPage - 4); // Show 4 pages before current page
-                  const end = Math.min(npage, start + 8); // Show 8 pages in total
-
-                  // Show ellipsis if start is greater than 1
-                  if (start > 1 && i === 1) {
-                    return (
-                      <li key={i}>
-                        <span>...</span>
-                      </li>
-                    );
-                  }
-
-                  // Show ellipsis if end is less than npage
-                  if (end < npage && i === numbers.length - 1) {
-                    return (
-                      <li key={i}>
-                        <span>...</span>
-                      </li>
-                    );
-                  }
-
-                  // Display the page number if within the visible range
-                  if (n >= start && n <= end) {
-                    return (
-                      <li
-                        key={i}
-                        className={`${currentPage === n ? "active" : ""}`}
-                      >
-                        <a href="#!" onClick={() => changeCPage(n)}>
-                          {n}
-                        </a>
-                      </li>
-                    );
-                  }
-
-                  return null; // Hide pages outside the visible range
-                })}
-              </div>
-              <div className="page-item-next">
-                <li>
-                  <a href="#!" onClick={nextPage}>
-                    &gt;
-                  </a>
-                </li>
-              </div>
-            </ul>
-          </div>
+          {filterdata.length > 0 && (
+            <div className="pagination">
+              <ul>
+                <div className="page-item-prev">
+                  <li>
+                    <a href="#!" onClick={prePage}>
+                      &lt;
+                    </a>
+                  </li>
+                </div>
+                <div className="page-wrapper">
+                  {numbers.map((n, i) => {
+                    // Calculate range of visible page numbers around current page
+                    const start = Math.max(1, currentPage - 4); // Show 4 pages before current page
+                    const end = Math.min(npage, start + 8); // Show 8 pages in total
+
+                    // Show ellipsis if start is greater than 1
+                    if (start > 1 && i === 1) {
+                      return (
+                        <li key={i}>
+                          <span>...</span>
+                        </li>
+                      );
+                    }
+
+                    // Show ellipsis if end is less than npage
+                    if (end < npage && i === numbers.length - 1) {
+                      return (
+                        <li key={i}>
+                          <span>...</span>
+                        </li>
+                      );
+                    }
+
+                    // Display the page number if within the visible range
+                    if (n >= start && n <= end) {
+                      return (
+                        <li
+                          key={i}
+                          className={`${currentPage === n ? "active" : ""}`}
+                        >
+                          <a href="#!" onClick={() => changeCPage(n)}>
+                            {n}
+                          </a>
+                        </li>
+                      );
+                    }
+
+                    return null; // Hide pages outside the visible range
+                  })}
+                </div>
+                <div className="page-item-next">
+                  <li>
+                    <a href="#!" onClick={nextPage}>
+                      &gt;
+                    </a>
+                  </li>
+                </div>
+              </ul>
+            </div>
+          )}
         </div>
-        <Testimonials/>
+        <Testimonials />
       </div>
     </SkeletonTheme>
   );