给别人评论，点赞

NeutronStarDAO · Dec 13, 2023 · 8f7162a · 8f7162a
1 parent 993a811
commit 8f7162a
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 70 deletions.
diff --git a/frontend/src/routes/content.tsx b/frontend/src/routes/content.tsx
@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from "react";
-import {Layout, Spin, Flex, Result } from "antd";
-import { SmileOutlined } from '@ant-design/icons';
+import {Layout, Spin, Flex, Result} from "antd";
+import {SmileOutlined} from '@ant-design/icons';
 import Post from "../components/post";
 import {Comments} from "../components/comment";
 import {PostImmutable} from "../declarations/feed/feed";
@@ -40,69 +40,70 @@ export const Content = React.memo((props: { contents?: PostImmutable[] }) => {
     getAllCommentProfiles()
   }, [postItem])
 
-  if(contents !== undefined && contents?.length > 0) {
-    return <>
-      <Layout.Content className={"posts"} style={{
-        backgroundColor: "white",
-        overflowY: 'auto',
-        scrollbarWidth: 'thin',
-        width: '200px',
-        borderRight: '1px solid rgba(0,0,0,0.2)',
-        padding: "40px 20px"
-      }}>
-        {onLoading && <Flex align="center" justify="center">
-          <Spin size="large"/>
-        </Flex>}
-        {!onLoading && contents && contents.map((v, k) => {
-          return <Post setPostItem={setPostItem} content={v} key={k}
-                      avatar={userProfileArray?.[k] ? userProfileArray[k].avatarUrl : ""}
-                      name={userProfileArray?.[k] ? userProfileArray[k].name : ""}/>
-        })}
-      </Layout.Content>
-      <Layout.Content className={"posts"} style={{
-        backgroundColor: 'white',
-        overflowY: 'auto',
-        scrollbarWidth: 'thin',
-        padding: "40px 20px"
-      }}>
-        {postItem ? !commentLoading ? postItem.comment.map((v, k) => {
-          return <Comments avatar={commentProfiles?.[k] ? commentProfiles [k]?.avatarUrl : ""}
-                          name={commentProfiles?.[k] ? commentProfiles [k]?.name : ""}
-                          content={v} key={k}/>
-        }) : <Flex align="center" justify="center">
-          <Spin size="large"/>
-        </Flex> : <></>}
-      </Layout.Content>
-    </>
-  } else {
-    return (
-      <>
-        <Layout.Content className={"posts"} style={{
-          backgroundColor: "white",
-          overflowY: 'auto',
-          scrollbarWidth: 'thin',
-          width: '200px',
-          borderRight: '1px solid rgba(0,0,0,0.2)',
-          padding: "40px 20px",
-        }}>
-          <Result
-            icon={<SmileOutlined />}
-            title="There Is No Feed !"
-            subTitle="Please Follow SomeOne To Get Feed Or Refresh The Website"
-            style={{
-              backgroundColor: 'white'
-            }}
-          />
-        </Layout.Content>
-        <Layout.Content className={"posts"} style={{
-          backgroundColor: 'white',
-          overflowY: 'auto',
-          scrollbarWidth: 'thin',
-          padding: "40px 20px"
-        }}>
+  if (contents !== undefined && contents.length === 0) return <Empty/>
+
+  return <>
+    <Layout.Content className={"posts"} style={{
+      backgroundColor: "white",
+      overflowY: 'auto',
+      scrollbarWidth: 'thin',
+      width: '200px',
+      borderRight: '1px solid rgba(0,0,0,0.2)',
+      padding: "40px 20px"
+    }}>
+      {onLoading && <Flex align="center" justify="center">
+        <Spin size="large"/>
+      </Flex>}
+      {!onLoading && contents && contents.map((v, k) => {
+        return <Post setPostItem={setPostItem} content={v} key={k}
+                     avatar={userProfileArray?.[k] ? userProfileArray[k].avatarUrl : ""}
+                     name={userProfileArray?.[k] ? userProfileArray[k].name : ""}/>
+      })}
+    </Layout.Content>
+    <Layout.Content className={"posts"} style={{
+      backgroundColor: 'white',
+      overflowY: 'auto',
+      scrollbarWidth: 'thin',
+      padding: "40px 20px"
+    }}>
+      {postItem ? !commentLoading ? postItem.comment.map((v, k) => {
+        return <Comments avatar={commentProfiles?.[k] ? commentProfiles [k]?.avatarUrl : ""}
+                         name={commentProfiles?.[k] ? commentProfiles [k]?.name : ""}
+                         content={v} key={k}/>
+      }) : <Flex align="center" justify="center">
+        <Spin size="large"/>
+      </Flex> : <></>}
+    </Layout.Content>
+  </>
 
-        </Layout.Content>
-      </>
-    )
-  }
 })
+
+const Empty = () => {
+  return <>
+    <Layout.Content className={"posts"} style={{
+      backgroundColor: "white",
+      overflowY: 'auto',
+      scrollbarWidth: 'thin',
+      width: '200px',
+      borderRight: '1px solid rgba(0,0,0,0.2)',
+      padding: "40px 20px",
+    }}>
+      <Result
+        icon={<SmileOutlined/>}
+        title="There Is No Feed !"
+        subTitle="Please Follow SomeOne To Get Feed Or Refresh The Website"
+        style={{
+          backgroundColor: 'white'
+        }}
+      />
+    </Layout.Content>
+    <Layout.Content className={"posts"} style={{
+      backgroundColor: 'white',
+      overflowY: 'auto',
+      scrollbarWidth: 'thin',
+      padding: "40px 20px"
+    }}>
+
+    </Layout.Content>
+  </>
+}
diff --git a/frontend/src/routes/explore.tsx b/frontend/src/routes/explore.tsx
@@ -3,14 +3,12 @@ import React, {useEffect, useState} from "react";
 import {rootPostApi} from "../actors/rootPost";
 import Bucket from "../actors/bucket";
 import {PostImmutable} from "../declarations/feed/feed";
-import { Layout, Result } from 'antd';
-import { SmileOutlined } from '@ant-design/icons';
 
 export default function Explore() {
-  const [contents, setContents] = useState<PostImmutable[]>([])
+  const [contents, setContents] = useState<PostImmutable[]>()
   const fetch = async () => {
     const bucket = await rootPostApi.getAvailableBucket()
-    if (!bucket[0]) return
+    if (!bucket[0]) return setContents([])
     const bucketApi = new Bucket(bucket[0])
     const res = await bucketApi.getLatestFeed(30)
     setContents(res)