From 955558b0d041de48db76d6b8a16eba84d3525ef9 Mon Sep 17 00:00:00 2001
From: DiamondThree <diamond.shx@gmail.com>
Date: Thu, 5 Jan 2023 19:04:16 +0800
Subject: [PATCH] feat: mock delete

---
 .../src/components/workspace-modal/index.tsx  |  6 +-
 .../general/delete/delete.tsx                 | 16 ++++--
 .../workspace-setting/general/general.tsx     | 56 +++++++++++++++----
 .../workspace-setting/general/style.ts        |  2 +-
 .../workspace-setting/workspace-setting.tsx   |  1 -
 .../WorkspaceSelector/WorkspaceSelector.tsx   |  6 +-
 packages/app/src/hooks/mock-data/mock.ts      |  6 +-
 7 files changed, 71 insertions(+), 22 deletions(-)

diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx
index 479b22c99e..85fdd461ab 100644
--- a/packages/app/src/components/workspace-modal/index.tsx
+++ b/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>
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 7fd14ef818..0f972443d7 100644
--- a/packages/app/src/components/workspace-setting/general/delete/delete.tsx
+++ b/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();
   };
 
diff --git a/packages/app/src/components/workspace-setting/general/general.tsx b/packages/app/src/components/workspace-setting/general/general.tsx
index fa72178869..e36bd7db52 100644
--- a/packages/app/src/components/workspace-setting/general/general.tsx
+++ b/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 ? (
diff --git a/packages/app/src/components/workspace-setting/general/style.ts b/packages/app/src/components/workspace-setting/general/style.ts
index e4b505f228..739ec24aec 100644
--- a/packages/app/src/components/workspace-setting/general/style.ts
+++ b/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',
   };
 });
 
diff --git a/packages/app/src/components/workspace-setting/workspace-setting.tsx b/packages/app/src/components/workspace-setting/workspace-setting.tsx
index f1a9256dbf..66850cabc7 100644
--- a/packages/app/src/components/workspace-setting/workspace-setting.tsx
+++ b/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();
   };
diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx
index 22013ba674..aa6d532fa3 100644
--- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx
+++ b/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);
diff --git a/packages/app/src/hooks/mock-data/mock.ts b/packages/app/src/hooks/mock-data/mock.ts
index 6f5f5f289c..c7180fce58 100644
--- a/packages/app/src/hooks/mock-data/mock.ts
+++ b/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 = {