mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-12 04:18:54 +00:00
feat: mock login
This commit is contained in:
DiamondThree
198
packages/app/src/components/workspace-setting/MembersPage.tsx
Normal file
198
packages/app/src/components/workspace-setting/MembersPage.tsx
Normal 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
122
packages/app/src/components/workspace-setting/PublishPage.tsx
Normal 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
91
packages/app/src/components/workspace-setting/SyncPage.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
@@ -1,23 +1,7 @@
|
||||
import Modal, { ModalCloseButton } from '@/ui/modal';
|
||||
import {
|
||||
StyledCopyButtonContainer,
|
||||
StyledMemberAvatar,
|
||||
StyledMemberButtonContainer,
|
||||
StyledMemberEmail,
|
||||
StyledMemberInfo,
|
||||
StyledMemberListContainer,
|
||||
StyledMemberListItem,
|
||||
StyledMemberName,
|
||||
StyledMemberNameContainer,
|
||||
StyledMemberRoleContainer,
|
||||
StyledMemberTitleContainer,
|
||||
StyledMoreVerticalButton,
|
||||
StyledPublishContent,
|
||||
StyledPublishCopyContainer,
|
||||
StyledPublishExplanation,
|
||||
StyledSettingContainer,
|
||||
StyledSettingContent,
|
||||
StyledSettingH2,
|
||||
StyledSettingSidebar,
|
||||
StyledSettingSidebarHeader,
|
||||
StyledSettingTabContainer,
|
||||
@@ -28,36 +12,14 @@ import {
|
||||
EditIcon,
|
||||
UsersIcon,
|
||||
PublishIcon,
|
||||
MoreVerticalIcon,
|
||||
EmailIcon,
|
||||
TrashIcon,
|
||||
DownloadIcon,
|
||||
CloudInsyncIcon,
|
||||
} from '@blocksuite/icons';
|
||||
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 {
|
||||
deleteMember,
|
||||
getActiveWorkspace,
|
||||
getMembers,
|
||||
getUserInfo,
|
||||
Login,
|
||||
setWorkspacePublish,
|
||||
updateWorkspaceMeta,
|
||||
User,
|
||||
Workspace,
|
||||
} from '@/hooks/mock-data/mock';
|
||||
import useTemporaryHelper from '@/hooks/use-temporary-helper';
|
||||
import { useConfirm } from '@/providers/confirm-provider';
|
||||
import { getActiveWorkspace } from '@/hooks/mock-data/mock';
|
||||
import MembersPage from './MembersPage';
|
||||
import PublishPage from './PublishPage';
|
||||
import SyncPage from './SyncPage';
|
||||
|
||||
enum ActiveTab {
|
||||
'general' = 'general',
|
||||
@@ -194,354 +156,3 @@ export const WorkspaceSetting = ({
|
||||
</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 { 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 (
|
||||
<>
|
||||
{user ? (
|
||||
<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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user