feat(mod): show latest mod author blog posts

src/pages/mod/index.tsx

@@ -3,7 +3,7 @@ import Link from '@tiptap/extension-link'
 import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import FsLightbox from 'fslightbox-react'
-import { nip19, UnsignedEvent } from 'nostr-tools'
+import { kinds, nip19, UnsignedEvent } from 'nostr-tools'
 import { useEffect, useRef, useState } from 'react'
 import { Link as ReactRouterLink, useParams } from 'react-router-dom'
 import { toast } from 'react-toastify'
@@ -28,7 +28,12 @@ import '../../styles/styles.css'
 import '../../styles/tabs.css'
 import '../../styles/tags.css'
 import '../../styles/write.css'
-import { DownloadUrl, ModDetails, UserRelaysType } from '../../types'
+import {
+  BlogCardDetails,
+  DownloadUrl,
+  ModDetails,
+  UserRelaysType
+} from '../../types'
 import {
   copyTextToClipboard,
   downloadFile,
@@ -46,6 +51,7 @@ import { CheckboxField } from 'components/Inputs'
 import placeholder from '../../assets/img/DEGMods Placeholder Img.png'
 import { PublishDetails } from 'components/Internal/PublishDetails'
 import { Interactions } from 'components/Internal/Interactions'
+import { extractBlogCardDetails } from 'utils/blog'
 
 export const ModPage = () => {
   const { naddr } = useParams()
@@ -189,18 +195,7 @@ export const ModPage = () => {
                   )}
                 </div>
               </div>
-              <div className='IBMSMSplitMainBigSideSec'>
+              <DisplayModAuthorBlogs />
-                <div className='IBMSMSMBSSPostsWrapper'>
-                  <h4 className='IBMSMSMBSSPostsTitle'>
-                    Creator's Blog Posts (WIP)
-                  </h4>
-                  <div className='IBMSMList IBMSMListAlt'>
-                    <BlogCard image={placeholder} />
-                    <BlogCard image={placeholder} />
-                    <BlogCard image={placeholder} />
-                  </div>
-                </div>
-              </div>
               <div className='IBMSMSplitMainBigSideSec'>
                 <Comments
                   addressable={modData}
@@ -1227,3 +1222,49 @@ const Download = ({
     </div>
   )
 }
+
+const DisplayModAuthorBlogs = () => {
+  const { naddr } = useParams()
+  const [blogs, setBlogs] = useState<Partial<BlogCardDetails>[]>()
+  const { fetchEvents } = useNDKContext()
+
+  useDidMount(() => {
+    const fetchBlogs = async () => {
+      try {
+        const decoded = nip19.decode<'naddr'>(naddr as `naddr1${string}`)
+        const { pubkey } = decoded.data
+        const latestBlogPosts = await fetchEvents({
+          authors: [pubkey],
+          kinds: [kinds.LongFormArticle],
+          limit: 3
+        })
+        setBlogs(latestBlogPosts.map(extractBlogCardDetails))
+      } catch (error) {
+        log(
+          true,
+          LogType.Error,
+          'An error occurred in fetching blog details from relays',
+          error
+        )
+        return null
+      }
+    }
+
+    fetchBlogs()
+  })
+
+  if (!blogs?.length) return null
+
+  return (
+    <div className='IBMSMSplitMainBigSideSec'>
+      <div className='IBMSMSMBSSPostsWrapper'>
+        <h4 className='IBMSMSMBSSPostsTitle'>Creator's Blog Posts</h4>
+        <div className='IBMSMList IBMSMListAlt'>
+          {blogs?.map((b) => (
+            <BlogCard key={b.id} {...b} />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}