From 93fa12a25bde9cbf40e901a95bb3a70115a45cd2 Mon Sep 17 00:00:00 2001
From: Sat Naing <satnaingdev@gmail.com>
Date: Sun, 25 Sep 2022 19:11:19 +0630
Subject: [PATCH] Update search result url with slugified url

---
 src/components/Search.tsx | 29 +++++++++++++----------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 3abdeaf..82f3273 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -2,24 +2,21 @@
 import Fuse from "fuse.js";
 import { useEffect, useState } from "react";
 import Card from "@components/Card";
+import slugify from "@utils/slugify";
 import type { Frontmatter } from "src/types";
 
+type SearchItem = {
+  title: string;
+  description: string;
+  frontmatter: Frontmatter;
+};
+
 interface Props {
-  searchList: {
-    title: string;
-    description: string;
-    frontmatter: Frontmatter;
-    slug: string;
-  }[];
+  searchList: SearchItem[];
 }
 
 interface SearchResult {
-  item: {
-    title: string;
-    description: string;
-    frontmatter: Frontmatter;
-    slug: string;
-  };
+  item: SearchItem;
   refIndex: number;
 }
 
@@ -79,11 +76,11 @@ export default function SearchBar({ searchList }: Props) {
 
       <ul>
         {searchResults &&
-          searchResults.map((result) => (
+          searchResults.map(({ item, refIndex }) => (
             <Card
-              post={result.item.frontmatter}
-              href={`/posts/${result.item.slug}`}
-              key={`${result.refIndex}-${result.item.slug}`}
+              post={item.frontmatter}
+              href={`/posts/${slugify(item.frontmatter)}`}
+              key={`${refIndex}-${slugify(item.frontmatter)}`}
             />
           ))}
       </ul>