feat: mock delete

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

@@ -121,7 +121,11 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
                 confirmText: user ? 'Enable' : 'Sign in and Enable',
                 cancelText: 'Skip',
               }).then(confirm => {
-                confirm && Login();
+                if (user) {
+                  console.log('enable cloud');
+                } else {
+                  confirm && Login();
+                }
               });
             }}
           ></CreateWorkspaceModal>

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

@@ -14,6 +14,7 @@ import { Button } from '@/ui/button';
 import { getDataCenter } from '@affine/datacenter';
 import { useRouter } from 'next/router';
 import { useAppState } from '@/providers/app-state-provider';
+import { deleteWorkspace, getWorkspaces } from '@/hooks/mock-data/mock';
 
 interface WorkspaceDeleteProps {
   open: boolean;
@@ -31,7 +32,6 @@ export const WorkspaceDelete = ({
   nextWorkSpaceId,
 }: WorkspaceDeleteProps) => {
   const [deleteStr, setDeleteStr] = useState<string>('');
-  const { refreshWorkspacesMeta } = useAppState();
   const router = useRouter();
 
   const handlerInputChange = (workspaceName: string) => {
@@ -39,10 +39,16 @@ export const WorkspaceDelete = ({
   };
 
   const handleDelete = async () => {
-    const dc = await getDataCenter();
-    await dc.apis.deleteWorkspace({ id: workspaceId });
-    router.push(`/workspace/${nextWorkSpaceId}`);
-    refreshWorkspacesMeta();
+    // const dc = await getDataCenter();
+    // await dc.apis.deleteWorkspace({ id: workspaceId });
+    // router.push(`/workspace/${nextWorkSpaceId}`);
+    deleteWorkspace(workspaceId);
+    const workspaceList = getWorkspaces();
+    if (workspaceList.length) {
+      router.push(`/workspace/${workspaceList[0].id}`);
+    } else {
+      router.push(`/workspace`);
+    }
     onClose();
   };
 

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

@@ -6,8 +6,8 @@ import {
 } from './style';
 import { StyledSettingH2 } from '../style';
 
-import { useState } from 'react';
-import { Button } from '@/ui/button';
+import { useEffect, useState } from 'react';
+import { Button, TextButton } from '@/ui/button';
 import Input from '@/ui/input';
 import { getDataCenter } from '@affine/datacenter';
 import { useAppState } from '@/providers/app-state-provider';
@@ -16,7 +16,12 @@ import { Workspace as StoreWorkspace } from '@blocksuite/store';
 import { debounce } from '@/utils';
 import { WorkspaceLeave } from './leave';
 import { Upload } from '@/components/file-upload';
-import { getUserInfo, Workspace } from '@/hooks/mock-data/mock';
+import {
+  getUserInfo,
+  updateWorkspaceMeta,
+  User,
+  Workspace,
+} from '@/hooks/mock-data/mock';
 
 export const GeneralPage = ({
   workspace,
@@ -30,8 +35,13 @@ export const GeneralPage = ({
     workspaces,
     refreshWorkspacesMeta,
   } = useAppState();
-  // const user = getUserInfo();
+  useEffect(() => {
+    setWorkspaceName(workspace.name);
+    const user = getUserInfo();
+    setUserInfo(user);
+  }, []);
   const [showDelete, setShowDelete] = useState<boolean>(false);
+  const [userInfo, setUserInfo] = useState<User>();
   const [showLeave, setShowLeave] = useState<boolean>(false);
   const [uploading, setUploading] = useState<boolean>(false);
   const [workspaceName, setWorkspaceName] = useState<string>('');
@@ -63,6 +73,9 @@ export const GeneralPage = ({
   const handleCloseLeave = () => {
     setShowLeave(false);
   };
+  const handleUpdateWorkspaceName = () => {
+    updateWorkspaceMeta(workspace.id, { name: workspaceName });
+  };
 
   const fileChange = async (file: File) => {
     setUploading(true);
@@ -106,7 +119,7 @@ export const GeneralPage = ({
         ) : null} */}
         {/* <Button shape="round">remove</Button> */}
       </StyledSettingAvatarContent>
-      <StyledSettingH2 marginTop={36}>Workspace Name</StyledSettingH2>
+      <StyledSettingH2 marginTop={20}>Workspace Name</StyledSettingH2>
       <StyledSettingInputContainer>
         <Input
           width={327}
@@ -116,15 +129,34 @@ export const GeneralPage = ({
           minLength={1}
           onChange={handleChangeWorkSpaceName}
         ></Input>
+        <TextButton
+          onClick={() => {
+            handleUpdateWorkspaceName();
+          }}
+          style={{ marginLeft: '10px' }}
+        >
+          ✔️
+        </TextButton>
       </StyledSettingInputContainer>
-      <StyledSettingH2 marginTop={36}>Workspace Owner</StyledSettingH2>
+      {userInfo ? (
+        <div>
+          <StyledSettingH2 marginTop={20}>Workspace Owner</StyledSettingH2>
+          <StyledSettingInputContainer>
+            <Input
+              width={327}
+              disabled
+              value={userInfo?.name}
+              placeholder="Workspace Owner"
+            ></Input>
+          </StyledSettingInputContainer>
+        </div>
+      ) : (
+        ''
+      )}
+
+      <StyledSettingH2 marginTop={20}>Workspace Type</StyledSettingH2>
       <StyledSettingInputContainer>
-        <Input
-          width={327}
-          disabled
-          // value={owner.name}
-          placeholder="Workspace Owner"
-        ></Input>
+        {workspace.type}
       </StyledSettingInputContainer>
       <StyledDeleteButtonContainer>
         {isOwner ? (

packages/app/src/components/workspace-setting/general/style.ts

@@ -9,7 +9,7 @@ export const StyledSettingInputContainer = styled('div')(() => {
 
 export const StyledDeleteButtonContainer = styled('div')(() => {
   return {
-    marginTop: '154px',
+    marginTop: '30px',
   };
 });
 

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

@@ -116,7 +116,6 @@ export const WorkspaceSetting = ({
   };
 
   const workspace = getActiveWorkspace();
-  console.log('workspace: ', workspace);
   const handleClickClose = () => {
     onClose && onClose();
   };

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

@@ -2,7 +2,7 @@ import { Avatar, WorkspaceName, SelectorWrapper } from './styles';
 import { useEffect, useState } from 'react';
 import { AffineIcon } from '../icons/icons';
 import { WorkspaceModal } from '@/components/workspace-modal';
-import { getActiveWorkspace } from '@/hooks/mock-data/mock';
+import { getActiveWorkspace, getWorkspaces } from '@/hooks/mock-data/mock';
 
 export const WorkspaceSelector = () => {
   const [workspaceListShow, setWorkspaceListShow] = useState(false);
@@ -10,6 +10,10 @@ export const WorkspaceSelector = () => {
   useEffect(() => {
     getWorkspace();
   }, [workspaceListShow]);
+  const workspaceList = getWorkspaces();
+  if (workspaceList.length === 0) {
+    setWorkspaceListShow(true);
+  }
   const getWorkspace = () => {
     const workspace = getActiveWorkspace();
     setWorkSpace(workspace);

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

@@ -17,7 +17,7 @@ export interface User {
 
 export function updateWorkspaceMeta(
   workspaceId: string,
-  workspaceData: Workspace
+  workspaceData: { name?: string; avatar?: string }
 ) {
   const workspacesMeta = getWorkspaces();
   const newWorkspacesMeta = workspacesMeta.map((workspace: Workspace) => {
@@ -29,6 +29,10 @@ export function updateWorkspaceMeta(
     return workspace;
   });
   localStorage.setItem('affine-workspace', JSON.stringify(newWorkspacesMeta));
+  const activeWorkspace = getActiveWorkspace();
+  workspaceData.name && (activeWorkspace.name = workspaceData.name);
+  workspaceData.avatar && (activeWorkspace.avatar = workspaceData.avatar);
+  setActiveWorkspace(activeWorkspace);
 }
 export function createWorkspace(workspaceName: string) {
   const workspaceData = {