refactor: add hook transform workspace (#1407)

apps/web/src/components/affine/workspace-setting-detail/index.tsx

@@ -13,6 +13,8 @@ import { useIsWorkspaceOwner } from '../../../hooks/affine/use-is-workspace-owne
 import { fetcher, QueryKey } from '../../../plugins/affine/fetcher';
 import {
   AffineOfficialWorkspace,
+  FlavourToWorkspace,
+  RemWorkspaceFlavour,
   SettingPanel,
   settingPanel,
 } from '../../../shared';
@@ -33,7 +35,14 @@ export type WorkspaceSettingDetailProps = {
   currentTab: SettingPanel;
   onChangeTab: (tab: SettingPanel) => void;
   onDeleteWorkspace: () => void;
-  onTransferWorkspace: (targetWorkspaceId: string) => void;
+  onTransferWorkspace: <
+    From extends RemWorkspaceFlavour,
+    To extends RemWorkspaceFlavour
+  >(
+    from: From,
+    to: To,
+    workspace: FlavourToWorkspace[From]
+  ) => void;
 };
 
 export type PanelProps = WorkspaceSettingDetailProps;

apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/index.tsx

@@ -15,9 +15,7 @@ import {
 } from '@blocksuite/icons';
 import React, { useCallback, useState } from 'react';
 
-import { lockMutex } from '../../../../../atoms';
 import { useMembers } from '../../../../../hooks/affine/use-members';
-import { transformWorkspace } from '../../../../../plugins';
 import {
   AffineWorkspace,
   LocalWorkspace,
@@ -194,16 +192,12 @@ const LocalCollaborationPanel: React.FC<
           setOpen(false);
         }}
         onConform={() => {
-          // todo(himself65): move this function out of affine component
-          lockMutex(async () => {
-            const id = await transformWorkspace(
-              RemWorkspaceFlavour.LOCAL,
-              RemWorkspaceFlavour.AFFINE,
-              workspace
-            );
-            onTransferWorkspace(id);
-            setOpen(false);
-          });
+          onTransferWorkspace(
+            RemWorkspaceFlavour.LOCAL,
+            RemWorkspaceFlavour.AFFINE,
+            workspace
+          );
+          setOpen(false);
         }}
       />
     </>

apps/web/src/components/affine/workspace-setting-detail/panel/publish/index.tsx

@@ -11,14 +11,12 @@ import { Box } from '@mui/material';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { useToggleWorkspacePublish } from '../../../../../hooks/affine/use-toggle-workspace-publish';
-import { transformWorkspace } from '../../../../../plugins';
 import {
   AffineOfficialWorkspace,
   AffineWorkspace,
   LocalWorkspace,
   RemWorkspaceFlavour,
 } from '../../../../../shared';
-import { apis } from '../../../../../shared/apis';
 import { Unreachable } from '../../../affine-error-eoundary';
 import { EnableAffineCloudModal } from '../../../enable-affine-cloud-modal';
 import { WorkspaceSettingDetailProps } from '../../index';
@@ -102,8 +100,8 @@ const PublishPanelAffine: React.FC<PublishPanelAffineProps> = ({
         onClose={() => {
           setOpen(false);
         }}
-        onConfirm={async () => {
-          await publishWorkspace(true);
+        onConfirm={() => {
+          publishWorkspace(true);
           setOpen(false);
         }}
       />
@@ -144,18 +142,12 @@ const PublishPanelLocal: React.FC<PublishPanelLocalProps> = ({
         onClose={() => {
           setOpen(false);
         }}
-        onConfirm={async () => {
-          const id = await transformWorkspace(
+        onConfirm={() => {
+          onTransferWorkspace(
             RemWorkspaceFlavour.LOCAL,
             RemWorkspaceFlavour.AFFINE,
             workspace
           );
-          await apis.updateWorkspace({
-            id,
-            public: true,
-          });
-          // fixme: there imply that reload the whole page
-          onTransferWorkspace(id);
           setOpen(false);
         }}
       />

apps/web/src/components/blocksuite/header/header-right-items/SyncUser.tsx

@@ -9,9 +9,8 @@ import { assertEquals, assertExists } from '@blocksuite/store';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
 
-import { lockMutex } from '../../../../atoms';
 import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
-import { transformWorkspace } from '../../../../plugins';
+import { useTransformWorkspace } from '../../../../hooks/use-transform-workspace';
 import {
   AffineOfficialWorkspace,
   LocalWorkspace,
@@ -75,6 +74,7 @@ export const SyncUser = () => {
   const [open, setOpen] = useState(false);
 
   const { t } = useTranslation();
+  const transformWorkspace = useTransformWorkspace();
 
   if (status === 'offline') {
     return (
@@ -111,28 +111,25 @@ export const SyncUser = () => {
           onClose={() => {
             setOpen(false);
           }}
-          onConform={() => {
-            // todo(himself65): move this function out of affine component
-            lockMutex(async () => {
-              assertEquals(workspace.flavour, RemWorkspaceFlavour.LOCAL);
-              const id = await transformWorkspace(
-                RemWorkspaceFlavour.LOCAL,
-                RemWorkspaceFlavour.AFFINE,
-                workspace as LocalWorkspace
-              );
-              // fixme(himself65): refactor this
-              router
-                .replace({
-                  pathname: `/workspace/[workspaceId]/all`,
-                  query: {
-                    workspaceId: id,
-                  },
-                })
-                .then(() => {
-                  router.reload();
-                });
-              setOpen(false);
-            });
+          onConform={async () => {
+            assertEquals(workspace.flavour, RemWorkspaceFlavour.LOCAL);
+            const id = await transformWorkspace(
+              RemWorkspaceFlavour.LOCAL,
+              RemWorkspaceFlavour.AFFINE,
+              workspace as LocalWorkspace
+            );
+            // fixme(himself65): refactor this
+            router
+              .replace({
+                pathname: `/workspace/[workspaceId]/all`,
+                query: {
+                  workspaceId: id,
+                },
+              })
+              .then(() => {
+                router.reload();
+              });
+            setOpen(false);
           }}
         />
       </>