feat: mock invite

This commit is contained in:
DiamondThree 2023-01-05 22:32:58 +08:00
parent e3c1e6a5da
commit c0c167fea8
4 changed files with 87 additions and 69 deletions

View File

@ -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(
() => {
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

View File

@ -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' ? (
<Avatar src={member.user.avatar_url}></Avatar>
) : (
<StyledMemberAvatar alt="member avatar">
<EmailIcon></EmailIcon>
</StyledMemberAvatar>
)}
<StyledMemberAvatar alt="member avatar">
<EmailIcon></EmailIcon>
</StyledMemberAvatar>
<StyledMemberInfo>
{member.user.type === 'Registered' ? (
<StyledMemberName>
{member.user.name}
</StyledMemberName>
) : (
<></>
)}
<StyledMemberEmail>
{member.user.email}
</StyledMemberEmail>
<StyledMemberName>{member.name}</StyledMemberName>
<StyledMemberEmail>{member.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()
.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={<TrashIcon />}
@ -301,6 +300,8 @@ const MembersPage = ({ workspace }: { workspace: Workspace }) => {
setIsInviteModalShow(false);
}}
onInviteSuccess={() => {
setMembersList();
setIsInviteModalShow(false);
// refreshMembers();
}}
workspaceId={workspace.id}

View File

@ -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<string | null>(
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;

View File

@ -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;
}