diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx index 81293efdbc..eb83c1ab04 100644 --- a/packages/app/src/components/workspace-modal/index.tsx +++ b/packages/app/src/components/workspace-modal/index.tsx @@ -8,7 +8,6 @@ import { setActiveWorkspace, Login, User, - getUserInfo, SignOut, updateWorkspaceMeta, } from '@/hooks/mock-data/mock'; @@ -22,6 +21,7 @@ import { import { useConfirm } from '@/providers/confirm-provider'; import { toast } from '@/ui/toast'; import { WorkspaceAvatar } from '@/components/workspace-avatar'; +import useTemporaryHelper from '@/hooks/use-temporary-helper'; interface LoginModalProps { open: boolean; onClose: () => void; @@ -29,23 +29,17 @@ interface LoginModalProps { export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => { const [workspaceList, setWorkspaceList] = useState([]); - const [user, setUser] = useState(); const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false); const { confirm } = useConfirm(); + const { user, login } = useTemporaryHelper(); useEffect(() => { setList(); - setUserInfo(); }, []); const setList = () => { const data = getWorkspaces(); - console.log('data: ', data); setWorkspaceList(data); }; - const setUserInfo = () => { - const data = getUserInfo(); - setUser(data); - }; return (
@@ -151,9 +145,8 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => { {!user ? ( {/* TODO: add upload logic */} - {/* {isOwner ? ( - upload - ) : null} */} - {/* */} Workspace Name @@ -122,7 +115,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => { ✔️ - {userInfo ? ( + {/* {userInfo ? (
Workspace Owner @@ -136,7 +129,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
) : ( '' - )} + )} */} Workspace Type @@ -151,8 +144,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => { ) : ( diff --git a/packages/app/src/components/workspace-setting/style.ts b/packages/app/src/components/workspace-setting/style.ts index f59125a9fd..7cf6ac9fc2 100644 --- a/packages/app/src/components/workspace-setting/style.ts +++ b/packages/app/src/components/workspace-setting/style.ts @@ -199,11 +199,12 @@ export const StyledMoreVerticalButton = styled('button')(() => { export const StyledPublishExplanation = styled('div')(() => { return { - marginTop: '56px', paddingRight: '48px', fontWeight: '500', fontSize: '18px', lineHeight: '26px', + flex: 1, + marginTop: '60px', }; }); @@ -213,7 +214,9 @@ export const StyledPublishCopyContainer = styled('div')(() => { display: 'flex', flexDirection: 'row', alignItems: 'center', + height: '38px', + paddingTop: '20px', }; }); @@ -226,5 +229,7 @@ export const StyledCopyButtonContainer = styled('div')(() => { export const StyledPublishContent = styled('div')(() => { return { height: '494px', + display: 'flex', + flexDirection: 'column', }; }); diff --git a/packages/app/src/components/workspace-setting/workspace-setting.tsx b/packages/app/src/components/workspace-setting/workspace-setting.tsx index 13180a5801..7e4ebc7247 100644 --- a/packages/app/src/components/workspace-setting/workspace-setting.tsx +++ b/packages/app/src/components/workspace-setting/workspace-setting.tsx @@ -56,6 +56,8 @@ import { User, Workspace, } from '@/hooks/mock-data/mock'; +import useTemporaryHelper from '@/hooks/use-temporary-helper'; +import { useConfirm } from '@/providers/confirm-provider'; enum ActiveTab { 'general' = 'general', @@ -364,66 +366,108 @@ const MembersPage = ({ workspace }: { workspace: Workspace }) => { const PublishPage = ({ workspace }: { workspace: Workspace }) => { const shareUrl = window.location.host + '/workspace/' + workspace.id + '?share=true'; - const [publicStatus, setPublicStatus] = useState( - workspace.isPublish ?? false - ); + + const { login, updateWorkspaceMeta, user, currentWorkspace } = + useTemporaryHelper(); + const { confirm } = useConfirm(); + const togglePublic = (flag: boolean) => { - const isPublic = setWorkspacePublish(workspace.id, flag); - setPublicStatus(isPublic); + 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 ( -
- - {publicStatus ? ( + <> + {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 ? ( + + ) : ( + + )} +
+ ) : ( + <> - The current workspace has been published to the web, everyone can - view the contents of this workspace through the link. + 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. - - )} - - {!publicStatus ? ( - - ) : ( - + )} -
+ ); }; const SyncPage = ({ workspace }: { workspace: Workspace }) => { @@ -433,7 +477,6 @@ const SyncPage = ({ workspace }: { workspace: Workspace }) => { }); const setType = () => { const ACTIVEworkspace = getActiveWorkspace(); - console.log('ACTIVEworkspace: ', ACTIVEworkspace); ACTIVEworkspace && setWorkspaceType(ACTIVEworkspace.type); }; return ( @@ -448,27 +491,27 @@ const SyncPage = ({ workspace }: { workspace: Workspace }) => { - - - + ) : ( - - {workspace.name} is Cloud Workspace. All data will be - synchronized and saved to the AFFiNE account -
+ <> + + {workspace.name} is Cloud Workspace. All data will be + synchronized and saved to the AFFiNE + + @@ -495,8 +538,8 @@ const SyncPage = ({ workspace }: { workspace: Workspace }) => { > -
- + + )}
diff --git a/packages/app/src/hooks/use-temporary-helper.ts b/packages/app/src/hooks/use-temporary-helper.ts index 8de0ef88a0..c2727f1653 100644 --- a/packages/app/src/hooks/use-temporary-helper.ts +++ b/packages/app/src/hooks/use-temporary-helper.ts @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import { getWorkspaces, Workspace, User } from './mock-data/mock'; export function getActiveWorkspace(): Workspace { @@ -12,16 +12,19 @@ export const useTemporaryHelper = () => { const [currentWorkspace, setCurrentWorkspace] = useState( JSON.parse(localStorage.getItem('affine-active-workspace') ?? '{}') ); - const [user, setUser] = useState(null); + const [user, setUser] = useState(); return { - updateWorkspaceMeta: (workspaceId: string, workspaceData: Workspace) => { + updateWorkspaceMeta: ( + workspaceId: string, + workspaceData: { name?: string; avatar?: string; isPublish?: boolean } + ) => { const workspacesMeta = getWorkspaces(); const newWorkspacesMeta = workspacesMeta.map((workspace: Workspace) => { if (workspace.id === workspaceId) { workspaceData.name && (workspace.name = workspaceData.name); workspaceData.avatar && (workspace.avatar = workspaceData.avatar); - return workspaceData; + return workspace; } return workspace; }); @@ -94,7 +97,7 @@ export const useTemporaryHelper = () => { avatar: 'string', }; localStorage.setItem('affine-user', JSON.stringify(userInfo)); - + console.log('login'); setUser(userInfo); }, getUserInfo: () => {