+
+
+
+
+ {displayName}
+
+ {showRepliedLabel && (
+ replied
+ )}
+ {formatRelativeSeen(post.seen)}
+
+ {post.text}
+
+ {showReplyCount && (
+
+
+ )}
+
+ {showFooterMeta && (
+
+ Block {post.blockHeight}
+ ·
+ appUtil.copyToClipboard(post.txid)}
+ role='button'
+ tabIndex={0}
+ onKeyDown={(event) => {
+ if (event.key === 'Enter' || event.key === ' ') {
+ event.preventDefault()
+ appUtil.copyToClipboard(post.txid)
+ }
+ }}
+ >
+ {truncateTxid(post.txid, 20)}
+
+
+ )}
+
+
+ )
+}
+
+export default PostReplyCount
diff --git a/src/components/post-reply-count/post-reply-count.css b/src/components/post-reply-count/post-reply-count.css
new file mode 100644
index 0000000..c9c9f3b
--- /dev/null
+++ b/src/components/post-reply-count/post-reply-count.css
@@ -0,0 +1,20 @@
+.post-reply-count {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.35rem;
+ margin-top: 0.75rem;
+ color: #6c757d;
+ font-size: 0.85rem;
+}
+
+.post-reply-count-icon {
+ font-size: 0.9rem;
+}
+
+.post-reply-count-clickable {
+ cursor: pointer;
+}
+
+.post-reply-count-clickable:hover {
+ color: #28a745;
+}
diff --git a/src/components/post-thread-modal/index.js b/src/components/post-thread-modal/index.js
new file mode 100644
index 0000000..0effd1c
--- /dev/null
+++ b/src/components/post-thread-modal/index.js
@@ -0,0 +1,102 @@
+/*
+ Modal displaying a post and its nested reply thread.
+*/
+
+import React, { useState, useEffect } from 'react'
+import { Modal, Spinner } from 'react-bootstrap'
+
+import MemoDb from '../../services/memo-db'
+import PostThreadNode from './post-thread-node'
+import { collectThreadAddrs, loadThreadProfiles } from './thread-profiles'
+import './post-thread-modal.css'
+import '../post-feed/post-feed.css'
+
+function PostThreadModal ({ show, txid, onHide }) {
+ const [loading, setLoading] = useState(false)
+ const [error, setError] = useState(null)
+ const [thread, setThread] = useState(null)
+ const [profiles, setProfiles] = useState({})
+
+ useEffect(() => {
+ if (!show || !txid) {
+ return undefined
+ }
+
+ let cancelled = false
+
+ const loadThread = async () => {
+ setLoading(true)
+ setError(null)
+ setThread(null)
+ setProfiles({})
+
+ try {
+ const memoDb = new MemoDb()
+ const data = await memoDb.getPostThread(txid)
+ const post = data.post || null
+
+ if (cancelled) return
+
+ if (post) {
+ const addrs = collectThreadAddrs(post)
+ const profileMap = await loadThreadProfiles(addrs, memoDb)
+ if (!cancelled) {
+ setThread(post)
+ setProfiles(profileMap)
+ }
+ } else if (!cancelled) {
+ setThread(null)
+ }
+ } catch (err) {
+ if (!cancelled) {
+ const message = err.response?.data?.message || err.message || 'Failed to load replies'
+ setError(message)
+ }
+ }
+
+ if (!cancelled) {
+ setLoading(false)
+ }
+ }
+
+ loadThread()
+
+ return () => {
+ cancelled = true
+ }
+ }, [show, txid])
+
+ const handleHide = () => {
+ setThread(null)
+ setProfiles({})
+ setError(null)
+ onHide()
+ }
+
+ return (
+
+
+ Loading replies...
+
+
+ )}
+
+ {error && !loading && (
+ {error}
+ )} + + {!loading && !error && thread && ( +
+
+ )
+}
+
+export default PostThreadAvatar
diff --git a/src/components/post-thread-modal/post-thread-modal.css b/src/components/post-thread-modal/post-thread-modal.css
new file mode 100644
index 0000000..af22921
--- /dev/null
+++ b/src/components/post-thread-modal/post-thread-modal.css
@@ -0,0 +1,83 @@
+.post-thread-modal-body {
+ max-height: 70vh;
+}
+
+.post-thread-node {
+ margin-top: 0.75rem;
+}
+
+.post-thread-node-root {
+ margin-top: 0;
+}
+
+.post-thread-node-inner {
+ border: 1px solid #dee2e6;
+ border-radius: 4px;
+ padding: 0.75rem 1rem;
+ background: #fff;
+}
+
+.post-thread-node-root > .post-thread-node-inner {
+ border-color: #ced4da;
+}
+
+.post-thread-node-header {
+ display: flex;
+ align-items: center;
+ gap: 0.6rem;
+ margin-bottom: 0.5rem;
+}
+
+.post-thread-avatar {
+ flex-shrink: 0;
+ border-radius: 4px;
+ object-fit: cover;
+ display: block;
+}
+
+.post-thread-avatar-jdenticon {
+ overflow: hidden;
+ border-radius: 4px;
+}
+
+.post-thread-node-meta {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: baseline;
+ gap: 0.35rem;
+ font-size: 0.85rem;
+ color: #6c757d;
+ min-width: 0;
+}
+
+.post-thread-node-author {
+ font-weight: 600;
+ color: #212529;
+ text-decoration: none;
+}
+
+.post-thread-node-author:hover {
+ text-decoration: underline;
+ color: #28a745;
+}
+
+.post-thread-node-author-address {
+ font-family: monospace;
+ font-size: 0.8rem;
+ font-weight: 500;
+}
+
+.post-thread-node-replied {
+ font-style: italic;
+}
+
+.post-thread-node-seen {
+ white-space: nowrap;
+}
+
+.post-thread-node-text {
+ white-space: pre-wrap;
+ word-break: break-word;
+ font-size: 0.95rem;
+ line-height: 1.5;
+}
diff --git a/src/components/post-thread-modal/post-thread-node.js b/src/components/post-thread-modal/post-thread-node.js
new file mode 100644
index 0000000..b4a7aa4
--- /dev/null
+++ b/src/components/post-thread-modal/post-thread-node.js
@@ -0,0 +1,41 @@
+/*
+ Single post node in a reply thread (recursive).
+*/
+
+import React from 'react'
+
+import PostFeedItem from '../post-feed/post-feed-item'
+
+function PostThreadNode ({ post, profiles = {}, depth = 0, isRoot = false }) {
+ if (!post) return null
+
+ const profile = profiles[post.addr] || {}
+
+ return (
+ 0 ? `${Math.min(depth, 8) * 1.25}rem` : undefined }}
+ >
+
+ )
+}
+
+export default PostThreadNode
diff --git a/src/components/post-thread-modal/thread-profiles.js b/src/components/post-thread-modal/thread-profiles.js
new file mode 100644
index 0000000..eb879e2
--- /dev/null
+++ b/src/components/post-thread-modal/thread-profiles.js
@@ -0,0 +1,40 @@
+/*
+ Helpers for loading display names and avatars for thread participants.
+*/
+
+export function collectPostAddrs (posts) {
+ return [...new Set((posts || []).map((post) => post.addr).filter(Boolean))]
+}
+
+export function collectThreadAddrs (post) {
+ const addrs = new Set()
+
+ function walk (node) {
+ if (!node?.addr) return
+ addrs.add(node.addr)
+ for (const reply of node.replies || []) {
+ walk(reply)
+ }
+ }
+
+ walk(post)
+ return [...addrs]
+}
+
+export async function loadThreadProfiles (addrs, memoDb) {
+ const profiles = {}
+
+ await Promise.all(addrs.map(async (addr) => {
+ const [nameRecord, profilePic] = await Promise.all([
+ memoDb.getName(addr),
+ memoDb.getProfilePic(addr)
+ ])
+
+ profiles[addr] = {
+ name: nameRecord?.name || null,
+ profilePicUrl: profilePic?.url || null
+ }
+ }))
+
+ return profiles
+}
diff --git a/src/services/memo-db.js b/src/services/memo-db.js
index 1704aec..fea9537 100644
--- a/src/services/memo-db.js
+++ b/src/services/memo-db.js
@@ -66,6 +66,21 @@ class MemoDb {
}
}
+ async getName (addr) {
+ try {
+ const result = await this.axios.get(
+ `${config.backend}/level/name/${encodeURIComponent(addr)}`
+ )
+ return result.data
+ } catch (err) {
+ if (err.response && err.response.status === 404) {
+ return null
+ }
+ console.error('Error in getName()')
+ throw err
+ }
+ }
+
async getPostsByAddr (addr, { limit = 100, offset = 0 } = {}) {
try {
const result = await this.axios.get(
@@ -79,6 +94,19 @@ class MemoDb {
throw err
}
}
+
+ async getPostThread (txid) {
+ try {
+ const result = await this.axios.get(
+ `${config.backend}/posts/${encodeURIComponent(txid)}/thread`
+ )
+
+ return result.data
+ } catch (err) {
+ console.error('Error in getPostThread()')
+ throw err
+ }
+ }
}
export default MemoDb
+
+