api changes for search

app/api/blogs/route.js

-// api/search/index.js
-import { getPosts } from "@lib/api";
-import { NextResponse } from "next/server";
-
-export async function GET(request) {
-  const { searchParams } = new URL(request.url);
-  const page = searchParams.get("page");
-  const search = searchParams.get("search");
-  const { blogs } = await getPosts("posts", 1);
-  const filterBlog = blogs.filter((e) => {
-    return e.title.toLowerCase().includes(search.toLowerCase());
-  });
-  let pageNo = filterBlog.length > 6 ? page : 1;
-  const itemsPerPage = 6;
-  // Calculate the start and end indices for the current page
-  const startIndex = (pageNo - 1) * itemsPerPage;
-  const endIndex = startIndex + itemsPerPage;
-  const slicedData = Array.isArray(filterBlog)
-    ? filterBlog.slice(startIndex, endIndex)
-    : [];
-  const response = { data: slicedData, total: filterBlog.length };
-
-  return NextResponse.json(response);
-}

app/page.js

 import BlogLists from "@components/top-level/blog-lists";
-import { getPosts } from "@lib/api";
+import { getPosts, getPostsBySearch } from "@lib/api";
 import styles from "./page.module.css";
 
-async function fetchBlogsByTitle(pageNo, search) {
-  try {
-    const searchResponse = await fetch(
-      `http://localhost:3000/api/blogs/?page=${pageNo}&search=${search}`
-      // {
-      //   next: {
-      //     revalidate: 100, //after 100sec
-      //   },
-      // }
-    );
-    return await searchResponse.json();
-  } catch (err) {
-    console.log(er.message);
-  }
-}
 const Home = async ({ searchParams }) => {
   let blogs = [];
-  let blogsLength = 0;
-  let pageNo = searchParams.page || 1;
-  let search = searchParams.search || "";
-  let response;
-  if (!search) {
-    try {
-      const { data, total } = await getPosts("posts", pageNo);
-      response = { data, total: total };
-    } catch (err) {
-      console.log(err.message);
-    }
-  } else {
-    response = await fetchBlogsByTitle(pageNo, search);
-  }
+  let pageNo = searchParams.page;
+  let search = searchParams.search;
 
+  let response;
+  response = await getPosts("posts", pageNo);
   blogs = response.data;
-  blogsLength = response.total;
-  pageNo = blogsLength > 6 ? pageNo : 1; // if length goes greater than 6 then take pagenum otherwise 1
 
+  if ("search" in searchParams && pageNo !== "") {
+    if (search !== "") {
+      console.log("dfknb", pageNo);
+      response = await getPostsBySearch("posts", pageNo, search);
+      blogs = response.data;
+    } else {
+      blogs.length = 0;
+    }
+  }
   return (
     <div className={styles.container}>
       {blogs?.length ? (
@@ -45,8 +27,9 @@ const Home = async ({ searchParams }) => {
           title="Lifestyle"
           description="Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos dolorum."
           blogs={blogs}
-          totalBlogLength={Number(blogsLength)}
+          total={response.total}
           currentPage={Number(pageNo)}
+          search={search}
         />
       ) : (
         <h2 className="center">No data found</h2>

app/singleblog/[id]/page.js

@@ -2,19 +2,8 @@ import SingleBlog from "@components/top-level/single-blog";
 import Loading from "app/loading";
 import { getPostById } from "@lib/api";
 
-const fetchBlogById = async (id) => {
-  try {
-    const blogPost = await getPostById("posts", id);
-    return blogPost[0];
-  } catch (error) {
-    console.error("Error fetching blog:", error.message);
-    return null;
-  }
-};
-
 const SingleBlogApp = async ({ params: { id } }) => {
-  const blog = await fetchBlogById(id);
-
+  const blog = await getPostById("posts", id);
   return <div>{blog ? <SingleBlog {...blog} /> : <Loading />}</div>;
 };
 

components/base/button/index.js

 import PropTypes from "prop-types";
+import Link from "next/link";
 import cn from "classnames";
-
 import styles from "./styles.module.css";
 
-const Button = ({ children, isDisabled, variant, className, ...props }) => {
+const Button = ({
+  children,
+  disabled = false,
+  variant,
+  className,
+  href,
+  ...props
+}) => {
   const classNames = cn(styles["btn"], {
     [styles[variant]]: variant,
     [styles[className]]: className,
-    [styles.disabled]: isDisabled,
+    [styles.disabled]: disabled,
   });
 
   return (
-    <button className={classNames} disabled={isDisabled} {...props}>
+    <Link href={href} className={classNames} {...props}>
       {children}
-    </button>
+    </Link>
   );
 };
 

components/base/button/styles.module.css

@@ -17,7 +17,9 @@
   color: var(--secondary-color);
 }
 .disabled {
-  opacity: 0.9;
+  pointer-events: none;
+  color: #a3a3a3;
+  background-color: #e3e3e3;
 }
 
 @media screen and (min-width: 768px) {

components/top-level/blog-lists/index.js

-"use client";
-import React from "react";
 import PropTypes from "prop-types";
 import Card from "@components/base/card";
 import Pagination from "@components/top-level/pagination";
-import { useRouter, useSearchParams } from "next/navigation";
 import styles from "./styles.module.css";
 
 const BlogLists = ({
@@ -11,24 +8,9 @@ const BlogLists = ({
   description,
   blogs,
   currentPage,
-  totalBlogLength,
+  total,
+  search,
 }) => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const redirect = (pageNumber) => {
-    const searchQuery = searchParams.get("search")
-      ? `&search=${searchParams.get("search")}`
-      : "";
-    const newUrl = `?page=${pageNumber}${searchQuery}`;
-    return router.push(newUrl, undefined, { shallow: true });
-  };
-
-  const handlePageChange = (pageNumber) => {
-    redirect(pageNumber);
-    // window.scrollTo({ top: 0, behavior: "smooth" });
-  };
-
   return (
     <div className={styles["blog-container"]}>
       <h2 className={styles.title}>{title}</h2>
@@ -42,10 +24,10 @@ const BlogLists = ({
       </div>
       <div className={styles.pagination}>
         <Pagination
-          currentPage={Number(currentPage)}
-          total={Number(totalBlogLength)}
+          currentPage={currentPage}
+          total={Number(total)}
           perPage={6}
-          onPageChange={handlePageChange}
+          search={search}
         />
       </div>
     </div>
@@ -57,7 +39,7 @@ BlogLists.propTypes = {
   description: PropTypes.string,
   blogs: PropTypes.array,
   currentPage: PropTypes.number,
-  totalBlogLength: PropTypes.number,
+  total: PropTypes.number,
 };
 
 export default BlogLists;

components/top-level/pagination/index.js

@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import Button from "@components/base/button";
 import styles from "./styles.module.css";
 
-function Pagination({ total, currentPage, onPageChange, perPage }) {
+function Pagination({ total, currentPage, perPage, search }) {
   const totalPages = Math.ceil(total / perPage);
   const totalPage = totalPages <= 1 ? 1 : totalPages;
 
@@ -10,11 +10,6 @@ function Pagination({ total, currentPage, onPageChange, perPage }) {
   for (let i = 1; i <= totalPage; i++) {
     numberOfPages.push(i);
   }
-
-  const handleCurrentPage = (item) => {
-    onPageChange(item);
-  };
-
   // Logic for displaying buttons
   let tempNumberOfPages = [];
   let dotsLeft = "...";
@@ -48,8 +43,12 @@ function Pagination({ total, currentPage, onPageChange, perPage }) {
       <span className={styles.previous}>
         <Button
           variant="secondary"
-          isDisabled={currentPage <= 1}
-          onClick={() => handleCurrentPage(currentPage - 1)}
+          disabled={currentPage <= 1}
+          href={
+            search
+              ? `?page=${currentPage - 1}&search=${search}`
+              : `?page=${currentPage - 1}`
+          }
         >
           &laquo; Prev
         </Button>
@@ -57,9 +56,15 @@ function Pagination({ total, currentPage, onPageChange, perPage }) {
       {tempNumberOfPages.map((item, index) => (
         <span key={index}>
           <Button
-            isDisabled={totalPage === 1}
+            disabled={totalPage === "1"}
             variant={currentPage === item ? "primary" : "secondary"}
-            onClick={() => (item === "..." ? "" : handleCurrentPage(item))}
+            href={
+              item === "..."
+                ? ""
+                : search
+                  ? `?page=${item}&search=${search}`
+                  : `?page=${item}`
+            }
           >
             {item}
           </Button>
@@ -68,8 +73,12 @@ function Pagination({ total, currentPage, onPageChange, perPage }) {
       <span className={styles.next}>
         <Button
           variant="secondary"
-          isDisabled={currentPage === totalPage}
-          onClick={() => handleCurrentPage(currentPage + 1)}
+          disabled={currentPage === totalPage}
+          href={
+            search
+              ? `?page=${currentPage + 1}&search=${search}`
+              : `?page=${currentPage + 1}`
+          }
         >
           Next &raquo;
         </Button>

lib/api.js

@@ -24,32 +24,52 @@ export async function getPostById(fileDirectory, slug) {
     })
   );
 
-  return data.filter((e) => e.id == slug);
+  return data.filter((e) => e.id == slug)[0];
 }
 
-export async function getPosts(fileDirectory, page) {
+async function getAllPosts(fileDirectory) {
   const directory = path.join(process.cwd(), fileDirectory);
   const fileNames = await fs.readdir(directory);
 
-  const dataPromises = fileNames.map(async (fileName) => {
-    const id = fileName.replace(/\.md$/, "");
-    const fullPath = path.join(fileDirectory, fileName);
-    const fileContents = await fs.readFile(fullPath, "utf8");
-    const { data, content } = matter(fileContents);
-    return {
-      id,
-      ...data,
-    };
-  });
+  const post = await Promise.all(
+    fileNames.map(async (fileName) => {
+      const id = fileName.replace(/\.md$/, "");
+      const fullPath = path.join(fileDirectory, fileName);
+      const fileContents = await fs.readFile(fullPath, "utf8");
+      const { data } = matter(fileContents);
+      return {
+        id,
+        ...data,
+      };
+    })
+  );
+  return post;
+}
+
+export async function getPosts(fileDirectory, page) {
+  let post = await getAllPosts(fileDirectory, page);
+  return getSlicedPost(post, page);
+}
 
-  const data = await Promise.all(dataPromises);
+function getSlicedPost(post, page) {
   const itemsPerPage = 6;
   // Calculate the start and end indices for the current page
   const startIndex = (page - 1) * itemsPerPage;
   const endIndex = startIndex + itemsPerPage;
-  const slicedData = Array.isArray(data)
-    ? data.slice(startIndex, endIndex)
+  const slicedData = Array.isArray(post)
+    ? post.slice(startIndex, endIndex)
     : [];
-  const response = { data: slicedData, total: data?.length, blogs: data };
+  const response = { data: slicedData, total: post?.length };
+
   return response;
 }
+
+export async function getPostsBySearch(fileDirectory, page, search) {
+  const post = await getAllPosts(fileDirectory);
+  const filterBlog = post.filter((e) => {
+    return e.title.toLowerCase().includes(search.toLowerCase());
+  });
+  let pageNo = filterBlog.length > 6 ? page : page == 1 ? 1 : 0;
+  const slicedPost = getSlicedPost(filterBlog, pageNo);
+  return slicedPost;
+}