feat: Migrate CommentComponent from Angular to React

src/components/Comment/Comment.module.scss

@@ -0,0 +1,83 @@
+$mobile-only: "only screen and (max-width : 768px)";
+$tablet-only: "only screen and (max-width : 1024px)";
+
+a {
+  font-weight: bold;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.meta {
+  font-size: 13px;
+  color: #696969;
+  font-weight: bold;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+  a {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  .time {
+    padding-left: 5px;
+  }
+}
+
+@media #{$mobile-only} {
+  .meta {
+    font-size: 14px;
+    margin-bottom: 10px;
+    .time {
+      padding: 0;
+      float: right;
+    }
+  }
+}
+
+.meta-collapse {
+  margin-bottom: 20px;
+}
+
+.deleted-meta {
+  font-size: 12px;
+  font-weight: bold;
+  letter-spacing: 0.5px;
+  margin: 30px 0;
+  a {
+    text-decoration: none;
+  }
+}
+
+.collapse {
+  font-size: 13px;
+  letter-spacing: 2px;
+  cursor: pointer;
+}
+
+.comment-tree {
+  margin-left: 24px;
+}
+
+@media #{$tablet-only} {
+  .comment-tree {
+    margin-left: 8px;
+  }
+}
+
+.comment-text {
+  font-size: 15px;
+  margin-top: 0;
+  margin-bottom: 20px;
+  word-wrap: break-word;
+  line-height: 1.5em;
+}
+
+.subtree {
+  margin-left: 0;
+  padding: 0;
+  list-style-type: none;
+}

src/components/Comment/Comment.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { CommentProps } from './Comment.types';
+import styles from './Comment.module.scss';
+
+const Comment: React.FC<CommentProps> = ({ comment }) => {
+  const [collapse, setCollapse] = useState(false);
+
+  if (comment.deleted) {
+    return (
+      <div>
+        <div className={styles['deleted-meta']}>
+          <span className={styles.collapse}>[deleted]</span> | Comment Deleted
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className={collapse ? `${styles.meta} ${styles['meta-collapse']}` : styles.meta}>
+        <span className={styles.collapse} onClick={() => setCollapse(!collapse)}>
+          [{collapse ? '+' : '-'}]
+        </span>{' '}
+        <Link to={`/user/${comment.user}`}>{comment.user}</Link>
+        <span className={styles.time}>{comment.time_ago}</span>
+      </div>
+      <div className={styles['comment-tree']}>
+        {!collapse && (
+          <div>
+            <p
+              className={styles['comment-text']}
+              dangerouslySetInnerHTML={{ __html: comment.content }}
+            />
+            <ul className={styles.subtree}>
+              {comment.comments.map((subComment) => (
+                <li key={subComment.id}>
+                  <Comment comment={subComment} />
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Comment;

src/components/Comment/Comment.types.ts

@@ -0,0 +1,14 @@
+export interface Comment {
+  id: number;
+  level: number;
+  user: string;
+  time: number;
+  time_ago: string;
+  content: string;
+  deleted: boolean;
+  comments: Comment[];
+}
+
+export interface CommentProps {
+  comment: Comment;
+}