fix: peek link

Signed-off-by: Innei <i@innei.in>
Innei · Jul 4, 2023 · 703cde8 · 703cde8 · vercel · Jul 4, 2023
1 parent 5fffb75
commit 703cde8
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 22 deletions.
diff --git 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
@@ -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>
           )
         })}