degmods/degmods.com
6
1
Fork 0
Code Issues 32 Pull Requests Actions Packages Projects 3 Releases Wiki Activity

feat(feed): add quote repost popup

Browse Source
This commit is contained in:
en 2025-02-14 13:50:22 +01:00
parent ddea6db14a
commit b58b38e703
3 changed files with 92 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Notes/Note.tsx
View File

@ -4,7 +4,6 @@ import {
NDKKind,
NDKSubscriptionCacheUsage
} from '@nostr-dev-kit/ndk'
import { AlertPopup } from 'components/AlertPopup'
import { CommentContent } from 'components/comment/CommentContent'
import { Reactions } from 'components/comment/Reactions'
import { Zap } from 'components/comment/Zap'
@ -18,8 +17,8 @@ import { Link } from 'react-router-dom'
import { appRoutes, getProfilePageRoute } from 'routes'
import { UserProfile } from 'types'
import { hexToNpub } from 'utils'
import { NoteSubmit } from './NoteSubmit'
import { NoteRepostPopup } from './NoteRepostPopup'
import { NoteQuoteRepostPopup } from './NoteQuoteRepostPopup'
interface NoteProps {
ndkEvent: NDKEvent
@ -138,12 +137,6 @@ export const Note = ({ ndkEvent }: NoteProps) => {
</>
) : null
const handleQuoteRepost = async (confirm: boolean) => {
setShowQuoteRepostPopup(false)
if (!confirm) return
}
const handleRepost = async (confirm: boolean) => {
setShowRepostPopup(false)
@ -227,25 +220,14 @@ export const Note = ({ ndkEvent }: NoteProps) => {
<div className='IBMSMSMBSSCL_CAElementLoad'></div>
</div>
</div>
{/* TODO: new popup */}
{showQuoteRepostPopup && (
<AlertPopup
handleConfirm={handleQuoteRepost}
<NoteQuoteRepostPopup
ndkEvent={repostEvent || ndkEvent}
handleClose={() => setShowQuoteRepostPopup(false)}
header={'Quote Repost'}
label={``}
yesButtonLabel='Post'
noButtonLabel='Cancel'
>
<NoteSubmit
initialContent={`\n\n${
repostEvent?.encode() || ndkEvent.encode()
}`}
/>
</AlertPopup>
/>
)}
{/* Repost, Kind 6 */}
{/* Repost, Kind 6 */}
{!isUsersRepost && (
<div
className={`IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAERepost ${

62
src/components/Notes/NoteQuoteRepostPopup.tsx
View File

@ -1 +1,61 @@
//TODO: quote repost popup
import { createPortal } from 'react-dom'
import { PropsWithChildren } from 'react'
import { NDKEvent } from '@nostr-dev-kit/ndk'
import { NoteSubmit } from './NoteSubmit'
interface NoteQuoteRepostPopup {
ndkEvent: NDKEvent
handleClose: () => void
}
export const NoteQuoteRepostPopup = ({
ndkEvent,
handleClose
}: PropsWithChildren<NoteQuoteRepostPopup>) => {
const content = ndkEvent.encode()
return createPortal(
<div className='popUpMain'>
<div className='ContainerMain'>
<div className='popUpMainCardWrapper'>
<div className='popUpMainCard'>
<div className='popUpMainCardTop'>
<div className='popUpMainCardTopInfo'>
<h3>Quote Repost</h3>
</div>
<div className='popUpMainCardTopClose' onClick={handleClose}>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='-96 0 512 512'
width='1em'
height='1em'
fill='currentColor'
style={{ zIndex: 1 }}
>
<path d='M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z'></path>
</svg>
</div>
</div>
<div className='pUMCB_Zaps'>
<div className='pUMCB_ZapsInside'>
<div className='inputLabelWrapperMain'>
<label
className='form-label labelMain'
style={{ fontWeight: 'bold' }}
>
Quote repost this?
</label>
<NoteSubmit
initialContent={`\n\n${content}`}
handleClose={handleClose}
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>,
document.body
)
}

30
src/components/Notes/NoteSubmit.tsx
View File

@ -4,26 +4,37 @@ import { useAppSelector } from 'hooks'
import { useProfile } from 'hooks/useProfile'
import { Navigate, useSubmit } from 'react-router-dom'
import { appRoutes } from 'routes'
import { useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import { adjustTextareaHeight } from 'utils'
import { NotePreview } from './NotePreview'
interface NoteSubmitProps {
initialContent?: string | undefined
handleClose?: () => void | undefined
}
export const NoteSubmit = ({ initialContent }: NoteSubmitProps) => {
export const NoteSubmit = ({
initialContent,
handleClose
}: NoteSubmitProps) => {
const userState = useAppSelector((state) => state.user)
const profile = useProfile(userState.user?.pubkey as string | undefined, {
cacheUsage: NDKSubscriptionCacheUsage.PARALLEL
})
const [content, setContent] = useState(initialContent ?? '')
const [nsfw, setNsfw] = useState(false)
const [showPreview, setShowPreview] = useState(false)
const [showPreview, setShowPreview] = useState(!!initialContent)
const image = profile?.image || FALLBACK_PROFILE_IMAGE
const ref = useRef<HTMLTextAreaElement>(null)
const submit = useSubmit()
useEffect(() => {
if (ref.current && !!initialContent) {
adjustTextareaHeight(ref.current)
ref.current.focus()
}
}, [initialContent])
const handleContentChange = (
event: React.ChangeEvent<HTMLTextAreaElement>
) => {
@ -72,6 +83,7 @@ export const NoteSubmit = ({ initialContent }: NoteSubmitProps) => {
name='content'
className='inputMain feedPostsPostInsideInput'
placeholder='Watcha thinking about?'
ref={ref}
value={content}
onChange={handleContentChange}
/>
@ -97,6 +109,16 @@ export const NoteSubmit = ({ initialContent }: NoteSubmitProps) => {
<div
style={{ display: 'flex', flexDirection: 'row', gridGap: '10px' }}
>
{typeof handleClose === 'function' && (
<button
className='btn btnMain'
type='button'
style={{ padding: '5px 20px', borderRadius: '8px' }}
onClick={handleClose}
>
Close
</button>
)}
<button
className='btn btnMain'
type='button'