feat(mod): show latest mod author blog posts

This commit is contained in:
enes 2024-11-05 16:43:08 +01:00
parent a3bec707b0
commit 1d0f27d255

View File

@ -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'>
<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>
<DisplayModAuthorBlogs />
<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>
)
}