update

NeutronStarDAO · Dec 13, 2023 · a140b96 · a140b96
1 parent 961b55c
commit a140b96
Show file tree

Hide file tree

Showing 21 changed files with 297 additions and 66 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -3,7 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^5.2.6",
     "@dfinity/auth-client": "^0.20.2",
+    "@reduxjs/toolkit": "^2.0.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -14,6 +16,7 @@
     "antd": "^5.11.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^9.0.4",
     "react-router-dom": "^6.20.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",

diff --git a/frontend/src/actors/feed.ts b/frontend/src/actors/feed.ts
@@ -19,7 +19,6 @@ export default class Feed {
 
   private async getNoIdentityActor() {
     return await getActor.noIdentityActor(idlFactory, this.canisterId.toString());
-
   }
 
   async createPost(title: string, content: string) {

diff --git a/frontend/src/actors/user.ts b/frontend/src/actors/user.ts
@@ -32,6 +32,18 @@ class User {
     }
   }
 
+  async batchGetProfile(who: Principal[]): Promise<Profile[]> {
+  // async batchGetProfile(who: Principal[]): Promise<unknown> {
+    const actor = await User.getActor();
+    try {
+      return await actor.batchGetProfile(who) as Profile[]
+      // return await actor.batchGetProfile(who)
+    } catch(e) {
+      console.log("batchGetProfile", e)
+      throw e
+    }
+  }
+
   async getFollowerNumber(who: Principal): Promise<number> {
     const actor = await User.getActor()
     try {

diff --git a/frontend/src/components/Modal/form.tsx b/frontend/src/components/Modal/form.tsx
@@ -3,9 +3,11 @@ import {
   Button,
   Form,
   Input,
-  Select,
+  notification,
 } from 'antd';
 import {Profile} from "../../declarations/user/user";
+import { userApi } from '../../actors/user';
+import { LoadingOutlined, CheckOutlined } from '@ant-design/icons';
 
 interface DataNodeType {
   value: string;
@@ -39,13 +41,37 @@ const tailFormItemLayout = {
 
 interface ProfileFormProps {
     userProfile: Profile | undefined;
+    drawCallBack: () => void;
 }
 
 export default function ProfileForm(props: ProfileFormProps) {
-
   const [form] = Form.useForm();
+  const [api, contextHolder] = notification.useNotification();
 
-  const onFinish = (values: any) => {
+  const onFinish = async (values: any) => {
+    api.info({
+      message: 'Update Profile ing ...',
+      key: 'updateProfile',
+      duration: null,
+      description: '',
+      icon: <LoadingOutlined />
+    })
+    await userApi.createProfile({
+      'backImgUrl' : values.backImgUrl === undefined? '' : values.backImgUrl,
+      'name' : values.name === undefined? '' : values.name,
+      'education' : values.education === undefined? '' : values.education,
+      'biography' : values.biography === undefined? '' : values.biography,
+      'company' : values.company === undefined? '' : values.company,
+      'avatarUrl' : values.avatarUrl === undefined? '' : values.avatarUrl,
+      'feedCanister' : [],
+    });
+    api.success({
+      message: 'Update Profile Successful !',
+      key: 'updateProfile',
+      description: '',
+      icon: <CheckOutlined />
+    });
+    props.drawCallBack();
     console.log('Received values of form: ', values);
   };
 
@@ -67,6 +93,7 @@ export default function ProfileForm(props: ProfileFormProps) {
       style={{ maxWidth: 600 }}
       scrollToFirstError
     >
+      {contextHolder}
       <Form.Item
         name="name"
         label="Name"

diff --git a/frontend/src/components/Modal/postForm.tsx b/frontend/src/components/Modal/postForm.tsx
@@ -1,25 +1,44 @@
 import React from 'react';
 import {
   Form,
+  notification
 } from 'antd';
+import { LoadingOutlined, CheckOutlined } from '@ant-design/icons';
 import {useAuth} from "../../utils/useAuth";
 import Feed from "../../actors/feed";
 import {EditModal} from "./EditModal";
 
 export function PostForm(props: { setOpen: Function }) {
   const {userFeedCai} = useAuth()
   const [form] = Form.useForm();
+  const [api, contextHolder] = notification.useNotification();
 
   const onFinish = async (values: { title: string, content: string }) => {
     if (!userFeedCai) return
+    api.info({
+      message: 'Create Post ing ...',
+      key: 'createPost',
+      duration: null,
+      description: '',
+      icon: <LoadingOutlined />
+    });
     const feedApi = new Feed(userFeedCai)
     await feedApi.createPost(values.title, values.content)
+    api.success({
+      message: 'Create Post Successful !',
+      key: 'createPost',
+      description: '',
+      icon: <CheckOutlined />
+    })
     await feedApi.getAllPost()
     form.resetFields()
     props.setOpen(false)
   };
 
   return (
-    <EditModal isComment={false} form={form} onFinish={onFinish}/>
+    <>
+      {contextHolder}
+      <EditModal isComment={false} form={form} onFinish={onFinish}/>
+    </>
   );
 };
diff --git a/frontend/src/components/post.tsx b/frontend/src/components/post.tsx
@@ -10,7 +10,7 @@ import Feed from "../actors/feed";
 import React, {useState} from "react";
 import {CommentForm} from "./Modal/commentForm";
 
-export default function Post(props: { content: PostImmutable, setPostItem?: Function }) {
+export default function Post(props: { content: PostImmutable, setPostItem?: Function, avatar?: string, name?: string}) {
   const {content, setPostItem} = props
   const {userFeedCai} = useAuth()
   const [open, setOpen] = useState(false)
@@ -52,12 +52,12 @@ export default function Post(props: { content: PostImmutable, setPostItem?: Func
         <Space>
           <Avatar
             size={32}
-            src="https://avatars.githubusercontent.com/u/120618331?s=200&v=4"
+            src={props.avatar ? props.avatar : "https://avatars.githubusercontent.com/u/120618331?s=200&v=4"}
             style={{
               border: '1px solid #D3D540',
             }}
           />
-          <p>NeutronStarDAO</p>
+          <p>{props.name ? props.name : 'NeutronStarDAO'}</p>
         </Space>
         <Typography.Paragraph style={{
           paddingLeft: '12px'

diff --git a/frontend/src/components/sider.tsx b/frontend/src/components/sider.tsx
@@ -1,4 +1,4 @@
-import {Menu, Button, Avatar, Flex, Card, Space, Modal, message} from "antd";
+import {Menu, Button, Avatar, Flex, Card, Space, Modal, message, Typography} from "antd";
 import {
   HomeOutlined,
   SettingOutlined,
@@ -10,8 +10,10 @@ import type {MenuInfo} from 'rc-menu/lib/interface'
 import type {MenuItemType} from 'antd/es/menu/hooks/useItems';
 import {useNavigate} from "react-router-dom";
 import {useAuth} from "../utils/useAuth";
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 import {PostForm} from "./Modal/postForm";
+import {Profile} from "../declarations/user/user";
+import { userApi } from "../actors/user";
 
 function getItem(
   label: React.ReactNode,
@@ -48,8 +50,24 @@ const items: MenuItemType[] = [
 
 export default function Sider() {
   const navigate = useNavigate();
-  const {isAuth, logIn, principal} = useAuth()
+  const {isAuth, logIn, principal} = useAuth();
   const [open, setOpen] = useState(false)
+  const [profile, setProfile] = useState<Profile>();
+
+  useEffect(() => {
+    const initUserProfile = async () => {
+      if(principal?._isPrincipal === true) {
+        const _profile = await userApi.getProfile(principal);
+        console.log('side bar init profile : ', _profile);
+        if(_profile.length > 0) {
+          setProfile(_profile[0]);
+        };
+      };
+    };
+
+    initUserProfile();
+
+  }, [principal]);
 
   const onClick = (info: MenuInfo) => {
     if (info.key === '1') {
@@ -114,13 +132,23 @@ export default function Sider() {
             <Card.Meta
               avatar={<Avatar
                 size={{xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100}}
-                src="https://avatars.githubusercontent.com/u/120618331?s=200&v=4"
+                src={ profile?.avatarUrl ? profile.avatarUrl : "https://avatars.githubusercontent.com/u/120618331?s=200&v=4" }
                 style={{
                   border: '1px solid #D3D540',
                 }}
               />}
-              title="NeutronStarDAO"
-              description="@NeutronStarDAO"
+              title={
+                profile ? profile.name : "NeutronstarDao"
+              }
+              description={
+                <Typography.Text
+                  copyable={true}
+                  // style={{width: '100px'}}
+                  ellipsis
+                >
+                {principal?.toString()}
+                </Typography.Text>
+              }
             />
           </Card>) : (
           <Space onClick={() => logIn?.()}>

diff --git a/frontend/src/declarations/user/index.d.ts b/frontend/src/declarations/user/index.d.ts
@@ -7,7 +7,7 @@ import type {
 import type { Principal } from "@dfinity/principal";
 import type { IDL } from "@dfinity/candid";
 
-import { _SERVICE } from './user';
+import { _SERVICE } from './user.did';
 
 export declare const idlFactory: IDL.InterfaceFactory;
 export declare const canisterId: string;

diff --git a/frontend/src/declarations/user/user.did b/frontend/src/declarations/user/user.did
@@ -3,6 +3,7 @@ type UserId__1 = principal;
 type UserId = principal;
 type User = 
  service {
+   batchGetProfile: (vec UserId__1) -> (vec Profile) query;
    createProfile: (NewProfile) -> ();
    follow: (Vertex) -> ();
    getFollowerNumber: (Vertex) -> (nat) query;

diff --git a/frontend/src/declarations/user/user.did.js b/frontend/src/declarations/user/user.did.js
@@ -1,5 +1,8 @@
 export const idlFactory = ({ IDL }) => {
-  const NewProfile = IDL.Record({
+  const UserId__1 = IDL.Principal;
+  const UserId = IDL.Principal;
+  const Profile = IDL.Record({
+    'id' : UserId,
     'backImgUrl' : IDL.Text,
     'name' : IDL.Text,
     'education' : IDL.Text,
@@ -8,11 +11,7 @@ export const idlFactory = ({ IDL }) => {
     'avatarUrl' : IDL.Text,
     'feedCanister' : IDL.Opt(IDL.Principal),
   });
-  const Vertex = IDL.Principal;
-  const UserId__1 = IDL.Principal;
-  const UserId = IDL.Principal;
-  const Profile = IDL.Record({
-    'id' : UserId,
+  const NewProfile = IDL.Record({
     'backImgUrl' : IDL.Text,
     'name' : IDL.Text,
     'education' : IDL.Text,
@@ -21,7 +20,13 @@ export const idlFactory = ({ IDL }) => {
     'avatarUrl' : IDL.Text,
     'feedCanister' : IDL.Opt(IDL.Principal),
   });
+  const Vertex = IDL.Principal;
   const User = IDL.Service({
+    'batchGetProfile' : IDL.Func(
+        [IDL.Vec(UserId__1)],
+        [IDL.Vec(Profile)],
+        ['query'],
+      ),
     'createProfile' : IDL.Func([NewProfile], [], []),
     'follow' : IDL.Func([Vertex], [], []),
     'getFollowerNumber' : IDL.Func([Vertex], [IDL.Nat], ['query']),

diff --git a/frontend/src/declarations/user/user.ts b/frontend/src/declarations/user/user.ts
@@ -21,6 +21,7 @@ export interface Profile {
   'feedCanister' : [] | [Principal],
 }
 export interface User {
+  'batchGetProfile' : ActorMethod<[Array<UserId__1>], Array<Profile>>,
   'createProfile' : ActorMethod<[NewProfile], undefined>,
   'follow' : ActorMethod<[Vertex], undefined>,
   'getFollowerNumber' : ActorMethod<[Vertex], bigint>,