From c0c167fea870a20c9f3ac1d7eff841b4f8c95b15 Mon Sep 17 00:00:00 2001 From: DiamondThree Date: Thu, 5 Jan 2023 22:32:58 +0800 Subject: [PATCH] feat: mock invite --- .../src/components/invite-members/index.tsx | 68 +++++++++++-------- .../workspace-setting/workspace-setting.tsx | 63 ++++++++--------- .../SelectorPopperContent.tsx | 11 +-- packages/app/src/hooks/mock-data/mock.ts | 14 ++++ 4 files changed, 87 insertions(+), 69 deletions(-) diff --git a/packages/app/src/components/invite-members/index.tsx b/packages/app/src/components/invite-members/index.tsx index f06674cb6b..44f4f6aaeb 100644 --- a/packages/app/src/components/invite-members/index.tsx +++ b/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({}); const inputChange = (value: string) => { - setEmail(value); setShowMember(true); if (gmailReg.test(value)) { + setEmail(value); setShowTip(false); - debounce( - () => { - getDataCenter() - .then(dc => - dc.apis.getUserByEmail({ - email: value, - workspace_id: workspaceId, - }) - ) - .then(data => { - if (data?.name) { - setUserData(data); - setShowTip(false); - } - }); - }, - 300, - true - )(); + setUserData({ + name: 'wxl', + avatar: 'https://avatars.githubusercontent.com/u/20501502?v=4', + email: value, + }); + // debounce( + // () => { + // getDataCenter() + // .then(dc => + // dc.apis.getUserByEmail({ + // email: value, + // workspace_id: workspaceId, + // }) + // ) + // .then(data => { + // if (data?.name) { + // setUserData(data); + // setShowTip(false); + // } + // }); + // }, + // 300, + // true + // )(); } else { setShowTip(true); } @@ -134,16 +140,18 @@ export const InviteMembers = ({ shape="circle" type="primary" onClick={() => { - getDataCenter() - .then(dc => dc.apis.inviteMember({ id: workspaceId, email })) - .then(() => { - onClose(); - onInviteSuccess && onInviteSuccess(); - }) - .catch(err => { - // toast('Invite failed'); - console.log(err); - }); + setMember(workspaceId, userData); + onInviteSuccess(); + // getDataCenter() + // .then(dc => dc.apis.inviteMember({ id: workspaceId, email })) + // .then(() => { + // onClose(); + // onInviteSuccess && onInviteSuccess(); + // }) + // .catch(err => { + // // toast('Invite failed'); + // console.log(err); + // }); }} > Invite diff --git a/packages/app/src/components/workspace-setting/workspace-setting.tsx b/packages/app/src/components/workspace-setting/workspace-setting.tsx index a905134f76..f22a736739 100644 --- a/packages/app/src/components/workspace-setting/workspace-setting.tsx +++ b/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([]); + const [members, setMembers] = useState([]); const [userInfo, setUserInfo] = useState(); // 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 (
@@ -212,33 +219,23 @@ const MembersPage = ({ workspace }: { workspace: Workspace }) => { return ( - {member.user.type === 'Registered' ? ( - - ) : ( - - - - )} + + + - {member.user.type === 'Registered' ? ( - - {member.user.name} - - ) : ( - <> - )} - - {member.user.email} - + {member.name} + + {member.email} - {member.accepted + {/* {member.accepted ? member.type !== 99 ? 'Member' : 'Workspace Owner' - : 'Pending'} + : 'Pending'} */} + Pending { <> { + deleteMember(workspace.id, 0); + setMembersList(); // confirm({ // title: 'Delete Member?', // content: `will delete member`, // confirmText: 'Delete', // confirmType: 'danger', // }).then(confirm => { - getDataCenter() - .then(dc => - dc.apis.removeMember({ - permissionId: member.id, - }) - ) - .then(() => { - // console.log('data: ', data); - toast('Moved to Trash'); - // refreshMembers(); - }); + // getDataCenter() + // .then(dc => + // dc.apis.removeMember({ + // permissionId: member.id, + // }) + // ) + // .then(() => { + // // console.log('data: ', data); + // toast('Moved to Trash'); + // // refreshMembers(); + // }); // }); }} icon={} @@ -301,6 +300,8 @@ const MembersPage = ({ workspace }: { workspace: Workspace }) => { setIsInviteModalShow(false); }} onInviteSuccess={() => { + setMembersList(); + setIsInviteModalShow(false); // refreshMembers(); }} workspaceId={workspace.id} diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx index 494fdd495d..db6d4d34f1 100644 --- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx +++ b/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 } = - useAppState(); + const { user, workspacesMeta, refreshWorkspacesMeta } = useAppState(); const [settingWorkspaceId, setSettingWorkspaceId] = useState( null ); @@ -115,13 +114,9 @@ export const SelectorPopperContent = ({ type={workspace.type} key={workspace.id} id={workspace.id} - icon={ - (workspaces[workspace.id]?.meta.avatar && - `/api/blob/${workspaces[workspace.id]?.meta.avatar}`) || - `loading...` - } + icon={`loading...`} onClickSetting={handleClickSettingWorkspace} - name={workspaces[workspace.id]?.meta.name || `loading...`} + name={`loading...`} memberCount={workSpaceDetails[workspace.id]?.memberCount || 1} /> ) : null; diff --git a/packages/app/src/hooks/mock-data/mock.ts b/packages/app/src/hooks/mock-data/mock.ts index c7180fce58..24e1427a05 100644 --- a/packages/app/src/hooks/mock-data/mock.ts +++ b/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; }