mirror of
https://github.com/dergigi/boris.git
synced 2025-12-20 16:14:20 +01:00
refactor: extract components and utilities to keep files under 210 lines
- Extract types to src/types/bookmarks.ts - Extract utility functions to src/utils/bookmarkUtils.tsx - Extract BookmarkItem component to src/components/BookmarkItem.tsx - Extract BookmarkList component to src/components/BookmarkList.tsx - Extract bookmark fetching logic to src/services/bookmarkService.ts - Reduce main Bookmarks component from 416 to 100 lines - Maintain all functionality while improving code organization - Pass all linting and type checking
This commit is contained in:
Gigi
35
src/components/BookmarkItem.tsx
Normal file
35
src/components/BookmarkItem.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import React from 'react'
|
||||
import { IndividualBookmark } from '../types/bookmarks'
|
||||
import { formatDate, renderParsedContent } from '../utils/bookmarkUtils'
|
||||
|
||||
interface BookmarkItemProps {
|
||||
bookmark: IndividualBookmark
|
||||
index: number
|
||||
}
|
||||
|
||||
export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index }) => {
|
||||
return (
|
||||
<div key={`${bookmark.id}-${index}`} className="individual-bookmark">
|
||||
<div className="bookmark-header">
|
||||
<span className="bookmark-type">{bookmark.type}</span>
|
||||
<span className="bookmark-id">{bookmark.id.slice(0, 8)}...{bookmark.id.slice(-8)}</span>
|
||||
<span className="bookmark-date">{formatDate(bookmark.created_at)}</span>
|
||||
</div>
|
||||
|
||||
{bookmark.parsedContent ? (
|
||||
<div className="bookmark-content">
|
||||
{renderParsedContent(bookmark.parsedContent)}
|
||||
</div>
|
||||
) : bookmark.content && (
|
||||
<div className="bookmark-content">
|
||||
<p>{bookmark.content}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bookmark-meta">
|
||||
<span>Kind: {bookmark.kind}</span>
|
||||
<span>Author: {bookmark.pubkey.slice(0, 8)}...{bookmark.pubkey.slice(-8)}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
99
src/components/BookmarkList.tsx
Normal file
99
src/components/BookmarkList.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
import React from 'react'
|
||||
import { Bookmark, ActiveAccount } from '../types/bookmarks'
|
||||
import { BookmarkItem } from './BookmarkItem'
|
||||
import { formatDate, renderParsedContent } from '../utils/bookmarkUtils'
|
||||
|
||||
interface BookmarkListProps {
|
||||
bookmarks: Bookmark[]
|
||||
activeAccount: ActiveAccount | null
|
||||
onLogout: () => void
|
||||
formatUserDisplay: () => string
|
||||
}
|
||||
|
||||
export const BookmarkList: React.FC<BookmarkListProps> = ({
|
||||
bookmarks,
|
||||
activeAccount,
|
||||
onLogout,
|
||||
formatUserDisplay
|
||||
}) => {
|
||||
return (
|
||||
<div className="bookmarks-container">
|
||||
<div className="bookmarks-header">
|
||||
<div>
|
||||
<h2>Your Bookmarks ({bookmarks.length})</h2>
|
||||
{activeAccount && (
|
||||
<p className="user-info">Logged in as: {formatUserDisplay()}</p>
|
||||
)}
|
||||
</div>
|
||||
<button onClick={onLogout} className="logout-button">
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{bookmarks.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<p>No bookmarks found.</p>
|
||||
<p>Add bookmarks using your nostr client to see them here.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bookmarks-list">
|
||||
{bookmarks.map((bookmark, index) => (
|
||||
<div key={`${bookmark.id}-${index}`} className="bookmark-item">
|
||||
<h3>{bookmark.title}</h3>
|
||||
{bookmark.bookmarkCount && (
|
||||
<p className="bookmark-count">
|
||||
{bookmark.bookmarkCount} bookmarks in this list
|
||||
</p>
|
||||
)}
|
||||
{bookmark.urlReferences && bookmark.urlReferences.length > 0 && (
|
||||
<div className="bookmark-urls">
|
||||
<h4>URLs:</h4>
|
||||
{bookmark.urlReferences.map((url, index) => (
|
||||
<a key={index} href={url} target="_blank" rel="noopener noreferrer" className="bookmark-url">
|
||||
{url}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{bookmark.individualBookmarks && bookmark.individualBookmarks.length > 0 && (
|
||||
<div className="individual-bookmarks">
|
||||
<h4>Individual Bookmarks ({bookmark.individualBookmarks.length}):</h4>
|
||||
<div className="bookmarks-grid">
|
||||
{bookmark.individualBookmarks.map((individualBookmark, index) =>
|
||||
<BookmarkItem key={index} bookmark={individualBookmark} index={index} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{bookmark.eventReferences && bookmark.eventReferences.length > 0 && bookmark.individualBookmarks?.length === 0 && (
|
||||
<div className="bookmark-events">
|
||||
<h4>Event References ({bookmark.eventReferences.length}):</h4>
|
||||
<div className="event-ids">
|
||||
{bookmark.eventReferences.slice(0, 3).map((eventId, index) => (
|
||||
<span key={index} className="event-id">
|
||||
{eventId.slice(0, 8)}...{eventId.slice(-8)}
|
||||
</span>
|
||||
))}
|
||||
{bookmark.eventReferences.length > 3 && (
|
||||
<span className="more-events">... and {bookmark.eventReferences.length - 3} more</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{bookmark.parsedContent ? (
|
||||
<div className="bookmark-content">
|
||||
{renderParsedContent(bookmark.parsedContent)}
|
||||
</div>
|
||||
) : bookmark.content && (
|
||||
<p className="bookmark-content">{bookmark.content}</p>
|
||||
)}
|
||||
<div className="bookmark-meta">
|
||||
<span>Created: {formatDate(bookmark.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -3,50 +3,9 @@ import { Hooks } from 'applesauce-react'
|
||||
import { useEventModel } from 'applesauce-react/hooks'
|
||||
import { Models } from 'applesauce-core'
|
||||
import { RelayPool } from 'applesauce-relay'
|
||||
import { completeOnEose } from 'applesauce-relay'
|
||||
import { getParsedContent } from 'applesauce-content/text'
|
||||
import { Filter } from 'nostr-tools'
|
||||
import { lastValueFrom, takeUntil, timer, toArray } from 'rxjs'
|
||||
|
||||
interface ParsedNode {
|
||||
type: string
|
||||
value?: string
|
||||
url?: string
|
||||
encoded?: string
|
||||
children?: ParsedNode[]
|
||||
}
|
||||
|
||||
interface ParsedContent {
|
||||
type: string
|
||||
children: ParsedNode[]
|
||||
}
|
||||
|
||||
interface Bookmark {
|
||||
id: string
|
||||
title: string
|
||||
url: string
|
||||
content: string
|
||||
created_at: number
|
||||
tags: string[][]
|
||||
bookmarkCount?: number
|
||||
eventReferences?: string[]
|
||||
articleReferences?: string[]
|
||||
urlReferences?: string[]
|
||||
parsedContent?: ParsedContent
|
||||
individualBookmarks?: IndividualBookmark[]
|
||||
}
|
||||
|
||||
interface IndividualBookmark {
|
||||
id: string
|
||||
content: string
|
||||
created_at: number
|
||||
pubkey: string
|
||||
kind: number
|
||||
tags: string[][]
|
||||
parsedContent?: ParsedContent
|
||||
author?: string
|
||||
type: 'event' | 'article'
|
||||
}
|
||||
import { Bookmark } from '../types/bookmarks'
|
||||
import { BookmarkList } from './BookmarkList'
|
||||
import { fetchBookmarks } from '../services/bookmarkService'
|
||||
|
||||
interface BookmarksProps {
|
||||
relayPool: RelayPool | null
|
||||
@@ -67,13 +26,13 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
|
||||
console.log('activeAccount:', !!activeAccount)
|
||||
if (relayPool && activeAccount) {
|
||||
console.log('Starting to fetch bookmarks...')
|
||||
fetchBookmarks()
|
||||
handleFetchBookmarks()
|
||||
} else {
|
||||
console.log('Not fetching bookmarks - missing dependencies')
|
||||
}
|
||||
}, [relayPool, activeAccount?.pubkey]) // Only depend on pubkey, not the entire activeAccount object
|
||||
|
||||
const fetchBookmarks = async () => {
|
||||
const handleFetchBookmarks = async () => {
|
||||
console.log('🔍 fetchBookmarks called, loading:', loading)
|
||||
if (!relayPool || !activeAccount) {
|
||||
console.log('🔍 fetchBookmarks early return - relayPool:', !!relayPool, 'activeAccount:', !!activeAccount)
|
||||
@@ -86,213 +45,10 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
|
||||
setLoading(false)
|
||||
}, 15000) // 15 second timeout
|
||||
|
||||
try {
|
||||
setLoading(true)
|
||||
console.log('🚀 NEW VERSION: Fetching bookmark list for pubkey:', activeAccount.pubkey)
|
||||
|
||||
// Get relay URLs from the pool
|
||||
const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
|
||||
|
||||
// Step 1: Fetch the bookmark list event (kind 10003)
|
||||
const bookmarkListFilter: Filter = {
|
||||
kinds: [10003],
|
||||
authors: [activeAccount.pubkey],
|
||||
limit: 1 // Just get the most recent bookmark list
|
||||
}
|
||||
|
||||
console.log('Fetching bookmark list with filter:', bookmarkListFilter)
|
||||
const bookmarkListEvents = await lastValueFrom(
|
||||
relayPool.req(relayUrls, bookmarkListFilter).pipe(
|
||||
completeOnEose(),
|
||||
takeUntil(timer(10000)),
|
||||
toArray(),
|
||||
)
|
||||
)
|
||||
|
||||
console.log('Found bookmark list events:', bookmarkListEvents.length)
|
||||
|
||||
if (bookmarkListEvents.length === 0) {
|
||||
console.log('No bookmark list found')
|
||||
setBookmarks([])
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
// Step 2: Extract event IDs from the bookmark list
|
||||
const bookmarkListEvent = bookmarkListEvents[0]
|
||||
const eventTags = bookmarkListEvent.tags.filter(tag => tag[0] === 'e')
|
||||
const eventIds = eventTags.map(tag => tag[1])
|
||||
|
||||
console.log('Found event IDs in bookmark list:', eventIds.length, eventIds)
|
||||
|
||||
if (eventIds.length === 0) {
|
||||
console.log('No event references found in bookmark list')
|
||||
setBookmarks([])
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
// Step 3: Fetch each individual event
|
||||
console.log('Fetching individual events...')
|
||||
const individualBookmarks: IndividualBookmark[] = []
|
||||
|
||||
for (const eventId of eventIds) {
|
||||
try {
|
||||
console.log('Fetching event:', eventId)
|
||||
const eventFilter: Filter = {
|
||||
ids: [eventId]
|
||||
}
|
||||
|
||||
const events = await lastValueFrom(
|
||||
relayPool.req(relayUrls, eventFilter).pipe(
|
||||
completeOnEose(),
|
||||
takeUntil(timer(5000)),
|
||||
toArray(),
|
||||
)
|
||||
)
|
||||
|
||||
if (events.length > 0) {
|
||||
const event = events[0]
|
||||
const parsedContent = event.content ? getParsedContent(event.content) as ParsedContent : undefined
|
||||
|
||||
individualBookmarks.push({
|
||||
id: event.id,
|
||||
content: event.content,
|
||||
created_at: event.created_at,
|
||||
pubkey: event.pubkey,
|
||||
kind: event.kind,
|
||||
tags: event.tags,
|
||||
parsedContent: parsedContent,
|
||||
type: 'event'
|
||||
})
|
||||
console.log('Successfully fetched event:', event.id)
|
||||
} else {
|
||||
console.log('Event not found:', eventId)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching event:', eventId, error)
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Fetched individual bookmarks:', individualBookmarks.length)
|
||||
|
||||
// Create a single bookmark entry with all individual bookmarks
|
||||
const bookmark: Bookmark = {
|
||||
id: bookmarkListEvent.id,
|
||||
title: bookmarkListEvent.content || `Bookmark List (${individualBookmarks.length} items)`,
|
||||
url: '',
|
||||
content: bookmarkListEvent.content,
|
||||
created_at: bookmarkListEvent.created_at,
|
||||
tags: bookmarkListEvent.tags,
|
||||
bookmarkCount: individualBookmarks.length,
|
||||
eventReferences: eventIds,
|
||||
individualBookmarks: individualBookmarks
|
||||
}
|
||||
|
||||
setBookmarks([bookmark])
|
||||
clearTimeout(timeoutId)
|
||||
setLoading(false)
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch bookmarks:', error)
|
||||
clearTimeout(timeoutId)
|
||||
setLoading(false)
|
||||
}
|
||||
await fetchBookmarks(relayPool, activeAccount, setBookmarks, setLoading, timeoutId)
|
||||
}
|
||||
|
||||
|
||||
const formatDate = (timestamp: number) => {
|
||||
return new Date(timestamp * 1000).toLocaleDateString()
|
||||
}
|
||||
|
||||
// Component to render parsed content using applesauce-content
|
||||
const renderParsedContent = (parsedContent: ParsedContent) => {
|
||||
if (!parsedContent || !parsedContent.children) {
|
||||
return null
|
||||
}
|
||||
|
||||
const renderNode = (node: ParsedNode, index: number): React.ReactNode => {
|
||||
if (node.type === 'text') {
|
||||
return <span key={index}>{node.value}</span>
|
||||
}
|
||||
|
||||
if (node.type === 'mention') {
|
||||
return (
|
||||
<a
|
||||
key={index}
|
||||
href={`nostr:${node.encoded}`}
|
||||
className="nostr-mention"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{node.encoded}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
if (node.type === 'link') {
|
||||
return (
|
||||
<a
|
||||
key={index}
|
||||
href={node.url}
|
||||
className="nostr-link"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{node.url}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
if (node.children) {
|
||||
return (
|
||||
<span key={index}>
|
||||
{node.children.map((child: ParsedNode, childIndex: number) =>
|
||||
renderNode(child, childIndex)
|
||||
)}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="parsed-content">
|
||||
{parsedContent.children.map((node: ParsedNode, index: number) =>
|
||||
renderNode(node, index)
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Component to render individual bookmarks
|
||||
const renderIndividualBookmark = (bookmark: IndividualBookmark, index: number) => {
|
||||
return (
|
||||
<div key={`${bookmark.id}-${index}`} className="individual-bookmark">
|
||||
<div className="bookmark-header">
|
||||
<span className="bookmark-type">{bookmark.type}</span>
|
||||
<span className="bookmark-id">{bookmark.id.slice(0, 8)}...{bookmark.id.slice(-8)}</span>
|
||||
<span className="bookmark-date">{formatDate(bookmark.created_at)}</span>
|
||||
</div>
|
||||
|
||||
{bookmark.parsedContent ? (
|
||||
<div className="bookmark-content">
|
||||
{renderParsedContent(bookmark.parsedContent)}
|
||||
</div>
|
||||
) : bookmark.content && (
|
||||
<div className="bookmark-content">
|
||||
<p>{bookmark.content}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bookmark-meta">
|
||||
<span>Kind: {bookmark.kind}</span>
|
||||
<span>Author: {bookmark.pubkey.slice(0, 8)}...{bookmark.pubkey.slice(-8)}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const formatUserDisplay = () => {
|
||||
if (!activeAccount) return 'Unknown User'
|
||||
@@ -332,84 +88,12 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bookmarks-container">
|
||||
<div className="bookmarks-header">
|
||||
<div>
|
||||
<h2>Your Bookmarks ({bookmarks.length})</h2>
|
||||
{activeAccount && (
|
||||
<p className="user-info">Logged in as: {formatUserDisplay()}</p>
|
||||
)}
|
||||
</div>
|
||||
<button onClick={onLogout} className="logout-button">
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{bookmarks.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<p>No bookmarks found.</p>
|
||||
<p>Add bookmarks using your nostr client to see them here.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bookmarks-list">
|
||||
{bookmarks.map((bookmark, index) => (
|
||||
<div key={`${bookmark.id}-${index}`} className="bookmark-item">
|
||||
<h3>{bookmark.title}</h3>
|
||||
{bookmark.bookmarkCount && (
|
||||
<p className="bookmark-count">
|
||||
{bookmark.bookmarkCount} bookmarks in this list
|
||||
</p>
|
||||
)}
|
||||
{bookmark.urlReferences && bookmark.urlReferences.length > 0 && (
|
||||
<div className="bookmark-urls">
|
||||
<h4>URLs:</h4>
|
||||
{bookmark.urlReferences.map((url, index) => (
|
||||
<a key={index} href={url} target="_blank" rel="noopener noreferrer" className="bookmark-url">
|
||||
{url}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{bookmark.individualBookmarks && bookmark.individualBookmarks.length > 0 && (
|
||||
<div className="individual-bookmarks">
|
||||
<h4>Individual Bookmarks ({bookmark.individualBookmarks.length}):</h4>
|
||||
<div className="bookmarks-grid">
|
||||
{bookmark.individualBookmarks.map((individualBookmark, index) =>
|
||||
renderIndividualBookmark(individualBookmark, index)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{bookmark.eventReferences && bookmark.eventReferences.length > 0 && bookmark.individualBookmarks?.length === 0 && (
|
||||
<div className="bookmark-events">
|
||||
<h4>Event References ({bookmark.eventReferences.length}):</h4>
|
||||
<div className="event-ids">
|
||||
{bookmark.eventReferences.slice(0, 3).map((eventId, index) => (
|
||||
<span key={index} className="event-id">
|
||||
{eventId.slice(0, 8)}...{eventId.slice(-8)}
|
||||
</span>
|
||||
))}
|
||||
{bookmark.eventReferences.length > 3 && (
|
||||
<span className="more-events">... and {bookmark.eventReferences.length - 3} more</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{bookmark.parsedContent ? (
|
||||
<div className="bookmark-content">
|
||||
{renderParsedContent(bookmark.parsedContent)}
|
||||
</div>
|
||||
) : bookmark.content && (
|
||||
<p className="bookmark-content">{bookmark.content}</p>
|
||||
)}
|
||||
<div className="bookmark-meta">
|
||||
<span>Created: {formatDate(bookmark.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<BookmarkList
|
||||
bookmarks={bookmarks}
|
||||
activeAccount={activeAccount as any}
|
||||
onLogout={onLogout}
|
||||
formatUserDisplay={formatUserDisplay}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
127
src/services/bookmarkService.ts
Normal file
127
src/services/bookmarkService.ts
Normal file
@@ -0,0 +1,127 @@
|
||||
import { RelayPool } from 'applesauce-relay'
|
||||
import { completeOnEose } from 'applesauce-relay'
|
||||
import { getParsedContent } from 'applesauce-content/text'
|
||||
import { Filter } from 'nostr-tools'
|
||||
import { lastValueFrom, takeUntil, timer, toArray } from 'rxjs'
|
||||
import { Bookmark, IndividualBookmark, ParsedContent, ActiveAccount } from '../types/bookmarks'
|
||||
|
||||
export const fetchBookmarks = async (
|
||||
relayPool: RelayPool,
|
||||
activeAccount: ActiveAccount,
|
||||
setBookmarks: (bookmarks: Bookmark[]) => void,
|
||||
setLoading: (loading: boolean) => void,
|
||||
timeoutId: number
|
||||
) => {
|
||||
try {
|
||||
setLoading(true)
|
||||
console.log('🚀 NEW VERSION: Fetching bookmark list for pubkey:', activeAccount.pubkey)
|
||||
|
||||
// Get relay URLs from the pool
|
||||
const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
|
||||
|
||||
// Step 1: Fetch the bookmark list event (kind 10003)
|
||||
const bookmarkListFilter: Filter = {
|
||||
kinds: [10003],
|
||||
authors: [activeAccount.pubkey],
|
||||
limit: 1 // Just get the most recent bookmark list
|
||||
}
|
||||
|
||||
console.log('Fetching bookmark list with filter:', bookmarkListFilter)
|
||||
const bookmarkListEvents = await lastValueFrom(
|
||||
relayPool.req(relayUrls, bookmarkListFilter).pipe(
|
||||
completeOnEose(),
|
||||
takeUntil(timer(10000)),
|
||||
toArray(),
|
||||
)
|
||||
)
|
||||
|
||||
console.log('Found bookmark list events:', bookmarkListEvents.length)
|
||||
|
||||
if (bookmarkListEvents.length === 0) {
|
||||
console.log('No bookmark list found')
|
||||
setBookmarks([])
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
// Step 2: Extract event IDs from the bookmark list
|
||||
const bookmarkListEvent = bookmarkListEvents[0]
|
||||
const eventTags = bookmarkListEvent.tags.filter(tag => tag[0] === 'e')
|
||||
const eventIds = eventTags.map(tag => tag[1])
|
||||
|
||||
console.log('Found event IDs in bookmark list:', eventIds.length, eventIds)
|
||||
|
||||
if (eventIds.length === 0) {
|
||||
console.log('No event references found in bookmark list')
|
||||
setBookmarks([])
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
// Step 3: Fetch each individual event
|
||||
console.log('Fetching individual events...')
|
||||
const individualBookmarks: IndividualBookmark[] = []
|
||||
|
||||
for (const eventId of eventIds) {
|
||||
try {
|
||||
console.log('Fetching event:', eventId)
|
||||
const eventFilter: Filter = {
|
||||
ids: [eventId]
|
||||
}
|
||||
|
||||
const events = await lastValueFrom(
|
||||
relayPool.req(relayUrls, eventFilter).pipe(
|
||||
completeOnEose(),
|
||||
takeUntil(timer(5000)),
|
||||
toArray(),
|
||||
)
|
||||
)
|
||||
|
||||
if (events.length > 0) {
|
||||
const event = events[0]
|
||||
const parsedContent = event.content ? getParsedContent(event.content) as ParsedContent : undefined
|
||||
|
||||
individualBookmarks.push({
|
||||
id: event.id,
|
||||
content: event.content,
|
||||
created_at: event.created_at,
|
||||
pubkey: event.pubkey,
|
||||
kind: event.kind,
|
||||
tags: event.tags,
|
||||
parsedContent: parsedContent,
|
||||
type: 'event'
|
||||
})
|
||||
console.log('Successfully fetched event:', event.id)
|
||||
} else {
|
||||
console.log('Event not found:', eventId)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching event:', eventId, error)
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Fetched individual bookmarks:', individualBookmarks.length)
|
||||
|
||||
// Create a single bookmark entry with all individual bookmarks
|
||||
const bookmark: Bookmark = {
|
||||
id: bookmarkListEvent.id,
|
||||
title: bookmarkListEvent.content || `Bookmark List (${individualBookmarks.length} items)`,
|
||||
url: '',
|
||||
content: bookmarkListEvent.content,
|
||||
created_at: bookmarkListEvent.created_at,
|
||||
tags: bookmarkListEvent.tags,
|
||||
bookmarkCount: individualBookmarks.length,
|
||||
eventReferences: eventIds,
|
||||
individualBookmarks: individualBookmarks
|
||||
}
|
||||
|
||||
setBookmarks([bookmark])
|
||||
clearTimeout(timeoutId)
|
||||
setLoading(false)
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch bookmarks:', error)
|
||||
clearTimeout(timeoutId)
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
43
src/types/bookmarks.ts
Normal file
43
src/types/bookmarks.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
export interface ParsedNode {
|
||||
type: string
|
||||
value?: string
|
||||
url?: string
|
||||
encoded?: string
|
||||
children?: ParsedNode[]
|
||||
}
|
||||
|
||||
export interface ParsedContent {
|
||||
type: string
|
||||
children: ParsedNode[]
|
||||
}
|
||||
|
||||
export interface Bookmark {
|
||||
id: string
|
||||
title: string
|
||||
url: string
|
||||
content: string
|
||||
created_at: number
|
||||
tags: string[][]
|
||||
bookmarkCount?: number
|
||||
eventReferences?: string[]
|
||||
articleReferences?: string[]
|
||||
urlReferences?: string[]
|
||||
parsedContent?: ParsedContent
|
||||
individualBookmarks?: IndividualBookmark[]
|
||||
}
|
||||
|
||||
export interface IndividualBookmark {
|
||||
id: string
|
||||
content: string
|
||||
created_at: number
|
||||
pubkey: string
|
||||
kind: number
|
||||
tags: string[][]
|
||||
parsedContent?: ParsedContent
|
||||
author?: string
|
||||
type: 'event' | 'article'
|
||||
}
|
||||
|
||||
export interface ActiveAccount {
|
||||
pubkey: string
|
||||
}
|
||||
67
src/utils/bookmarkUtils.tsx
Normal file
67
src/utils/bookmarkUtils.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import React from 'react'
|
||||
import { ParsedContent, ParsedNode } from '../types/bookmarks'
|
||||
|
||||
export const formatDate = (timestamp: number) => {
|
||||
return new Date(timestamp * 1000).toLocaleDateString()
|
||||
}
|
||||
|
||||
// Component to render parsed content using applesauce-content
|
||||
export const renderParsedContent = (parsedContent: ParsedContent) => {
|
||||
if (!parsedContent || !parsedContent.children) {
|
||||
return null
|
||||
}
|
||||
|
||||
const renderNode = (node: ParsedNode, index: number): React.ReactNode => {
|
||||
if (node.type === 'text') {
|
||||
return <span key={index}>{node.value}</span>
|
||||
}
|
||||
|
||||
if (node.type === 'mention') {
|
||||
return (
|
||||
<a
|
||||
key={index}
|
||||
href={`nostr:${node.encoded}`}
|
||||
className="nostr-mention"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{node.encoded}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
if (node.type === 'link') {
|
||||
return (
|
||||
<a
|
||||
key={index}
|
||||
href={node.url}
|
||||
className="nostr-link"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{node.url}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
if (node.children) {
|
||||
return (
|
||||
<span key={index}>
|
||||
{node.children.map((child: ParsedNode, childIndex: number) =>
|
||||
renderNode(child, childIndex)
|
||||
)}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="parsed-content">
|
||||
{parsedContent.children.map((node: ParsedNode, index: number) =>
|
||||
renderNode(node, index)
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user