luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Merge branches 'feat/poc' and 'feat/poc' of github.com:toeverything/AFFiNE into feat/poc

Browse Source
This commit is contained in:
JimmFly
2023-01-06 15:04:16 +08:00
parent 3d5f239e4e 97567e2e1f
commit df25adad70
10 changed files with 462 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/app/src/components/workspace-modal/index.tsx
View File

@@ -9,7 +9,6 @@ import {
setActiveWorkspace, setActiveWorkspace,
Login, Login,
User, User,
getUserInfo,
SignOut, SignOut,
updateWorkspaceMeta, updateWorkspaceMeta,
} from '@/hooks/mock-data/mock'; } from '@/hooks/mock-data/mock';
@@ -23,6 +22,7 @@ import {
import { useConfirm } from '@/providers/confirm-provider'; import { useConfirm } from '@/providers/confirm-provider';
import { toast } from '@/ui/toast'; import { toast } from '@/ui/toast';
import { WorkspaceAvatar } from '@/components/workspace-avatar'; import { WorkspaceAvatar } from '@/components/workspace-avatar';
import useTemporaryHelper from '@/hooks/use-temporary-helper';
interface LoginModalProps { interface LoginModalProps {
open: boolean; open: boolean;
onClose: () => void; onClose: () => void;
@@ -30,23 +30,17 @@ interface LoginModalProps {
export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => { export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
const [workspaceList, setWorkspaceList] = useState<Workspace[]>([]); const [workspaceList, setWorkspaceList] = useState<Workspace[]>([]);
const [user, setUser] = useState<User | null>();
const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false); const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false);
const { confirm } = useConfirm(); const { confirm } = useConfirm();
const { user, login } = useTemporaryHelper();
useEffect(() => { useEffect(() => {
setList(); setList();
setUserInfo();
}, []); }, []);
const setList = () => { const setList = () => {
const data = getWorkspaces(); const data = getWorkspaces();
console.log('data: ', data);
setWorkspaceList(data); setWorkspaceList(data);
}; };
const setUserInfo = () => {
const data = getUserInfo();
setUser(data);
};
return ( return (
<div> <div>
@@ -153,9 +147,8 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
{!user ? ( {!user ? (
<Button <Button
onClick={() => { onClick={() => {
Login(); login();
toast('login success'); toast('login success');
setUserInfo();
}} }}
> >
Sign in AFFiNE Cloud Sign in AFFiNE Cloud
@@ -164,7 +157,6 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
<Button <Button
onClick={() => { onClick={() => {
SignOut(); SignOut();
setUserInfo();
}} }}
> >
Sign out of AFFiNE Cloud Sign out of AFFiNE Cloud

198
packages/app/src/components/workspace-setting/MembersPage.tsx Normal file
View File

@@ -0,0 +1,198 @@
import {
StyledMemberAvatar,
StyledMemberButtonContainer,
StyledMemberEmail,
StyledMemberInfo,
StyledMemberListContainer,
StyledMemberListItem,
StyledMemberName,
StyledMemberNameContainer,
StyledMemberRoleContainer,
StyledMemberTitleContainer,
StyledMoreVerticalButton,
} from './style';
import { MoreVerticalIcon, EmailIcon, TrashIcon } from '@blocksuite/icons';
import { useEffect, useState } from 'react';
import { Button, IconButton } from '@/ui/button';
import { InviteMembers } from '../invite-members/index';
// import { Member, getDataCenter } from '@affine/datacenter';
// import { Avatar } from '@mui/material';
import { Menu, MenuItem } from '@/ui/menu';
import { Empty } from '@/ui/empty';
import {
deleteMember,
getMembers,
getUserInfo,
Login,
User,
Workspace,
} from '@/hooks/mock-data/mock';
// import { useAppState } from '@/providers/app-state-provider';
export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
const [isInviteModalShow, setIsInviteModalShow] = useState(false);
const [members, setMembers] = useState<User[]>([]);
const [userInfo, setUserInfo] = useState<User>();
// const refreshMembers = useCallback(() => {
// getDataCenter()
// .then(dc =>
// dc.apis.getWorkspaceMembers({
// id: workspace.id,
// })
// )
// .then(data => {
// setMembers(data);
// })
// .catch(err => {
// console.log(err);
// });
// }, [workspace.id]);
useEffect(() => {
setUser();
setMembersList();
// refreshMembers();
}, []);
const setUser = () => {
const user = getUserInfo();
user && setUserInfo(user);
};
const setMembersList = () => {
const members = getMembers(workspace.id);
members && setMembers(members);
};
return (
<div>
{userInfo ? (
<>
<StyledMemberTitleContainer>
<StyledMemberNameContainer>
Users({members.length})
</StyledMemberNameContainer>
<StyledMemberRoleContainer>Access level</StyledMemberRoleContainer>
</StyledMemberTitleContainer>
<StyledMemberListContainer>
{members.length === 0 && (
<Empty
width={648}
sx={{ marginTop: '60px' }}
height={300}
></Empty>
)}
{members.length ? (
members.map((member, index) => {
return (
<StyledMemberListItem key={index}>
<StyledMemberNameContainer>
<StyledMemberAvatar alt="member avatar">
<EmailIcon></EmailIcon>
</StyledMemberAvatar>
<StyledMemberInfo>
<StyledMemberName>{member.name}</StyledMemberName>
<StyledMemberEmail>{member.email}</StyledMemberEmail>
</StyledMemberInfo>
</StyledMemberNameContainer>
<StyledMemberRoleContainer>
{/* {member.accepted
? member.type !== 99
? 'Member'
: 'Workspace Owner'
: 'Pending'} */}
Pending
</StyledMemberRoleContainer>
<StyledMoreVerticalButton>
<Menu
content={
<>
<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();
// });
// });
}}
icon={<TrashIcon />}
>
Delete
</MenuItem>
</>
}
placement="bottom-end"
disablePortal={true}
>
<IconButton>
<MoreVerticalIcon />
</IconButton>
</Menu>
</StyledMoreVerticalButton>
</StyledMemberListItem>
);
})
) : (
<></>
)}
</StyledMemberListContainer>
<StyledMemberButtonContainer>
<Button
onClick={() => {
setIsInviteModalShow(true);
}}
type="primary"
shape="circle"
>
Invite Members
</Button>
<InviteMembers
onClose={() => {
setIsInviteModalShow(false);
}}
onInviteSuccess={() => {
setMembersList();
setIsInviteModalShow(false);
// refreshMembers();
}}
workspaceId={workspace.id}
open={isInviteModalShow}
></InviteMembers>
</StyledMemberButtonContainer>
</>
) : (
<>
<div>
Collaborating with other members requires AFFiNE Cloud service.
</div>
<div>
<Button
onClick={() => {
Login();
setUser();
}}
>
Enable AFFiNE Cloud
</Button>
</div>
</>
)}
</div>
);
};

122
packages/app/src/components/workspace-setting/PublishPage.tsx Normal file
View File

@@ -0,0 +1,122 @@
import {
StyledCopyButtonContainer,
StyledPublishContent,
StyledPublishCopyContainer,
StyledPublishExplanation,
StyledSettingH2,
} from './style';
import { Button } from '@/ui/button';
import Input from '@/ui/input';
import { toast } from '@/ui/toast';
import { Workspace } from '@/hooks/mock-data/mock';
import useTemporaryHelper from '@/hooks/use-temporary-helper';
import { useConfirm } from '@/providers/confirm-provider';
export const PublishPage = ({ workspace }: { workspace: Workspace }) => {
const shareUrl =
window.location.host + '/workspace/' + workspace.id + '?share=true';
const { login, updateWorkspaceMeta, user, currentWorkspace } =
useTemporaryHelper();
const { confirm } = useConfirm();
const togglePublic = (flag: boolean) => {
updateWorkspaceMeta(currentWorkspace.id, { isPublish: flag });
};
const copyUrl = () => {
navigator.clipboard.writeText(shareUrl);
toast('Copied url to clipboard');
};
const enableAffineCloud = () => {
confirm({
title: 'Enable AFFiNE Cloud?',
content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`,
confirmText: user ? 'Enable' : 'Sign in and Enable',
cancelText: 'Skip',
}).then(confirm => {
if (user) {
updateWorkspaceMeta(currentWorkspace.id, { isPublish: true });
} else {
confirm && login();
updateWorkspaceMeta(currentWorkspace.id, { isPublish: true });
}
});
};
return (
<>
{currentWorkspace.type === 'cloud' ? (
<div>
<StyledPublishContent>
{currentWorkspace?.isPublish ? (
<>
<StyledPublishExplanation>
Publishing to web requires AFFiNE Cloud service .
</StyledPublishExplanation>
<StyledSettingH2 marginTop={48}>
Share with link
</StyledSettingH2>
<StyledPublishCopyContainer>
<Input width={500} value={shareUrl} disabled={true}></Input>
<StyledCopyButtonContainer>
<Button onClick={copyUrl} type="primary" shape="circle">
Copy Link
</Button>
</StyledCopyButtonContainer>
</StyledPublishCopyContainer>
</>
) : (
<StyledPublishExplanation>
After publishing to the web, everyone can view the content of
this workspace through the link.
</StyledPublishExplanation>
)}
</StyledPublishContent>
{!currentWorkspace?.isPublish ? (
<Button
onClick={() => {
togglePublic(true);
}}
type="primary"
shape="circle"
>
Publish to web
</Button>
) : (
<Button
onClick={() => {
togglePublic(false);
}}
type="primary"
shape="circle"
>
Stop publishing
</Button>
)}
</div>
) : (
<StyledPublishContent>
<>
<StyledPublishExplanation>
Publishing to web requires AFFiNE Cloud service.
</StyledPublishExplanation>
<StyledPublishCopyContainer>
<Button
onClick={() => {
enableAffineCloud();
}}
type="primary"
shape="circle"
>
Enable AFFiNE Cloud
</Button>
</StyledPublishCopyContainer>
</>
</StyledPublishContent>
)}
</>
);
};

91
packages/app/src/components/workspace-setting/SyncPage.tsx Normal file
View File

@@ -0,0 +1,91 @@
import {
StyledPublishContent,
StyledPublishCopyContainer,
StyledPublishExplanation,
} from './style';
import { DownloadIcon } from '@blocksuite/icons';
import { useEffect, useState } from 'react';
import { Button } from '@/ui/button';
import { Menu, MenuItem } from '@/ui/menu';
import {
deleteMember,
getActiveWorkspace,
updateWorkspaceMeta,
Workspace,
} from '@/hooks/mock-data/mock';
export const SyncPage = ({ workspace }: { workspace: Workspace }) => {
const [workspaceType, setWorkspaceType] = useState('local');
useEffect(() => {
setType();
});
const setType = () => {
const ACTIVEworkspace = getActiveWorkspace();
ACTIVEworkspace && setWorkspaceType(ACTIVEworkspace.type);
};
return (
<div>
<StyledPublishContent>
{workspaceType === 'local' ? (
<>
<StyledPublishExplanation>
{workspace.name} is Local Workspace. All data is stored on the
current device. You can enable AFFiNE Cloud for this workspace to
keep data in sync with the cloud.
</StyledPublishExplanation>
<StyledPublishCopyContainer>
<Button
onClick={() => {
updateWorkspaceMeta(workspace.id, {
type: 'cloud',
});
setType();
}}
type="primary"
shape="circle"
>
Enable AFFiNE Cloud
</Button>
</StyledPublishCopyContainer>
</>
) : (
<>
<StyledPublishExplanation>
<code>{workspace.name}</code> is Cloud Workspace. All data will be
synchronized and saved to the AFFiNE
</StyledPublishExplanation>
<StyledPublishCopyContainer>
<Menu
content={
<>
<MenuItem
onClick={() => {
deleteMember(workspace.id, 0);
}}
icon={<DownloadIcon />}
>
Download core data to device
</MenuItem>
<MenuItem
onClick={() => {
deleteMember(workspace.id, 0);
}}
icon={<DownloadIcon />}
>
Download all data to device
</MenuItem>
</>
}
placement="bottom-end"
disablePortal={true}
>
<Button>Download all data to device</Button>
</Menu>
</StyledPublishCopyContainer>
</>
)}
</StyledPublishContent>
</div>
);
};

33
packages/app/src/components/workspace-setting/general/delete/delete.tsx
View File

@@ -14,20 +14,22 @@ import { Button } from '@/ui/button';
import { getDataCenter } from '@affine/datacenter'; import { getDataCenter } from '@affine/datacenter';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useAppState } from '@/providers/app-state-provider'; import { useAppState } from '@/providers/app-state-provider';
import { deleteWorkspace, getWorkspaces } from '@/hooks/mock-data/mock'; import {
deleteWorkspace,
getWorkspaces,
Workspace,
} from '@/hooks/mock-data/mock';
interface WorkspaceDeleteProps { interface WorkspaceDeleteProps {
open: boolean; open: boolean;
onClose: () => void; onClose: () => void;
workspaceName: string; workspace: Workspace;
workspaceId: string;
} }
export const WorkspaceDelete = ({ export const WorkspaceDelete = ({
open, open,
onClose, onClose,
workspaceId, workspace,
workspaceName,
}: WorkspaceDeleteProps) => { }: WorkspaceDeleteProps) => {
const [deleteStr, setDeleteStr] = useState<string>(''); const [deleteStr, setDeleteStr] = useState<string>('');
const router = useRouter(); const router = useRouter();
@@ -40,7 +42,7 @@ export const WorkspaceDelete = ({
// const dc = await getDataCenter(); // const dc = await getDataCenter();
// await dc.apis.deleteWorkspace({ id: workspaceId }); // await dc.apis.deleteWorkspace({ id: workspaceId });
// router.push(`/workspace/${nextWorkSpaceId}`); // router.push(`/workspace/${nextWorkSpaceId}`);
deleteWorkspace(workspaceId); deleteWorkspace(workspace.id);
const workspaceList = getWorkspaces(); const workspaceList = getWorkspaces();
if (workspaceList.length) { if (workspaceList.length) {
router.push(`/workspace/${workspaceList[0].id}`); router.push(`/workspace/${workspaceList[0].id}`);
@@ -55,11 +57,20 @@ export const WorkspaceDelete = ({
<StyledModalWrapper> <StyledModalWrapper>
<ModalCloseButton onClick={onClose} /> <ModalCloseButton onClick={onClose} />
<StyledModalHeader>Delete Workspace</StyledModalHeader> <StyledModalHeader>Delete Workspace</StyledModalHeader>
<StyledTextContent> {workspace.type === 'local' ? (
This action cannot be undone. This will permanently delete ( <StyledTextContent>
<StyledWorkspaceName>{workspaceName}</StyledWorkspaceName>) along with Deleting (
all its content. <StyledWorkspaceName>{workspace.name}</StyledWorkspaceName>) cannot
</StyledTextContent> be undone, please proceed with caution. along with all its content.
</StyledTextContent>
) : (
<StyledTextContent>
Deleting (
<StyledWorkspaceName>{workspace.name}</StyledWorkspaceName>) will
delete both local and cloud data, this operation cannot be undone,
please proceed with caution.
</StyledTextContent>
)}
<StyledInputContent> <StyledInputContent>
<Input <Input
onChange={handlerInputChange} onChange={handlerInputChange}

7
packages/app/src/components/workspace-setting/general/delete/style.ts
View File

@@ -16,7 +16,8 @@ export const StyledModalHeader = styled('div')(({ theme }) => {
width: '460px', width: '460px',
fontWeight: '600', fontWeight: '600',
fontSize: '20px;', fontSize: '20px;',
textAlign: 'center', textAlign: 'left',
paddingLeft: '20px',
color: theme.colors.popoverColor, color: theme.colors.popoverColor,
}; };
}); });
@@ -32,7 +33,7 @@ export const StyledTextContent = styled('div')(() => {
fontWeight: '400', fontWeight: '400',
fontSize: '18px', fontSize: '18px',
lineHeight: '26px', lineHeight: '26px',
textAlign: 'center', textAlign: 'left',
}; };
}); });
@@ -41,7 +42,7 @@ export const StyledInputContent = styled('div')(() => {
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
margin: '40px 0 24px 0', margin: '20px 0 24px 0',
}; };
}); });

16
packages/app/src/components/workspace-setting/general/general.tsx
View File

@@ -77,11 +77,8 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
return workspace ? ( return workspace ? (
<div> <div>
<StyledSettingH2 marginTop={56}>Workspace Avatar</StyledSettingH2> <StyledSettingH2 marginTop={56}>Workspace Icon</StyledSettingH2>
<StyledSettingAvatarContent> <StyledSettingAvatarContent>
{/* <StyledSettingAvatar alt="workspace avatar" src={''}>
AFFiNE
</StyledSettingAvatar> */}
<div <div
style={{ style={{
float: 'left', float: 'left',
@@ -98,10 +95,6 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
<Button loading={uploading}>Upload</Button> <Button loading={uploading}>Upload</Button>
</Upload> </Upload>
{/* TODO: add upload logic */} {/* TODO: add upload logic */}
{/* {isOwner ? (
<StyledAvatarUploadBtn shape="round">upload</StyledAvatarUploadBtn>
) : null} */}
{/* <Button shape="round">remove</Button> */}
</StyledSettingAvatarContent> </StyledSettingAvatarContent>
<StyledSettingH2 marginTop={20}>Workspace Name</StyledSettingH2> <StyledSettingH2 marginTop={20}>Workspace Name</StyledSettingH2>
<StyledSettingInputContainer> <StyledSettingInputContainer>
@@ -122,7 +115,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
✔️ ✔️
</TextButton> </TextButton>
</StyledSettingInputContainer> </StyledSettingInputContainer>
{userInfo ? ( {/* {userInfo ? (
<div> <div>
<StyledSettingH2 marginTop={20}>Workspace Owner</StyledSettingH2> <StyledSettingH2 marginTop={20}>Workspace Owner</StyledSettingH2>
<StyledSettingInputContainer> <StyledSettingInputContainer>
@@ -136,7 +129,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
</div> </div>
) : ( ) : (
'' ''
)} )} */}
<StyledSettingH2 marginTop={20}>Workspace Type</StyledSettingH2> <StyledSettingH2 marginTop={20}>Workspace Type</StyledSettingH2>
<StyledSettingInputContainer> <StyledSettingInputContainer>
@@ -151,8 +144,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
<WorkspaceDelete <WorkspaceDelete
open={showDelete} open={showDelete}
onClose={handleCloseDelete} onClose={handleCloseDelete}
workspaceName={workspaceName} workspace={workspace}
workspaceId={workspace.id}
/> />
</> </>
) : ( ) : (

7
packages/app/src/components/workspace-setting/style.ts
View File

@@ -199,11 +199,12 @@ export const StyledMoreVerticalButton = styled('button')(() => {
export const StyledPublishExplanation = styled('div')(() => { export const StyledPublishExplanation = styled('div')(() => {
return { return {
marginTop: '56px',
paddingRight: '48px', paddingRight: '48px',
fontWeight: '500', fontWeight: '500',
fontSize: '18px', fontSize: '18px',
lineHeight: '26px', lineHeight: '26px',
flex: 1,
marginTop: '60px',
}; };
}); });
@@ -213,7 +214,9 @@ export const StyledPublishCopyContainer = styled('div')(() => {
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
height: '38px', height: '38px',
paddingTop: '20px',
}; };
}); });
@@ -226,5 +229,7 @@ export const StyledCopyButtonContainer = styled('div')(() => {
export const StyledPublishContent = styled('div')(() => { export const StyledPublishContent = styled('div')(() => {
return { return {
height: '494px', height: '494px',
display: 'flex',
flexDirection: 'column',
}; };
}); });

354
packages/app/src/components/workspace-setting/workspace-setting.tsx
View File

@@ -1,23 +1,7 @@
import Modal, { ModalCloseButton } from '@/ui/modal'; import Modal, { ModalCloseButton } from '@/ui/modal';
import { import {
StyledCopyButtonContainer,
StyledMemberAvatar,
StyledMemberButtonContainer,
StyledMemberEmail,
StyledMemberInfo,
StyledMemberListContainer,
StyledMemberListItem,
StyledMemberName,
StyledMemberNameContainer,
StyledMemberRoleContainer,
StyledMemberTitleContainer,
StyledMoreVerticalButton,
StyledPublishContent,
StyledPublishCopyContainer,
StyledPublishExplanation,
StyledSettingContainer, StyledSettingContainer,
StyledSettingContent, StyledSettingContent,
StyledSettingH2,
StyledSettingSidebar, StyledSettingSidebar,
StyledSettingSidebarHeader, StyledSettingSidebarHeader,
StyledSettingTabContainer, StyledSettingTabContainer,
@@ -28,34 +12,14 @@ import {
EditIcon, EditIcon,
UsersIcon, UsersIcon,
PublishIcon, PublishIcon,
MoreVerticalIcon,
EmailIcon,
TrashIcon,
DownloadIcon,
CloudInsyncIcon, CloudInsyncIcon,
} from '@blocksuite/icons'; } from '@blocksuite/icons';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Button, IconButton } from '@/ui/button';
import Input from '@/ui/input';
import { InviteMembers } from '../invite-members/index';
// import { Member, getDataCenter } from '@affine/datacenter';
// import { Avatar } from '@mui/material';
import { Menu, MenuItem } from '@/ui/menu';
import { toast } from '@/ui/toast';
import { Empty } from '@/ui/empty';
// import { useAppState } from '@/providers/app-state-provider';
import { GeneralPage } from './general'; import { GeneralPage } from './general';
import { import { getActiveWorkspace } from '@/hooks/mock-data/mock';
deleteMember, import MembersPage from './MembersPage';
getActiveWorkspace, import PublishPage from './PublishPage';
getMembers, import SyncPage from './SyncPage';
getUserInfo,
Login,
setWorkspacePublish,
updateWorkspaceMeta,
User,
Workspace,
} from '@/hooks/mock-data/mock';
enum ActiveTab { enum ActiveTab {
'general' = 'general', 'general' = 'general',
@@ -192,313 +156,3 @@ export const WorkspaceSetting = ({
</Modal> </Modal>
); );
}; };
const MembersPage = ({ workspace }: { workspace: Workspace }) => {
const [isInviteModalShow, setIsInviteModalShow] = useState(false);
const [members, setMembers] = useState<User[]>([]);
const [userInfo, setUserInfo] = useState<User>();
// const refreshMembers = useCallback(() => {
// getDataCenter()
// .then(dc =>
// dc.apis.getWorkspaceMembers({
// id: workspace.id,
// })
// )
// .then(data => {
// setMembers(data);
// })
// .catch(err => {
// console.log(err);
// });
// }, [workspace.id]);
useEffect(() => {
setUser();
setMembersList();
// refreshMembers();
}, []);
const setUser = () => {
const user = getUserInfo();
user && setUserInfo(user);
};
const setMembersList = () => {
const members = getMembers(workspace.id);
members && setMembers(members);
};
return (
<div>
{userInfo ? (
<>
<StyledMemberTitleContainer>
<StyledMemberNameContainer>
Users({members.length})
</StyledMemberNameContainer>
<StyledMemberRoleContainer>Access level</StyledMemberRoleContainer>
</StyledMemberTitleContainer>
<StyledMemberListContainer>
{members.length === 0 && (
<Empty
width={648}
sx={{ marginTop: '60px' }}
height={300}
></Empty>
)}
{members.length ? (
members.map((member, index) => {
return (
<StyledMemberListItem key={index}>
<StyledMemberNameContainer>
<StyledMemberAvatar alt="member avatar">
<EmailIcon></EmailIcon>
</StyledMemberAvatar>
<StyledMemberInfo>
<StyledMemberName>{member.name}</StyledMemberName>
<StyledMemberEmail>{member.email}</StyledMemberEmail>
</StyledMemberInfo>
</StyledMemberNameContainer>
<StyledMemberRoleContainer>
{/* {member.accepted
? member.type !== 99
? 'Member'
: 'Workspace Owner'
: 'Pending'} */}
Pending
</StyledMemberRoleContainer>
<StyledMoreVerticalButton>
<Menu
content={
<>
<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();
// });
// });
}}
icon={<TrashIcon />}
>
Delete
</MenuItem>
</>
}
placement="bottom-end"
disablePortal={true}
>
<IconButton>
<MoreVerticalIcon />
</IconButton>
</Menu>
</StyledMoreVerticalButton>
</StyledMemberListItem>
);
})
) : (
<></>
)}
</StyledMemberListContainer>
<StyledMemberButtonContainer>
<Button
onClick={() => {
setIsInviteModalShow(true);
}}
type="primary"
shape="circle"
>
Invite Members
</Button>
<InviteMembers
onClose={() => {
setIsInviteModalShow(false);
}}
onInviteSuccess={() => {
setMembersList();
setIsInviteModalShow(false);
// refreshMembers();
}}
workspaceId={workspace.id}
open={isInviteModalShow}
></InviteMembers>
</StyledMemberButtonContainer>
</>
) : (
<>
<div>
Collaborating with other members requires AFFiNE Cloud service.
</div>
<div>
<Button
onClick={() => {
Login();
setUser();
}}
>
Enable AFFiNE Cloud
</Button>
</div>
</>
)}
</div>
);
};
const PublishPage = ({ workspace }: { workspace: Workspace }) => {
const shareUrl =
window.location.host + '/workspace/' + workspace.id + '?share=true';
const [publicStatus, setPublicStatus] = useState<boolean | null>(
workspace.isPublish ?? false
);
const togglePublic = (flag: boolean) => {
const isPublic = setWorkspacePublish(workspace.id, flag);
setPublicStatus(isPublic);
};
const copyUrl = () => {
navigator.clipboard.writeText(shareUrl);
toast('Copied url to clipboard');
};
return (
<div>
<StyledPublishContent>
{publicStatus ? (
<>
<StyledPublishExplanation>
The current workspace has been published to the web, everyone can
view the contents of this workspace through the link.
</StyledPublishExplanation>
<StyledSettingH2 marginTop={48}>Share with link</StyledSettingH2>
<StyledPublishCopyContainer>
<Input width={500} value={shareUrl} disabled={true}></Input>
<StyledCopyButtonContainer>
<Button onClick={copyUrl} type="primary" shape="circle">
Copy Link
</Button>
</StyledCopyButtonContainer>
</StyledPublishCopyContainer>
</>
) : (
<StyledPublishExplanation>
After publishing to the web, everyone can view the content of this
workspace through the link.
</StyledPublishExplanation>
)}
</StyledPublishContent>
{!publicStatus ? (
<Button
onClick={() => {
togglePublic(true);
}}
type="primary"
shape="circle"
>
Publish to web
</Button>
) : (
<Button
onClick={() => {
togglePublic(false);
}}
type="primary"
shape="circle"
>
Stop publishing
</Button>
)}
</div>
);
};
const SyncPage = ({ workspace }: { workspace: Workspace }) => {
const [workspaceType, setWorkspaceType] = useState('local');
useEffect(() => {
setType();
});
const setType = () => {
const ACTIVEworkspace = getActiveWorkspace();
console.log('ACTIVEworkspace: ', ACTIVEworkspace);
ACTIVEworkspace && setWorkspaceType(ACTIVEworkspace.type);
};
return (
<div>
<StyledPublishContent>
{workspaceType === 'local' ? (
<>
<StyledPublishExplanation>
{workspace.name} is Local Workspace. All data is stored on the
current device. You can enable AFFiNE Cloud for this workspace to
keep data in sync with the cloud.
</StyledPublishExplanation>
<StyledPublishCopyContainer>
<StyledCopyButtonContainer>
<Button
onClick={() => {
updateWorkspaceMeta(workspace.id, {
type: 'cloud',
});
setType();
}}
type="primary"
shape="circle"
>
Enable AFFiNE Cloud
</Button>
</StyledCopyButtonContainer>
</StyledPublishCopyContainer>
</>
) : (
<StyledPublishExplanation>
<code>{workspace.name}</code> is Cloud Workspace. All data will be
synchronized and saved to the AFFiNE account
<div>
<Menu
content={
<>
<MenuItem
onClick={() => {
deleteMember(workspace.id, 0);
}}
icon={<DownloadIcon />}
>
Download core data to device
</MenuItem>
<MenuItem
onClick={() => {
deleteMember(workspace.id, 0);
}}
icon={<DownloadIcon />}
>
Download all data to device
</MenuItem>
</>
}
placement="bottom-end"
disablePortal={true}
>
<Button>Download all data to device</Button>
</Menu>
</div>
</StyledPublishExplanation>
)}
</StyledPublishContent>
</div>
);
};

13
packages/app/src/hooks/use-temporary-helper.ts
View File

@@ -1,4 +1,4 @@
import { useEffect, useState } from 'react'; import { useState } from 'react';
import { getWorkspaces, Workspace, User } from './mock-data/mock'; import { getWorkspaces, Workspace, User } from './mock-data/mock';
export function getActiveWorkspace(): Workspace { export function getActiveWorkspace(): Workspace {
@@ -12,16 +12,19 @@ export const useTemporaryHelper = () => {
const [currentWorkspace, setCurrentWorkspace] = useState<Workspace>( const [currentWorkspace, setCurrentWorkspace] = useState<Workspace>(
JSON.parse(localStorage.getItem('affine-active-workspace') ?? '{}') JSON.parse(localStorage.getItem('affine-active-workspace') ?? '{}')
); );
const [user, setUser] = useState<User | null>(null); const [user, setUser] = useState<User | null>();
return { return {
updateWorkspaceMeta: (workspaceId: string, workspaceData: Workspace) => { updateWorkspaceMeta: (
workspaceId: string,
workspaceData: { name?: string; avatar?: string; isPublish?: boolean }
) => {
const workspacesMeta = getWorkspaces(); const workspacesMeta = getWorkspaces();
const newWorkspacesMeta = workspacesMeta.map((workspace: Workspace) => { const newWorkspacesMeta = workspacesMeta.map((workspace: Workspace) => {
if (workspace.id === workspaceId) { if (workspace.id === workspaceId) {
workspaceData.name && (workspace.name = workspaceData.name); workspaceData.name && (workspace.name = workspaceData.name);
workspaceData.avatar && (workspace.avatar = workspaceData.avatar); workspaceData.avatar && (workspace.avatar = workspaceData.avatar);
return workspaceData; return workspace;
} }
return workspace; return workspace;
}); });
@@ -94,7 +97,7 @@ export const useTemporaryHelper = () => {
avatar: 'string', avatar: 'string',
}; };
localStorage.setItem('affine-user', JSON.stringify(userInfo)); localStorage.setItem('affine-user', JSON.stringify(userInfo));
console.log('login');
setUser(userInfo); setUser(userInfo);
}, },
getUserInfo: () => { getUserInfo: () => {