feat: mock login

2024-11-27 02:44:49 +03:00 · 2023-01-06 15:30:59 +08:00 · 2023-01-06 15:30:59 +08:00 · 8d9838614e
commit 8d9838614e
parent 97567e2e1f
8 changed files with 72 additions and 102 deletions
--- 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>
--- 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();
                }
              });
            }}
--- 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
--- 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"
--- 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 ? (
--- 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>
--- 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>
    </>
--- 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)