import { formatDate } from 'date-fns' import DOMPurify from 'dompurify' import { Filter, nip19 } from 'nostr-tools' import { useRef, useState } from 'react' import { useNavigate, useParams } from 'react-router-dom' import { toast } from 'react-toastify' import { BlogCard } from '../components/BlogCard' import { LoadingSpinner } from '../components/LoadingSpinner' import { ProfileSection } from '../components/ProfileSection' import { RelayController } from '../controllers' import { useAppSelector, useDidMount } from '../hooks' import '../styles/comments.css' import '../styles/downloads.css' import '../styles/innerPage.css' import '../styles/post.css' import '../styles/reactions.css' import '../styles/styles.css' import '../styles/tabs.css' import '../styles/tags.css' import '../styles/write.css' import { ModDetails } from '../types' import { copyTextToClipboard, extractModData, getFilenameFromUrl, log, LogType } from '../utils' import saveAs from 'file-saver' export const InnerModPage = () => { const { nevent } = useParams() const [modData, setModData] = useState() const [isFetching, setIsFetching] = useState(true) useDidMount(async () => { if (nevent) { const decoded = nip19.decode<'nevent'>(nevent as `nevent1${string}`) const eventId = decoded.data.id const kind = decoded.data.kind const author = decoded.data.author const relays = decoded.data.relays || [] const filter: Filter = { ids: [eventId] } if (kind) filter.kinds = [kind] if (author) filter.authors = [author] RelayController.getInstance() .fetchEvent(filter, relays) .then((event) => { if (event) { const extracted = extractModData(event) setModData(extracted) } }) .catch((err) => { log( true, LogType.Error, 'An error occurred in fetching mod details from relays', err ) toast.error('An error occurred in fetching mod details from relays') }) .finally(() => { setIsFetching(false) }) } }) const oldDownloadListRef = useRef(null) const handleViewOldLinks = () => { if (oldDownloadListRef.current) { // Toggle styles if (oldDownloadListRef.current.style.height === '0px') { // Enable styles oldDownloadListRef.current.style.padding = '' oldDownloadListRef.current.style.height = '' oldDownloadListRef.current.style.border = '' } else { // Disable styles oldDownloadListRef.current.style.padding = '0' oldDownloadListRef.current.style.height = '0' oldDownloadListRef.current.style.border = 'unset' } } } if (isFetching) return if (!modData) return null return (

Mod Download

{modData.downloadUrls.length > 0 && (
)} {modData.downloadUrls.length > 1 && ( <>
{modData.downloadUrls .slice(1) .map((download, index) => ( ))}
)}

Creator's Blog Posts

) } type GameProps = { game: string author: string } const Game = ({ game, author }: GameProps) => { const navigate = useNavigate() const userState = useAppSelector((state) => state.user) return (

Mod for:  {game}

) } type BodyProps = { featuredImageUrl: string title: string body: string screenshotsUrls: string[] tags: string[] } const Body = ({ featuredImageUrl, title, body, screenshotsUrls, tags }: BodyProps) => { const postBodyRef = useRef(null) const viewFullPostBtnRef = useRef(null) const viewFullPost = () => { if (postBodyRef.current && viewFullPostBtnRef.current) { postBodyRef.current.style.maxHeight = 'unset' postBodyRef.current.style.padding = 'unset' viewFullPostBtnRef.current.style.display = 'none' } } return (

{title}

View

{screenshotsUrls.map((url, index) => ( {`ScreenShot-${index}`} ))}
{tags.map((tag, index) => ( {tag} ))}
) } const Interactions = () => { return (

420

69k

4.2k

69

) } type PublishDetailsProps = { published_at: number edited_at: number site: string } const PublishDetails = ({ published_at, edited_at, site }: PublishDetailsProps) => { return (

{formatDate( (published_at !== -1 ? published_at : edited_at) * 1000, 'dd/m/yyyy' )}

{formatDate(edited_at * 1000, 'dd/m/yyyy')}

{site}
) } type DownloadProps = { url: string } const Download = ({ url }: DownloadProps) => { const handleDownload = () => { // Get the filename from the URL const filename = getFilenameFromUrl(url) saveAs(url, filename) } return (

Ratings:

420

420

420

4,200

4,200

4,200

) } const Comments = () => { return (

Comments

) }