From 703cde8a5d0c05c8fa144b8bdd718ddc7eb634fb Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Tue, 4 Jul 2023 12:40:33 +0800
Subject: [PATCH] fix: peek link

Signed-off-by: Innei <i@innei.in>
---
 src/components/widgets/peek/PeekLink.tsx    | 38 +++++++++++----------
 src/components/widgets/post/PostRelated.tsx |  8 ++---
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/components/widgets/peek/PeekLink.tsx b/src/components/widgets/peek/PeekLink.tsx
index 388c34e98f..bb98d852cd 100644
--- a/src/components/widgets/peek/PeekLink.tsx
+++ b/src/components/widgets/peek/PeekLink.tsx
@@ -6,9 +6,7 @@ import type { FC, PropsWithChildren, SyntheticEvent } from 'react'
 import { useIsMobile } from '~/atoms'
 import { useModalStack } from '~/providers/root/modal-stack-provider'
 
-import { NotePreview } from './NotePreview'
 import { PeekModal } from './PeekModal'
-import { PostPreview } from './PostPreview'
 
 export const PeekLink: FC<
   {
@@ -21,27 +19,31 @@ export const PeekLink: FC<
   const isMobile = useIsMobile()
   const { present } = useModalStack()
   const handlePeek = useCallback(
-    (e: SyntheticEvent) => {
+    async (e: SyntheticEvent) => {
       if (isMobile) return
 
       if (href.startsWith('/notes/')) {
-        {
-          e.preventDefault()
-          present({
-            clickOutsideToDismiss: true,
-            title: 'Preview',
-            modalClassName: 'flex justify-center',
-            modalContainerClassName: 'flex justify-center',
-            CustomModalComponent: () => (
-              <PeekModal to={href}>
-                <NotePreview noteId={parseInt(href.split('/').pop()!)} />
-              </PeekModal>
-            ),
-            content: () => null,
-          })
-        }
+        e.preventDefault()
+        const NotePreview = await import('./NotePreview').then(
+          (module) => module.NotePreview,
+        )
+        present({
+          clickOutsideToDismiss: true,
+          title: 'Preview',
+          modalClassName: 'flex justify-center',
+          modalContainerClassName: 'flex justify-center',
+          CustomModalComponent: () => (
+            <PeekModal to={href}>
+              <NotePreview noteId={parseInt(href.split('/').pop()!)} />
+            </PeekModal>
+          ),
+          content: () => null,
+        })
       } else if (href.startsWith('/posts/')) {
         e.preventDefault()
+        const PostPreview = await import('./PostPreview').then(
+          (module) => module.PostPreview,
+        )
         const splitpath = href.split('/')
         const slug = splitpath.pop()!
         const category = splitpath.pop()!
diff --git a/src/components/widgets/post/PostRelated.tsx b/src/components/widgets/post/PostRelated.tsx
index 0f4ef866f9..e38a1076ac 100644
--- a/src/components/widgets/post/PostRelated.tsx
+++ b/src/components/widgets/post/PostRelated.tsx
@@ -1,10 +1,10 @@
 'use client'
 
-import Link from 'next/link'
-
 import { Divider } from '~/components/ui/divider'
 import { useCurrentPostDataSelector } from '~/providers/post/CurrentPostDataProvider'
 
+import { PeekLink } from '../peek/PeekLink'
+
 export const PostRelated = () => {
   const related = useCurrentPostDataSelector((s) => s?.related)
   if (!related) {
@@ -24,12 +24,12 @@ export const PostRelated = () => {
         {related.map((post) => {
           return (
             <li key={post.id}>
-              <Link
+              <PeekLink
                 href={`/posts/${post.category.slug}/${post.slug}`}
                 className="underline-current underline-dashed leading-10 underline"
               >
                 {post.title}
-              </Link>
+              </PeekLink>
             </li>
           )
         })}