From 961b55c0bab1279075a65bee61e3f52f052ef574 Mon Sep 17 00:00:00 2001 From: Shuaige1234567 Date: Tue, 12 Dec 2023 23:36:31 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9F=A5=E7=9C=8B=E5=88=AB=E4=BA=BA=E4=B8=BB?= =?UTF-8?q?=E9=A1=B5=E5=92=8C=E5=85=B3=E6=B3=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.tsx | 2 +- frontend/src/actors/feed.ts | 17 +++++- frontend/src/actors/user.ts | 10 ++++ frontend/src/components/post.tsx | 18 ++++--- frontend/src/components/sider.tsx | 14 ++--- frontend/src/routes/profile.tsx | 87 ++++++++++++++++++++++--------- frontend/src/utils/useAuth.tsx | 29 ++++++----- 7 files changed, 121 insertions(+), 56 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 0ad9fac..b6ad8ef 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -43,7 +43,7 @@ function App() { }/> }/> }/> - }/> + }/> }/> }/> diff --git a/frontend/src/actors/feed.ts b/frontend/src/actors/feed.ts index 86f3708..b89032b 100644 --- a/frontend/src/actors/feed.ts +++ b/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 { diff --git a/frontend/src/actors/user.ts b/frontend/src/actors/user.ts index 750627f..69dd95d 100644 --- a/frontend/src/actors/user.ts +++ b/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 + } + } } diff --git a/frontend/src/components/post.tsx b/frontend/src/components/post.tsx index 968e04e..2ba91d7 100644 --- a/frontend/src/components/post.tsx +++ b/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 (
-
setOpen(true)}> +
{ + if (!feedApi) return tip() + setOpen(true) + }}>   {content.comment.length}
diff --git a/frontend/src/components/sider.tsx b/frontend/src/components/sider.tsx index 1906760..f6c64aa 100644 --- a/frontend/src/components/sider.tsx +++ b/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'); } diff --git a/frontend/src/routes/profile.tsx b/frontend/src/routes/profile.tsx index 31dd5c5..559d620 100644 --- a/frontend/src/routes/profile.tsx +++ b/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(); const [postItem, setPostItem] = useState() const [following, setFollowing] = useState(0) const [followers, setFollowers] = useState(0) + const [allPosts, setAllPosts] = useState() + 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() { /> {userProfile?.name} - {contextHolder} - + {followers} Followers
- {allPost && allPost.map((v, k) => { + {allPosts && allPosts.map((v, k) => { return })} diff --git a/frontend/src/utils/useAuth.tsx b/frontend/src/utils/useAuth.tsx index 9e707ff..651532a 100644 --- a/frontend/src/utils/useAuth.tsx +++ b/frontend/src/utils/useAuth.tsx @@ -40,8 +40,7 @@ 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) { @@ -49,21 +48,25 @@ export const useProvideAuth = (authClient: IIForIdentity): Props => { } 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) } };