diff --git a/client/src/components/PostCard/NewThreadCard.tsx b/client/src/components/PostCard/NewThreadCard.tsx index 4a4d20d..97c59d8 100644 --- a/client/src/components/PostCard/NewThreadCard.tsx +++ b/client/src/components/PostCard/NewThreadCard.tsx @@ -6,7 +6,7 @@ import { minePow } from '../../utils/mine'; import { publish } from '../../utils/relays'; import NostrImg from '../../utils/ImgUpload'; -const difficulty = 25 +const difficulty = 20 const NewThreadCard: React.FC = () => { const [comment, setComment] = useState(""); diff --git a/client/src/components/PostCard/PostCard.tsx b/client/src/components/PostCard/PostCard.tsx index 2df689b..5636f1d 100644 --- a/client/src/components/PostCard/PostCard.tsx +++ b/client/src/components/PostCard/PostCard.tsx @@ -7,6 +7,8 @@ import { useEffect, useState } from 'react'; import { subNote } from '../../utils/subscriptions'; import { getMetadata, uniqBy } from '../../utils/utils'; import { getLinkPreview } from 'link-preview-js'; +import { subNoteOnce } from '../../utils/subscriptions'; +import QuoteEmbed from './QuoteEmbed'; const colorCombos = [ 'from-red-400 to-yellow-500', @@ -59,7 +61,7 @@ const timeAgo = (unixTime: number) => { const PostCard = ({ event, metadata, replyCount }: { event: Event, metadata: Event | null, replyCount: number}) => { // Replace 10 with the actual number of comments for each post const numberOfComments = 10; - const { comment, file } = parseContent(event); + let { comment, file } = parseContent(event); const colorCombo = getColorFromHash(event.pubkey, colorCombos); const [isExpanded, setIsExpanded] = useState(false); const truncatedComment = comment.slice(0, 240); @@ -70,6 +72,13 @@ const PostCard = ({ event, metadata, replyCount }: { event: Event, metadata: Eve } const [linkPreview, setLinkPreview] = useState(null); + const [quoteEvents, setQuoteEvents] = useState([]); // Initialize state + + // Define your callback function for subGlobalFeed + const onEvent = (event: Event, relay: string) => { + setQuoteEvents((prevEvents) => [...prevEvents, event]); + console.log(event.id + ' ' + event.kind + ' ' + event.tags); + }; useEffect(() => { const urls = comment.match(/\bhttps?:\/\/\S+/gi); @@ -78,7 +87,24 @@ const PostCard = ({ event, metadata, replyCount }: { event: Event, metadata: Eve .then((preview) => setLinkPreview(preview as LinkPreview)) .catch((error) => console.error(error)); } + + const match = comment.match(/\bnostr:([a-z0-9]+)/i); + const nostrQuoteID = match && match[1]; + if (nostrQuoteID && nostrQuoteID.length > 0) { + let id_to_hex = String(nip19.decode(nostrQuoteID as string).data); + subNoteOnce(id_to_hex, onEvent); + + comment = comment.replace(/\bnostr:[a-z0-9]+\b/i, '').trim(); + } }, [comment]); + + const getMetadataEvent = (event: Event) => { + const metadataEvent = quoteEvents.find(e => e.pubkey === event.pubkey && e.kind === 0); + if (metadataEvent) { + return metadataEvent; + } + return null; + } return ( <> @@ -122,6 +148,9 @@ const PostCard = ({ event, metadata, replyCount }: { event: Event, metadata: Eve )} + {quoteEvents[0] && quoteEvents.length > 0 && ( + + )} {file !== "" && (
diff --git a/client/src/components/PostCard/QuoteEmbed.tsx b/client/src/components/PostCard/QuoteEmbed.tsx new file mode 100644 index 0000000..4119e9a --- /dev/null +++ b/client/src/components/PostCard/QuoteEmbed.tsx @@ -0,0 +1,152 @@ +import CardContainer from './CardContainer'; +import { FolderIcon } from '@heroicons/react/24/outline'; +import { parseContent } from '../../utils/content'; +import { Event } from 'nostr-tools'; +import { nip19 } from 'nostr-tools'; +import { useEffect, useState } from 'react'; +import { subNote } from '../../utils/subscriptions'; +import { getMetadata, uniqBy } from '../../utils/utils'; +import { getLinkPreview } from 'link-preview-js'; +import { subNoteOnce } from '../../utils/subscriptions'; + +const colorCombos = [ + 'from-red-400 to-yellow-500', + 'from-green-400 to-blue-500', + 'from-purple-400 to-pink-500', + 'from-yellow-400 to-orange-500', + 'from-indigo-400 to-purple-500', + 'from-pink-400 to-red-500', + 'from-blue-400 to-indigo-500', + 'from-orange-400 to-red-500', + 'from-teal-400 to-green-500', + 'from-cyan-400 to-teal-500', + 'from-lime-400 to-green-500', + 'from-amber-400 to-orange-500', + 'from-rose-400 to-pink-500', + 'from-violet-400 to-purple-500', + 'from-sky-400 to-cyan-500' +]; + +const getColorFromHash = (id: string, colors: string[]): string => { + // Create a simple hash from the event.id + let hash = 0; + for (let i = 0; i < id.length; i++) { + hash = (hash << 5) - hash + id.charCodeAt(i); + } + + // Use the hash to pick a color from the colors array + const index = Math.abs(hash) % colors.length; + return colors[index]; +}; + +const timeAgo = (unixTime: number) => { + const seconds = Math.floor((new Date().getTime() / 1000) - unixTime); + + if (seconds < 60) return `now`; + + const minutes = Math.floor(seconds / 60); + if (minutes < 60) return `${minutes}m`; + + const hours = Math.floor(minutes / 60); + if (hours < 24) return `${hours}h`; + + const days = Math.floor(hours / 24); + if (days < 7) return `${days}d`; + + const weeks = Math.floor(days / 7); + return `${weeks}w`; +}; + +const QuoteEmbed = ({ event, metadata }: { event: Event, metadata: Event | null}) => { + // Replace 10 with the actual number of comments for each post + const numberOfComments = 10; + const { comment, file } = parseContent(event); + const colorCombo = getColorFromHash(event.pubkey, colorCombos); + const [isExpanded, setIsExpanded] = useState(false); + const truncatedComment = comment.slice(0, 240); + + let metadataParsed = null; + if (metadata !== null) { + metadataParsed = getMetadata(metadata); + } + + const [linkPreview, setLinkPreview] = useState(null); + + useEffect(() => { + const urls = comment.match(/\bhttps?:\/\/\S+/gi); + if (urls && urls.length > 0) { + getLinkPreview(urls[0]) + .then((preview) => setLinkPreview(preview as LinkPreview)) + .catch((error) => console.error(error)); + } + }, [comment]); + + return ( +
+
+
+
+ {metadataParsed ? + <> + +
{metadataParsed.name}
+ + : + <> +
+
Anonymous
+ + } +
+
+
+ {isExpanded ? comment : truncatedComment} + {comment.length > 240 && ( + + )} + {linkPreview && linkPreview.images && linkPreview.images.length > 0 && ( + + )} +
+ {file !== "" && ( +
+ +
+ )} +
+
+ ); +}; + +interface LinkPreview { + url: string; + title: string; + siteName?: string; + description?: string; + mediaType: string; + contentType?: string; + images: string[]; + videos: { + url?: string; + secureUrl?: string; + type?: string; + width?: string; + height?: string; + [key: string]: any; + }[]; + [key: string]: any; +} + +export default QuoteEmbed; \ No newline at end of file diff --git a/client/src/utils/subscriptions.ts b/client/src/utils/subscriptions.ts index 106d113..71b62f3 100644 --- a/client/src/utils/subscriptions.ts +++ b/client/src/utils/subscriptions.ts @@ -169,4 +169,38 @@ export const subNote = ( unsub: true, // TODO: probably keep this subscription also after onReply/unsubAll }); }, 200); +}; + +/** quick subscribe to a note id (nip-19) */ +export const subNoteOnce = ( + eventId: string, + onEvent: SubCallback, +) => { + const pubkeys = new Set(); + sub({ + cb: (evt, relay) => { + pubkeys.add(evt.pubkey); + onEvent(evt, relay); + }, + filter: { + ids: [eventId], + kinds: [1], + limit: 1, + }, + unsub: true, + }); + + setTimeout(() => { + // get profile info + sub({ + cb: onEvent, + filter: { + authors: Array.from(pubkeys), + kinds: [0], + limit: pubkeys.size, + }, + unsub: true, + }); + pubkeys.clear(); + }, 2000); }; \ No newline at end of file