From f1a53f3679bd2cf2af9168d66a12cf1805e73caa Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Sun, 7 May 2023 22:20:59 +0100
Subject: [PATCH] feat: use app router for site search page

---
 src/app/site/[site]/archives/page.tsx |  2 +-
 src/app/site/[site]/page.tsx          |  2 +-
 src/app/site/[site]/search/page.tsx   | 13 ++++++
 src/components/site/SiteSearch.tsx    | 62 +++++++++++++--------------
 4 files changed, 45 insertions(+), 34 deletions(-)
 create mode 100644 src/app/site/[site]/search/page.tsx

diff --git a/src/app/site/[site]/archives/page.tsx b/src/app/site/[site]/archives/page.tsx
index 987fdacb..635b2460 100644
--- a/src/app/site/[site]/archives/page.tsx
+++ b/src/app/site/[site]/archives/page.tsx
@@ -16,7 +16,7 @@ export default async function SiteArchivesPage({
   const queryClient = getQueryClient()
 
   const site = await fetchGetSite(params.site, queryClient)
-  prefetchGetPagesBySite(
+  await prefetchGetPagesBySite(
     {
       characterId: site?.characterId,
       type: "post",
diff --git a/src/app/site/[site]/page.tsx b/src/app/site/[site]/page.tsx
index 12bd1d95..359a02a0 100644
--- a/src/app/site/[site]/page.tsx
+++ b/src/app/site/[site]/page.tsx
@@ -16,7 +16,7 @@ async function SiteIndexPage({
   const queryClient = getQueryClient()
 
   const site = await fetchGetSite(params.site, queryClient)
-  prefetchGetPagesBySite(
+  await prefetchGetPagesBySite(
     {
       characterId: site?.characterId,
       type: "post",
diff --git a/src/app/site/[site]/search/page.tsx b/src/app/site/[site]/search/page.tsx
new file mode 100644
index 00000000..eb42eb5b
--- /dev/null
+++ b/src/app/site/[site]/search/page.tsx
@@ -0,0 +1,13 @@
+import { SearchInput } from "~/components/common/SearchInput"
+import { SiteSearch } from "~/components/site/SiteSearch"
+
+export default async function SiteSearchPage() {
+  return (
+    <>
+      <div className="sm:-mx-5">
+        <SearchInput />
+      </div>
+      <SiteSearch />
+    </>
+  )
+}
diff --git a/src/components/site/SiteSearch.tsx b/src/components/site/SiteSearch.tsx
index a9d6a806..396c3088 100644
--- a/src/components/site/SiteSearch.tsx
+++ b/src/components/site/SiteSearch.tsx
@@ -1,53 +1,51 @@
-import { useTranslation } from "next-i18next"
+"use client"
+
 import Link from "next/link"
-import { useRouter } from "next/router"
+import { useParams, useRouter, useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import reactStringReplace from "react-string-replace"
 
 import { Button } from "~/components/ui/Button"
 import { Image } from "~/components/ui/Image"
 import { useDate } from "~/hooks/useDate"
-import { ExpandedNote } from "~/lib/types"
+import { useTranslation } from "~/lib/i18n/client"
+import { useGetSearchPagesBySite } from "~/queries/page"
+import { useGetSite } from "~/queries/site"
 
 import { EmptyState } from "../ui/EmptyState"
 
-export const SiteSearch: React.FC<{
-  postPages?: {
-    list: ExpandedNote[]
-    count: number
-    cursor: string | null
-  }[]
-  fetchNextPage: () => void
-  hasNextPage?: boolean
-  isFetchingNextPage?: boolean
-  keyword?: string
-}> = ({
-  postPages,
-  fetchNextPage,
-  hasNextPage,
-  isFetchingNextPage,
-  keyword,
-}) => {
+export const SiteSearch: React.FC = () => {
   const router = useRouter()
-  const { t } = useTranslation(["common", "site"])
+  const { t } = useTranslation("site")
   const date = useDate()
 
+  const searchParams = useSearchParams()
+  const params = useParams()
+  const site = useGetSite(params?.site as string)
+  const keyword = searchParams?.get("q") || undefined
+  const posts = useGetSearchPagesBySite({
+    characterId: site.data?.characterId,
+    keyword,
+  })
+
   const [isMounted, setIsMounted] = useState(false)
 
   useEffect(() => {
     setIsMounted(true)
   }, [])
 
-  if (!postPages?.length) return null
-
   let currentLength = 0
 
   return (
     <>
-      {!postPages[0].count && <EmptyState />}
-      {!!postPages[0].count && (
+      <h2 className="mb-8 mt-5 text-zinc-500">
+        {posts.data?.pages?.[0].count || "0"} {t("results")}
+      </h2>
+      {posts.isLoading && <>{t("Loading")}...</>}
+      {!posts.data?.pages?.[0].count && <EmptyState />}
+      {!!posts.data?.pages?.[0].count && (
         <div className="xlog-posts space-y-8">
-          {postPages.map((posts) =>
+          {posts.data?.pages.map((posts) =>
             posts.list.map((post) => {
               currentLength++
               return (
@@ -136,20 +134,20 @@ export const SiteSearch: React.FC<{
           )}
         </div>
       )}
-      {hasNextPage && (
+      {posts.hasNextPage && posts.data?.pages[0].count && (
         <Button
           className="mt-8 w-full bg-zinc-50 text-sm"
           variant="text"
-          onClick={fetchNextPage}
-          isLoading={isFetchingNextPage}
+          onClick={() => posts.fetchNextPage()}
+          isLoading={posts.isFetchingNextPage}
           aria-label="load more"
         >
           {t("load more", {
-            ns: "site",
             name: t(
-              "post" + (postPages[0].count - currentLength > 1 ? "s" : ""),
+              "post" +
+                (posts.data?.pages[0].count - currentLength > 1 ? "s" : ""),
             ),
-            count: postPages[0].count - currentLength,
+            count: posts.data?.pages[0].count - currentLength,
           })}
         </Button>
       )}