feat:merge dev

packages/app/src/components/404/index.tsx

@@ -1,10 +1,24 @@
 import { NotFoundTitle, PageContainer } from './styles';
 import { useTranslation } from '@affine/i18n';
+import { Button } from '@/ui/button';
+import { useRouter } from 'next/router';
 export const NotfoundPage = () => {
   const { t } = useTranslation();
+  const router = useRouter();
   return (
     <PageContainer>
-      <NotFoundTitle>{t('404 - Page Not Found')}</NotFoundTitle>
+      <NotFoundTitle>
+        {t('404 - Page Not Found')}
+        <p>
+          <Button
+            onClick={() => {
+              router.push('/workspace');
+            }}
+          >
+            Back Home
+          </Button>
+        </p>
+      </NotFoundTitle>
     </PageContainer>
   );
 };

packages/app/src/components/workspace-avatar/Avatar.tsx

@@ -23,7 +23,11 @@ export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
           }}
         >
           <picture>
-            <img src={props.avatar} alt="" />
+            <img
+              style={{ width: sizeStr, height: sizeStr }}
+              src={props.avatar}
+              alt=""
+            />
           </picture>
         </div>
       ) : (

packages/app/src/components/workspace-avatar/WorkspaceUnitAvatar.tsx

@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+import type { WorkspaceUnit } from '@affine/datacenter';
+import { WorkspaceAvatar as Avatar } from './Avatar';
+
+const useAvatar = (workspaceUnit?: WorkspaceUnit) => {
+  const [avatarUrl, setAvatarUrl] = useState('');
+  const avatarId =
+    workspaceUnit?.avatar || workspaceUnit?.blocksuiteWorkspace?.meta.avatar;
+  useEffect(() => {
+    if (avatarId && workspaceUnit?.blocksuiteWorkspace?.blobs) {
+      workspaceUnit.blocksuiteWorkspace.blobs.then(blobs => {
+        blobs?.get(avatarId).then(url => setAvatarUrl(url || ''));
+      });
+    } else {
+      setAvatarUrl('');
+    }
+  }, [avatarId]);
+
+  return avatarUrl;
+};
+
+export const WorkspaceUnitAvatar = ({
+  size = 20,
+  name,
+  workspaceUnit,
+}: {
+  size?: number;
+  name?: string;
+  workspaceUnit?: WorkspaceUnit | null;
+}) => {
+  const avatarUrl = useAvatar(workspaceUnit || undefined);
+  return (
+    <Avatar
+      size={size}
+      name={name || workspaceUnit?.name || ''}
+      avatar={avatarUrl}
+    />
+  );
+};

packages/app/src/components/workspace-avatar/index.ts

@@ -0,0 +1,2 @@
+export { WorkspaceAvatar } from './Avatar';
+export { WorkspaceUnitAvatar } from './WorkspaceUnitAvatar';

packages/app/src/components/workspace-modal/index.tsx

@@ -10,7 +10,7 @@ import {
   AddIcon,
 } from '@blocksuite/icons';
 import { toast } from '@/ui/toast';
-import { WorkspaceAvatar } from '@/components/workspace-avatar';
+import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
 import { useConfirm } from '@/providers/ConfirmProvider';
@@ -67,11 +67,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                           marginRight: '10px',
                         }}
                       >
-                        <WorkspaceAvatar
-                          size={50}
-                          name={item.name}
-                          avatar={item.avatar ?? ''}
-                        />
+                        <WorkspaceUnitAvatar size={50} workspaceUnit={item} />
                       </div>
 
                       <span

packages/app/src/components/workspace-setting/general/General.tsx

@@ -13,7 +13,7 @@ import { useAppState } from '@/providers/app-state-provider';
 import { WorkspaceDelete } from './delete';
 import { WorkspaceLeave } from './leave';
 import { Upload } from '@/components/file-upload';
-import { WorkspaceAvatar } from '@/components/workspace-avatar';
+import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { useTranslation } from '@affine/i18n';
@@ -22,34 +22,19 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const [showLeave, setShowLeave] = useState<boolean>(false);
   const [uploading, setUploading] = useState<boolean>(false);
   const [workspaceName, setWorkspaceName] = useState<string>(workspace.name);
-  const { currentWorkspace } = useAppState();
+  const { currentWorkspace, isOwner } = useAppState();
   const { updateWorkspace } = useWorkspaceHelper();
   const { t } = useTranslation();
 
-  const isOwner = true;
   const handleChangeWorkSpaceName = (newName: string) => {
     setWorkspaceName(newName);
   };
-  const handleClickDelete = () => {
-    setShowDelete(true);
-  };
-  const handleCloseDelete = () => {
-    setShowDelete(false);
-  };
-
-  const handleClickLeave = () => {
-    setShowLeave(true);
-  };
-  const handleCloseLeave = () => {
-    setShowLeave(false);
-  };
   const handleUpdateWorkspaceName = () => {
     currentWorkspace &&
       updateWorkspace({ name: workspaceName }, currentWorkspace);
   };
 
   const fileChange = async (file: File) => {
-    // console.log('file: ', file);
     setUploading(true);
     const blob = new Blob([file], { type: file.type });
     currentWorkspace &&
@@ -67,10 +52,10 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
             marginRight: '20px',
           }}
         >
-          <WorkspaceAvatar
+          <WorkspaceUnitAvatar
             size={60}
             name={workspace.name}
-            avatar={workspace.avatar ?? ''}
+            workspaceUnit={workspace}
           />
         </div>
         <Upload
@@ -89,16 +74,19 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
           placeholder={t('Workspace Name')}
           maxLength={14}
           minLength={1}
+          disabled={!isOwner}
           onChange={handleChangeWorkSpaceName}
         ></Input>
-        <TextButton
-          onClick={() => {
-            handleUpdateWorkspaceName();
-          }}
-          style={{ marginLeft: '0px' }}
-        >
-          ✔️
-        </TextButton>
+        {isOwner ? (
+          <TextButton
+            onClick={() => {
+              handleUpdateWorkspaceName();
+            }}
+            style={{ marginLeft: '0px' }}
+          >
+            ✔️
+          </TextButton>
+        ) : null}
       </StyledSettingInputContainer>
       <StyledSettingH2 marginTop={20}>{t('Workspace Type')}</StyledSettingH2>
       <StyledSettingInputContainer>
@@ -107,25 +95,39 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
       <StyledDeleteButtonContainer>
         {isOwner ? (
           <>
-            <Button type="danger" shape="circle" onClick={handleClickDelete}>
+            <Button
+              type="danger"
+              shape="circle"
+              onClick={() => {
+                setShowDelete(true);
+              }}
+            >
               {t('Delete Workspace')}
             </Button>
             <WorkspaceDelete
               open={showDelete}
-              onClose={handleCloseDelete}
+              onClose={() => {
+                setShowDelete(false);
+              }}
               workspace={workspace}
             />
           </>
         ) : (
           <>
-            <Button type="danger" shape="circle" onClick={handleClickLeave}>
+            <Button
+              type="danger"
+              shape="circle"
+              onClick={() => {
+                setShowLeave(true);
+              }}
+            >
               {t('Leave Workspace')}
             </Button>
             <WorkspaceLeave
               open={showLeave}
-              onClose={handleCloseLeave}
-              workspaceName={workspaceName}
-              workspaceId={workspace.id}
+              onClose={() => {
+                setShowLeave(false);
+              }}
             />
           </>
         )}

packages/app/src/components/workspace-setting/general/delete/Delete.tsx

@@ -12,13 +12,11 @@ import { useState } from 'react';
 import { ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
 import { useRouter } from 'next/router';
-import {
-  deleteWorkspace,
-  getWorkspaces,
-  // Workspace,
-} from '@/hooks/mock-data/mock';
+
 import { WorkspaceUnit } from '@affine/datacenter';
 import { Trans, useTranslation } from '@affine/i18n';
+import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
+
 interface WorkspaceDeleteProps {
   open: boolean;
   onClose: () => void;
@@ -33,23 +31,15 @@ export const WorkspaceDelete = ({
   const [deleteStr, setDeleteStr] = useState<string>('');
   const { t } = useTranslation();
   const router = useRouter();
-
+  const { deleteWorkSpace } = useWorkspaceHelper();
   const handlerInputChange = (workspaceName: string) => {
     setDeleteStr(workspaceName);
   };
 
   const handleDelete = async () => {
-    // const dc = await getDataCenter();
-    // await dc.apis.deleteWorkspace({ id: workspaceId });
-    // router.push(`/workspace/${nextWorkSpaceId}`);
-    deleteWorkspace(workspace.id);
-    const workspaceList = getWorkspaces();
-    if (workspaceList.length) {
-      router.push(`/workspace/${workspaceList[0].id}`);
-    } else {
-      router.push(`/workspace`);
-    }
+    await deleteWorkSpace();
     onClose();
+    router.push(`/workspace`);
   };
 
   return (

packages/app/src/components/workspace-setting/general/leave/Leave.tsx

@@ -8,30 +8,20 @@ import {
 import { ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
 import { useTranslation } from '@affine/i18n';
+import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 // import { getDataCenter } from '@affine/datacenter';
 // import { useAppState } from '@/providers/app-state-provider';
 
 interface WorkspaceDeleteProps {
   open: boolean;
   onClose: () => void;
-  workspaceName: string;
-  workspaceId: string;
 }
 
-export const WorkspaceLeave = ({
-  open,
-  onClose,
-  workspaceId,
-}: WorkspaceDeleteProps) => {
+export const WorkspaceLeave = ({ open, onClose }: WorkspaceDeleteProps) => {
+  const { leaveWorkSpace } = useWorkspaceHelper();
   const { t } = useTranslation();
-  console.log('workspaceId: ', workspaceId);
-  // const router = useRouter();
-  // const { refreshWorkspacesMeta } = useAppState();
   const handleLeave = async () => {
-    // const dc = await getDataCenter();
-    // await dc.apis.leaveWorkspace({ id: workspaceId });
-    // // router.push(`/workspace/${nextWorkSpaceId}`);
-    // refreshWorkspacesMeta();
+    await leaveWorkSpace();
     onClose();
   };
 

packages/app/src/components/workspace-setting/member/MembersPage.tsx

@@ -20,20 +20,20 @@ import { InviteMemberModal } from './InviteMemberModal';
 import { Menu, MenuItem } from '@/ui/menu';
 import { Empty } from '@/ui/empty';
 import { WorkspaceUnit } from '@affine/datacenter';
-import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
 import { useConfirm } from '@/providers/ConfirmProvider';
 import { toast } from '@/ui/toast';
 import useMembers from '@/hooks/use-members';
 import Loading from '@/components/loading';
 import { Wrapper } from '@/ui/layout';
 import { useTranslation } from '@affine/i18n';
+import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 
 export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const [isInviteModalShow, setIsInviteModalShow] = useState(false);
   const { members, removeMember, loaded } = useMembers();
   const { t } = useTranslation();
   // FIXME: DELETE THIS
-  const { user, login, updateWorkspaceMeta } = useTemporaryHelper();
+  const { enableWorkspace } = useWorkspaceHelper();
   const { confirm } = useConfirm();
 
   if (workspace.provider === 'affine') {
@@ -164,22 +164,8 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
         <Button
           type="primary"
           shape="circle"
-          onClick={() => {
-            confirm({
-              title: `${t('Enable AFFiNE Cloud')}?`,
-              content: t('Enable AFFiNE Cloud Description'),
-              confirmText: user ? t('Enable') : t('Sign in and Enable'),
-              cancelText: t('Skip'),
-            }).then(confirm => {
-              if (confirm) {
-                if (user) {
-                  updateWorkspaceMeta(workspace.id, { isPublish: true });
-                } else {
-                  login();
-                  updateWorkspaceMeta(workspace.id, { isPublish: true });
-                }
-              }
-            });
+          onClick={async () => {
+            await enableWorkspace();
           }}
         >
           {t('Enable AFFiNE Cloud')}

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx

@@ -1,7 +1,7 @@
 import { Avatar, WorkspaceName, SelectorWrapper } from './styles';
 import { useEffect, useState } from 'react';
 import { WorkspaceModal } from '@/components/workspace-modal';
-import { WorkspaceAvatar } from '@/components/workspace-avatar';
+import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { useAppState } from '@/providers/app-state-provider';
 export const WorkspaceSelector = () => {
   const [workspaceListShow, setWorkspaceListShow] = useState(false);
@@ -23,17 +23,17 @@ export const WorkspaceSelector = () => {
         <Avatar
           alt="Affine"
           data-testid="workspace-avatar"
-          src={currentWorkspace?.avatar}
+          // src={currentWorkspace?.avatar}
         >
           <div
             style={{
               float: 'left',
             }}
           >
-            <WorkspaceAvatar
+            <WorkspaceUnitAvatar
               size={28}
               name={currentWorkspace?.name ?? 'AFFiNE'}
-              avatar={currentWorkspace?.avatar ?? ''}
+              workspaceUnit={currentWorkspace}
             />
           </div>
         </Avatar>

packages/app/src/hooks/mock-data/mock.ts

@@ -1,160 +0,0 @@
-export interface Workspace {
-  name: string; // 名称
-  id: string; //唯一标识
-  isPublish?: boolean; // 是否公开
-  isLocal?: boolean; // 是否全部数据都在本地
-  avatar?: string; // 封面
-  type: 'local' | 'cloud' | 'join'; // cloud: 云端（本次暂不支持），local: 本地，join : 加入别人的
-  workspaceOwner?: User; // 本地工作空间的拥有者
-}
-
-export interface User {
-  name: string;
-  id: string;
-  email: string;
-  avatar: string;
-}
-
-export function updateWorkspaceMeta(
-  workspaceId: string,
-  workspaceData: {
-    name?: string;
-    avatar?: string;
-    type?: 'local' | 'cloud' | 'join';
-  }
-) {
-  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);
-      workspaceData.type && (workspace.type = workspaceData.type);
-      return workspaceData;
-    }
-    return workspace;
-  });
-  localStorage.setItem('affine-workspace', JSON.stringify(newWorkspacesMeta));
-  const activeWorkspace = getActiveWorkspace();
-  workspaceData.name && (activeWorkspace.name = workspaceData.name);
-  workspaceData.avatar && (activeWorkspace.avatar = workspaceData.avatar);
-
-  workspaceData.type && (activeWorkspace.type = workspaceData.type);
-  console.log(workspaceData);
-  setActiveWorkspace(activeWorkspace);
-}
-export function createWorkspace(workspaceName: string) {
-  const workspaceId = 'workspace-' + Date.now();
-  const workspaceData = {
-    name: workspaceName,
-    id: workspaceId,
-    isPublish: false,
-    isLocal: true,
-    avatar: '',
-    type: 'local',
-  } as Workspace;
-  const workspacesMeta = getWorkspaces();
-  workspacesMeta.push(workspaceData);
-  localStorage.setItem('affine-workspace', JSON.stringify(workspacesMeta));
-  setActiveWorkspace(workspaceData);
-  return { workspaceId };
-}
-
-export function getWorkspaces(): Workspace[] {
-  const workspacesMeta = JSON.parse(
-    localStorage.getItem('affine-workspace') ?? '[]'
-  );
-  return workspacesMeta;
-}
-
-export function deleteWorkspace(workspaceId: string) {
-  const workspacesMeta = getWorkspaces();
-  const newWorkspacesMeta = workspacesMeta.filter(() => {
-    return workspaceId !== workspaceId;
-  });
-  localStorage.setItem('affine-workspace', JSON.stringify(newWorkspacesMeta));
-}
-
-export function getMembers(id: string): User[] {
-  const memberMap = JSON.parse(localStorage.getItem('affine-member') ?? '{}');
-  return memberMap[id] || [];
-}
-
-export function setMember(workspaceId: string, member: User) {
-  const memberMap = JSON.parse(localStorage.getItem('affine-member') ?? '{}');
-  memberMap[workspaceId] = memberMap[workspaceId] || [];
-  memberMap[workspaceId].push(member);
-  localStorage.setItem('affine-member', JSON.stringify(memberMap));
-}
-
-export function deleteMember(workspaceId: string, index: number) {
-  const memberMap = JSON.parse(localStorage.getItem('affine-member') ?? '{}');
-  const memberList = memberMap[workspaceId];
-  memberList.splice(index, 1);
-  memberMap[workspaceId] = memberList;
-  localStorage.setItem('affine-member', JSON.stringify(memberMap));
-}
-export function leaveWorkspace() {
-  return true;
-}
-
-export function setWorkspacePublish(id: string, isPublish: boolean): boolean {
-  const workspacesMeta = getWorkspaces();
-  const newWorkspacesMeta = workspacesMeta.map((workspace: Workspace) => {
-    if (workspace.id === id) {
-      workspace.isPublish = isPublish;
-    }
-    return workspace;
-  });
-  localStorage.setItem('affine-workspace', JSON.stringify(newWorkspacesMeta));
-  return isPublish;
-}
-
-export function getWorkspaceById(id: string) {
-  const workspacesMeta = getWorkspaces();
-  return workspacesMeta.find((workspace: Workspace) => {
-    return workspace.id === id;
-  });
-}
-
-export function getPagesByWorkspaceId(workspaceId: string) {
-  if (!workspaceId) return [];
-  const workspacesMeta = [];
-  for (let i = 0; i < 10; i++) {
-    workspacesMeta.push({
-      id: 'page-' + i,
-      name: 'page ' + i,
-    });
-  }
-}
-
-export function getActiveWorkspace(): Workspace {
-  return JSON.parse(localStorage.getItem('affine-active-workspace') ?? '{}');
-}
-
-export function setActiveWorkspace(workspaceData: Workspace) {
-  console.log('workspaceData: ', workspaceData);
-  localStorage.setItem(
-    'affine-active-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');
-}

packages/app/src/hooks/use-workspace-helper.ts

@@ -44,22 +44,41 @@ export const useWorkspaceHelper = () => {
       cancelText: 'Skip',
     }).then(async confirm => {
       if (confirm && currentWorkspace) {
-        if (user) {
+        if (!user) {
           await login();
         }
-        const newWorkspaceId = await dataCenter.enableWorkspaceCloud(
+        const workspace = await dataCenter.enableWorkspaceCloud(
           currentWorkspace
         );
-        router.push(`/workspace/${newWorkspaceId}/setting`);
+        workspace && router.push(`/workspace/${workspace.id}/setting`);
         toast('Enabled success');
       }
     });
   };
 
+  const deleteWorkSpace = async () => {
+    currentWorkspace &&
+      (await dataCenter.deleteWorkspace(currentWorkspace?.id));
+  };
+  const leaveWorkSpace = async () => {
+    currentWorkspace && (await dataCenter.leaveWorkspace(currentWorkspace?.id));
+  };
+
+  const acceptInvite = async (inviteCode: string) => {
+    let inviteInfo;
+    if (inviteCode) {
+      inviteInfo = await dataCenter.acceptInvitation(inviteCode);
+    }
+    return inviteInfo;
+  };
+
   return {
     createWorkspace,
     publishWorkspace,
     updateWorkspace,
     enableWorkspace,
+    deleteWorkSpace,
+    leaveWorkSpace,
+    acceptInvite,
   };
 };

packages/app/src/pages/404.tsx

@@ -1,9 +1,5 @@
 import NotfoundPage from '@/components/404';
-import { useAppState } from '@/providers/app-state-provider';
 
 export default function Custom404() {
-  const { workspaceList } = useAppState();
-  console.log('workspaceList: ', workspaceList);
-
   return <NotfoundPage></NotfoundPage>;
 }

packages/app/src/pages/_app.tsx

@@ -21,7 +21,6 @@ import { useAppState } from '@/providers/app-state-provider';
 import { PageLoading } from '@/components/loading';
 import Head from 'next/head';
 import '@affine/i18n';
-import TemporaryHelperProvider from '@/providers/temporary-helper-provider';
 
 const ThemeProvider = dynamic(() => import('@/providers/ThemeProvider'), {
   ssr: false,
@@ -55,10 +54,8 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
       <Logger />
       <ProviderComposer
         contexts={[
-          <TemporaryHelperProvider key="TemporaryHelperProvider" />,
           <ThemeProvider key="ThemeProvider" />,
           <AppStateProvider key="appStateProvider" />,
-          // <AppStateProvider2 key="appStateProvider2" />,
           <ModalProvider key="ModalProvider" />,
           <ConfirmProvider key="ConfirmProvider" />,
         ]}

packages/app/src/pages/invite/[invite_code].tsx

@@ -1,44 +1,37 @@
+import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
+import { useAppState } from '@/providers/app-state-provider';
 import { styled } from '@/styles';
 import { Empty } from '@/ui/empty';
-import { Avatar } from '@mui/material';
-// import { getDataCenter } from '@affine/datacenter';
+// import { Avatar } from '@mui/material';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
-const User = ({ name, avatar }: { name: string; avatar?: string }) => {
-  return (
-    <UserContent>
-      {avatar ? (
-        <Avatar src={avatar}></Avatar>
-      ) : (
-        <UserIcon>{name.slice(0, 1)}</UserIcon>
-      )}
-      <span>{name}</span>
-    </UserContent>
-  );
-};
+// const User = ({ name, avatar }: { name: string; avatar?: string }) => {
+//   return (
+//     <UserContent>
+//       {avatar ? (
+//         <Avatar src={avatar}></Avatar>
+//       ) : (
+//         <UserIcon>{name.slice(0, 1)}</UserIcon>
+//       )}
+//       <span>{name}</span>
+//     </UserContent>
+//   );
+// };
 
 export default function DevPage() {
   const router = useRouter();
   const [successInvited, setSuccessInvited] = useState<boolean>(false);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [inviteData, setInviteData] = useState<any>(null);
+  const { acceptInvite } = useWorkspaceHelper();
+  const { user } = useAppState();
   useEffect(() => {
-    // getDataCenter()
-    //   .then(dc =>
-    //     dc.apis.acceptInviting({
-    //       invitingCode: router.query.invite_code as string,
-    //     })
-    //   )
-    //   .then(data => {
-    //     setSuccessInvited(true);
-    //     setInviteData(data);
-    //   })
-    //   .catch(err => {
-    //     console.log('err: ', err);
-    //   });
-    setSuccessInvited(true);
-    setInviteData(null);
+    router.query.invite_code &&
+      acceptInvite(router.query.invite_code as string).then(data => {
+        if (data && data.accepted) {
+          setSuccessInvited(true);
+          user && router.push(`/workspace/${data.workspace_id}`);
+        }
+      });
   }, [router.query.invite_code]);
 
   return (
@@ -47,11 +40,12 @@ export default function DevPage() {
         <Empty width={310} height={310}></Empty>
 
         <Content>
-          <User name={inviteData?.name ? inviteData.name : '-'}></User> invited
-          you to join
-          <User
+          {/* TODO add inviteInfo*/}
+          {/* <User name={inviteData?.name ? inviteData.name : '-'}></User> invited */}
+          {/* you to join */}
+          {/* <User
             name={inviteData?.workspaceName ? inviteData.workspaceName : '-'}
-          ></User>
+          ></User> */}
           {successInvited ? (
             <Status>
               <svg

packages/app/src/pages/new-workspace/index.tsx

@@ -1,47 +0,0 @@
-import { WorkspaceModal } from '@/components/workspace-modal';
-import { getWorkspaces } from '@/hooks/mock-data/mock';
-import { useEffect, useState } from 'react';
-import { styled } from '@/styles';
-import Button from '@/ui/button/Button';
-
-const Page = () => {
-  const [open, setOpen] = useState<boolean>(false);
-
-  useEffect(() => {
-    const data = getWorkspaces();
-    if (!data.length) {
-      setOpen(true);
-    }
-  }, []);
-  return (
-    <Workspace>
-      <h1>workspace</h1>
-      <div>
-        <Button
-          onClick={() => {
-            setOpen(true);
-          }}
-        >
-          View Workspace List
-        </Button>
-      </div>
-      <WorkspaceModal
-        open={open}
-        onClose={() => {
-          setOpen(false);
-        }}
-      ></WorkspaceModal>
-    </Workspace>
-  );
-};
-export default Page;
-
-const Workspace = styled.div(({ theme }) => {
-  return {
-    height: '100vh',
-    background: theme.colors.pageBackground,
-    color: '#FFFFFF',
-    fontSize: '18px',
-    fontWeight: 500,
-  };
-});

packages/app/src/pages/workspace/[workspaceId]/setting.tsx

@@ -61,8 +61,9 @@ const tabMap: {
 ];
 
 const WorkspaceSetting = () => {
-  const { currentWorkspace } = useAppState();
   const { t } = useTranslation();
+  const { currentWorkspace, isOwner } = useAppState();
+
   const [activeTab, setActiveTab] = useState<TabNames>(tabMap[0].name);
   const handleTabChange = (tab: TabNames) => {
     setActiveTab(tab);
@@ -71,7 +72,20 @@ const WorkspaceSetting = () => {
   const activeTabPanelRender = tabMap.find(
     tab => tab.name === activeTab
   )?.panelRender;
-
+  let tableArr: {
+    name: TabNames;
+    icon: ReactNode;
+    panelRender: (workspace: WorkspaceUnit) => ReactNode;
+  }[] = tabMap;
+  if (!isOwner) {
+    tableArr = [
+      {
+        name: 'general',
+        icon: <EditIcon />,
+        panelRender: workspace => <GeneralPage workspace={workspace} />,
+      },
+    ];
+  }
   return (
     <StyledSettingContainer>
       <StyledSettingSidebar>
@@ -79,7 +93,7 @@ const WorkspaceSetting = () => {
           {t('Workspace Settings')}
         </StyledSettingSidebarHeader>
         <StyledSettingTabContainer>
-          {tabMap.map(({ icon, name }) => {
+          {tableArr.map(({ icon, name }) => {
             return (
               <WorkspaceSettingTagItem
                 key={name}

packages/app/src/providers/app-state-provider/Provider.tsx

@@ -37,6 +37,7 @@ export const AppStateProvider = ({
         currentPage: null,
         editor: null,
         synced: true,
+        isOwner: false,
       });
     };
 
@@ -91,7 +92,7 @@ export const AppStateProvider = ({
 
   const loadWorkspace = useRef<AppStateFunction['loadWorkspace']>();
   loadWorkspace.current = async (workspaceId: string) => {
-    const { dataCenter, workspaceList, currentWorkspace } = appState;
+    const { dataCenter, workspaceList, currentWorkspace, user } = appState;
     if (!workspaceList.find(v => v.id.toString() === workspaceId)) {
       return null;
     }
@@ -99,6 +100,13 @@ export const AppStateProvider = ({
       return currentWorkspace;
     }
     const workspace = (await dataCenter.loadWorkspace(workspaceId)) ?? null;
+    let isOwner;
+    if (workspace.provider === 'local') {
+      // isOwner is useful only in the cloud
+      isOwner = true;
+    } else {
+      isOwner = workspace?.owner && user?.id === workspace?.owner?.id;
+    }
     const pageList =
       (workspace?.blocksuiteWorkspace?.meta.pageMetas as PageMeta[]) ?? [];
     setAppState({
@@ -107,6 +115,7 @@ export const AppStateProvider = ({
       pageList: pageList,
       currentPage: null,
       editor: null,
+      isOwner,
     });
 
     return workspace;

packages/app/src/providers/app-state-provider/interface.ts

@@ -23,6 +23,7 @@ export type AppStateValue = {
   currentPage: StorePage | null;
   editor?: EditorContainer | null;
   synced: boolean;
+  isOwner?: boolean;
 };
 
 export type AppStateFunction = {

packages/app/src/providers/temporary-helper-provider.tsx

@@ -1,183 +0,0 @@
-import { createContext, useContext, useEffect, useState } from 'react';
-import type { PropsWithChildren } from 'react';
-import { getWorkspaces, User, Workspace } from '@/hooks/mock-data/mock';
-
-type TemporaryContextValue = {
-  workspaceMetaList: Workspace[];
-  currentWorkspace: Workspace | null;
-  user: User | null;
-
-  updateWorkspaceMeta: (
-    workspaceId: string,
-    workspaceData: {
-      name?: string;
-      avatar?: string;
-      isPublish?: boolean;
-      type?: 'local' | 'cloud' | 'join';
-    }
-  ) => void;
-
-  createWorkspace: (workspaceName: string) => Workspace;
-
-  deleteWorkspace: (workspaceId: string) => void;
-
-  setWorkspacePublish: (id: string, isPublish: boolean) => void;
-
-  setActiveWorkspace: (workspaceData: Workspace) => void;
-
-  login: () => void;
-
-  signOut: () => void;
-};
-type TemporaryContextProps = PropsWithChildren<Record<string, unknown>>;
-
-export const TemporaryContext = createContext<TemporaryContextValue>({
-  workspaceMetaList: [],
-  currentWorkspace: null,
-  user: null,
-
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  updateWorkspaceMeta: () => {},
-
-  createWorkspace: () => {
-    return {} as Workspace;
-  },
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  deleteWorkspace: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  setWorkspacePublish: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  setActiveWorkspace: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  login: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  signOut: () => {},
-});
-
-export const useTemporaryHelper = () => useContext(TemporaryContext);
-
-export const TemporaryHelperProvider = ({
-  children,
-}: PropsWithChildren<TemporaryContextProps>) => {
-  const [workspaceMetaList, setWorkspaceMetaList] = useState<Workspace[]>([]);
-  const [currentWorkspace, setCurrentWorkspace] = useState<Workspace | null>(
-    null
-  );
-  const [user, setUser] = useState<User | null>(null);
-
-  useEffect(() => {
-    setWorkspaceMetaList(getWorkspaces());
-    setCurrentWorkspace(
-      JSON.parse(localStorage.getItem('affine-active-workspace') ?? '{}')
-    );
-  }, []);
-
-  return (
-    <TemporaryContext.Provider
-      value={{
-        workspaceMetaList,
-        currentWorkspace,
-        user,
-
-        updateWorkspaceMeta: (workspaceId, workspaceData) => {
-          const workspacesMeta = getWorkspaces();
-          const newWorkspacesMeta = workspacesMeta.map(
-            (workspace: Workspace) => {
-              if (workspace.id === workspaceId) {
-                const workspaceObj = Object.assign(workspace, workspaceData);
-                return workspaceObj;
-              }
-              return workspace;
-            }
-          );
-          localStorage.setItem(
-            'affine-workspace',
-            JSON.stringify(newWorkspacesMeta)
-          );
-          setWorkspaceMetaList(newWorkspacesMeta);
-          if (workspaceId === currentWorkspace?.id) {
-            setCurrentWorkspace(
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore
-              newWorkspacesMeta.find(v => v.id === currentWorkspace.id)
-            );
-          }
-        },
-        createWorkspace: workspaceName => {
-          const workspaceData = {
-            name: workspaceName,
-            id: 'workspace-' + Date.now(),
-            isPublish: false,
-            isLocal: true,
-            avatar: '',
-            type: 'local',
-          } as Workspace;
-          const workspacesMeta = getWorkspaces();
-          workspacesMeta.push(workspaceData);
-          localStorage.setItem(
-            'affine-workspace',
-            JSON.stringify(workspacesMeta)
-          );
-
-          setWorkspaceMetaList([...workspacesMeta]);
-          return workspaceData;
-        },
-        deleteWorkspace: workspaceId => {
-          const workspacesMeta = getWorkspaces();
-          const newWorkspacesMeta = workspacesMeta.filter(() => {
-            return workspaceId !== workspaceId;
-          });
-          localStorage.setItem(
-            'affine-workspace',
-            JSON.stringify(newWorkspacesMeta)
-          );
-          setWorkspaceMetaList(workspacesMeta);
-        },
-
-        setWorkspacePublish: (id, isPublish) => {
-          const workspacesMeta = getWorkspaces();
-          const newWorkspacesMeta = workspacesMeta.map(
-            (workspace: Workspace) => {
-              if (workspace.id === id) {
-                workspace.isPublish = isPublish;
-              }
-              return workspace;
-            }
-          );
-          localStorage.setItem(
-            'affine-workspace',
-            JSON.stringify(newWorkspacesMeta)
-          );
-          setWorkspaceMetaList(workspacesMeta);
-        },
-        setActiveWorkspace(workspaceData) {
-          localStorage.setItem(
-            'affine-active-workspace',
-            JSON.stringify(workspaceData)
-          );
-          setCurrentWorkspace(workspaceData);
-        },
-
-        login: () => {
-          const userInfo = {
-            name: 'Diamond',
-            id: 'ttt',
-            email: 'diamond.shx@gmail.com',
-            avatar: 'string',
-          };
-          localStorage.setItem('affine-user', JSON.stringify(userInfo));
-          setUser(userInfo);
-        },
-
-        signOut(): void {
-          localStorage.removeItem('affine-user');
-          setUser(null);
-        },
-      }}
-    >
-      {children}
-    </TemporaryContext.Provider>
-  );
-};
-
-export default TemporaryHelperProvider;