From e6805a408704da57f5932c4ebffdee7d1385aba8 Mon Sep 17 00:00:00 2001
From: Thaddeus Jiang <thaddeusjiang@gmail.com>
Date: Fri, 22 Sep 2023 16:21:16 +0900
Subject: [PATCH] feat: hightlight searched text (#37)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 区分 first load and load more

* feat: 🎸 highlight searched text
---
 components/ui/MemoCard.tsx                  | 22 +++++++++++++++++++--
 pages/settings/avatars/[username]/memos.tsx | 17 ++++++++--------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/components/ui/MemoCard.tsx b/components/ui/MemoCard.tsx
index 2f21538..a368600 100644
--- a/components/ui/MemoCard.tsx
+++ b/components/ui/MemoCard.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef } from "react"
 import ReactMarkdown from "react-markdown"
 
 import { IconDots } from "@tabler/icons-react"
@@ -8,8 +9,25 @@ import remarkGfm from "remark-gfm"
 
 import { Memo } from "~/types"
 
-export const MemoCard = ({ memo, onDelete }: { memo: Memo; onDelete: (id: string) => void }) => {
+export const MemoCard = (props: { memo: Memo; onDelete: (id: string) => void; highlight: string }) => {
+  const { memo, onDelete, highlight } = props
   const createdAt = dayjs(memo.created_at).format("YYYY-MM-DD HH:mm")
+
+  const ref = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    const words = highlight.trim().split(" ").filter(Boolean)
+    words.forEach((word) => {
+      let reg = new RegExp(word, "gi")
+
+      if (ref.current && ref.current instanceof HTMLElement) {
+        ref.current.innerHTML = ref.current.innerHTML.replace(
+          reg,
+          (match) => `<span class="bg-yellow-300 text-black">${match}</span>`
+        )
+      }
+    })
+  }, [highlight])
+
   return (
     <div className={classNames("w-full")}>
       <div className="my-2 rounded-lg bg-base-100 px-4 py-2 hover:shadow ">
@@ -36,7 +54,7 @@ export const MemoCard = ({ memo, onDelete }: { memo: Memo; onDelete: (id: string
             </div>
           </div>
         </div>
-        <article className="prose md:prose ">
+        <article ref={ref} className="prose md:prose ">
           <ReactMarkdown children={memo?.content ?? ""} remarkPlugins={[remarkGfm]} />
         </article>
       </div>
diff --git a/pages/settings/avatars/[username]/memos.tsx b/pages/settings/avatars/[username]/memos.tsx
index b6f15cd..87e7b70 100644
--- a/pages/settings/avatars/[username]/memos.tsx
+++ b/pages/settings/avatars/[username]/memos.tsx
@@ -186,24 +186,23 @@ export default function SettingsAvatarMemoPage({ avatar }: { avatar: Avatar }) {
 
           {memoCreateMutation.isLoading ? <p className="text-center text-gray-500">creating...</p> : null}
 
-          <div className="text-sm opacity-70">
-            <p>Find {count} memos</p>
-          </div>
+          {status === "loading" ? (
+            <p className=" text-gray-500">Loading...</p>
+          ) : (
+            <p className=" text-gray-500">Find {count} memos</p>
+          )}
+          {status === "error" ? <p className="text-center text-red-500">error</p> : null}
 
           {data?.pages?.map(({ items, nextCursor }) => (
             <Fragment key={nextCursor ?? "no-more"}>
               {items?.map((project: any) => (
-                <MemoCard key={project.id} memo={project} onDelete={onDelete} />
+                <MemoCard key={project.id} memo={project} onDelete={onDelete} highlight={q} />
               ))}
             </Fragment>
           ))}
 
-          {status === "error" ? <p className="text-center text-red-500">error</p> : null}
-
           <div ref={ref} className="pb-12 text-center text-gray-500">
-            {status === "loading"
-              ? "loading..."
-              : isFetchingNextPage
+            {isFetchingNextPage
               ? "load more..."
               : hasNextPage
               ? null