From 710d740f300ab2add0752985175d965d54e67753 Mon Sep 17 00:00:00 2001 From: DiamondThree <857159145@qq.com> Date: Tue, 10 Jan 2023 12:06:17 +0800 Subject: [PATCH] feat: replease type Workspace with WorkspaceInfo --- .../workspace-setting/ExportPage.tsx | 4 +- .../workspace-setting/MembersPage.tsx | 4 +- .../workspace-setting/PublishPage.tsx | 4 +- .../components/workspace-setting/SyncPage.tsx | 4 +- .../workspace-setting/WorkspaceSetting.tsx | 164 ------------------ .../workspace-setting/general/General.tsx | 23 +-- .../general/delete/Delete.tsx | 4 +- .../src/components/workspace-setting/index.ts | 5 +- .../src/components/workspace-setting/style.ts | 2 +- .../SelectorPopperContent.tsx | 2 +- .../app/src/hooks/use-workspace-helper.ts | 5 + 11 files changed, 28 insertions(+), 193 deletions(-) delete mode 100644 packages/app/src/components/workspace-setting/WorkspaceSetting.tsx diff --git a/packages/app/src/components/workspace-setting/ExportPage.tsx b/packages/app/src/components/workspace-setting/ExportPage.tsx index 85d2b52799..3742b71a3c 100644 --- a/packages/app/src/components/workspace-setting/ExportPage.tsx +++ b/packages/app/src/components/workspace-setting/ExportPage.tsx @@ -1,5 +1,5 @@ import { styled } from '@/styles'; -import { Workspace } from '@affine/datacenter'; +import { WorkspaceInfo } from '@affine/datacenter'; export const ExportPageTitleContainer = styled('div')(() => { return { @@ -9,7 +9,7 @@ export const ExportPageTitleContainer = styled('div')(() => { flex: 1, }; }); -export const ExportPage = ({ workspace }: { workspace: Workspace }) => { +export const ExportPage = ({ workspace }: { workspace: WorkspaceInfo }) => { return ( Export Workspace{' '} diff --git a/packages/app/src/components/workspace-setting/MembersPage.tsx b/packages/app/src/components/workspace-setting/MembersPage.tsx index bfe52b31c4..e596e2d5f8 100644 --- a/packages/app/src/components/workspace-setting/MembersPage.tsx +++ b/packages/app/src/components/workspace-setting/MembersPage.tsx @@ -23,13 +23,13 @@ import { Empty } from '@/ui/empty'; // User, // Workspace, // } from '@/hooks/mock-data/mock'; -import { Workspace } from '@affine/datacenter'; +import { WorkspaceInfo } from '@affine/datacenter'; import { useTemporaryHelper } from '@/providers/temporary-helper-provider'; import { StyledMemberWarp } from './general/style'; import { useConfirm } from '@/providers/ConfirmProvider'; // import { useAppState } from '@/providers/app-state-provider'; -export const MembersPage = ({ workspace }: { workspace: Workspace }) => { +export const MembersPage = ({ workspace }: { workspace: WorkspaceInfo }) => { const [isInviteModalShow, setIsInviteModalShow] = useState(false); const [members, setMembers] = useState<[{ name: string; email: string }]>([ { name: 'affine', email: 'tttt' }, diff --git a/packages/app/src/components/workspace-setting/PublishPage.tsx b/packages/app/src/components/workspace-setting/PublishPage.tsx index e3c36b9343..e931041fac 100644 --- a/packages/app/src/components/workspace-setting/PublishPage.tsx +++ b/packages/app/src/components/workspace-setting/PublishPage.tsx @@ -12,9 +12,9 @@ import { toast } from '@/ui/toast'; import { useConfirm } from '@/providers/ConfirmProvider'; // import { useAppState } from '@/providers/app-state-provider3'; import { useWorkspaceHelper } from '@/hooks/use-workspace-helper'; -import { Workspace } from '@affine/datacenter'; +import { WorkspaceInfo } from '@affine/datacenter'; -export const PublishPage = ({ workspace }: { workspace: Workspace }) => { +export const PublishPage = ({ workspace }: { workspace: WorkspaceInfo }) => { const shareUrl = window.location.host + '/workspace/' + workspace.id + '?share=true'; const { publishWorkspace } = useWorkspaceHelper(); diff --git a/packages/app/src/components/workspace-setting/SyncPage.tsx b/packages/app/src/components/workspace-setting/SyncPage.tsx index 1c3cdaea8f..89c2df5a02 100644 --- a/packages/app/src/components/workspace-setting/SyncPage.tsx +++ b/packages/app/src/components/workspace-setting/SyncPage.tsx @@ -7,8 +7,8 @@ import { DownloadIcon } from '@blocksuite/icons'; import { Button } from '@/ui/button'; import { Menu, MenuItem } from '@/ui/menu'; import { useTemporaryHelper } from '@/providers/temporary-helper-provider'; -import { Workspace } from '@affine/datacenter'; -export const SyncPage = ({ workspace }: { workspace: Workspace }) => { +import { WorkspaceInfo } from '@affine/datacenter'; +export const SyncPage = ({ workspace }: { workspace: WorkspaceInfo }) => { console.log('workspace: ', workspace); const { currentWorkspace, updateWorkspaceMeta } = useTemporaryHelper(); diff --git a/packages/app/src/components/workspace-setting/WorkspaceSetting.tsx b/packages/app/src/components/workspace-setting/WorkspaceSetting.tsx deleted file mode 100644 index c0213c2cca..0000000000 --- a/packages/app/src/components/workspace-setting/WorkspaceSetting.tsx +++ /dev/null @@ -1,164 +0,0 @@ -import Modal, { ModalCloseButton } from '@/ui/modal'; -import { - StyledSettingContainer, - StyledSettingContent, - StyledSettingSidebar, - StyledSettingSidebarHeader, - StyledSettingTabContainer, - StyledSettingTagIconContainer, - WorkspaceSettingTagItem, -} from './style'; -import { - EditIcon, - UsersIcon, - PublishIcon, - CloudInsyncIcon, -} from '@blocksuite/icons'; -import { useEffect, useState } from 'react'; -import { GeneralPage } from './general'; -import { MembersPage } from './MembersPage'; -import { PublishPage } from './PublishPage'; -import { ExportPage } from './ExportPage'; -import { SyncPage } from './SyncPage'; -import { useAppState } from '@/providers/app-state-provider'; - -enum ActiveTab { - 'general' = 'general', - 'members' = 'members', - 'publish' = 'publish', - 'sync' = 'sync', - 'export' = 'export', -} - -type SettingTabProps = { - activeTab: ActiveTab; - onTabChange?: (tab: ActiveTab) => void; -}; - -type WorkspaceSettingProps = { - isShow: boolean; - onClose?: () => void; -}; - -const WorkspaceSettingTab = ({ activeTab, onTabChange }: SettingTabProps) => { - return ( - - { - onTabChange && onTabChange(ActiveTab.general); - }} - > - - - - General - - - { - onTabChange && onTabChange(ActiveTab.sync); - }} - > - - - - Sync - - - { - onTabChange && onTabChange(ActiveTab.members); - }} - > - - - - Collaboration - - { - onTabChange && onTabChange(ActiveTab.publish); - }} - > - - - - Publish - - - { - onTabChange && onTabChange(ActiveTab.export); - }} - > - - - - Export - - - ); -}; - -export const WorkspaceSetting = ({ - isShow, - onClose, -}: WorkspaceSettingProps) => { - // const { workspaces } = useAppState(); - const [activeTab, setActiveTab] = useState(ActiveTab.general); - const handleTabChange = (tab: ActiveTab) => { - setActiveTab(tab); - }; - - const { currentMetaWorkSpace } = useAppState(); - const handleClickClose = () => { - onClose && onClose(); - }; - const isOwner = true; - useEffect(() => { - // reset tab when modal is closed - if (!isShow) { - setActiveTab(ActiveTab.general); - } - }, [isShow]); - return ( - - - - {isOwner ? ( - - - Workspace Settings - - - - ) : null} - - {activeTab === ActiveTab.general && currentMetaWorkSpace && ( - - )} - {activeTab === ActiveTab.sync && currentMetaWorkSpace && ( - - )} - {activeTab === ActiveTab.members && currentMetaWorkSpace && ( - - )} - {activeTab === ActiveTab.publish && currentMetaWorkSpace && ( - - )} - {activeTab === ActiveTab.export && currentMetaWorkSpace && ( - - )} - - - - ); -}; diff --git a/packages/app/src/components/workspace-setting/general/General.tsx b/packages/app/src/components/workspace-setting/general/General.tsx index 87278ce734..dd342d79a4 100644 --- a/packages/app/src/components/workspace-setting/general/General.tsx +++ b/packages/app/src/components/workspace-setting/general/General.tsx @@ -9,26 +9,18 @@ import { StyledSettingH2 } from '../style'; import { useState } from 'react'; import { Button, TextButton } from '@/ui/button'; import Input from '@/ui/input'; -// import { useAppState } from '@/providers/app-state-provider'; +import { useAppState } from '@/providers/app-state-provider'; import { WorkspaceDelete } from './delete'; -// import { debounce } from '@/utils'; import { WorkspaceLeave } from './leave'; import { Upload } from '@/components/file-upload'; import { WorkspaceAvatar } from '@/components/workspace-avatar'; -import { useTemporaryHelper } from '@/providers/temporary-helper-provider'; -import { Workspace } from '@affine/datacenter'; -export const GeneralPage = ({ workspace }: { workspace: Workspace }) => { - // const { refreshWorkspacesMeta } = useAppState(); - const { updateWorkspaceMeta } = useTemporaryHelper(); +import { WorkspaceInfo } from '@affine/datacenter'; +export const GeneralPage = ({ workspace }: { workspace: WorkspaceInfo }) => { const [showDelete, setShowDelete] = useState(false); const [showLeave, setShowLeave] = useState(false); const [uploading, setUploading] = useState(false); - const [workspaceName, setWorkspaceName] = useState(''); - // const debouncedRefreshWorkspacesMeta = debounce(() => { - // refreshWorkspacesMeta(); - // }, 100); + const [workspaceName, setWorkspaceName] = useState(workspace.name); const isOwner = true; - const handleChangeWorkSpaceName = (newName: string) => { setWorkspaceName(newName); }; @@ -46,7 +38,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => { setShowLeave(false); }; const handleUpdateWorkspaceName = () => { - workspace && updateWorkspaceMeta(workspace.id, { name: workspaceName }); + // workspace && currentWorkspace(workspace.id, { name: workspaceName }); }; const fileChange = async (file: File) => { @@ -73,8 +65,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
@@ -101,7 +92,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => { onClick={() => { handleUpdateWorkspaceName(); }} - style={{ marginLeft: '10px' }} + style={{ marginLeft: '0px' }} > ✔️ diff --git a/packages/app/src/components/workspace-setting/general/delete/Delete.tsx b/packages/app/src/components/workspace-setting/general/delete/Delete.tsx index cfe814e569..e459addea7 100644 --- a/packages/app/src/components/workspace-setting/general/delete/Delete.tsx +++ b/packages/app/src/components/workspace-setting/general/delete/Delete.tsx @@ -17,12 +17,12 @@ import { getWorkspaces, // Workspace, } from '@/hooks/mock-data/mock'; -import { Workspace } from '@affine/datacenter'; +import { WorkspaceInfo } from '@affine/datacenter'; interface WorkspaceDeleteProps { open: boolean; onClose: () => void; - workspace: Workspace; + workspace: WorkspaceInfo; } export const WorkspaceDelete = ({ diff --git a/packages/app/src/components/workspace-setting/index.ts b/packages/app/src/components/workspace-setting/index.ts index db995db5e4..5df8d86606 100644 --- a/packages/app/src/components/workspace-setting/index.ts +++ b/packages/app/src/components/workspace-setting/index.ts @@ -1 +1,4 @@ -export * from './WorkspaceSetting'; +export * from './general'; +export * from './ExportPage'; +export * from './MembersPage'; +export * from './SyncPage'; diff --git a/packages/app/src/components/workspace-setting/style.ts b/packages/app/src/components/workspace-setting/style.ts index 48fbb284ff..2ad079a784 100644 --- a/packages/app/src/components/workspace-setting/style.ts +++ b/packages/app/src/components/workspace-setting/style.ts @@ -42,7 +42,7 @@ export const StyledSettingSidebarHeader = styled('div')(() => { fontWeight: '500', fontSize: '18px', lineHeight: '26px', - textAlign: 'center', + textAlign: 'left', marginTop: '37px', }; } diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx index b4012aa65c..287523689e 100644 --- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx +++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx @@ -12,7 +12,7 @@ // } from './WorkspaceItem'; // import { WorkspaceSetting } from '@/components/workspace-setting'; // import { useCallback, useEffect, useState } from 'react'; -// import { Workspace } from '@affine/datacenter'; +// import { WorkspaceInfo } from '@affine/datacenter'; // import { useModal } from '@/providers/GlobalModalProvider'; // export type WorkspaceDetails = Record< diff --git a/packages/app/src/hooks/use-workspace-helper.ts b/packages/app/src/hooks/use-workspace-helper.ts index cdb50c9042..4a396074d4 100644 --- a/packages/app/src/hooks/use-workspace-helper.ts +++ b/packages/app/src/hooks/use-workspace-helper.ts @@ -1,4 +1,5 @@ import { useAppState } from '@/providers/app-state-provider'; +import { WorkspaceInfo } from '@affine/datacenter'; export const useWorkspaceHelper = () => { const { dataCenter } = useAppState(); @@ -20,8 +21,12 @@ export const useWorkspaceHelper = () => { dataCenter.setWorkspacePublish(workspaceId, publish); }; + const updateWorkspace = async (workspace: WorkspaceInfo) => { + console.log('workspace: ', workspace); + }; return { createWorkspace, publishWorkspace, + updateWorkspace, }; };