feat: mock sync

2024-11-30 05:34:21 +03:00 · 2023-01-06 14:26:18 +08:00 · 2023-01-06 14:26:18 +08:00 · e7564b2e71
commit e7564b2e71
parent 7bbf1d28ea
7 changed files with 156 additions and 109 deletions
--- a/packages/app/src/components/workspace-modal/index.tsx
+++ b/packages/app/src/components/workspace-modal/index.tsx
@ -8,7 +8,6 @@ import {
  setActiveWorkspace,
  Login,
  User,
-  getUserInfo,
  SignOut,
  updateWorkspaceMeta,
 } from '@/hooks/mock-data/mock';
@ -22,6 +21,7 @@ import {
 import { useConfirm } from '@/providers/confirm-provider';
 import { toast } from '@/ui/toast';
 import { WorkspaceAvatar } from '@/components/workspace-avatar';
+import useTemporaryHelper from '@/hooks/use-temporary-helper';
 interface LoginModalProps {
  open: boolean;
  onClose: () => void;
@ -29,23 +29,17 @@ interface LoginModalProps {

 export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
  const [workspaceList, setWorkspaceList] = useState<Workspace[]>([]);
-  const [user, setUser] = useState<User | null>();
  const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false);
  const { confirm } = useConfirm();
+  const { user, login } = useTemporaryHelper();
  useEffect(() => {
    setList();
-    setUserInfo();
  }, []);

  const setList = () => {
    const data = getWorkspaces();
-    console.log('data: ', data);
    setWorkspaceList(data);
  };
-  const setUserInfo = () => {
-    const data = getUserInfo();
-    setUser(data);
-  };

  return (
    <div>
@ -151,9 +145,8 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
            {!user ? (
              <Button
                onClick={() => {
-                  Login();
+                  login();
                  toast('login success');
-                  setUserInfo();
                }}
              >
                Sign in AFFiNE Cloud
@ -162,7 +155,6 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
              <Button
                onClick={() => {
                  SignOut();
-                  setUserInfo();
                }}
              >
                Sign out of AFFiNE Cloud
--- a/packages/app/src/components/workspace-setting/general/delete/delete.tsx
+++ b/packages/app/src/components/workspace-setting/general/delete/delete.tsx
@ -14,20 +14,22 @@ 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';
+import {
+  deleteWorkspace,
+  getWorkspaces,
+  Workspace,
+} from '@/hooks/mock-data/mock';

 interface WorkspaceDeleteProps {
  open: boolean;
  onClose: () => void;
-  workspaceName: string;
-  workspaceId: string;
+  workspace: Workspace;
 }

 export const WorkspaceDelete = ({
  open,
  onClose,
-  workspaceId,
-  workspaceName,
+  workspace,
 }: WorkspaceDeleteProps) => {
  const [deleteStr, setDeleteStr] = useState<string>('');
  const router = useRouter();
@ -40,7 +42,7 @@ export const WorkspaceDelete = ({
    // const dc = await getDataCenter();
    // await dc.apis.deleteWorkspace({ id: workspaceId });
    // router.push(`/workspace/${nextWorkSpaceId}`);
-    deleteWorkspace(workspaceId);
+    deleteWorkspace(workspace.id);
    const workspaceList = getWorkspaces();
    if (workspaceList.length) {
      router.push(`/workspace/${workspaceList[0].id}`);
@ -55,11 +57,20 @@ export const WorkspaceDelete = ({
      <StyledModalWrapper>
        <ModalCloseButton onClick={onClose} />
        <StyledModalHeader>Delete Workspace</StyledModalHeader>
+        {workspace.type === 'local' ? (
          <StyledTextContent>
-          This action cannot be undone. This will permanently delete (
-          <StyledWorkspaceName>{workspaceName}</StyledWorkspaceName>) along with
-          all its content.
+            Deleting (
+            <StyledWorkspaceName>{workspace.name}</StyledWorkspaceName>) cannot
+            be undone, please proceed with caution. along with all its content.
          </StyledTextContent>
+        ) : (
+          <StyledTextContent>
+            Deleting (
+            <StyledWorkspaceName>{workspace.name}</StyledWorkspaceName>) will
+            delete both local and cloud data, this operation cannot be undone,
+            please proceed with caution.
+          </StyledTextContent>
+        )}
        <StyledInputContent>
          <Input
            onChange={handlerInputChange}
--- a/packages/app/src/components/workspace-setting/general/delete/style.ts
+++ b/packages/app/src/components/workspace-setting/general/delete/style.ts
@ -16,7 +16,8 @@ export const StyledModalHeader = styled('div')(({ theme }) => {
    width: '460px',
    fontWeight: '600',
    fontSize: '20px;',
-    textAlign: 'center',
+    textAlign: 'left',
+    paddingLeft: '20px',
    color: theme.colors.popoverColor,
  };
 });
@ -32,7 +33,7 @@ export const StyledTextContent = styled('div')(() => {
    fontWeight: '400',
    fontSize: '18px',
    lineHeight: '26px',
-    textAlign: 'center',
+    textAlign: 'left',
  };
 });

@ -41,7 +42,7 @@ export const StyledInputContent = styled('div')(() => {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
-    margin: '40px 0 24px 0',
+    margin: '20px 0 24px 0',
  };
 });

--- a/packages/app/src/components/workspace-setting/general/general.tsx
+++ b/packages/app/src/components/workspace-setting/general/general.tsx
@ -77,11 +77,8 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {

  return workspace ? (
    <div>
-      <StyledSettingH2 marginTop={56}>Workspace Avatar</StyledSettingH2>
+      <StyledSettingH2 marginTop={56}>Workspace Icon</StyledSettingH2>
      <StyledSettingAvatarContent>
-        {/* <StyledSettingAvatar alt="workspace avatar" src={''}>
-          AFFiNE
-        </StyledSettingAvatar> */}
        <div
          style={{
            float: 'left',
@ -98,10 +95,6 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
          <Button loading={uploading}>Upload</Button>
        </Upload>
        {/* TODO: add upload logic */}
-        {/* {isOwner ? (
-          <StyledAvatarUploadBtn shape="round">upload</StyledAvatarUploadBtn>
-        ) : null} */}
-        {/* <Button shape="round">remove</Button> */}
      </StyledSettingAvatarContent>
      <StyledSettingH2 marginTop={20}>Workspace Name</StyledSettingH2>
      <StyledSettingInputContainer>
@ -122,7 +115,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
          ✔️
        </TextButton>
      </StyledSettingInputContainer>
-      {userInfo ? (
+      {/* {userInfo ? (
        <div>
          <StyledSettingH2 marginTop={20}>Workspace Owner</StyledSettingH2>
          <StyledSettingInputContainer>
@ -136,7 +129,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
        </div>
      ) : (
        ''
-      )}
+      )} */}

      <StyledSettingH2 marginTop={20}>Workspace Type</StyledSettingH2>
      <StyledSettingInputContainer>
@ -151,8 +144,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
            <WorkspaceDelete
              open={showDelete}
              onClose={handleCloseDelete}
-              workspaceName={workspaceName}
-              workspaceId={workspace.id}
+              workspace={workspace}
            />
          </>
        ) : (
--- a/packages/app/src/components/workspace-setting/style.ts
+++ b/packages/app/src/components/workspace-setting/style.ts
@ -199,11 +199,12 @@ export const StyledMoreVerticalButton = styled('button')(() => {

 export const StyledPublishExplanation = styled('div')(() => {
  return {
-    marginTop: '56px',
    paddingRight: '48px',
    fontWeight: '500',
    fontSize: '18px',
    lineHeight: '26px',
+    flex: 1,
+    marginTop: '60px',
  };
 });

@ -213,7 +214,9 @@ export const StyledPublishCopyContainer = styled('div')(() => {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
+
    height: '38px',
+    paddingTop: '20px',
  };
 });

@ -226,5 +229,7 @@ export const StyledCopyButtonContainer = styled('div')(() => {
 export const StyledPublishContent = styled('div')(() => {
  return {
    height: '494px',
+    display: 'flex',
+    flexDirection: 'column',
  };
 });
--- a/packages/app/src/components/workspace-setting/workspace-setting.tsx
+++ b/packages/app/src/components/workspace-setting/workspace-setting.tsx
@ -56,6 +56,8 @@ import {
  User,
  Workspace,
 } from '@/hooks/mock-data/mock';
+import useTemporaryHelper from '@/hooks/use-temporary-helper';
+import { useConfirm } from '@/providers/confirm-provider';

 enum ActiveTab {
  'general' = 'general',
@ -364,28 +366,48 @@ const MembersPage = ({ workspace }: { workspace: Workspace }) => {
 const PublishPage = ({ workspace }: { workspace: Workspace }) => {
  const shareUrl =
    window.location.host + '/workspace/' + workspace.id + '?share=true';
-  const [publicStatus, setPublicStatus] = useState<boolean | null>(
-    workspace.isPublish ?? false
-  );
+
+  const { login, updateWorkspaceMeta, user, currentWorkspace } =
+    useTemporaryHelper();
+  const { confirm } = useConfirm();
+
  const togglePublic = (flag: boolean) => {
-    const isPublic = setWorkspacePublish(workspace.id, flag);
-    setPublicStatus(isPublic);
+    updateWorkspaceMeta(currentWorkspace.id, { isPublish: flag });
  };

  const copyUrl = () => {
    navigator.clipboard.writeText(shareUrl);
    toast('Copied url to clipboard');
  };
+
+  const enableAffineCloud = () => {
+    confirm({
+      title: 'Enable AFFiNE Cloud?',
+      content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`,
+      confirmText: user ? 'Enable' : 'Sign in and Enable',
+      cancelText: 'Skip',
+    }).then(confirm => {
+      if (user) {
+        updateWorkspaceMeta(currentWorkspace.id, { isPublish: true });
+      } else {
+        confirm && login();
+        updateWorkspaceMeta(currentWorkspace.id, { isPublish: true });
+      }
+    });
+  };
  return (
+    <>
+      {user ? (
        <div>
          <StyledPublishContent>
-        {publicStatus ? (
+            {currentWorkspace?.isPublish ? (
              <>
                <StyledPublishExplanation>
-              The current workspace has been published to the web, everyone can
-              view the contents of this workspace through the link.
+                  Publishing to web requires AFFiNE Cloud service .
                </StyledPublishExplanation>
-            <StyledSettingH2 marginTop={48}>Share with link</StyledSettingH2>
+                <StyledSettingH2 marginTop={48}>
+                  Share with link
+                </StyledSettingH2>
                <StyledPublishCopyContainer>
                  <Input width={500} value={shareUrl} disabled={true}></Input>
                  <StyledCopyButtonContainer>
@ -397,12 +419,12 @@ const PublishPage = ({ workspace }: { workspace: Workspace }) => {
              </>
            ) : (
              <StyledPublishExplanation>
-            After publishing to the web, everyone can view the content of this
-            workspace through the link.
+                After publishing to the web, everyone can view the content of
+                this workspace through the link.
              </StyledPublishExplanation>
            )}
          </StyledPublishContent>
-      {!publicStatus ? (
+          {!currentWorkspace?.isPublish ? (
            <Button
              onClick={() => {
                togglePublic(true);
@ -424,6 +446,28 @@ const PublishPage = ({ workspace }: { workspace: Workspace }) => {
            </Button>
          )}
        </div>
+      ) : (
+        <StyledPublishContent>
+          <>
+            <StyledPublishExplanation>
+              Publishing to web requires AFFiNE Cloud service.
+            </StyledPublishExplanation>
+
+            <StyledPublishCopyContainer>
+              <Button
+                onClick={() => {
+                  enableAffineCloud();
+                }}
+                type="primary"
+                shape="circle"
+              >
+                Enable AFFiNE Cloud
+              </Button>
+            </StyledPublishCopyContainer>
+          </>
+        </StyledPublishContent>
+      )}
+    </>
  );
 };
 const SyncPage = ({ workspace }: { workspace: Workspace }) => {
@ -433,7 +477,6 @@ const SyncPage = ({ workspace }: { workspace: Workspace }) => {
  });
  const setType = () => {
    const ACTIVEworkspace = getActiveWorkspace();
-    console.log('ACTIVEworkspace: ', ACTIVEworkspace);
    ACTIVEworkspace && setWorkspaceType(ACTIVEworkspace.type);
  };
  return (
@ -448,7 +491,6 @@ const SyncPage = ({ workspace }: { workspace: Workspace }) => {
            </StyledPublishExplanation>

            <StyledPublishCopyContainer>
-              <StyledCopyButtonContainer>
              <Button
                onClick={() => {
                  updateWorkspaceMeta(workspace.id, {
@ -461,14 +503,15 @@ const SyncPage = ({ workspace }: { workspace: Workspace }) => {
              >
                Enable AFFiNE Cloud
              </Button>
-              </StyledCopyButtonContainer>
            </StyledPublishCopyContainer>
          </>
        ) : (
+          <>
            <StyledPublishExplanation>
              <code>{workspace.name}</code> is Cloud Workspace. All data will be
-            synchronized and saved to the AFFiNE account
-            <div>
+              synchronized and saved to the AFFiNE
+            </StyledPublishExplanation>
+            <StyledPublishCopyContainer>
              <Menu
                content={
                  <>
@ -495,8 +538,8 @@ const SyncPage = ({ workspace }: { workspace: Workspace }) => {
              >
                <Button>Download all data to device</Button>
              </Menu>
-            </div>
-          </StyledPublishExplanation>
+            </StyledPublishCopyContainer>
+          </>
        )}
      </StyledPublishContent>
    </div>
--- a/packages/app/src/hooks/use-temporary-helper.ts
+++ b/packages/app/src/hooks/use-temporary-helper.ts
@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { getWorkspaces, Workspace, User } from './mock-data/mock';

 export function getActiveWorkspace(): Workspace {
@ -12,16 +12,19 @@ export const useTemporaryHelper = () => {
  const [currentWorkspace, setCurrentWorkspace] = useState<Workspace>(
    JSON.parse(localStorage.getItem('affine-active-workspace') ?? '{}')
  );
-  const [user, setUser] = useState<User | null>(null);
+  const [user, setUser] = useState<User | null>();

  return {
-    updateWorkspaceMeta: (workspaceId: string, workspaceData: Workspace) => {
+    updateWorkspaceMeta: (
+      workspaceId: string,
+      workspaceData: { name?: string; avatar?: string; isPublish?: boolean }
+    ) => {
      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);
-          return workspaceData;
+          return workspace;
        }
        return workspace;
      });
@ -94,7 +97,7 @@ export const useTemporaryHelper = () => {
        avatar: 'string',
      };
      localStorage.setItem('affine-user', JSON.stringify(userInfo));
-
+      console.log('login');
      setUser(userInfo);
    },
    getUserInfo: () => {