feat: mock invite

packages/app/src/components/invite-members/index.tsx

@@ -6,6 +6,7 @@ import Input from '@/ui/input';
 import { useState } from 'react';
 import { getDataCenter } from '@affine/datacenter';
 import { Avatar } from '@mui/material';
+import { setMember } from '@/hooks/mock-data/mock';
 interface LoginModalProps {
   open: boolean;
   onClose: () => void;
@@ -54,29 +55,34 @@ export const InviteMembers = ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [userData, setUserData] = useState<any>({});
   const inputChange = (value: string) => {
-    setEmail(value);
     setShowMember(true);
     if (gmailReg.test(value)) {
+      setEmail(value);
       setShowTip(false);
-      debounce(
+      setUserData({
-        () => {
+        name: 'wxl',
-          getDataCenter()
+        avatar: 'https://avatars.githubusercontent.com/u/20501502?v=4',
-            .then(dc =>
+        email: value,
-              dc.apis.getUserByEmail({
+      });
-                email: value,
+      // debounce(
-                workspace_id: workspaceId,
+      //   () => {
-              })
+      //     getDataCenter()
-            )
+      //       .then(dc =>
-            .then(data => {
+      //         dc.apis.getUserByEmail({
-              if (data?.name) {
+      //           email: value,
-                setUserData(data);
+      //           workspace_id: workspaceId,
-                setShowTip(false);
+      //         })
-              }
+      //       )
-            });
+      //       .then(data => {
-        },
+      //         if (data?.name) {
-        300,
+      //           setUserData(data);
-        true
+      //           setShowTip(false);
-      )();
+      //         }
+      //       });
+      //   },
+      //   300,
+      //   true
+      // )();
     } else {
       setShowTip(true);
     }
@@ -134,16 +140,18 @@ export const InviteMembers = ({
               shape="circle"
               type="primary"
               onClick={() => {
-                getDataCenter()
+                setMember(workspaceId, userData);
-                  .then(dc => dc.apis.inviteMember({ id: workspaceId, email }))
+                onInviteSuccess();
-                  .then(() => {
+                // getDataCenter()
-                    onClose();
+                //   .then(dc => dc.apis.inviteMember({ id: workspaceId, email }))
-                    onInviteSuccess && onInviteSuccess();
+                //   .then(() => {
-                  })
+                //     onClose();
-                  .catch(err => {
+                //     onInviteSuccess && onInviteSuccess();
-                    // toast('Invite failed');
+                //   })
-                    console.log(err);
+                //   .catch(err => {
-                  });
+                //     // toast('Invite failed');
+                //     console.log(err);
+                //   });
               }}
             >
               Invite

packages/app/src/components/workspace-setting/workspace-setting.tsx

@@ -44,7 +44,9 @@ import { Empty } from '@/ui/empty';
 import { useAppState } from '@/providers/app-state-provider';
 import { GeneralPage } from './general';
 import {
+  deleteMember,
   getActiveWorkspace,
+  getMembers,
   getUserInfo,
   Login,
   setWorkspacePublish,
@@ -162,7 +164,7 @@ export const WorkspaceSetting = ({
 
 const MembersPage = ({ workspace }: { workspace: Workspace }) => {
   const [isInviteModalShow, setIsInviteModalShow] = useState(false);
-  const [members, setMembers] = useState<Member[]>([]);
+  const [members, setMembers] = useState<User[]>([]);
   const [userInfo, setUserInfo] = useState<User>();
   // const refreshMembers = useCallback(() => {
   //   getDataCenter()
@@ -181,6 +183,7 @@ const MembersPage = ({ workspace }: { workspace: Workspace }) => {
 
   useEffect(() => {
     setUser();
+    setMembersList();
     // refreshMembers();
   }, []);
 
@@ -188,6 +191,10 @@ const MembersPage = ({ workspace }: { workspace: Workspace }) => {
     const user = getUserInfo();
     user && setUserInfo(user);
   };
+  const setMembersList = () => {
+    const members = getMembers(workspace.id);
+    members && setMembers(members);
+  };
 
   return (
     <div>
@@ -212,33 +219,23 @@ const MembersPage = ({ workspace }: { workspace: Workspace }) => {
                 return (
                   <StyledMemberListItem key={member.id}>
                     <StyledMemberNameContainer>
-                      {member.user.type === 'Registered' ? (
+                      <StyledMemberAvatar alt="member avatar">
-                        <Avatar src={member.user.avatar_url}></Avatar>
+                        <EmailIcon></EmailIcon>
-                      ) : (
+                      </StyledMemberAvatar>
-                        <StyledMemberAvatar alt="member avatar">
-                          <EmailIcon></EmailIcon>
-                        </StyledMemberAvatar>
-                      )}
 
                       <StyledMemberInfo>
-                        {member.user.type === 'Registered' ? (
+                        <StyledMemberName>{member.name}</StyledMemberName>
-                          <StyledMemberName>
+
-                            {member.user.name}
+                        <StyledMemberEmail>{member.email}</StyledMemberEmail>
-                          </StyledMemberName>
-                        ) : (
-                          <></>
-                        )}
-                        <StyledMemberEmail>
-                          {member.user.email}
-                        </StyledMemberEmail>
                       </StyledMemberInfo>
                     </StyledMemberNameContainer>
                     <StyledMemberRoleContainer>
-                      {member.accepted
+                      {/* {member.accepted
                         ? member.type !== 99
                           ? 'Member'
                           : 'Workspace Owner'
-                        : 'Pending'}
+                        : 'Pending'} */}
+                      Pending
                     </StyledMemberRoleContainer>
                     <StyledMoreVerticalButton>
                       <Menu
@@ -246,23 +243,25 @@ const MembersPage = ({ workspace }: { workspace: Workspace }) => {
                           <>
                             <MenuItem
                               onClick={() => {
+                                deleteMember(workspace.id, 0);
+                                setMembersList();
                                 // confirm({
                                 //   title: 'Delete Member?',
                                 //   content: `will delete member`,
                                 //   confirmText: 'Delete',
                                 //   confirmType: 'danger',
                                 // }).then(confirm => {
-                                getDataCenter()
+                                // getDataCenter()
-                                  .then(dc =>
+                                //   .then(dc =>
-                                    dc.apis.removeMember({
+                                //     dc.apis.removeMember({
-                                      permissionId: member.id,
+                                //       permissionId: member.id,
-                                    })
+                                //     })
-                                  )
+                                //   )
-                                  .then(() => {
+                                //   .then(() => {
-                                    // console.log('data: ', data);
+                                //     // console.log('data: ', data);
-                                    toast('Moved to Trash');
+                                //     toast('Moved to Trash');
-                                    // refreshMembers();
+                                //     // refreshMembers();
-                                  });
+                                //   });
                                 // });
                               }}
                               icon={<TrashIcon />}
@@ -301,6 +300,8 @@ const MembersPage = ({ workspace }: { workspace: Workspace }) => {
                 setIsInviteModalShow(false);
               }}
               onInviteSuccess={() => {
+                setMembersList();
+                setIsInviteModalShow(false);
                 // refreshMembers();
               }}
               workspaceId={workspace.id}

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx

@@ -27,8 +27,7 @@ type SelectorPopperContentProps = {
 export const SelectorPopperContent = ({
   isShow,
 }: SelectorPopperContentProps) => {
-  const { user, workspacesMeta, workspaces, refreshWorkspacesMeta } =
+  const { user, workspacesMeta, refreshWorkspacesMeta } = useAppState();
-    useAppState();
   const [settingWorkspaceId, setSettingWorkspaceId] = useState<string | null>(
     null
   );
@@ -115,13 +114,9 @@ export const SelectorPopperContent = ({
               type={workspace.type}
               key={workspace.id}
               id={workspace.id}
-              icon={
+              icon={`loading...`}
-                (workspaces[workspace.id]?.meta.avatar &&
-                  `/api/blob/${workspaces[workspace.id]?.meta.avatar}`) ||
-                `loading...`
-              }
               onClickSetting={handleClickSettingWorkspace}
-              name={workspaces[workspace.id]?.meta.name || `loading...`}
+              name={`loading...`}
               memberCount={workSpaceDetails[workspace.id]?.memberCount || 1}
             />
           ) : null;

packages/app/src/hooks/mock-data/mock.ts

@@ -69,6 +69,20 @@ export function getMembers(id: string): User[] {
   return memberMap[id] || [];
 }
 
+export function setMember(workspaceId: string, member: User) {
+  const memberMap = JSON.parse(localStorage.getItem('affine-member') ?? '{}');
+  memberMap[workspaceId] = memberMap[workspaceId] || [];
+  memberMap[workspaceId].push(member);
+  localStorage.setItem('affine-member', JSON.stringify(memberMap));
+}
+
+export function deleteMember(workspaceId: string, index: number) {
+  const memberMap = JSON.parse(localStorage.getItem('affine-member') ?? '{}');
+  const memberList = memberMap[workspaceId];
+  memberList.splice(index, 1);
+  memberMap[workspaceId] = memberList;
+  localStorage.setItem('affine-member', JSON.stringify(memberMap));
+}
 export function leaveWorkspace(id: string) {
   return true;
 }