feat: reply comments

src/components/swarm-comment-system/swarm-comment-form/swarm-comment-form.module.scss

@@ -16,6 +16,12 @@
   textarea {
     margin: 20px 0;
   }
+
+  .reply-cancel {
+    width: fit-content;
+    margin: auto;
+    margin-bottom: 20px;
+  }
 }
 
 .field-error {

src/components/swarm-comment-system/swarm-comment-form/swarm-comment-form.tsx

@@ -1,10 +1,12 @@
-import { CommentRequest } from "@ethersphere/comment-system";
+import { Comment, CommentRequest } from "@ethersphere/comment-system";
 import styles from "./swarm-comment-form.module.scss";
 import { useState } from "react";
 
 export interface SwarmCommentFormProps {
   loading: boolean;
   onSubmit: (comment: CommentRequest) => void;
+  replyingComment?: Comment;
+  onReplyCancel?: () => void;
   className?: string;
 }
 
@@ -24,6 +26,8 @@ interface FormErrors {
 export default function SwarmCommentForm({
   loading,
   onSubmit,
+  replyingComment,
+  onReplyCancel,
   className,
 }: SwarmCommentFormProps) {
   const [errors, setErrors] = useState<FormErrors>({});
@@ -52,6 +56,9 @@ export default function SwarmCommentForm({
     }
 
     onSubmit({ user, data });
+
+    elements.user.value = "";
+    elements.data.value = "";
   };
 
   return (
@@ -60,6 +67,14 @@ export default function SwarmCommentForm({
       onSubmit={submit}
     >
       <h6>Add comment:</h6>
+      {replyingComment && (
+        <>
+          <p>Reply: {replyingComment.data}</p>
+          <button className={styles["reply-cancel"]} onClick={onReplyCancel}>
+            Cancel
+          </button>
+        </>
+      )}
       <input
         className={errors.user && styles["field-error"]}
         onChange={() => setErrors({ ...errors, user: undefined })}

src/components/swarm-comment-system/swarm-comment-list/swarm-comment-list.module.scss

@@ -1,2 +1,11 @@
 .swarm-comment-list {
+  text-align: left;
+
+  .comment {
+    cursor: pointer;
+  }
+
+  .replies {
+    padding-left: 30px;
+  }
 }

src/components/swarm-comment-system/swarm-comment-list/swarm-comment-list.tsx

@@ -1,23 +1,54 @@
-import { Comment } from "@ethersphere/comment-system";
+import { Comment, CommentNode } from "@ethersphere/comment-system";
 import styles from "./swarm-comment-list.module.scss";
 
-export interface SwarmCommentSystemProps {
-  comments: Comment[];
+export interface SwarmCommentListProps {
+  comments: CommentNode[];
+  onReply: (comments: Comment[]) => void;
+  replyLevel: number;
   className?: string;
+  maxReplyLevel?: number;
 }
 
 export default function SwarmCommentList({
   comments,
+  onReply,
+  replyLevel,
   className,
-}: SwarmCommentSystemProps) {
+  maxReplyLevel,
+}: SwarmCommentListProps) {
+  const canReply = () =>
+    typeof maxReplyLevel !== "number" || replyLevel < maxReplyLevel;
+
+  const onSubnodeReply = (comment: Comment, comments: Comment[]) => {
+    comments.push(comment);
+    onReply(comments);
+  };
+
   return (
-    <div className={`${styles.swarmCommentList} ${className}`}>
-      {comments.map(({ user, data, timestamp }, index) => (
+    <div className={`${styles["swarm-comment-list"]} ${className}`}>
+      {comments.map(({ comment, replies }, index) => (
         <div key={index}>
           <p>
-            <strong>{user}</strong> on {new Date(timestamp).toDateString()}
+            <strong>{comment.user}</strong> on{" "}
+            {new Date(comment.timestamp).toDateString()}
+          </p>
+          <p
+            className={styles["comment"]}
+            onClick={() => canReply() && onReply([comment])}
+          >
+            {comment.data}
           </p>
-          <p>{data}</p>
+          {replies && (
+            <div className={styles["replies"]}>
+              <SwarmCommentList
+                comments={replies}
+                onReply={(comments) => onSubnodeReply(comment, comments)}
+                className={className}
+                replyLevel={replyLevel + 1}
+                maxReplyLevel={maxReplyLevel}
+              />
+            </div>
+          )}
         </div>
       ))}
     </div>

src/components/swarm-comment-system/swarm-comment-system.tsx

@@ -1,7 +1,8 @@
 import {
   Comment,
+  CommentNode,
   CommentRequest,
-  readComments,
+  readCommentsAsTree,
   writeComment,
 } from "@ethersphere/comment-system";
 import SwarmCommentList from "./swarm-comment-list/swarm-comment-list";
@@ -31,16 +32,19 @@ export interface SwarmCommentSystemProps {
 
 export function SwarmCommentSystem(props: SwarmCommentSystemProps) {
   const { approvedFeedAddress, classes } = props;
-  const [comments, setComments] = useState<Comment[] | null>(null);
-  const [category, setCategory] = useState<"all" | "approved">("all");
+  const [comments, setComments] = useState<CommentNode[] | null>(null);
+  const [category, setCategory] = useState<"all" | "approved">("approved");
   const [loading, setLoading] = useState(true);
   const [formLoading, setFormLoading] = useState(false);
+  const [replyingComments, setReplyingComments] = useState<
+    Comment[] | undefined
+  >();
 
   const loadComments = async () => {
     try {
       setLoading(true);
 
-      const comments = await readComments({
+      const comments = await readCommentsAsTree({
         ...props,
         approvedFeedAddress:
           category === "approved" ? approvedFeedAddress : undefined,
@@ -58,12 +62,36 @@ export function SwarmCommentSystem(props: SwarmCommentSystemProps) {
     try {
       setFormLoading(true);
 
-      await writeComment(comment, props);
+      if (replyingComments) {
+        comment.replyId = replyingComments[0].id;
+      }
 
-      setComments([
-        ...(comments as Comment[]),
-        { ...comment, timestamp: new Date().getTime() },
-      ]);
+      const addedComment = await writeComment(comment, props);
+
+      const updatedComments = [...(comments as CommentNode[])];
+      let currentCommentList = updatedComments;
+
+      if (replyingComments) {
+        replyingComments?.reverse().forEach(({ id }) => {
+          const index = currentCommentList.findIndex(
+            ({ comment }) => comment.id === id
+          );
+
+          if (index < 0) {
+            return;
+          }
+          const parentNode = currentCommentList[index];
+
+          currentCommentList[index] = { ...parentNode };
+
+          currentCommentList = parentNode.replies;
+        });
+      }
+
+      currentCommentList.push({ comment: addedComment, replies: [] });
+
+      setComments(updatedComments);
+      setReplyingComments(undefined);
     } catch (error) {
       // TODO the error should be displayed on page
       alert(error);
@@ -85,6 +113,8 @@ export function SwarmCommentSystem(props: SwarmCommentSystemProps) {
       <SwarmCommentForm
         className={classes?.form}
         onSubmit={sendComment}
+        replyingComment={replyingComments ? replyingComments[0] : undefined}
+        onReplyCancel={() => setReplyingComments(undefined)}
         loading={loading || formLoading}
       />
       <Tabs
@@ -94,7 +124,13 @@ export function SwarmCommentSystem(props: SwarmCommentSystemProps) {
         tabs={approvedFeedAddress ? ["Author Selected", "All"] : ["All"]}
         onTabChange={(tab) => setCategory(tab === 0 ? "approved" : "all")}
       >
-        <SwarmCommentList className={classes?.comments} comments={comments} />
+        <SwarmCommentList
+          className={classes?.comments}
+          onReply={setReplyingComments}
+          comments={comments}
+          replyLevel={0}
+          maxReplyLevel={3}
+        />
       </Tabs>
     </div>
   );