[Task] New Search page

package.json

@@ -21,6 +21,7 @@
         "axios": "^0.27.2",
         "dotenv": "^16.0.1",
         "framer-motion": "^6.5.1",
+        "fuse.js": "^6.6.2",
         "node-html-parser": "^5.3.3",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",

src/pages/Searchpage/Searchpage.tsx

@@ -1,19 +1,102 @@
-import React from 'react';
+import useFetch from '@/hooks/useFetch';
+import { fetchAllPost } from '@/service/ghostAPI';
+import React, { useEffect, useState } from 'react';
+import Fuse from 'fuse.js';
 // import { listOfPosts } from '../Homepage/Homepage';
-import FilterAndCategory from '../../components/FilterAndCategory';
+import { useParams } from 'react-router-dom';
+import {
+    Pagination as PaginationType,
+    PostOrPage,
+} from '@tryghost/content-api';
+import { MAX_POST } from '@/types/constant';
+import Pagination from '@/components/Pagination';
+import BlogPost from '@/components/BlogPost';
 import BaseLayout from '../../layout/BaseLayout';
+import Loading from '../Loading';
+import PageNotFound from '../PageNotFound';
 
-const Searchpage: React.FC<{}> = () => (
-    <BaseLayout>
-        <div className="min-h-screen bg-gradient-to-b from-Orange to-LightOrange">
-            <FilterAndCategory className="hidden" />
-            <section className="grid mx-auto max-w-[85%] md:grid-cols-2 place-items-center gap-4 lg:grid-cols-3 py-4">
-                {/* {listOfPosts.map((post) => (
-                    <BlogPost {...post} />
-                ))} */}
-            </section>
-        </div>
-    </BaseLayout>
-);
+const Searchpage: React.FC<{}> = () => {
+    const [page, setPage] = useState<number>(1);
+    const { data, isLoading, error } = useFetch(fetchAllPost());
+
+    const { q } = useParams();
+
+    const options = {
+        keys: ['title', 'authors.name', 'tags.name'],
+    };
+
+    const fuse = new Fuse(data, options);
+
+    const result = fuse.search<PostOrPage>(`${q}`);
+
+    const [pagination, setPagination] = useState<PaginationType>({
+        page,
+        limit: MAX_POST,
+        pages: Math.ceil(result.length / MAX_POST),
+        total: result.length,
+        next: page !== Math.ceil(result.length / MAX_POST) ? page + 1 : null,
+        prev: page !== 1 ? page - 1 : null,
+    });
+
+    useEffect(() => {
+        setPagination({
+            ...pagination,
+            page,
+            pages: Math.ceil(result.length / MAX_POST),
+            total: result.length,
+            next:
+                page !== Math.ceil(result.length / MAX_POST) ? page + 1 : null,
+            prev: page !== 1 ? page - 1 : null,
+        });
+    }, [page]);
+
+    if (isLoading) {
+        return <Loading />;
+    }
+    if (error) {
+        return <PageNotFound />;
+    }
+    return (
+        <BaseLayout>
+            <div>
+                <div className="bg-gradient-to-b from-[#FF8952] to-[#F9DCB0] py-20 min-h-screen">
+                    <div className="container max-w-screen-xl mx-auto px-[3.75rem]">
+                        <div className="my-4">
+                            <Pagination
+                                pagination={pagination}
+                                currentPage={page}
+                                setPage={setPage}
+                            />
+                        </div>
+                        <div className="flex justify-center">
+                            <div className="grid place-items-stretch lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4">
+                                {result
+                                    .map((item) => item.item)
+                                    .slice(
+                                        (page - 1) * MAX_POST,
+                                        page * MAX_POST
+                                    )
+                                    .map((item) => (
+                                        <BlogPost
+                                            key={item.slug}
+                                            slug={item.slug}
+                                            id={item.id}
+                                            title={item.title}
+                                            published_at={item.published_at}
+                                            primary_author={item.primary_author}
+                                            excerpt={item.excerpt}
+                                            feature_image={item.feature_image}
+                                            url={item.slug}
+                                            tags={item.tags}
+                                        />
+                                    ))}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </BaseLayout>
+    );
+};
 
 export default Searchpage;

src/service/ghostAPI.ts

@@ -24,6 +24,20 @@ export const fetchPost = async (page?: number) => {
     return errMessage;
 };
 
+export const fetchAllPost = async () => {
+    let errMessage;
+    try {
+        const listAllPosts: Posts = await GhostAPI.posts.browse({
+            limit: 'all',
+            include: ['tags', 'authors'],
+        });
+        return listAllPosts;
+    } catch (err: any) {
+        errMessage = err.message || 'An error occured from server';
+    }
+    return errMessage;
+};
+
 export const fetchSinglePost = async (postId: string) => {
     let errMessage;
     let data;

test.js

@@ -0,0 +1,16 @@
+const Fuse = require('fuse.js');
+
+const list = [
+    { title: 'fast and furious 8', tag: 'race' },
+    { title: '2 fast and 2 furious', tag: 'race' },
+    { title: 'up', tag: 'adventure' },
+];
+
+const option = {
+    keys: ['title', 'tag'],
+};
+
+const fuse = new Fuse(list, option);
+
+const result = fuse.search('race');
+console.log(result);

yarn.lock

@@ -6503,6 +6503,11 @@ functions-have-names@^1.2.2:
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
+fuse.js@^6.6.2:
+  version "6.6.2"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-6.6.2.tgz#fe463fed4b98c0226ac3da2856a415576dc9a111"
+  integrity sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA==
+
 gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"