From 3d2da085e7592b5404a33bd2c0c397246503a0a1 Mon Sep 17 00:00:00 2001 From: DiamondThree Date: Thu, 5 Jan 2023 17:32:39 +0800 Subject: [PATCH] feat: mock login --- .../src/components/workspace-modal/index.tsx | 56 +++++++++++++++++-- .../workspace-setting/general/general.tsx | 7 +-- .../workspace-setting/workspace-setting.tsx | 26 ++++----- .../components/workspace-slider-bar/index.tsx | 8 ++- .../components/workspace-slider-bar/style.ts | 1 + packages/app/src/hooks/mock-data/mock.ts | 22 +++++++- packages/app/src/ui/confirm/Confirm.tsx | 4 +- 7 files changed, 95 insertions(+), 29 deletions(-) diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx index 05b1f6632b..479b22c99e 100644 --- a/packages/app/src/components/workspace-modal/index.tsx +++ b/packages/app/src/components/workspace-modal/index.tsx @@ -6,8 +6,14 @@ import { getWorkspaces, Workspace, setActiveWorkspace, + Login, + User, + getUserInfo, + SignOut, } from '@/hooks/mock-data/mock'; import { CreateWorkspaceModal } from '../create-workspace'; +import { useConfirm } from '@/providers/confirm-provider'; +import { toast } from '@/ui/toast'; interface LoginModalProps { open: boolean; @@ -16,20 +22,30 @@ interface LoginModalProps { export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => { const [workspaceList, setWorkspaceList] = useState([]); + const [user, setUser] = useState(); const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false); - + const { confirm } = useConfirm(); useEffect(() => { - getList(); + setList(); + setUserInfo(); }, []); - const getList = () => { + const setList = () => { const data = getWorkspaces(); setWorkspaceList(data); }; + const setUserInfo = () => { + const data = getUserInfo(); + setUser(data); + }; return (
- +
My Workspace List {
- + {!user ? ( + + ) : ( + + )}
{ setCreateWorkspaceOpen(false); - getList(); + setList(); onClose(); + 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 => { + confirm && Login(); + }); }} > @@ -98,6 +141,7 @@ const Content = styled('div')({ flexDirection: 'column', alignItems: 'center', gap: '16px', + flex: 1, }); const ContentTitle = styled('span')({ diff --git a/packages/app/src/components/workspace-setting/general/general.tsx b/packages/app/src/components/workspace-setting/general/general.tsx index 82389370b3..fa72178869 100644 --- a/packages/app/src/components/workspace-setting/general/general.tsx +++ b/packages/app/src/components/workspace-setting/general/general.tsx @@ -16,7 +16,7 @@ import { Workspace as StoreWorkspace } from '@blocksuite/store'; import { debounce } from '@/utils'; import { WorkspaceLeave } from './leave'; import { Upload } from '@/components/file-upload'; -import { Workspace } from '@/hooks/mock-data/mock'; +import { getUserInfo, Workspace } from '@/hooks/mock-data/mock'; export const GeneralPage = ({ workspace, @@ -30,6 +30,7 @@ export const GeneralPage = ({ workspaces, refreshWorkspacesMeta, } = useAppState(); + // const user = getUserInfo(); const [showDelete, setShowDelete] = useState(false); const [showLeave, setShowLeave] = useState(false); const [uploading, setUploading] = useState(false); @@ -38,11 +39,9 @@ export const GeneralPage = ({ refreshWorkspacesMeta(); }, 100); const isOwner = true; + const handleChangeWorkSpaceName = (newName: string) => { setWorkspaceName(newName); - currentWorkspace?.meta.setName(newName); - workspaces[workspace.id]?.meta.setName(newName); - debouncedRefreshWorkspacesMeta(); }; const currentWorkspaceIndex = workspacesMeta.findIndex( meta => meta.id === workspace.id diff --git a/packages/app/src/components/workspace-setting/workspace-setting.tsx b/packages/app/src/components/workspace-setting/workspace-setting.tsx index 238ff1f412..f1a9256dbf 100644 --- a/packages/app/src/components/workspace-setting/workspace-setting.tsx +++ b/packages/app/src/components/workspace-setting/workspace-setting.tsx @@ -43,7 +43,11 @@ import { toast } from '@/ui/toast'; import { Empty } from '@/ui/empty'; import { useAppState } from '@/providers/app-state-provider'; import { GeneralPage } from './general'; -import { getActiveWorkspace, Workspace } from '@/hooks/mock-data/mock'; +import { + getActiveWorkspace, + setWorkspacePublish, + Workspace, +} from '@/hooks/mock-data/mock'; enum ActiveTab { 'general' = 'general', @@ -112,6 +116,7 @@ export const WorkspaceSetting = ({ }; const workspace = getActiveWorkspace(); + console.log('workspace: ', workspace); const handleClickClose = () => { onClose && onClose(); }; @@ -123,7 +128,7 @@ export const WorkspaceSetting = ({ } }, [isShow]); return ( - + {isOwner ? ( @@ -287,23 +292,16 @@ const MembersPage = ({ workspace }: { workspace: Workspace }) => { }; const PublishPage = ({ workspace }: { workspace: Workspace }) => { - const shareUrl = window.location.host + '/workspace/' + workspace.id; + const shareUrl = + window.location.host + '/workspace/' + workspace.id + '?share=true'; const [publicStatus, setPublicStatus] = useState( workspace.isPublish ?? false ); const togglePublic = (flag: boolean) => { - getDataCenter() - .then(dc => - dc.apis.updateWorkspace({ - id: workspace.id, - public: flag, - }) - ) - .then(data => { - setPublicStatus(data?.public); - toast('Updated Public Status Success'); - }); + const isPublic = setWorkspacePublish(workspace.id, flag); + setPublicStatus(isPublic); }; + const copyUrl = () => { navigator.clipboard.writeText(shareUrl); toast('Copied url to clipboard'); diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx index 63305638a5..b9132fab52 100644 --- a/packages/app/src/components/workspace-slider-bar/index.tsx +++ b/packages/app/src/components/workspace-slider-bar/index.tsx @@ -76,6 +76,8 @@ export const WorkSpaceSliderBar = () => { const [showTip, setShowTip] = useState(false); const [show, setShow] = useLocalStorage('AFFiNE_SLIDE_BAR', false, true); + const [showWorkspaceSetting, setShowWorkspaceSetting] = useState(false); + const paths = { all: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/all` : '', favorite: currentWorkspaceId @@ -150,16 +152,16 @@ export const WorkSpaceSliderBar = () => { { - console.log('ttt'); + setShowWorkspaceSetting(true); }} > Setting { - console.log(1231231); + setShowWorkspaceSetting(false); }} /> diff --git a/packages/app/src/components/workspace-slider-bar/style.ts b/packages/app/src/components/workspace-slider-bar/style.ts index f29de60a1e..6f380b43e1 100644 --- a/packages/app/src/components/workspace-slider-bar/style.ts +++ b/packages/app/src/components/workspace-slider-bar/style.ts @@ -62,6 +62,7 @@ export const StyledListItem = styled.div<{ color: active ? theme.colors.primaryColor : theme.colors.popoverColor, paddingLeft: '12px', borderRadius: '5px', + cursor: 'pointer', ...displayFlex('flex-start', 'center'), ...(disabled ? { diff --git a/packages/app/src/hooks/mock-data/mock.ts b/packages/app/src/hooks/mock-data/mock.ts index 91fcfaa85f..6f5f5f289c 100644 --- a/packages/app/src/hooks/mock-data/mock.ts +++ b/packages/app/src/hooks/mock-data/mock.ts @@ -8,7 +8,7 @@ export interface Workspace { workspaceOwner?: User; // 本地工作空间的拥有者 } -interface User { +export interface User { name: string; id: string; email: string; @@ -109,3 +109,23 @@ export function setActiveWorkspace(workspaceData: Workspace) { JSON.stringify(workspaceData) ); } + +export function getUserInfo(): User { + return JSON.parse(localStorage.getItem('affine-user') ?? 'null'); +} + +export function Login(): void { + localStorage.setItem( + 'affine-user', + JSON.stringify({ + name: 'Diamond', + id: 'ttt', + email: 'diamond.shx@gmail.com', + avatar: 'string', + }) + ); +} + +export function SignOut(): void { + localStorage.removeItem('affine-user'); +} diff --git a/packages/app/src/ui/confirm/Confirm.tsx b/packages/app/src/ui/confirm/Confirm.tsx index d3de35adb1..7b789c4f89 100644 --- a/packages/app/src/ui/confirm/Confirm.tsx +++ b/packages/app/src/ui/confirm/Confirm.tsx @@ -11,6 +11,7 @@ export type ConfirmProps = { title?: string; content?: string; confirmText?: string; + cancelText?: string; // TODO: Confirm button's color should depend on confirm type confirmType?: 'primary' | 'warning' | 'danger'; onConfirm?: () => void; @@ -24,6 +25,7 @@ export const Confirm = ({ confirmType, onConfirm, onCancel, + cancelText = 'Cancel', }: ConfirmProps) => { const [open, setOpen] = useState(true); return ( @@ -48,7 +50,7 @@ export const Confirm = ({ }} style={{ marginRight: '24px' }} > - Cancel + {cancelText}