feat: mock sync

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

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;
+  workspace: Workspace;
-  workspaceId: string;
 }
 
 export const WorkspaceDelete = ({
   open,
   onClose,
-  workspaceId,
+  workspace,
-  workspaceName,
 }: 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 (
+            Deleting (
-          <StyledWorkspaceName>{workspaceName}</StyledWorkspaceName>) along with
+            <StyledWorkspaceName>{workspace.name}</StyledWorkspaceName>) cannot
-          all its content.
+            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}

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',
   };
 });
 

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}
+              workspace={workspace}
-              workspaceId={workspace.id}
             />
           </>
         ) : (

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',
   };
 });

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);
+    updateWorkspaceMeta(currentWorkspace.id, { isPublish: flag });
-    setPublicStatus(isPublic);
   };
 
   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
+                  Publishing to web requires AFFiNE Cloud service .
-              view the contents of this workspace through the link.
                 </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
+                After publishing to the web, everyone can view the content of
-            workspace through the link.
+                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
+              synchronized and saved to the AFFiNE
-            <div>
+            </StyledPublishExplanation>
+            <StyledPublishCopyContainer>
               <Menu
                 content={
                   <>
@@ -495,8 +538,8 @@ const SyncPage = ({ workspace }: { workspace: Workspace }) => {
               >
                 <Button>Download all data to device</Button>
               </Menu>
-            </div>
+            </StyledPublishCopyContainer>
-          </StyledPublishExplanation>
+          </>
         )}
       </StyledPublishContent>
     </div>

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: () => {