From 47b495bdd31701782ef702df69f7d46a254078d7 Mon Sep 17 00:00:00 2001
From: Shuaige1234567 <dujunhongshishuaige@gmail.com>
Date: Tue, 12 Dec 2023 22:17:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=91=E6=8E=A8=E5=92=8C=E8=AF=84=E8=AE=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Modal/EditModal.tsx   |  8 ++--
 frontend/src/components/Modal/commentForm.tsx |  6 +--
 frontend/src/components/Modal/postForm.tsx    |  2 +-
 frontend/src/components/comment.tsx           |  1 +
 frontend/src/components/post.tsx              | 39 ++++++++++---------
 frontend/src/routes/profile.tsx               | 13 ++++++-
 6 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/Modal/EditModal.tsx b/frontend/src/components/Modal/EditModal.tsx
index 2ca55bf..5bec62b 100644
--- a/frontend/src/components/Modal/EditModal.tsx
+++ b/frontend/src/components/Modal/EditModal.tsx
@@ -36,8 +36,8 @@ const tailFormItemLayout = {
 };
 
 
-export function EditModal(props: { onFinish: (values: any) => void, form: FormInstance<any> | undefined }) {
-  const {onFinish, form} = props
+export function EditModal(props: { isComment: boolean, onFinish: (values: any) => void, form: FormInstance<any> | undefined }) {
+  const {onFinish, form, isComment} = props
 
   return (
     <Form
@@ -48,12 +48,12 @@ export function EditModal(props: { onFinish: (values: any) => void, form: FormIn
       style={{maxWidth: 600}}
       scrollToFirstError
     >
-      <Form.Item
+      {!isComment ? <Form.Item
         name="title"
         label="Title"
       >
         <Input/>
-      </Form.Item>
+      </Form.Item> : <></>}
 
       <Form.Item
         name="content"
diff --git a/frontend/src/components/Modal/commentForm.tsx b/frontend/src/components/Modal/commentForm.tsx
index c23e17e..2e66539 100644
--- a/frontend/src/components/Modal/commentForm.tsx
+++ b/frontend/src/components/Modal/commentForm.tsx
@@ -6,20 +6,20 @@ import {useAuth} from "../../utils/useAuth";
 import Feed from "../../actors/feed";
 import {EditModal} from "./EditModal";
 
-export function CommentForm(props: { setOpen: Function }) {
+export function CommentForm(props: {postId:string, setOpen: Function }) {
   const {userFeedCai} = useAuth()
   const [form] = Form.useForm();
 
   const onFinish = async (values: { title: string, content: string }) => {
     if (!userFeedCai) return
     const feedApi = new Feed(userFeedCai)
-    await feedApi.createComment(values.title, values.content)
+    await feedApi.createComment(props.postId, values.content)
     await feedApi.getAllPost()
     form.resetFields()
     props.setOpen(false)
   };
 
   return (
-    <EditModal form={form} onFinish={onFinish}/>
+    <EditModal isComment={true} form={form} onFinish={onFinish}/>
   );
 };
diff --git a/frontend/src/components/Modal/postForm.tsx b/frontend/src/components/Modal/postForm.tsx
index cf963fe..a97a5cd 100644
--- a/frontend/src/components/Modal/postForm.tsx
+++ b/frontend/src/components/Modal/postForm.tsx
@@ -20,6 +20,6 @@ export function PostForm(props: { setOpen: Function }) {
   };
 
   return (
-    <EditModal form={form} onFinish={onFinish}/>
+    <EditModal isComment={false} form={form} onFinish={onFinish}/>
   );
 };
diff --git a/frontend/src/components/comment.tsx b/frontend/src/components/comment.tsx
index a233975..38c52e8 100644
--- a/frontend/src/components/comment.tsx
+++ b/frontend/src/components/comment.tsx
@@ -8,6 +8,7 @@ export function Comments(props: { content: Comment }) {
     <Flex
       vertical
       className={"content"}
+      style={{padding: "0 20px"}}
     >
       <Space>
         <Avatar
diff --git a/frontend/src/components/post.tsx b/frontend/src/components/post.tsx
index 03690e2..968e04e 100644
--- a/frontend/src/components/post.tsx
+++ b/frontend/src/components/post.tsx
@@ -44,23 +44,26 @@ export default function Post(props: { content: PostImmutable, setPostItem?: Func
       border: "1px solid rgba(0,0,0,0.2)",
       borderRadius: "20px",
       marginBottom: "20px",
-      cursor: "pointer"
-    }} onClick={() => setPostItem?.(content)}>
-      <Space>
-        <Avatar
-          size={32}
-          src="https://avatars.githubusercontent.com/u/120618331?s=200&v=4"
-          style={{
-            border: '1px solid #D3D540',
-          }}
-        />
-        <p>NeutronStarDAO</p>
-      </Space>
-      <Typography.Paragraph style={{
-        paddingLeft: '12px'
-      }}>
-        {content.content}
-      </Typography.Paragraph>
+    }}>
+      <div style={{
+        cursor: "pointer"
+      }} onClick={() => setPostItem?.(content)}>
+        <Space>
+          <Avatar
+            size={32}
+            src="https://avatars.githubusercontent.com/u/120618331?s=200&v=4"
+            style={{
+              border: '1px solid #D3D540',
+            }}
+          />
+          <p>NeutronStarDAO</p>
+        </Space>
+        <Typography.Paragraph style={{
+          paddingLeft: '12px'
+        }}>
+          {content.content}
+        </Typography.Paragraph>
+      </div>
       <Space
         size={140}
         style={{
@@ -73,7 +76,7 @@ export default function Post(props: { content: PostImmutable, setPostItem?: Func
           footer={null}
           onCancel={() => setOpen(false)}
         >
-          <CommentForm setOpen={setOpen}/>
+          <CommentForm postId={content.postId} setOpen={setOpen}/>
         </Modal>
         <div style={{cursor: "pointer"}} onClick={() => setOpen(true)}>
           <CommentOutlined/> &nbsp;
diff --git a/frontend/src/routes/profile.tsx b/frontend/src/routes/profile.tsx
index c837c64..31dd5c5 100644
--- a/frontend/src/routes/profile.tsx
+++ b/frontend/src/routes/profile.tsx
@@ -6,6 +6,8 @@ import {Profile} from '../declarations/user/user';
 import {useAuth} from "../utils/useAuth";
 import {useAllDataStore} from "../redux";
 import ProfileForm from "../components/Modal/form";
+import {Comments} from "../components/comment";
+import {PostImmutable} from "../declarations/feed/feed";
 
 type NotificationType = 'success' | 'info' | 'warning' | 'error';
 
@@ -13,6 +15,7 @@ export default function UserProfile() {
   const {principal} = useAuth()
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [userProfile, setUserProfile] = useState<Profile | undefined>();
+  const [postItem, setPostItem] = useState<PostImmutable>()
   const [following, setFollowing] = useState(0)
   const [followers, setFollowers] = useState(0)
   const {allPost} = useAllDataStore()
@@ -113,13 +116,19 @@ export default function UserProfile() {
           </Space>
         </div>
         {allPost && allPost.map((v, k) => {
-          return <Post content={v} key={k}/>
+          return <Post setPostItem={setPostItem} content={v} key={k}/>
         })}
       </Layout.Content>
 
-      <Layout.Content style={{
+      <Layout.Content className={"posts"} style={{
         backgroundColor: 'white',
+        overflowY: 'auto',
+        scrollbarWidth: 'thin',
+        padding: "40px 20px"
       }}>
+        {postItem && postItem.comment.map((v, k) => {
+          return <Comments content={v} key={k}/>
+        })}
       </Layout.Content>
     </>
   )