查看别人主页和关注

frontend/src/App.tsx

@@ -43,7 +43,7 @@ function App() {
           <Route path="/" element={<Home/>}/>
           <Route path="home" element={<Home/>}/>
           <Route path="explore" element={<Explore/>}/>
-          <Route path="profile" element={<Profile/>}/>
+          <Route path="profile/:userid" element={<Profile/>}/>
           <Route path="settings" element={<Settings/>}/>
           <Route path="*" element={<ErrorPage/>}/>
         </Routes>

frontend/src/actors/feed.ts

@@ -17,6 +17,11 @@ export default class Feed {
     return await getActor.createActor(idlFactory, this.canisterId.toString());
   }
 
+  private async getNoIdentityActor() {
+    return await getActor.noIdentityActor(idlFactory, this.canisterId.toString());
+
+  }
+
   async createPost(title: string, content: string) {
     const actor = await this.getActor()
     try {
@@ -40,7 +45,7 @@ export default class Feed {
   }
 
   async getAllPost() {
-    const actor = await this.getActor()
+    const actor = await this.getNoIdentityActor()
     try {
       const res = await actor.getAllPost() as PostImmutable[]
       updateAllData({allPost: res})
@@ -50,6 +55,16 @@ export default class Feed {
     }
   }
 
+  async getAllPostWithoutUpate() {
+    const actor = await this.getNoIdentityActor()
+    try {
+      return await actor.getAllPost() as PostImmutable[]
+    } catch (e) {
+      console.log("getAllPost", e)
+      throw e
+    }
+  }
+
   async createComment(postId: string, content: string) {
     const actor = await this.getActor()
     try {

frontend/src/actors/user.ts

@@ -53,6 +53,16 @@ class User {
       throw e
     }
   }
+
+  async follow(who: Principal) {
+    const actor = await User.getActor()
+    try {
+      await actor.follow(who)
+    } catch (e) {
+      console.log("follow", e)
+      throw e
+    }
+  }
 }
 
 

frontend/src/components/post.tsx

@@ -1,4 +1,4 @@
-import {Avatar, Modal, Space, Typography} from "antd";
+import {Avatar, message, Modal, Space, Typography} from "antd";
 import {
   CommentOutlined,
   RedoOutlined,
@@ -9,35 +9,36 @@ import {useAuth} from "../utils/useAuth";
 import Feed from "../actors/feed";
 import React, {useState} from "react";
 import {CommentForm} from "./Modal/commentForm";
-import {PostForm} from "./Modal/postForm";
 
 export default function Post(props: { content: PostImmutable, setPostItem?: Function }) {
   const {content, setPostItem} = props
   const {userFeedCai} = useAuth()
   const [open, setOpen] = useState(false)
+
   const feedApi = React.useMemo(() => {
     if (!userFeedCai) return undefined
     return new Feed(userFeedCai)
   }, [userFeedCai])
 
+  const tip = () => message.warning("please login first")
+
   const update = async () => {
-    if (!feedApi) return
+    if (!feedApi) return tip()
     await feedApi.getAllPost()
   }
 
   const repost = async () => {
-    if (!feedApi) return
+    if (!feedApi) return tip()
     await feedApi.createRepost(content.postId)
     update().then()
   }
 
   const like = async () => {
-    if (!feedApi) return
+    if (!feedApi) return tip()
     await feedApi.createLike(content.postId)
     update().then()
   }
 
-
   return (
     <div className={"content"} style={{
       padding: "12px",
@@ -78,7 +79,10 @@ export default function Post(props: { content: PostImmutable, setPostItem?: Func
         >
           <CommentForm postId={content.postId} setOpen={setOpen}/>
         </Modal>
-        <div style={{cursor: "pointer"}} onClick={() => setOpen(true)}>
+        <div style={{cursor: "pointer"}} onClick={() => {
+          if (!feedApi) return tip()
+          setOpen(true)
+        }}>
           <CommentOutlined/> &nbsp;
           {content.comment.length}
         </div>

frontend/src/components/sider.tsx

@@ -1,4 +1,4 @@
-import {Menu, Button, Avatar, Flex, Card, Space, Modal} from "antd";
+import {Menu, Button, Avatar, Flex, Card, Space, Modal, message} from "antd";
 import {
   HomeOutlined,
   SettingOutlined,
@@ -45,17 +45,10 @@ const items: MenuItemType[] = [
   }}/>),
 
 ];
-// const getUserProfile = (
-//     user_principal: Principal
-//     identity: Identity
-// ) => {
-//     const user = new User(identity);
-//     user.actor.getProfile(user_principal)
-// }
 
 export default function Sider() {
   const navigate = useNavigate();
-  const {isAuth, logIn} = useAuth()
+  const {isAuth, logIn, principal} = useAuth()
   const [open, setOpen] = useState(false)
 
   const onClick = (info: MenuInfo) => {
@@ -64,7 +57,8 @@ export default function Sider() {
     } else if (info.key === '2') {
       navigate('/explore');
     } else if (info.key === '3') {
-      navigate('/profile');
+      if (!principal) return message.warning("please login first")
+      navigate(`/profile/${principal.toText()}`);
     } else if (info.key === '4') {
       navigate('/settings');
     }

frontend/src/routes/profile.tsx

@@ -1,29 +1,70 @@
 import React, {useState, useEffect} from 'react';
-import {Layout, Image, Typography, Avatar, Flex, Space, Button, Modal, notification} from 'antd';
+import {Layout, Image, Typography, Avatar, Flex, Space, Button, Modal, message} from 'antd';
 import Post from '../components/post';
 import {userApi} from '../actors/user';
 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';
+import {useNavigate, useParams, useLocation} from "react-router-dom";
+import {Principal} from "@dfinity/principal";
+import {rootFeedApi} from "../actors/rootFeed";
+import Feed from "../actors/feed";
+import {useAllDataStore} from "../redux";
+import {useAuth} from "../utils/useAuth";
 
 export default function UserProfile() {
-  const {principal} = useAuth()
+  const {principal: me} = useAuth()
+  const navigate = useNavigate();
   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 [allPosts, setAllPosts] = useState<PostImmutable[]>()
+  const {userid} = useParams()
   const {allPost} = useAllDataStore()
+  const principal = React.useMemo(() => {
+    try {
+      return Principal.from(userid)
+    } catch (e) {
+      message.warning("id is illegal")
+      navigate("/")
+    }
+  }, [userid])
+
+  const isMe: boolean = React.useMemo(() => {
+    if (!me) return false
+    if (!principal) return false
+    return principal.toText() === me.toString()
+  }, [principal, me])
+
+
+  const getAllPost = async () => {
+    if (!principal || !me) {
+      setAllPosts([])
+      return
+    }
+    if (isMe) return setAllPosts(allPost)
+    const userFeedCai = await rootFeedApi.getUserFeedCanister(principal)
+    if (!userFeedCai) {
+      setAllPosts([])
+      return
+    }
+    const feedApi = new Feed(userFeedCai)
+    const posts = await feedApi.getAllPostWithoutUpate()
+    setAllPosts(posts)
+  }
+
 
   const getInfo = () => {
     if (!principal) return
     userApi.getProfile(principal).then(res => {
-      if (!res[0]) return
+      if (!res[0]) {
+        // message.warning("User does not exist")
+        // navigate("/")
+        return
+      }
       setUserProfile(res[0])
     })
     userApi.getFollowerNumber(principal).then(res => setFollowers(res))
@@ -32,26 +73,25 @@ export default function UserProfile() {
 
   useEffect(() => {
     getInfo()
-  }, [principal]);
+  }, [userid]);
 
-  const [api, contextHolder] = notification.useNotification();
+  useEffect(() => {
+    getAllPost()
+  }, [userid, me, allPost])
 
-  const openNotificationWithIcon = (type: NotificationType) => {
-    api[type]({
-      message: 'Not Login',
-      description:
-        'You should login to edit profile/',
-      duration: 1
-    });
-  };
 
   const handleEditProfile = () => {
-    if (!principal) {
-      openNotificationWithIcon('error')
+    setIsModalOpen(true);
+  };
+
+  const handleClick = async () => {
+    if (isMe) {
+      handleEditProfile()
     } else {
-      setIsModalOpen(true);
+      if (!principal) return
+      userApi.follow(principal).then()
     }
-  };
+  }
 
   return (
     <>
@@ -88,8 +128,7 @@ export default function UserProfile() {
             />
             <Typography.Text>{userProfile?.name}</Typography.Text>
           </Space>
-          {contextHolder}
-          <Button onClick={handleEditProfile}> Edit Profile </Button>
+          <Button onClick={handleClick}> {isMe ? "Edit Profile" : "Follow"} </Button>
           <Modal
             title="Edit Profile Information"
             open={isModalOpen}
@@ -115,7 +154,7 @@ export default function UserProfile() {
             <Typography.Text>{followers} Followers</Typography.Text>
           </Space>
         </div>
-        {allPost && allPost.map((v, k) => {
+        {allPosts && allPosts.map((v, k) => {
           return <Post setPostItem={setPostItem} content={v} key={k}/>
         })}
       </Layout.Content>

frontend/src/utils/useAuth.tsx

@@ -40,30 +40,33 @@ export const useProvideAuth = (authClient: IIForIdentity): Props => {
     isAuthClientReady && init().then()
   }, [isAuthClientReady]);
 
-  const getFeedCai = async () => {
-    if (!principal) return
+  const getFeedCai = async (principal: Principal) => {
     const e = await rootFeedApi.getUserFeedCanister(principal)
     let cai = e
     if (!e) {
       cai = await rootFeedApi.createFeedCanister()
     }
     setUserFeedCai(cai)
   }
-
+//aa3zr-2je3k-6vmid-vj657-x36hs-ylxag-e2jd5-pufmf-hh26e-uttum-rae
   useEffect(() => {
-    getFeedCai()
+    principal && getFeedCai(principal)
   }, [principal])
 
   const logIn = async (): Promise<{ message?: string; status?: number } | undefined> => {
-    if (!authClient) return {message: "connect error"};
-    const identity = await authClient.login();
-    const principal = identity.getPrincipal();
-    setPrincipal(principal);
-    if (identity) {
-      _setIdentity(_identity);
-      setAuthenticated(true);
-    } else {
-      return {message: "connect error"};
+    try {
+      if (!authClient) return {message: "connect error"};
+      const identity = await authClient.login();
+      const principal = identity.getPrincipal();
+      setPrincipal(principal);
+      if (identity) {
+        _setIdentity(_identity);
+        setAuthenticated(true);
+      } else {
+        return {message: "connect error"};
+      }
+    } catch (e) {
+      console.warn(e)
     }
   };