diff --git a/src/components/ContentPreview/PollPreview.tsx b/src/components/ContentPreview/PollPreview.tsx index 77e58d6..f3b7282 100644 --- a/src/components/ContentPreview/PollPreview.tsx +++ b/src/components/ContentPreview/PollPreview.tsx @@ -1,4 +1,6 @@ +import { POLL_TYPE } from '@/constants' import { useTranslatedEvent } from '@/hooks' +import { getPollMetadataFromEvent } from '@/lib/event-metadata' import { getEmojiInfosFromEmojiTags } from '@/lib/tag' import { cn } from '@/lib/utils' import { Event } from 'nostr-tools' @@ -10,15 +12,53 @@ export default function PollPreview({ event, className }: { event: Event; classN const { t } = useTranslation() const translatedEvent = useTranslatedEvent(event.id) const emojiInfos = useMemo(() => getEmojiInfosFromEmojiTags(event.tags), [event]) + const poll = useMemo( + () => getPollMetadataFromEvent(translatedEvent ?? event), + [event, translatedEvent] + ) + const content = (translatedEvent?.content ?? event.content)?.trim() return (
- [{t('Poll')}]{' '} - +
+ [{t('Poll')}] + {poll?.pollType === POLL_TYPE.MULTIPLE_CHOICE && ( + ({t('Multiple choice')}) + )} +
+ {content ? ( +
+ +
+ ) : null} + {poll && poll.options.length > 0 ? ( +
+ {poll.options.map((option) => ( +
+
+
+ {option.label || t('Option')} +
+
+
+ ))} +
+ ) : poll ? ( +
+ {t('Poll with no options')} +
+ ) : ( +
+ {content || t('Poll')} +
+ )}
) } diff --git a/src/components/PostEditor/PollEditor.tsx b/src/components/PostEditor/PollEditor.tsx index 48ccc13..944c4f2 100644 --- a/src/components/PostEditor/PollEditor.tsx +++ b/src/components/PostEditor/PollEditor.tsx @@ -8,7 +8,6 @@ import dayjs from 'dayjs' import { Eraser, X } from 'lucide-react' import { Dispatch, SetStateAction, useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' -import AlertCard from '../AlertCard' export default function PollEditor({ pollCreateData, @@ -123,19 +122,6 @@ export default function PollEditor({ placeholder="wss://relay1.com, wss://relay2.com" /> - -
- - - -
) } diff --git a/src/components/PostEditor/PostContent.tsx b/src/components/PostEditor/PostContent.tsx index 39c35d7..f691537 100644 --- a/src/components/PostEditor/PostContent.tsx +++ b/src/components/PostEditor/PostContent.tsx @@ -491,6 +491,7 @@ export default function PostContent({ onUploadEnd={handleUploadEnd} kind={isHighlight ? kinds.Highlights : isPublicMessage ? ExtendedKind.PUBLIC_MESSAGE : isPoll ? ExtendedKind.POLL : kinds.ShortTextNote} highlightData={isHighlight ? highlightData : undefined} + pollCreateData={isPoll ? pollCreateData : undefined} /> {isPoll && ( { // Clean tracking parameters from URLs in the preview const cleanedContent = content.replace( @@ -70,19 +76,36 @@ export default function Preview({ } } + // Build poll tags if this is a poll + let pollTags: string[][] = [] + if (kind === ExtendedKind.POLL && pollCreateData) { + const validOptions = pollCreateData.options.filter((opt) => opt.trim()) + pollTags.push(...validOptions.map((option) => ['option', randomString(9), option.trim()])) + pollTags.push(['polltype', pollCreateData.isMultipleChoice ? POLL_TYPE.MULTIPLE_CHOICE : POLL_TYPE.SINGLE_CHOICE]) + if (pollCreateData.endsAt) { + pollTags.push(['endsAt', pollCreateData.endsAt.toString()]) + } + if (pollCreateData.relays.length > 0) { + pollCreateData.relays.forEach((relay) => { + pollTags.push(['relay', relay]) + }) + } + } + return { content: processed, emojiTags: tags, - highlightTags + highlightTags, + pollTags } }, - [content, kind, highlightData] + [content, kind, highlightData, pollCreateData] ) - // Combine emoji tags and highlight tags + // Combine emoji tags, highlight tags, and poll tags const allTags = useMemo(() => { - return [...emojiTags, ...highlightTags] - }, [emojiTags, highlightTags]) + return [...emojiTags, ...highlightTags, ...pollTags] + }, [emojiTags, highlightTags, pollTags]) const fakeEvent = useMemo(() => { return createFakeEvent({ @@ -92,6 +115,18 @@ export default function Preview({ }) }, [processedContent, allTags, kind]) + // For polls, use ContentPreview to show poll properly + if (kind === ExtendedKind.POLL) { + return ( + + + + ) + } + // For highlights, use the Highlight component for proper formatting if (kind === kinds.Highlights) { return ( diff --git a/src/components/PostEditor/PostTextarea/index.tsx b/src/components/PostEditor/PostTextarea/index.tsx index 6aac693..1375369 100644 --- a/src/components/PostEditor/PostTextarea/index.tsx +++ b/src/components/PostEditor/PostTextarea/index.tsx @@ -43,6 +43,7 @@ const PostTextarea = forwardRef< onUploadEnd?: (file: File) => void kind?: number highlightData?: HighlightData + pollCreateData?: import('@/types').TPollCreateData } >( ( @@ -57,7 +58,8 @@ const PostTextarea = forwardRef< onUploadProgress, onUploadEnd, kind = 1, - highlightData + highlightData, + pollCreateData }, ref ) => { @@ -173,7 +175,7 @@ const PostTextarea = forwardRef< - + )