点赞，转推

frontend/src/actors/bucket.ts

@@ -0,0 +1,29 @@
+import {Principal} from "@dfinity/principal";
+import {idlFactory} from "../declarations/bucket/bucket.did.js";
+import {getActor} from "../utils/Actor";
+import {PostImmutable} from "../declarations/bucket/bucket";
+
+
+export default class Bucket {
+
+  private readonly canisterId: Principal;
+
+  constructor(canisterId: Principal) {
+    this.canisterId = canisterId;
+  }
+
+  private async getActor() {
+    return await getActor.createActor(idlFactory, this.canisterId.toString());
+  }
+
+  async getLatestFeed(n: number) {
+    const actor = await this.getActor()
+    try {
+      return await actor.getLatestFeed(BigInt(n)) as PostImmutable[]
+    } catch (e) {
+      console.log("getLatestFeed", e)
+      throw e
+    }
+  }
+
+}

frontend/src/actors/feed.ts

@@ -50,29 +50,45 @@ export default class Feed {
     }
   }
 
-  // async createComment(postId, content) {
-  //     const result = await this.actor.createComment(postId, content);
-  //     return result;
-  // }
-
-  // async createRepost(postId) {
-  //     const result = await this.actor.createRepost(postId);
-  //     return result;
-  // }
+  async createComment(postId: string, content: string) {
+    const actor = await this.getActor()
+    try {
+      return await actor.createComment(postId, content) as boolean
+    } catch (e) {
+      console.log("createComment", e)
+      throw e
+    }
+  }
 
-  // async createLike(postId) {
-  //     const result = await this.actor.createLike(postId);
-  //     return result;
-  // }
+  async createRepost(postId: string) {
+    const actor = await this.getActor()
+    try {
+      return await actor.createRepost(postId) as boolean
+    } catch (e) {
+      console.log("createRepost", e)
+      throw e
+    }
+  }
 
-  // async getFeedNumber() {
-  //     const result = await this.actor.getFeedNumber();
-  //     return result;
-  // }
+  async createLike(postId: string) {
+    const actor = await this.getActor()
+    try {
+      return await actor.createLike(postId) as boolean
+    } catch (e) {
+      console.log("createLike", e)
+      throw e
+    }
+  }
 
-  // async getFeed(postId) {
-  //     return await this.actor.getFeed(postId);
-  // }
+  async getPost(postId: string) {
+    const actor = await this.getActor()
+    try {
+      return await actor.getPost(postId) as [] | [PostImmutable]
+    } catch (e) {
+      console.log("getPost", e)
+      throw e
+    }
+  }
 
   async getLatestFeed(n: number): Promise<PostImmutable[]> {
     const actor = await this.getActor()

frontend/src/actors/rootPost.ts

@@ -0,0 +1,23 @@
+import {getActor} from "../utils/Actor";
+import {idlFactory} from "../declarations/rootPost/rootPost.did.js"
+import {Principal} from "@dfinity/principal";
+
+const rootPostCai = "lyksr-aiaaa-aaaan-qgj2q-cai"
+
+class rootPost {
+  private static async getActor() {
+    return await getActor.createActor(idlFactory, rootPostCai);
+  }
+
+  async getAvailableBucket() {
+    const actor = await rootPost.getActor()
+    try {
+      return await actor.getAvailableBucket() as [] | [Principal]
+    } catch (e) {
+      console.log("getAvailableBucket", e)
+      throw e
+    }
+  }
+}
+
+export const rootPostApi = new rootPost()

frontend/src/components/comment.tsx

@@ -1,6 +1,9 @@
 import {Flex, Space, Avatar, Typography, Divider} from 'antd';
+import {Comment} from "../declarations/feed/feed"
 
-export default function Comment() {
+
+export function Comments(props: { content: Comment }) {
+  const {content} = props
   return (
     <Flex
       vertical
@@ -17,12 +20,9 @@ export default function Comment() {
         <p>NeutronStarDAO</p>
       </Space>
       <Typography.Paragraph>
-        This is Comment;This is Comment;This is Comment;
-        This is Comment;This is Comment;This is Comment;
-        This is Comment;This is Comment;This is Comment;
-        This is Comment;This is Comment;This is Comment;
+        {content.content}
       </Typography.Paragraph>
-      <Divider style={{marginBottom:"0"}}/>
+      <Divider style={{marginBottom: "0"}}/>
     </Flex>
   )
 }

frontend/src/components/post.tsx

@@ -5,16 +5,48 @@ import {
   HeartOutlined
 } from '@ant-design/icons';
 import {PostImmutable} from "../declarations/feed/feed";
+import {useAuth} from "../utils/useAuth";
+import Feed from "../actors/feed";
+import React, {useState} from "react";
+
+export default function Post(props: { content: PostImmutable, setPostItem?: Function }) {
+  const {content: data, setPostItem} = props
+  const {userFeedCai} = useAuth()
+  const [content, setContent] = useState(data)
+
+  const feedApi = React.useMemo(() => {
+    if (!userFeedCai) return undefined
+    return new Feed(userFeedCai)
+  }, [userFeedCai])
+
+  const update = async () => {
+    if (!feedApi) return
+    const updateData = await feedApi.getPost(content.postId)
+    console.log("updateData", updateData)
+    if (!updateData[0]) return
+    setContent(updateData[0])
+  }
+
+  const repost = async () => {
+    if (!feedApi) return
+    await feedApi.createRepost(content.postId)
+    update().then()
+  }
+
+  const like = async () => {
+    if (!feedApi) return
+    await feedApi.createLike(content.postId)
+    update().then()
+  }
 
-export default function Post(props: { content: PostImmutable }) {
-  const {content} = props
   return (
     <div className={"content"} style={{
       padding: "12px",
       border: "1px solid rgba(0,0,0,0.2)",
       borderRadius: "20px",
       marginBottom: "20px",
-    }}>
+      cursor: "pointer"
+    }} onClick={() => setPostItem?.(content)}>
       {/*<Divider/>*/}
       <Space>
         <Avatar
@@ -37,16 +69,16 @@ export default function Post(props: { content: PostImmutable }) {
           paddingLeft: '25px'
         }}
       >
-        <div>
+        <div style={{cursor: "pointer"}}>
           <CommentOutlined/> &nbsp;
           {content.comment.length}
         </div>
-        <div>
+        <div style={{cursor: "pointer"}} onClick={repost}>
           <RedoOutlined/>
           &nbsp;
           {content.repost.length}
         </div>
-        <div>
+        <div style={{cursor: "pointer"}} onClick={like}>
           <HeartOutlined/>&nbsp;
           {content.like.length}
         </div>

frontend/src/declarations/bucket/index.d.ts

@@ -7,7 +7,7 @@ import type {
 import type { Principal } from "@dfinity/principal";
 import type { IDL } from "@dfinity/candid";
 
-import { _SERVICE } from './bucket.did';
+import { _SERVICE } from './bucket';
 
 export declare const idlFactory: IDL.InterfaceFactory;
 export declare const canisterId: string;

frontend/src/declarations/rootPost/index.d.ts

@@ -7,7 +7,7 @@ import type {
 import type { Principal } from "@dfinity/principal";
 import type { IDL } from "@dfinity/candid";
 
-import { _SERVICE } from './rootPost.did';
+import { _SERVICE } from './rootPost';
 
 export declare const idlFactory: IDL.InterfaceFactory;
 export declare const canisterId: string;

frontend/src/routes/content.tsx

@@ -1,11 +1,12 @@
-import React from "react";
+import React, {useState} from "react";
 import {Layout} from "antd";
 import Post from "../components/post";
-import Comment from "../components/comment";
+import {Comments} from "../components/comment";
 import {Like, PostId, PostImmutable, Repost, Time, UserId} from "../declarations/feed/feed";
 
 export const Content = React.memo((props: { contents: PostImmutable[] }) => {
   const {contents} = props
+  const [postItem, setPostItem] = useState<PostImmutable>()
   return <>
     <Layout.Content className={"posts"} style={{
       backgroundColor: "white",
@@ -16,23 +17,18 @@ export const Content = React.memo((props: { contents: PostImmutable[] }) => {
       padding: "40px 20px"
     }}>
       {contents.map((v, k) => {
-        return <Post content={v} key={k}/>
+        return <Post setPostItem={setPostItem} content={v} key={k}/>
+      })}
+    </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>
-    {/*<Layout.Content className={"posts"} style={{*/}
-    {/*  backgroundColor: 'white',*/}
-    {/*  overflowY: 'auto',*/}
-    {/*  scrollbarWidth: 'thin',*/}
-    {/*  padding:"40px 20px"*/}
-    {/*}}>*/}
-    {/*  <Comment/>*/}
-    {/*  <Comment/>*/}
-    {/*  <Comment/>*/}
-    {/*  <Comment/>*/}
-    {/*  <Comment/>*/}
-    {/*  <Comment/>*/}
-    {/*  <Comment/>*/}
-    {/*  <Comment/>*/}
-    {/*</Layout.Content>*/}
   </>
 })

frontend/src/routes/explore.tsx

@@ -1,6 +1,23 @@
 import {Content} from "./content";
-import React from "react";
+import React, {useEffect, useState} from "react";
+import {rootPostApi} from "../actors/rootPost";
+import Bucket from "../actors/bucket";
+import {PostImmutable} from "../declarations/feed/feed";
 
 export default function Explore() {
-  return <Content contents={[]}/>
+  const [contents, setContents] = useState<PostImmutable[]>([])
+
+  const fetch = async () => {
+    const bucket = await rootPostApi.getAvailableBucket()
+    if (!bucket[0]) return
+    const bucketApi = new Bucket(bucket[0])
+    const res = await bucketApi.getLatestFeed(30)
+    setContents(res)
+  }
+
+  useEffect(() => {
+    fetch()
+  }, [])
+
+  return <Content contents={contents}/>
 }