feat: workspace setting

2024-11-30 14:12:00 +03:00 · 2023-01-09 21:13:23 +08:00 · 2023-01-09 21:13:23 +08:00 · 10072148d1
commit 10072148d1
parent 93866e56d2
11 changed files with 77 additions and 61 deletions
--- a/packages/app/src/components/workspace-setting/ExportPage.tsx
+++ b/packages/app/src/components/workspace-setting/ExportPage.tsx
@ -1,5 +1,5 @@
-import { Workspace } from '@/hooks/mock-data/mock';
 import { styled } from '@/styles';
+import { Workspace } from '@affine/datacenter';

 export const ExportPageTitleContainer = styled('div')(() => {
  return {
--- a/packages/app/src/components/workspace-setting/MembersPage.tsx
+++ b/packages/app/src/components/workspace-setting/MembersPage.tsx
@ -17,12 +17,13 @@ import { Button, IconButton } from '@/ui/button';
 import { InviteMembers } from '../invite-members/index';
 import { Menu, MenuItem } from '@/ui/menu';
 import { Empty } from '@/ui/empty';
-import {
-  deleteMember,
-  getMembers,
-  User,
-  Workspace,
-} from '@/hooks/mock-data/mock';
+// import {
+//   deleteMember,
+//   getMembers,
+//   User,
+//   Workspace,
+// } from '@/hooks/mock-data/mock';
+import { Workspace } from '@affine/datacenter';
 import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
 import { StyledMemberWarp } from './general/style';
 import { useConfirm } from '@/providers/ConfirmProvider';
@ -30,7 +31,9 @@ import { useConfirm } from '@/providers/ConfirmProvider';
 // import { useAppState } from '@/providers/app-state-provider';
 export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
  const [isInviteModalShow, setIsInviteModalShow] = useState(false);
-  const [members, setMembers] = useState<User[]>([]);
+  const [members, setMembers] = useState<[{ name: string; email: string }]>([
+    { name: 'affine', email: 'tttt' },
+  ]);
  const { user, login, updateWorkspaceMeta } = useTemporaryHelper();
  const { confirm } = useConfirm();
  // const refreshMembers = useCallback(() => {
@ -48,8 +51,8 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
  //     });
  // }, [workspace.id]);
  const setMembersList = () => {
-    const members = getMembers(workspace.id);
-    members && setMembers(members);
+    // const members = getMembers(workspace.id);
+    // members && setMembers(members);
  };
  useEffect(() => {
    setMembersList();
@ -58,7 +61,7 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {

  return (
    <div>
-      {workspace.type === 'cloud' ? (
+      {workspace.provider === 'cloud' ? (
        <>
          <StyledMemberTitleContainer>
            <StyledMemberNameContainer>
@ -67,13 +70,6 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
            <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 (
@ -103,7 +99,7 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
                          <>
                            <MenuItem
                              onClick={() => {
-                                deleteMember(workspace.id, 0);
+                                // deleteMember(workspace.id, 0);
                                setMembersList();
                                // confirm({
                                //   title: 'Delete Member?',
@ -142,7 +138,11 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
                );
              })
            ) : (
-              <></>
+              <Empty
+                width={648}
+                sx={{ marginTop: '60px' }}
+                height={300}
+              ></Empty>
            )}
          </StyledMemberListContainer>
          <StyledMemberButtonContainer>
--- a/packages/app/src/components/workspace-setting/PublishPage.tsx
+++ b/packages/app/src/components/workspace-setting/PublishPage.tsx
@ -9,20 +9,20 @@ import {
 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 '@/providers/temporary-helper-provider';
 import { useConfirm } from '@/providers/ConfirmProvider';
+// import { useAppState } from '@/providers/app-state-provider3';
+import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
+import { Workspace } from '@affine/datacenter';

 export const PublishPage = ({ workspace }: { workspace: Workspace }) => {
-  console.log('workspace: ', workspace);
  const shareUrl =
    window.location.host + '/workspace/' + workspace.id + '?share=true';
+  const { publishWorkspace } = useWorkspaceHelper();

-  const { login, updateWorkspaceMeta, user } = useTemporaryHelper();
  const { confirm } = useConfirm();

  const togglePublic = (flag: boolean) => {
-    updateWorkspaceMeta(workspace.id, { isPublish: flag });
+    workspace.id && publishWorkspace(workspace?.id, flag);
  };

  const copyUrl = () => {
@ -34,22 +34,23 @@ export const PublishPage = ({ workspace }: { workspace: Workspace }) => {
    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',
+      confirmText:
+        workspace.provider === 'local' ? 'Enable' : 'Sign in and Enable',
      cancelText: 'Skip',
    }).then(confirm => {
      if (confirm) {
-        if (user) {
-          updateWorkspaceMeta(workspace.id, { type: 'cloud' });
-        } else {
-          login();
-          updateWorkspaceMeta(workspace.id, { type: 'cloud' });
-        }
+        // if (user) {
+        //   updateWorkspaceMeta(workspace.id, { type: 'cloud' });
+        // } else {
+        //   login();
+        //   updateWorkspaceMeta(workspace.id, { type: 'cloud' });
+        // }
      }
    });
  };
  return (
    <>
-      {workspace.type === 'cloud' ? (
+      {workspace.provider === 'cloud' ? (
        <div>
          <StyledPublishContent>
            {workspace?.isPublish ? (
--- a/packages/app/src/components/workspace-setting/SyncPage.tsx
+++ b/packages/app/src/components/workspace-setting/SyncPage.tsx
@ -6,9 +6,8 @@ import {
 import { DownloadIcon } from '@blocksuite/icons';
 import { Button } from '@/ui/button';
 import { Menu, MenuItem } from '@/ui/menu';
-import { deleteMember, Workspace } from '@/hooks/mock-data/mock';
 import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
-
+import { Workspace } from '@affine/datacenter';
 export const SyncPage = ({ workspace }: { workspace: Workspace }) => {
  const { currentWorkspace, updateWorkspaceMeta } = useTemporaryHelper();

@ -49,7 +48,7 @@ export const SyncPage = ({ workspace }: { workspace: Workspace }) => {
                  <>
                    <MenuItem
                      onClick={() => {
-                        deleteMember(workspace.id, 0);
+                        // deleteMember(workspace.id, 0);
                      }}
                      icon={<DownloadIcon />}
                    >
@ -57,7 +56,7 @@ export const SyncPage = ({ workspace }: { workspace: Workspace }) => {
                    </MenuItem>
                    <MenuItem
                      onClick={() => {
-                        deleteMember(workspace.id, 0);
+                        // deleteMember(workspace.id, 0);
                      }}
                      icon={<DownloadIcon />}
                    >
--- a/packages/app/src/components/workspace-setting/WorkspaceSetting.tsx
+++ b/packages/app/src/components/workspace-setting/WorkspaceSetting.tsx
@ -20,7 +20,7 @@ import { MembersPage } from './MembersPage';
 import { PublishPage } from './PublishPage';
 import { ExportPage } from './ExportPage';
 import { SyncPage } from './SyncPage';
-import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
+import { useAppState } from '@/providers/app-state-provider';

 enum ActiveTab {
  'general' = 'general',
@ -115,7 +115,7 @@ export const WorkspaceSetting = ({
    setActiveTab(tab);
  };

-  const { currentWorkspace } = useTemporaryHelper();
+  const { currentMetaWorkSpace } = useAppState();
  const handleClickClose = () => {
    onClose && onClose();
  };
@ -142,20 +142,20 @@ export const WorkspaceSetting = ({
          </StyledSettingSidebar>
        ) : null}
        <StyledSettingContent>
-          {activeTab === ActiveTab.general && currentWorkspace && (
-            <GeneralPage workspace={currentWorkspace} />
+          {activeTab === ActiveTab.general && currentMetaWorkSpace && (
+            <GeneralPage workspace={currentMetaWorkSpace} />
          )}
-          {activeTab === ActiveTab.sync && currentWorkspace && (
-            <SyncPage workspace={currentWorkspace} />
+          {activeTab === ActiveTab.sync && currentMetaWorkSpace && (
+            <SyncPage workspace={currentMetaWorkSpace} />
          )}
-          {activeTab === ActiveTab.members && currentWorkspace && (
-            <MembersPage workspace={currentWorkspace} />
+          {activeTab === ActiveTab.members && currentMetaWorkSpace && (
+            <MembersPage workspace={currentMetaWorkSpace} />
          )}
-          {activeTab === ActiveTab.publish && currentWorkspace && (
-            <PublishPage workspace={currentWorkspace} />
+          {activeTab === ActiveTab.publish && currentMetaWorkSpace && (
+            <PublishPage workspace={currentMetaWorkSpace} />
          )}
-          {activeTab === ActiveTab.export && currentWorkspace && (
-            <ExportPage workspace={currentWorkspace} />
+          {activeTab === ActiveTab.export && currentMetaWorkSpace && (
+            <ExportPage workspace={currentMetaWorkSpace} />
          )}
        </StyledSettingContent>
      </StyledSettingContainer>
--- a/packages/app/src/components/workspace-setting/general/General.tsx
+++ b/packages/app/src/components/workspace-setting/general/General.tsx
@ -14,9 +14,9 @@ import { WorkspaceDelete } from './delete';
 // import { debounce } from '@/utils';
 import { WorkspaceLeave } from './leave';
 import { Upload } from '@/components/file-upload';
-import { Workspace } from '@/hooks/mock-data/mock';
 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();
@ -124,7 +124,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {

      <StyledSettingH2 marginTop={20}>Workspace Type</StyledSettingH2>
      <StyledSettingInputContainer>
-        <code>{workspace.type} </code>
+        <code>{workspace.provider} </code>
      </StyledSettingInputContainer>
      <StyledDeleteButtonContainer>
        {isOwner ? (
--- a/packages/app/src/components/workspace-setting/general/delete/Delete.tsx
+++ b/packages/app/src/components/workspace-setting/general/delete/Delete.tsx
@ -15,8 +15,9 @@ import { useRouter } from 'next/router';
 import {
  deleteWorkspace,
  getWorkspaces,
-  Workspace,
+  // Workspace,
 } from '@/hooks/mock-data/mock';
+import { Workspace } from '@affine/datacenter';

 interface WorkspaceDeleteProps {
  open: boolean;
@ -55,7 +56,7 @@ export const WorkspaceDelete = ({
      <StyledModalWrapper>
        <ModalCloseButton onClick={onClose} />
        <StyledModalHeader>Delete Workspace</StyledModalHeader>
-        {workspace.type === 'local' ? (
+        {workspace.provider === 'local' ? (
          <StyledTextContent>
            Deleting (
            <StyledWorkspaceName>{workspace.name}</StyledWorkspaceName>) cannot
--- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx
+++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx
@ -5,7 +5,8 @@ import { WorkspaceAvatar } from '@/components/workspace-avatar';
 import { useAppState } from '@/providers/app-state-provider';
 export const WorkspaceSelector = () => {
  const [workspaceListShow, setWorkspaceListShow] = useState(false);
-  const { currentWorkspace, workspaceList } = useAppState();
+  const { currentMetaWorkSpace, workspaceList } = useAppState();
+  console.log('currentMetaWorkSpace: ', currentMetaWorkSpace);

  useEffect(() => {
    if (workspaceList.length === 0) {
@ -24,7 +25,7 @@ export const WorkspaceSelector = () => {
        <Avatar
          alt="Affine"
          data-testid="workspace-avatar"
-          src={currentWorkspace.meta.avatar}
+          src={currentMetaWorkSpace?.avatar}
        >
          <div
            style={{
@ -33,12 +34,12 @@ export const WorkspaceSelector = () => {
          >
            <WorkspaceAvatar
              size={28}
-              name={currentWorkspace.meta.name ?? 'AFFiNE'}
+              name={currentMetaWorkSpace?.name ?? 'AFFiNE'}
            />
          </div>
        </Avatar>
        <WorkspaceName data-testid="workspace-name">
-          {currentWorkspace?.meta.name ?? 'AFFiNE'}
+          {currentMetaWorkSpace?.name ?? 'AFFiNE'}
        </WorkspaceName>
      </SelectorWrapper>
      <WorkspaceModal
--- a/packages/app/src/hooks/use-workspace-helper.ts
+++ b/packages/app/src/hooks/use-workspace-helper.ts
@ -13,7 +13,15 @@ export const useWorkspaceHelper = () => {
    }
    return null;
  };
+
+  // const updateWorkspace = async (workspace: Workspace) => {};
+
+  const publishWorkspace = async (workspaceId: string, publish: boolean) => {
+    dataCenter.setWorkspacePublish(workspaceId, publish);
+  };
+
  return {
    createWorkspace,
+    publishWorkspace,
  };
 };
--- a/packages/app/src/providers/app-state-provider/Provider.tsx
+++ b/packages/app/src/providers/app-state-provider/Provider.tsx
@ -49,6 +49,9 @@ export const AppStateProvider = ({
          dataCenter.workspaces[0].id
        );
      }
+      const currentMetaWorkSpace = dataCenter.workspaces.find(item => {
+        return item.id === currentWorkspace.room;
+      });

      setAppState({
        dataCenter,
@ -60,6 +63,7 @@ export const AppStateProvider = ({
        currentPage: null,
        editor: null,
        synced: true,
+        currentMetaWorkSpace: currentMetaWorkSpace ?? null,
      });
    };

@ -106,7 +110,6 @@ export const AppStateProvider = ({
  };

  const loadWorkspace = async (workspaceId: string) => {
-    console.log('workspaceId: ', workspaceId);
    const { dataCenter, workspaceList, currentWorkspaceId } = appState;
    if (!workspaceList.find(v => v.id === workspaceId)) {
      return;
@ -115,12 +118,14 @@ export const AppStateProvider = ({
      return;
    }
    const workspace = await dataCenter.loadWorkspace(workspaceId);
-    console.log('workspace: ', workspace);
-
+    const currentMetaWorkSpace = dataCenter.workspaces.find(item => {
+      return item.id === workspace.room;
+    });
    setAppState({
      ...appState,
-      currentWorkspace: await dataCenter.loadWorkspace(workspaceId),
+      currentWorkspace: workspace,
      currentWorkspaceId: workspaceId,
+      currentMetaWorkSpace: currentMetaWorkSpace ?? null,
    });
  };

--- a/packages/app/src/providers/app-state-provider/interface.ts
+++ b/packages/app/src/providers/app-state-provider/interface.ts
@ -12,6 +12,7 @@ export type AppStateValue = {
  user: User | undefined;
  workspaceList: Workspace[];
  currentWorkspace: StoreWorkspace;
+  currentMetaWorkSpace: Workspace | null;
  currentWorkspaceId: string;
  pageList: PageMeta[];
  currentPage: StorePage | null;