feat: add and modify user information

src/features/find/routes/findDetail.tsx

@@ -27,9 +27,14 @@ import {
   getAvatarBase64String,
   getUserCache,
 } from "@/features/auth/api/getLoginedUserInfo";
-import {apply, ApplyInfo } from "@nulink_network/nulink-web-agent-access-sdk";
-import { download, getFileDetail } from "@nulink_network/nulink-web-agent-access-sdk";
-import {getData} from "@/utils/ipfs";
+import { apply, ApplyInfo } from "@nulink_network/nulink-web-agent-access-sdk";
+import {
+  download,
+  getFileDetail,
+} from "@nulink_network/nulink-web-agent-access-sdk";
+import { getData } from "@/utils/ipfs";
+import Alert from "@/components/Layout/Alert";
+import { AlertColor } from "@mui/material";
 
 const btnStyle = {
   width: "150px",
@@ -59,6 +64,19 @@ export const FindDetail = () => {
   const [visible, setVisible] = useState(false); // result tips popup window
   const [bUploader, setIsUploader] = useState(false); // user.id === detailItem.creator_id id the uploader
   const [user, setUser] = useState(null);
+  const [open, setOpen] = useState<boolean>(false);
+  const [severity, setSeverity] = useState<AlertColor>("info");
+  const [alertMessage, setAlertMessage] = useState<string>("");
+
+  const showMsg = (message: string, severity: AlertColor = "error") => {
+    setOpen(true);
+    setSeverity(severity);
+    setAlertMessage(message);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
 
   /**
    * apply for file
@@ -97,7 +115,7 @@ export const FindDetail = () => {
     }
 
     (async (user) => {
-      const result = (await getFileDetail(passedFile.file_id, user.accountId));
+      const result = await getFileDetail(passedFile.file_id, user.accountId);
 
       if (!!result.creator_avatar) {
         const avatarStr = await getAvatarBase64String(result.creator_avatar);
@@ -251,7 +269,10 @@ export const FindDetail = () => {
         return (
           <OvalButton
             title={t<string>("find-detail-a-btn-2")}
-            onClick={() => applyDownload()}
+            // onClick={() => applyDownload()}
+            onClick={() => {
+              showMsg("Already applied, please wait for approval");
+            }}
           />
         );
     }
@@ -265,6 +286,12 @@ export const FindDetail = () => {
 
   return (
     <div className="find_detail marb-30">
+      <Alert
+        open={open}
+        severity={severity}
+        onClose={handleClose}
+        message={alertMessage}
+      />
       <Row className="find_detail_top">
         <Col span="12">
           <div className="find_detail_top_left">
@@ -319,7 +346,9 @@ export const FindDetail = () => {
             )}
 
             {bUploader && (
-              <div className="find_detail_top_right_btn" onClick={fileDownload}>Self Download</div>
+              <div className="find_detail_top_right_btn" onClick={fileDownload}>
+                Self Download
+              </div>
             )}
             {!bUploader && applyStatus === 0 && buttonShow && (
               <div

src/features/memberCenter/api/account.ts

@@ -61,3 +61,5 @@ export const getFilesByStatusForAllApplyAsPublisher: (args: FilesByStatusForAllA
 };
 
 export const getUserInfo = async (params) => await post('/account/get', params)
+
+export const updateUserInfo = async (params) => await post('/third-party/account/update', params)

src/features/memberCenter/components/ProfilePicture.tsx

@@ -0,0 +1,40 @@
+import { useTranslation } from "react-i18next";
+import { Avatar, Image } from "antd";
+import defaultAvatar from "@/assets/img/avatar.png";
+import { useState } from "react";
+
+type ProfilePictureProps = {
+  className?: string | undefined;
+  onSuccess: (...args: any[]) => any;
+  newAvatar?: string | ''; //The image from the parent compontent
+};
+
+export const ProfilePicture = ({ onSuccess, newAvatar, className }: ProfilePictureProps) => {
+  const { t } = useTranslation();
+  const [avatar, setAvatar] = useState(defaultAvatar);
+  const changeAvatar = (event) => {
+    const file = event.target.files[0];
+    const reader = new FileReader()
+    reader.readAsDataURL(file)
+    reader.onload = function(e) {
+      const url = e.target?.result as string;
+      setAvatar(url); //url and avatar are all base64 strings of image
+      onSuccess(url);
+    };
+  };
+
+  const inputStyle = {
+    opacity: 0,
+  };
+  return (
+    <>
+      <div className={`${className} relative`}>
+        <span className="block absolute avater-text pointer">
+          {t<string>("member-center-modify-data-change-avatar")}
+          <input className="absolute avater-text" type="file" accept="image/*" style={inputStyle} onChange={changeAvatar} />
+        </span>
+        <Avatar size={100} src={newAvatar || avatar} />
+      </div>
+    </>
+  )
+};

src/features/memberCenter/routes/index.ts

@@ -1 +1,2 @@
-export * from "./memberCenter";
+export * from "./memberCenter";
+export * from "./modifyData";

src/features/memberCenter/routes/memberCenter.tsx

@@ -10,9 +10,15 @@ import Emitter from "@/lib/emitter";
 import { USERINFO_UPDATE } from "@/lib/emitter-events";
 import Alert from "@/components/Layout/Alert";
 import { AlertColor } from "@mui/material";
+import editUrl from "../assets/edit_icon.svg";
+import OvalButton from "../../../components/Button/OvalButton";
+import { useNavigate } from "react-router-dom";
+import { getUserInfo } from "../api/account";
+import { getAvatarBase64String } from "@/features/auth/api/getLoginedUserInfo";
 
 export const MemberCenter = () => {
-  const [avatar] = useState(imgUrl);
+  const navigate = useNavigate();
+  const [avatar, setAvatar] = useState(imgUrl);
   const [active, setActive] = useState("2");
   const [user, setUser] = useState<any>();
   const [open, setOpen] = useState<boolean>(false);
@@ -28,9 +34,18 @@ export const MemberCenter = () => {
     }
   };
 
-  const getUserInfo = async () => {
+  const _getUserInfo = async () => {
     const user = getUserCache();
-    setUser(user);
+    const { data: userDetailInfo } = await getUserInfo({
+      account_id: user.accountId,
+    });
+    if (!!userDetailInfo.avatar) {
+      const avatarStr = await getAvatarBase64String(userDetailInfo.avatar);
+      if (!!avatarStr) {
+        setAvatar(avatarStr);
+      }
+    }
+    setUser(userDetailInfo);
   };
 
   useEffect(() => {
@@ -39,13 +54,27 @@ export const MemberCenter = () => {
         return;
       }
     });
-    window.setTimeout(async () => await getUserInfo(), 0);
+    window.setTimeout(async () => await _getUserInfo(), 0);
   }, []);
 
   const handleClose = () => {
     setOpen(false);
   };
 
+  const editTitle = () => {
+    return (
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
+        <img src={editUrl} alt="" />
+        <span style={{ marginLeft: "10px" }}>Edit</span>
+      </div>
+    );
+  };
+
   return (
     <>
       <Alert
@@ -67,8 +96,15 @@ export const MemberCenter = () => {
               <div className="member_introduction_name">
                 <span>{user?.name}</span>
               </div>
-              <div>{user?.accountAddress}</div>
+              <div>{user?.ethereum_addr}</div>
             </div>
+            <OvalButton
+              title={editTitle()}
+              style={{ marginLeft: "10px" }}
+              onClick={() => {
+                navigate("/modifyData");
+              }}
+            />
           </div>
         </div>
         <div className="member_center_tab">