From 8d9838614e8ea67443be363ab24bf91017dc1a40 Mon Sep 17 00:00:00 2001
From: DiamondThree <diamond.shx@gmail.com>
Date: Fri, 6 Jan 2023 15:30:59 +0800
Subject: [PATCH] feat: mock login

---
 .../src/components/create-workspace/index.tsx |  7 +--
 .../src/components/workspace-modal/index.tsx  | 35 ++++++---------
 .../workspace-setting/MembersPage.tsx         | 17 ++------
 .../components/workspace-setting/SyncPage.tsx | 15 ++-----
 .../workspace-setting/general/general.tsx     | 43 ++++++++-----------
 .../workspace-setting/workspace-setting.tsx   | 21 +++++----
 .../WorkspaceSelector/WorkspaceSelector.tsx   | 23 +++-------
 .../app/src/hooks/use-temporary-helper.ts     | 13 +++++-
 8 files changed, 72 insertions(+), 102 deletions(-)

diff --git a/packages/app/src/components/create-workspace/index.tsx b/packages/app/src/components/create-workspace/index.tsx
index 3814d2449..26d5d5cef 100644
--- a/packages/app/src/components/create-workspace/index.tsx
+++ b/packages/app/src/components/create-workspace/index.tsx
@@ -2,8 +2,8 @@ import { styled } from '@/styles';
 import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
 import { useState } from 'react';
-import { createWorkspace } from '@/hooks/mock-data/mock';
 import Input from '@/ui/input';
+import useTemporaryHelper from '@/hooks/use-temporary-helper';
 interface ICloseParams {
   workspaceId?: string;
 }
@@ -14,9 +14,10 @@ interface ModalProps {
 
 export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
   const [workspaceName, setWorkspaceName] = useState('');
+  const { createWorkspace } = useTemporaryHelper();
   const handleCreateWorkspace = () => {
-    const { workspaceId } = createWorkspace(workspaceName);
-    onClose({ workspaceId });
+    const { id } = createWorkspace(workspaceName);
+    onClose({ workspaceId: id });
   };
   return (
     <div>
diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx
index eb83c1ab0..c33a889a4 100644
--- a/packages/app/src/components/workspace-modal/index.tsx
+++ b/packages/app/src/components/workspace-modal/index.tsx
@@ -1,16 +1,8 @@
 import { styled } from '@/styles';
 import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
-import { useEffect, useState } from 'react';
-import {
-  getWorkspaces,
-  Workspace,
-  setActiveWorkspace,
-  Login,
-  User,
-  SignOut,
-  updateWorkspaceMeta,
-} from '@/hooks/mock-data/mock';
+import { useState } from 'react';
+import { SignOut } from '@/hooks/mock-data/mock';
 import { CreateWorkspaceModal } from '../create-workspace';
 import {
   CloudUnsyncedIcon,
@@ -28,19 +20,17 @@ interface LoginModalProps {
 }
 
 export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
-  const [workspaceList, setWorkspaceList] = useState<Workspace[]>([]);
   const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false);
   const { confirm } = useConfirm();
-  const { user, login } = useTemporaryHelper();
-  useEffect(() => {
-    setList();
-  }, []);
-
-  const setList = () => {
-    const data = getWorkspaces();
-    setWorkspaceList(data);
-  };
+  const {
+    user,
+    login,
+    workspaceMetaList,
+    setActiveWorkspace,
+    updateWorkspaceMeta,
+  } = useTemporaryHelper();
 
+  console.log('workspaceMetaList: ', workspaceMetaList);
   return (
     <div>
       <Modal open={open} onClose={onClose}>
@@ -60,7 +50,7 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
           </Header>
           <Content>
             <WorkspaceList>
-              {workspaceList.map((item, index) => {
+              {workspaceMetaList.map((item, index) => {
                 return (
                   <WorkspaceItem
                     onClick={() => {
@@ -165,7 +155,6 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
             open={createWorkspaceOpen}
             onClose={({ workspaceId }) => {
               setCreateWorkspaceOpen(false);
-              setList();
               onClose();
               confirm({
                 title: 'Enable AFFiNE Cloud?',
@@ -182,7 +171,7 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
                       });
                     }, 1000);
                 } else {
-                  confirm && Login();
+                  confirm && login();
                 }
               });
             }}
diff --git a/packages/app/src/components/workspace-setting/MembersPage.tsx b/packages/app/src/components/workspace-setting/MembersPage.tsx
index 7695a43b0..b69c89b6f 100644
--- a/packages/app/src/components/workspace-setting/MembersPage.tsx
+++ b/packages/app/src/components/workspace-setting/MembersPage.tsx
@@ -15,24 +15,21 @@ import { MoreVerticalIcon, EmailIcon, TrashIcon } from '@blocksuite/icons';
 import { useEffect, useState } from 'react';
 import { Button, IconButton } from '@/ui/button';
 import { InviteMembers } from '../invite-members/index';
-// import { Member, getDataCenter } from '@affine/datacenter';
-// import { Avatar } from '@mui/material';
 import { Menu, MenuItem } from '@/ui/menu';
 import { Empty } from '@/ui/empty';
 import {
   deleteMember,
   getMembers,
-  getUserInfo,
-  Login,
   User,
   Workspace,
 } from '@/hooks/mock-data/mock';
+import useTemporaryHelper from '@/hooks/use-temporary-helper';
 
 // import { useAppState } from '@/providers/app-state-provider';
 export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
   const [isInviteModalShow, setIsInviteModalShow] = useState(false);
   const [members, setMembers] = useState<User[]>([]);
-  const [userInfo, setUserInfo] = useState<User>();
+  const { user, login } = useTemporaryHelper();
   // const refreshMembers = useCallback(() => {
   //   getDataCenter()
   //     .then(dc =>
@@ -49,15 +46,10 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
   // }, [workspace.id]);
 
   useEffect(() => {
-    setUser();
     setMembersList();
     // refreshMembers();
   }, []);
 
-  const setUser = () => {
-    const user = getUserInfo();
-    user && setUserInfo(user);
-  };
   const setMembersList = () => {
     const members = getMembers(workspace.id);
     members && setMembers(members);
@@ -65,7 +57,7 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
 
   return (
     <div>
-      {userInfo ? (
+      {user ? (
         <>
           <StyledMemberTitleContainer>
             <StyledMemberNameContainer>
@@ -184,8 +176,7 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
           <div>
             <Button
               onClick={() => {
-                Login();
-                setUser();
+                login();
               }}
             >
               Enable AFFiNE Cloud
diff --git a/packages/app/src/components/workspace-setting/SyncPage.tsx b/packages/app/src/components/workspace-setting/SyncPage.tsx
index 572a67f77..8b90c5ae1 100644
--- a/packages/app/src/components/workspace-setting/SyncPage.tsx
+++ b/packages/app/src/components/workspace-setting/SyncPage.tsx
@@ -9,24 +9,18 @@ import { Button } from '@/ui/button';
 import { Menu, MenuItem } from '@/ui/menu';
 import {
   deleteMember,
-  getActiveWorkspace,
   updateWorkspaceMeta,
   Workspace,
 } from '@/hooks/mock-data/mock';
+import useTemporaryHelper from '@/hooks/use-temporary-helper';
 
 export const SyncPage = ({ workspace }: { workspace: Workspace }) => {
-  const [workspaceType, setWorkspaceType] = useState('local');
-  useEffect(() => {
-    setType();
-  });
-  const setType = () => {
-    const ACTIVEworkspace = getActiveWorkspace();
-    ACTIVEworkspace && setWorkspaceType(ACTIVEworkspace.type);
-  };
+  const { currentWorkspace, updateWorkspaceMeta } = useTemporaryHelper();
+
   return (
     <div>
       <StyledPublishContent>
-        {workspaceType === 'local' ? (
+        {currentWorkspace.type === 'local' ? (
           <>
             <StyledPublishExplanation>
               {workspace.name} is Local Workspace. All data is stored on the
@@ -40,7 +34,6 @@ export const SyncPage = ({ workspace }: { workspace: Workspace }) => {
                   updateWorkspaceMeta(workspace.id, {
                     type: 'cloud',
                   });
-                  setType();
                 }}
                 type="primary"
                 shape="circle"
diff --git a/packages/app/src/components/workspace-setting/general/general.tsx b/packages/app/src/components/workspace-setting/general/general.tsx
index 1010efb9e..511c93ff4 100644
--- a/packages/app/src/components/workspace-setting/general/general.tsx
+++ b/packages/app/src/components/workspace-setting/general/general.tsx
@@ -6,7 +6,7 @@ import {
 } from './style';
 import { StyledSettingH2 } from '../style';
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Button, TextButton } from '@/ui/button';
 import Input from '@/ui/input';
 import { getDataCenter } from '@affine/datacenter';
@@ -15,22 +15,13 @@ import { WorkspaceDelete } from './delete';
 import { debounce } from '@/utils';
 import { WorkspaceLeave } from './leave';
 import { Upload } from '@/components/file-upload';
-import {
-  getUserInfo,
-  updateWorkspaceMeta,
-  User,
-  Workspace,
-} from '@/hooks/mock-data/mock';
+import { updateWorkspaceMeta, Workspace } from '@/hooks/mock-data/mock';
 import { WorkspaceAvatar } from '@/components/workspace-avatar';
+import useTemporaryHelper from '@/hooks/use-temporary-helper';
 export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
-  const { currentWorkspace, refreshWorkspacesMeta } = useAppState();
-  useEffect(() => {
-    setWorkspaceName(workspace.name);
-    const user = getUserInfo();
-    setUserInfo(user);
-  }, []);
+  const { refreshWorkspacesMeta } = useAppState();
+  const { currentWorkspace } = useTemporaryHelper();
   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>('');
@@ -61,18 +52,18 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
 
   const fileChange = async (file: File) => {
     setUploading(true);
-    const blob = new Blob([file], { type: file.type });
-    const blobId = await getDataCenter()
-      .then(dc => dc.apis.uploadBlob({ blob }))
-      .finally(() => {
-        setUploading(false);
-      });
-    if (blobId) {
-      currentWorkspace?.meta.setAvatar(blobId);
-      // workspaces[workspace.id]?.meta.setAvatar(blobId);
-      setUploading(false);
-      debouncedRefreshWorkspacesMeta();
-    }
+    // const blob = new Blob([file], { type: file.type });
+    // const blobId = await getDataCenter()
+    //   .then(dc => dc.apis.uploadBlob({ blob }))
+    //   .finally(() => {
+    //     setUploading(false);
+    //   });
+    // if (blobId) {
+    //   currentWorkspace?.meta.setAvatar(blobId);
+    //   // workspaces[workspace.id]?.meta.setAvatar(blobId);
+    //   setUploading(false);
+    //   debouncedRefreshWorkspacesMeta();
+    // }
   };
 
   return workspace ? (
diff --git a/packages/app/src/components/workspace-setting/workspace-setting.tsx b/packages/app/src/components/workspace-setting/workspace-setting.tsx
index 7d292c9b9..69e8a0cc7 100644
--- a/packages/app/src/components/workspace-setting/workspace-setting.tsx
+++ b/packages/app/src/components/workspace-setting/workspace-setting.tsx
@@ -17,9 +17,10 @@ import {
 import { useEffect, useState } from 'react';
 import { GeneralPage } from './general';
 import { getActiveWorkspace } from '@/hooks/mock-data/mock';
-import MembersPage from './MembersPage';
-import PublishPage from './PublishPage';
-import SyncPage from './SyncPage';
+import { MembersPage } from './MembersPage';
+import { PublishPage } from './PublishPage';
+import { SyncPage } from './SyncPage';
+import useTemporaryHelper from '@/hooks/use-temporary-helper';
 
 enum ActiveTab {
   'general' = 'general',
@@ -114,7 +115,7 @@ export const WorkspaceSetting = ({
     setActiveTab(tab);
   };
 
-  const workspace = getActiveWorkspace();
+  const { currentWorkspace } = useTemporaryHelper();
   const handleClickClose = () => {
     onClose && onClose();
   };
@@ -142,14 +143,16 @@ export const WorkspaceSetting = ({
         ) : null}
         <StyledSettingContent>
           {activeTab === ActiveTab.general && (
-            <GeneralPage workspace={workspace} />
+            <GeneralPage workspace={currentWorkspace} />
           )}
-          {activeTab === ActiveTab.sync && <SyncPage workspace={workspace} />}
-          {activeTab === ActiveTab.members && workspace && (
-            <MembersPage workspace={workspace} />
+          {activeTab === ActiveTab.sync && (
+            <SyncPage workspace={currentWorkspace} />
+          )}
+          {activeTab === ActiveTab.members && currentWorkspace && (
+            <MembersPage workspace={currentWorkspace} />
           )}
           {activeTab === ActiveTab.publish && (
-            <PublishPage workspace={workspace} />
+            <PublishPage workspace={currentWorkspace} />
           )}
         </StyledSettingContent>
       </StyledSettingContainer>
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 2047010e0..7bf0443f5 100644
--- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx
+++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx
@@ -1,25 +1,17 @@
 import { Avatar, WorkspaceName, SelectorWrapper } from './styles';
 import { useEffect, useState } from 'react';
-// import { AffineIcon } from '../icons/icons';
 import { WorkspaceModal } from '@/components/workspace-modal';
 import { WorkspaceAvatar } from '@/components/workspace-avatar';
-import { getActiveWorkspace, getWorkspaces } from '@/hooks/mock-data/mock';
+import useTemporaryHelper from '@/hooks/use-temporary-helper';
 export const WorkspaceSelector = () => {
   const [workspaceListShow, setWorkspaceListShow] = useState(false);
-  const [workspace, setWorkSpace] = useState(getActiveWorkspace());
+  const { currentWorkspace, workspaceMetaList } = useTemporaryHelper();
+
   useEffect(() => {
-    setWorkspace();
-  }, [workspaceListShow]);
-  useEffect(() => {
-    const workspaceList = getWorkspaces();
-    if (workspaceList.length === 0) {
+    if (workspaceMetaList.length === 0) {
       setWorkspaceListShow(true);
     }
   });
-  const setWorkspace = () => {
-    const workspace = getActiveWorkspace();
-    setWorkSpace(workspace);
-  };
 
   return (
     <>
@@ -32,25 +24,24 @@ export const WorkspaceSelector = () => {
         <Avatar
           alt="Affine"
           data-testid="workspace-avatar"
-          src={workspace.avatar}
+          src={currentWorkspace.avatar}
         >
           <div
             style={{
               float: 'left',
             }}
           >
-            <WorkspaceAvatar size={28} name={workspace.name} />
+            <WorkspaceAvatar size={28} name={currentWorkspace.name} />
           </div>
         </Avatar>
         <WorkspaceName data-testid="workspace-name">
-          {workspace?.name ?? 'AFFiNE'}
+          {currentWorkspace?.name ?? 'AFFiNE'}
         </WorkspaceName>
       </SelectorWrapper>
       <WorkspaceModal
         open={workspaceListShow}
         onClose={() => {
           setWorkspaceListShow(false);
-          setWorkspace();
         }}
       ></WorkspaceModal>
     </>
diff --git a/packages/app/src/hooks/use-temporary-helper.ts b/packages/app/src/hooks/use-temporary-helper.ts
index c2727f165..4f205fef6 100644
--- a/packages/app/src/hooks/use-temporary-helper.ts
+++ b/packages/app/src/hooks/use-temporary-helper.ts
@@ -17,13 +17,21 @@ export const useTemporaryHelper = () => {
   return {
     updateWorkspaceMeta: (
       workspaceId: string,
-      workspaceData: { name?: string; avatar?: string; isPublish?: boolean }
+      workspaceData: {
+        name?: string;
+        avatar?: string;
+        isPublish?: boolean;
+        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);
+          workspaceData.isPublish &&
+            (workspace.isPublish = workspaceData.isPublish);
           return workspace;
         }
         return workspace;
@@ -53,7 +61,9 @@ export const useTemporaryHelper = () => {
       const workspacesMeta = getWorkspaces();
       workspacesMeta.push(workspaceData);
       localStorage.setItem('affine-workspace', JSON.stringify(workspacesMeta));
+      console.log('workspacesMeta: ', workspacesMeta);
       setWorkspaceMetaList(workspacesMeta);
+      return workspaceData;
     },
     deleteWorkspace: (workspaceId: string) => {
       const workspacesMeta = getWorkspaces();
@@ -82,6 +92,7 @@ export const useTemporaryHelper = () => {
       setWorkspaceMetaList(workspacesMeta);
     },
     setActiveWorkspace(workspaceData: Workspace) {
+      console.log('workspaceData: ', workspaceData);
       localStorage.setItem(
         'affine-active-workspace',
         JSON.stringify(workspaceData)