118 lines
4.4 KiB
TypeScript
118 lines
4.4 KiB
TypeScript
import { AlertPopup } from 'components/AlertPopup'
|
|
import { useAppSelector, useDidMount } from 'hooks'
|
|
import { useState } from 'react'
|
|
import { NDKEvent } from '@nostr-dev-kit/ndk'
|
|
import { Link } from 'react-router-dom'
|
|
import { CommentContent } from 'components/comment/CommentContent'
|
|
import { getProfilePageRoute } from 'routes'
|
|
import { nip19 } from 'nostr-tools'
|
|
import { UserProfile } from 'types'
|
|
import { hexToNpub } from 'utils'
|
|
import { formatDate } from 'date-fns'
|
|
|
|
interface NoteRepostProps {
|
|
ndkEvent: NDKEvent
|
|
handleConfirm: (confirm: boolean) => void
|
|
handleClose: () => void
|
|
}
|
|
|
|
export const NoteRepost = ({
|
|
ndkEvent,
|
|
handleConfirm,
|
|
handleClose
|
|
}: NoteRepostProps) => {
|
|
const userState = useAppSelector((state) => state.user)
|
|
const userPubkey = userState.user?.pubkey as string | undefined
|
|
const [content, setContent] = useState<string>('')
|
|
const [profile, setProfile] = useState<UserProfile>()
|
|
|
|
useDidMount(async () => {
|
|
const repost = await ndkEvent.repost(false)
|
|
setContent(JSON.parse(repost.content).content)
|
|
ndkEvent.author.fetchProfile().then((res) => setProfile(res))
|
|
})
|
|
|
|
const profileRoute = getProfilePageRoute(
|
|
nip19.nprofileEncode({
|
|
pubkey: ndkEvent.pubkey
|
|
})
|
|
)
|
|
|
|
const reposterRoute = getProfilePageRoute(
|
|
nip19.nprofileEncode({
|
|
pubkey: userPubkey!
|
|
})
|
|
)
|
|
|
|
return (
|
|
<AlertPopup
|
|
handleConfirm={handleConfirm}
|
|
handleClose={handleClose}
|
|
header={'Repost'}
|
|
label={`Repost this?`}
|
|
yesButtonLabel='Repost Now'
|
|
noButtonLabel='Never mind'
|
|
>
|
|
<div className='IBMSMSMBSSCL_CommentQP'>
|
|
<div className='IBMSMSMBSSCL_Comment'>
|
|
<div className='IBMSMSMBSSCL_CommentRepost'>
|
|
<div className='IBMSMSMBSSCL_CommentRepostVisual'>
|
|
<svg
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
viewBox='0 -64 640 640'
|
|
width='1em'
|
|
height='1em'
|
|
fill='currentColor'
|
|
>
|
|
<path d='M614.2 334.8C610.5 325.8 601.7 319.1 592 319.1H544V176C544 131.9 508.1 96 464 96h-128c-17.67 0-32 14.31-32 32s14.33 32 32 32h128C472.8 160 480 167.2 480 176v143.1h-48c-9.703 0-18.45 5.844-22.17 14.82s-1.656 19.29 5.203 26.16l80 80.02C499.7 445.7 505.9 448 512 448s12.28-2.344 16.97-7.031l80-80.02C615.8 354.1 617.9 343.8 614.2 334.8zM304 352h-128C167.2 352 160 344.8 160 336V192h48c9.703 0 18.45-5.844 22.17-14.82s1.656-19.29-5.203-26.16l-80-80.02C140.3 66.34 134.1 64 128 64S115.7 66.34 111 71.03l-80 80.02C24.17 157.9 22.11 168.2 25.83 177.2S38.3 192 48 192H96V336C96 380.1 131.9 416 176 416h128c17.67 0 32-14.31 32-32S321.7 352 304 352z'></path>
|
|
</svg>
|
|
</div>
|
|
<p className='IBMSMSMBSSCL_CommentRepostText'>
|
|
<Link to={reposterRoute}>
|
|
{userState.user?.displayName || userState.user?.name || ''}{' '}
|
|
</Link>
|
|
Reposted...
|
|
</p>
|
|
</div>
|
|
<div className='IBMSMSMBSSCL_CommentTop'>
|
|
<div className='IBMSMSMBSSCL_CommentTopPPWrapper'>
|
|
<Link
|
|
className='IBMSMSMBSSCL_CommentTopPP'
|
|
to={profileRoute}
|
|
style={{
|
|
background: `url('${
|
|
profile?.image || ''
|
|
}') center / cover no-repeat`
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className='IBMSMSMBSSCL_CommentTopDetailsWrapper'>
|
|
<div className='IBMSMSMBSSCL_CommentTopDetails'>
|
|
<Link className='IBMSMSMBSSCL_CTD_Name' to={profileRoute}>
|
|
{profile?.displayName || profile?.name || ''}{' '}
|
|
</Link>
|
|
<Link className='IBMSMSMBSSCL_CTD_Address' to={profileRoute}>
|
|
{hexToNpub(ndkEvent.pubkey)}
|
|
</Link>
|
|
</div>
|
|
{ndkEvent.created_at && (
|
|
<div className='IBMSMSMBSSCL_CommentActionsDetails'>
|
|
<a className='IBMSMSMBSSCL_CADTime'>
|
|
{formatDate(ndkEvent.created_at * 1000, 'hh:mm aa')}{' '}
|
|
</a>
|
|
<a className='IBMSMSMBSSCL_CADDate'>
|
|
{formatDate(ndkEvent.created_at * 1000, 'dd/MM/yyyy')}
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className='IBMSMSMBSSCL_CommentBottom'>
|
|
<CommentContent content={content} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AlertPopup>
|
|
)
|
|
}
|