comment loading

NeutronStarDAO · Dec 13, 2023 · 5e0ab25 · 5e0ab25
1 parent 2e84c95
commit 5e0ab25
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 77 deletions.
diff --git a/frontend/src/components/comment.tsx b/frontend/src/components/comment.tsx
@@ -2,8 +2,8 @@ import {Flex, Space, Avatar, Typography, Divider} from 'antd';
 import {Comment} from "../declarations/feed/feed"
 
 
-export function Comments(props: { content: Comment }) {
-  const {content} = props
+export function Comments(props: { content: Comment, avatar?: string, name?: string }) {
+  const {content, avatar, name} = props
   return (
     <Flex
       vertical
@@ -13,12 +13,12 @@ export function Comments(props: { content: Comment }) {
       <Space>
         <Avatar
           size={32}
-          src="https://avatars.githubusercontent.com/u/120618331?s=200&v=4"
+          src={avatar ? avatar : "https://avatars.githubusercontent.com/u/120618331?s=200&v=4"}
           style={{
             border: '1px solid #D3D540',
           }}
         />
-        <p>NeutronStarDAO</p>
+        <p>{name ? name : "NeutronStarDAO"}</p>
       </Space>
       <Typography.Paragraph>
         {content.content}

diff --git a/frontend/src/routes/content.tsx b/frontend/src/routes/content.tsx
@@ -2,84 +2,75 @@ import React, {useEffect, useState} from "react";
 import {Layout, Spin, Flex} from "antd";
 import Post from "../components/post";
 import {Comments} from "../components/comment";
-import {Like, PostId, PostImmutable, Repost, Time, UserId} from "../declarations/feed/feed";
+import {PostImmutable} from "../declarations/feed/feed";
 import {Profile} from '../declarations/user/user';
-import { userApi } from '../actors/user';
-import { Principal } from "@dfinity/principal";
+import {userApi} from '../actors/user';
 
 export const Content = React.memo((props: { contents?: PostImmutable[] }) => {
   const {contents} = props
   const [postItem, setPostItem] = useState<PostImmutable>()
   const [userProfileArray, setUserProfileArray] = useState<Profile[]>();
-  const [onLoading, setOnloading] = useState(false);
+  const [onLoading, setOnloading] = useState(true);
+  const [commentProfiles, setCommentProfiles] = useState<Profile[]>()
+  const [commentLoading, setCommentLoading] = useState(true)
+
+  const getAllUserProfile = async () => {
+    if (!contents) return setUserProfileArray([])
+    const userPrincipalArray = contents.map(v => v.user)
+    const result = await userApi.batchGetProfile(userPrincipalArray)
+    setUserProfileArray(result)
+    setOnloading(false)
+  }
 
   useEffect(() => {
-    const initUserProfileArray = async () => {
-      if(contents !== undefined) {
-        const userPrincipalArray = (Array.from(contents!.reduce((uniqueUsers, value) => {
-          uniqueUsers.add(value.user.toString());
-          return uniqueUsers;
-        }, new Set<string>()))).map(value => Principal.fromText(value));
-        if(userPrincipalArray !== undefined && userPrincipalArray?.length > 0) {
-          const result = await userApi.batchGetProfile(userPrincipalArray!);
-          setUserProfileArray(result)
-          setOnloading(true)
-        }
-      }
-    };
-    initUserProfileArray()
+    getAllUserProfile()
   }, [contents]);
 
-  if(onLoading) {
-    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"
-      }}>
-        {contents && contents.map((v, k) => {
-          const _userProfile = userProfileArray?.find(item => {
-            return item.id.toString() === v.user.toString()
-          });
-          return <Post setPostItem={setPostItem} content={v} key={k} avatar={_userProfile?.avatarUrl} name={_userProfile?.name}/>
-        })}
-      </Layout.Content>
-      <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>
-    </>
-  } 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"
-      }}>
-        <Flex align="center" justify="center">
-          <Spin size="large" />
-        </Flex>
-      </Layout.Content>
-      <Layout.Content className={"posts"} style={{
-        backgroundColor: 'white',
-        overflowY: 'auto',
-        scrollbarWidth: 'thin',
-        padding: "40px 20px"
-      }}>
-      </Layout.Content>
-    </>
+  const getAllCommentProfiles = async () => {
+    if (!postItem) return setCommentProfiles([])
+    const comments = postItem.comment
+    const allIds = comments.map(v => v.user)
+    const result = await userApi.batchGetProfile(allIds);
+    setCommentProfiles(result)
+    setCommentLoading(false)
   }
 
+  useEffect(() => {
+    getAllCommentProfiles()
+  }, [postItem])
+
+  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>
+  </>
+
 })
diff --git a/frontend/src/routes/profile.tsx b/frontend/src/routes/profile.tsx
@@ -1,5 +1,5 @@
 import React, {useState, useEffect} from 'react';
-import {Layout, Image, Typography, Avatar, Flex, Space, Button, Modal, message} from 'antd';
+import {Layout, Image, Typography, Avatar, Flex, Space, Button, Modal, message, Spin} from 'antd';
 import Post from '../components/post';
 import {userApi} from '../actors/user';
 import {Profile} from '../declarations/user/user';
@@ -24,7 +24,22 @@ export default function UserProfile() {
   const [followers, setFollowers] = useState(0)
   const [allPosts, setAllPosts] = useState<PostImmutable[]>()
   const {userid} = useParams()
+  const [commentProfiles, setCommentProfiles] = useState<Profile[]>()
+  const [commentLoading, setCommentLoading] = useState(true)
   const {allPost} = useAllDataStore()
+  const getAllCommentProfiles = async () => {
+    if (!postItem) return setCommentProfiles([])
+    const comments = postItem.comment
+    const allIds = comments.map(v => v.user)
+    const result = await userApi.batchGetProfile(allIds);
+    setCommentProfiles(result)
+    setCommentLoading(false)
+  }
+
+  useEffect(() => {
+    getAllCommentProfiles()
+  }, [postItem])
+
   const principal = React.useMemo(() => {
     try {
       return Principal.from(userid)
@@ -155,7 +170,8 @@ export default function UserProfile() {
           </Space>
         </div>
         {allPosts && allPosts.map((v, k) => {
-          return <Post setPostItem={setPostItem} content={v} key={k}/>
+          return <Post name={userProfile?.name} avatar={userProfile?.avatarUrl} setPostItem={setPostItem} content={v}
+                       key={k}/>
         })}
       </Layout.Content>
 
@@ -165,9 +181,13 @@ export default function UserProfile() {
         scrollbarWidth: 'thin',
         padding: "40px 20px"
       }}>
-        {postItem && postItem.comment.map((v, k) => {
-          return <Comments content={v} key={k}/>
-        })}
+        {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>
     </>
   )