Creating search functionality on static blog with next js, markdown and flexsearch

posts.tsx

export const posts: Array<{ id: string; title: string; description: string; date: string; tags: string[]; category: string[]; image: string; author: string; }> = [
  {
    id: "1X2",
    title: "5 Reasons Why You Shouldnt Learn Photography On Your Own",
    description: "Mollit aute nostrud voluptate amet irure consectetur commodo cupidatat elit. Non ut dolor nulla dolor duis. Anim eiusmod fugiat eiusmod ut nulla nulla labore.",
    date: "2022-11-09T08:18:10.494Z",
    tags: ["Photography"],
    category: ["Photography"],
    image: "/images/camera.jpg",
    author: "Jeanne Ballard"
  },
  {
    id: "1X3",
    title: "7 Useful Tips From Python Experts In Programming",
    description: "Eiusmod quis esse aliqua sit nostrud aliquip sunt minim irure laboris reprehenderit irure ex",
    date: "2022-11-10T07:47:21.553Z",
    tags: ["Programming", "Python", "Tips"],
    category: ["Programming"],
    image: "/images/software-developer.jpg",
    author: "Jeanne Ballard"
  },
  {
    id: "1X4",
    title: "7 Ways To Use Computer Science To Your Advantage",
    description: "Incididunt magna do magna cupidatat ullamco laboris amet. Tempor aute ipsum culpa esse ipsum veniam excepteur duis mollit irure cillum.",
    date: "2022-11-11T08:29:39.860Z",
    tags: ["Advantage", "Computer Science", "Tech"],
    category: ["Computer Science"],
    image: "/images/computer.jpg",
    author: "Emilio Tate"
  },
  {
    id: "1X5",
    title: "10 Things You Most Likely Didnt Know About Health",
    description: "Culpa laboris aliquip ea consectetur mollit ea ipsum sint qui culpa laboris dolor adipisicing proident. Et officia consequat do nulla tempor cupidatat  elit.",
    date: "2022-11-12T08:05:53.939Z",
    tags: ["Health", "Likely", "Didn't Know"],
    category: ["Health"],
    image: "/images/vegetables.jpg",
    author: "Curtis Lopez"
  },
  {
    id: "1X6",
    title: "15 Common Misconceptions About Health",
    description: "Sunt et ad ipsum consectetur culpa officia enim non magna irure consectetur qui ex.",
    date: "2022-11-13T08:07:38.708Z",
    tags: ["Health", "Misconceptions"],
    category: ["Health"],
    image: "/images/health.jpg",
    author: "DR. Jeffery Schwartz"
  },
  {
    id: "1X7",
    title: "15 Facts You Never Knew About Photography",
    description: "Dolor adipisicing adipisicing Lorem et irure veniam nisi anim excepteur mollit occaecat eu.",
    date: "2022-11-15T08:14:33.826Z",
    tags: ["15 facts", "Photography", "Jeanne Ballard facts"],
    category: ["Photography"],
    image: "/images/photographer.jpg",
    author: "Jeanne Ballard"
  },
  {
    id: "1X8",
    title: "The Five Secrets You Will Never Know About Blogging",
    description: "Non aute adipisicing anim enim et proident proident consectetur est laborum tempor.",
    date: "2022-11-22T07:20:16.517Z",
    tags: ["Blog", "five", "Secrets"],
    category: ["Blog"],
    image: "/images/blog-2.jpg",
    author: "Rajdeep singh"
  },
  {
    id: "1X9",
    title: "How Computer Science Is Going To Change Your Business Strategies",
    description: "Cupidatat occaecat dolore dolor aute enim consequat nulla dolor dolor reprehenderit irure reprehenderit nisi.",
    date: "2022-11-22T07:20:16.517Z",
    tags: ["Business Strategies", "Business"],
    category: ["Computer Science"],
    image: "/images/technology.jpg",
    author: "Emilio Tate"
  },
  {
    id: "1X10",
    title: "Photography Is Not Rocket Science! Learn Them Now!",
    description: "Est ex incididunt reprehenderit laboris anim mollit ex ut. Cupidatat nisi deserunt veniam ipsum proident consequat anim ipsum in.",
    date: "2022-11-01T08:40:19.051Z",
    tags: ["Photography", "Photo"],
    category: ["Photography"],
    image: "/images/smartphone.jpg",
    author: "Ashley Paul"
  },
  {
    id: "1X12",
    title: "Seven mind blowing Facts About Smart Phone",
    description: "Ea qui quis ad mollit enim in nostrud officia nisi id aute anim non. Adipisicing aliqua amet adipisicing consequat eiusmod anim exercitation proident quis.",
    date: "2022-02-08T08:54:26.105Z",
    tags: ["Android", "Smart Phone", "Facts"],
    category: ["Smart Phone"],
    image: "/images/ios.jpg",
    author: "Hannah Rivera"
  },
  {
    id: "1X13",
    title: "Understand The Android Features Before You Regret",
    description: "Lorem excepteur dolore ex veniam ad velit officia enim velit consequat consequat nulla eiusmod.",
    date: "2022-10-08T08:48:51.359Z",
    tags: ["Android", "Android Features"],
    category: ["Android"],
    image: "/images/android.jpg",
    author: "Linda Pittman"
  },
]

Search.tsx

import React, { useEffect, useState } from "react";
import { Index } from "flexsearch";
import { posts } from "./posts";


export default () => {

  // This will create a new search index. Here we are using all of the default options, but the docs show other choices that can be used. 

  const [index, setIndex] = useState(new Index({}));

  //  Create state variables for query and results.

  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);

  //  When the component first loads, we need to iterate through data values and add each to the search index. 

  useEffect(() => {

    posts.forEach((item) => {
      setIndex(index.add(item.id, item.title, item.description));
    });
  }, []);

  //  When the query from the search input changes, we want to update the query state and thus the results to display. 

  useEffect(() => {
    setResults(index.search(query));
  }, [query]);


  const finalResult = results.map((result) => posts.find(item => item.id === result))

  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <ul>
        {finalResult.map(item => <p>{item.title}</p>)}
      </ul>
    </div>
  );
};