From 97567e2e1fe54bb561c5ce7e9988e7a540f7d0b7 Mon Sep 17 00:00:00 2001 From: DiamondThree Date: Fri, 6 Jan 2023 14:42:19 +0800 Subject: [PATCH] feat: mock login --- .../workspace-setting/MembersPage.tsx | 198 +++++++++ .../workspace-setting/PublishPage.tsx | 122 ++++++ .../components/workspace-setting/SyncPage.tsx | 91 ++++ .../workspace-setting/workspace-setting.tsx | 397 +----------------- 4 files changed, 415 insertions(+), 393 deletions(-) create mode 100644 packages/app/src/components/workspace-setting/MembersPage.tsx create mode 100644 packages/app/src/components/workspace-setting/PublishPage.tsx create mode 100644 packages/app/src/components/workspace-setting/SyncPage.tsx diff --git a/packages/app/src/components/workspace-setting/MembersPage.tsx b/packages/app/src/components/workspace-setting/MembersPage.tsx new file mode 100644 index 0000000000..7695a43b0c --- /dev/null +++ b/packages/app/src/components/workspace-setting/MembersPage.tsx @@ -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([]); + const [userInfo, setUserInfo] = useState(); + // 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 ( +
+ {userInfo ? ( + <> + + + Users({members.length}) + + Access level + + + {members.length === 0 && ( + + )} + {members.length ? ( + members.map((member, index) => { + return ( + + + + + + + + {member.name} + + {member.email} + + + + {/* {member.accepted + ? member.type !== 99 + ? 'Member' + : 'Workspace Owner' + : '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(); + // }); + // }); + }} + icon={} + > + Delete + + + } + placement="bottom-end" + disablePortal={true} + > + + + + + + + ); + }) + ) : ( + <> + )} + + + + { + setIsInviteModalShow(false); + }} + onInviteSuccess={() => { + setMembersList(); + setIsInviteModalShow(false); + // refreshMembers(); + }} + workspaceId={workspace.id} + open={isInviteModalShow} + > + + + ) : ( + <> +
+ Collaborating with other members requires AFFiNE Cloud service. +
+
+ +
+ + )} +
+ ); +}; diff --git a/packages/app/src/components/workspace-setting/PublishPage.tsx b/packages/app/src/components/workspace-setting/PublishPage.tsx new file mode 100644 index 0000000000..f5136e76bd --- /dev/null +++ b/packages/app/src/components/workspace-setting/PublishPage.tsx @@ -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' ? ( +
+ + {currentWorkspace?.isPublish ? ( + <> + + Publishing to web requires AFFiNE Cloud service . + + + Share with link + + + + + + + + + ) : ( + + After publishing to the web, everyone can view the content of + this workspace through the link. + + )} + + {!currentWorkspace?.isPublish ? ( + + ) : ( + + )} +
+ ) : ( + + <> + + Publishing to web requires AFFiNE Cloud service. + + + + + + + + )} + + ); +}; diff --git a/packages/app/src/components/workspace-setting/SyncPage.tsx b/packages/app/src/components/workspace-setting/SyncPage.tsx new file mode 100644 index 0000000000..572a67f775 --- /dev/null +++ b/packages/app/src/components/workspace-setting/SyncPage.tsx @@ -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 ( +
+ + {workspaceType === 'local' ? ( + <> + + {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. + + + + + + + ) : ( + <> + + {workspace.name} is Cloud Workspace. All data will be + synchronized and saved to the AFFiNE + + + + { + deleteMember(workspace.id, 0); + }} + icon={} + > + Download core data to device + + { + deleteMember(workspace.id, 0); + }} + icon={} + > + Download all data to device + + + } + placement="bottom-end" + disablePortal={true} + > + + + + + )} + +
+ ); +}; diff --git a/packages/app/src/components/workspace-setting/workspace-setting.tsx b/packages/app/src/components/workspace-setting/workspace-setting.tsx index 7e4ebc7247..7d292c9b98 100644 --- a/packages/app/src/components/workspace-setting/workspace-setting.tsx +++ b/packages/app/src/components/workspace-setting/workspace-setting.tsx @@ -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 = ({ ); }; - -const MembersPage = ({ workspace }: { workspace: Workspace }) => { - const [isInviteModalShow, setIsInviteModalShow] = useState(false); - const [members, setMembers] = useState([]); - const [userInfo, setUserInfo] = useState(); - // 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 ( -
- {userInfo ? ( - <> - - - Users({members.length}) - - Access level - - - {members.length === 0 && ( - - )} - {members.length ? ( - members.map((member, index) => { - return ( - - - - - - - - {member.name} - - {member.email} - - - - {/* {member.accepted - ? member.type !== 99 - ? 'Member' - : 'Workspace Owner' - : '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(); - // }); - // }); - }} - icon={} - > - Delete - - - } - placement="bottom-end" - disablePortal={true} - > - - - - - - - ); - }) - ) : ( - <> - )} - - - - { - setIsInviteModalShow(false); - }} - onInviteSuccess={() => { - setMembersList(); - setIsInviteModalShow(false); - // refreshMembers(); - }} - workspaceId={workspace.id} - open={isInviteModalShow} - > - - - ) : ( - <> -
- Collaborating with other members requires AFFiNE Cloud service. -
-
- -
- - )} -
- ); -}; - -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 ? ( -
- - {currentWorkspace?.isPublish ? ( - <> - - Publishing to web requires AFFiNE Cloud service . - - - Share with link - - - - - - - - - ) : ( - - After publishing to the web, everyone can view the content of - this workspace through the link. - - )} - - {!currentWorkspace?.isPublish ? ( - - ) : ( - - )} -
- ) : ( - - <> - - Publishing to web requires AFFiNE Cloud service. - - - - - - - - )} - - ); -}; -const SyncPage = ({ workspace }: { workspace: Workspace }) => { - const [workspaceType, setWorkspaceType] = useState('local'); - useEffect(() => { - setType(); - }); - const setType = () => { - const ACTIVEworkspace = getActiveWorkspace(); - ACTIVEworkspace && setWorkspaceType(ACTIVEworkspace.type); - }; - return ( -
- - {workspaceType === 'local' ? ( - <> - - {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. - - - - - - - ) : ( - <> - - {workspace.name} is Cloud Workspace. All data will be - synchronized and saved to the AFFiNE - - - - { - deleteMember(workspace.id, 0); - }} - icon={} - > - Download core data to device - - { - deleteMember(workspace.id, 0); - }} - icon={} - > - Download all data to device - - - } - placement="bottom-end" - disablePortal={true} - > - - - - - )} - -
- ); -};