added CommentsCards to components

packages/app/src/components/CommentsCard/index.jsx

@@ -0,0 +1,86 @@
+import React from "react"
+import * as antd from "antd"
+import moment from "moment"
+
+import { CommentCreator } from "components"
+
+import "./index.less"
+
+export default (props) => {
+    const [postData, setPostData] = React.useState(null)
+    const [comments, setComments] = React.useState(null)
+
+    const fetchData = async () => {
+        setPostData(null)
+        setComments(null)
+
+        // fetch post data
+        const postDataResult = await window.app.api.request("main", "get", `post`, undefined, {
+            post_id: props.post_id
+        }).catch((err) => {
+            console.log(err)
+
+            antd.message.error("Failed to fetch post data")
+
+            return null
+        })
+
+        if (!postDataResult) return
+
+        setPostData(postDataResult)
+
+        // fetch comments
+        const commentsResult = await window.app.api.customRequest("main", {
+            method: "get",
+            url: `/post/${props.post_id}/comments`,
+        }).catch((err) => {
+            console.log(err)
+
+            antd.message.error("Failed to fetch comments")
+
+            return null
+        })
+
+        console.log(commentsResult)
+
+        if (!commentsResult) return
+
+        setComments(commentsResult.data)
+    }
+
+    React.useEffect(() => {
+        fetchData()
+    }, [])
+
+    const renderComments = () => {
+        return comments.map((comment) => {
+            return <div className="comment" id={comment._id}>
+                <div className="header">
+                    <div className="avatar">
+                        <antd.Avatar src={comment.user.avatar} />
+                    </div>
+                    <div className="username">
+                        {comment.user.username}
+                    </div>
+                    <div className="timeAgo">
+                        {moment(comment.createdAt).fromNow()}
+                    </div>
+                </div>
+                <div className="content">
+                    {comment.message}
+                </div>
+            </div>
+        })
+    }
+
+    if (!comments) {
+        return <antd.Skeleton active />
+    }
+
+    return <div className="comments">
+        {renderComments()}
+        <div className="commentCreatorWrapper">
+            <CommentCreator />
+        </div>
+    </div>
+}

packages/app/src/components/CommentsCard/index.less

@@ -0,0 +1,71 @@
+.comments {
+    display: flex;
+    flex-direction: column;
+
+    padding: 10px;
+
+    .comment {
+        display: flex;
+        flex-direction: column;
+
+        margin-bottom: 10px;
+
+        background-color: var(--background-color-accent);
+
+        padding: 10px;
+
+        border-radius: 8px;
+
+        .header {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+
+            margin-bottom: 15px;
+
+            .avatar {
+                width: 30px;
+                height: 30px;
+                border-radius: 50%;
+                margin-right: 10px;
+            }
+
+            .username {
+                font-size: 14px;
+                font-weight: 600;
+                color: #000;
+            }
+
+            .timeAgo {
+                font-size: 12px;
+                color: #999;
+                margin-left: 10px;
+            }
+        }
+
+        .content {
+            font-size: 14px;
+            color: var(--text-color);
+            margin-left: 20px;
+        }
+    }
+
+    .commentCreatorWrapper {
+        position: sticky;
+        display: flex;
+
+        flex-direction: column;
+        align-items: center;
+
+        bottom: 0;
+        right: 0;
+
+        width: 100%;
+        padding: 30px 5px;
+        
+        backdrop-filter: blur(10px);
+        border-radius: 10px;
+
+        background-color: rgba(var(--background-color-accent), 0.6);
+    }
+}