feat: replying functionality

src/features/Posts/Components/Comments/Comment/Comment.tsx

@@ -10,10 +10,11 @@ interface Props {
     comment: CommentWithReplies
     isRoot?: boolean;
     canReply: boolean;
-    onClickedReply?: () => void
+    onClickedReply?: () => void;
+    onReply?: (text: string) => void
 }
 
-export default function Comment({ comment, canReply, isRoot, onClickedReply }: Props) {
+export default function Comment({ comment, canReply, isRoot, onClickedReply, onReply }: Props) {
 
     const [replyOpen, setReplyOpen] = useState(false)
     const user = useAppSelector(s => s.user.me)
@@ -37,7 +38,12 @@ export default function Comment({ comment, canReply, isRoot, onClickedReply }: P
                         onClickedReply={clickReply}
                         canReply={false}
                     />)}
-                    {replyOpen && <AddComment avatar={user?.avatar!} autoFocus placeholder="Leave a reply..." />}
+                    {replyOpen && <AddComment
+                        avatar={user?.avatar!}
+                        autoFocus
+                        placeholder="Leave a reply..."
+                        onSubmit={(text) => onReply?.(text)}
+                    />}
                 </div>
             </div>}
         </div>

src/features/Posts/Components/Comments/CommentsSection/CommentsSection.tsx

@@ -36,8 +36,8 @@ export default function CommentsSection({ type, id }: Props) {
     }
   }, [filter]);
 
-  const handleNewComment = (newComment: string) => {
-    CommentsWorker.post(newComment, filter);
+  const handleNewComment = (content: string, parentId?: string) => {
+    CommentsWorker.post({ content, filter, parentId });
   }
 
 
@@ -47,7 +47,7 @@ export default function CommentsSection({ type, id }: Props) {
       {!!user && <div className="mt-24">
         <AddComment
           placeholder='Leave a comment...'
-          onSubmit={handleNewComment}
+          onSubmit={content => handleNewComment(content)}
           avatar={user.avatar}
         />
       </div>}
@@ -58,6 +58,7 @@ export default function CommentsSection({ type, id }: Props) {
             comment={comment}
             isRoot
             canReply={!!user}
+            onReply={content => handleNewComment(content, comment.id.toString())}
           />)}
       </div>
     </div>

src/features/Posts/Components/Comments/CommentsSection/comments.worker.ts

@@ -15,15 +15,15 @@ type Author = {
 
 const pool = relayPool();
 
+const RELAYS = [
+    'wss://nostr.drss.io',
+    'wss://nostr-relay.freeberty.net',
+    'wss://nostr.unknown.place',
+    'wss://nostr-relay.untethr.me',
+    'wss://relay.damus.io'
+];
 
 export function connect() {
-    const RELAYS = [
-        'wss://nostr.drss.io',
-        'wss://nostr-relay.freeberty.net',
-        'wss://nostr.unknown.place',
-        'wss://nostr-relay.untethr.me',
-        'wss://relay.damus.io'
-    ];
     RELAYS.forEach(url => {
         pool.addRelay(url, { read: true, write: true })
     })
@@ -89,17 +89,25 @@ async function mapPubkeysToUsers(pubkeys: string[]) {
 }
 
 
-export async function post(data: string, filter: string) {
+export async function post({ content, filter, parentId }: {
+    content: string,
+    filter: string,
+    parentId?: string
+}) {
+
+    const tags = [];
+    tags.push(['r', filter]);
+    if (parentId)
+        tags.push(['e', `${parentId} ${RELAYS[0]} reply`])
 
-    // setKeys();
     let event: NostrEvent;
     try {
         event = await getSignedEvents({
             // pubkey: globalKeys.pubkey,
             // created_at: Math.round(Date.now() / 1000),
             kind: 1,
-            tags: [['r', filter]],
-            content: data
+            tags,
+            content,
         }) as NostrEvent;
     } catch (error) {
         alert("Couldn't sign the object successfully...")
@@ -131,12 +139,13 @@ export async function post(data: string, filter: string) {
 }
 
 function extractParentId(event: NostrEvent): Nullable<string> {
-    event.tags.forEach(([identifier, value]) => {
-        if (identifier === '#e') {
-            const [eventId, _, marker] = value.split(' ');
+
+    for (const [identifier, value] of event.tags) {
+        if (identifier === 'e') {
+            const [eventId, , marker] = value.split(' ');
             if (marker === 'reply') return eventId;
         }
-    })
+    }
     return null;
 }
 
@@ -161,6 +170,7 @@ export async function constructTree() {
     // If event is a reply, connect it to parent
     sortedEvenets.forEach(e => {
         const parentId = extractParentId(e);
+
         if (parentId) {
             eventsTree[parentId]?.replies.push({
                 id: e.id,