feat: workspace setting

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 {

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 {
+// import {
-  deleteMember,
+//   deleteMember,
-  getMembers,
+//   getMembers,
-  User,
+//   User,
-  Workspace,
+//   Workspace,
-} from '@/hooks/mock-data/mock';
+// } 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);
+    // const members = getMembers(workspace.id);
-    members && setMembers(members);
+    // 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>

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) {
+        // if (user) {
-          updateWorkspaceMeta(workspace.id, { type: 'cloud' });
+        //   updateWorkspaceMeta(workspace.id, { type: 'cloud' });
-        } else {
+        // } else {
-          login();
+        //   login();
-          updateWorkspaceMeta(workspace.id, { type: 'cloud' });
+        //   updateWorkspaceMeta(workspace.id, { type: 'cloud' });
-        }
+        // }
       }
     });
   };
   return (
     <>
-      {workspace.type === 'cloud' ? (
+      {workspace.provider === 'cloud' ? (
         <div>
           <StyledPublishContent>
             {workspace?.isPublish ? (

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 />}
                     >

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 && (
+          {activeTab === ActiveTab.general && currentMetaWorkSpace && (
-            <GeneralPage workspace={currentWorkspace} />
+            <GeneralPage workspace={currentMetaWorkSpace} />
           )}
-          {activeTab === ActiveTab.sync && currentWorkspace && (
+          {activeTab === ActiveTab.sync && currentMetaWorkSpace && (
-            <SyncPage workspace={currentWorkspace} />
+            <SyncPage workspace={currentMetaWorkSpace} />
           )}
-          {activeTab === ActiveTab.members && currentWorkspace && (
+          {activeTab === ActiveTab.members && currentMetaWorkSpace && (
-            <MembersPage workspace={currentWorkspace} />
+            <MembersPage workspace={currentMetaWorkSpace} />
           )}
-          {activeTab === ActiveTab.publish && currentWorkspace && (
+          {activeTab === ActiveTab.publish && currentMetaWorkSpace && (
-            <PublishPage workspace={currentWorkspace} />
+            <PublishPage workspace={currentMetaWorkSpace} />
           )}
-          {activeTab === ActiveTab.export && currentWorkspace && (
+          {activeTab === ActiveTab.export && currentMetaWorkSpace && (
-            <ExportPage workspace={currentWorkspace} />
+            <ExportPage workspace={currentMetaWorkSpace} />
           )}
         </StyledSettingContent>
       </StyledSettingContainer>

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 ? (

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

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

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,
   };
 };

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,
     });
   };
 

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;