Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-09-07 09:21:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: add hook transform workspace (#1407)

Browse Source
This commit is contained in:
Himself65
2023-03-08 00:21:01 -06:00
committed by GitHub
parent f172831733
commit b8e45d059c
10 changed files with 176 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/affine/workspace-setting-detail/index.tsx
+10 -1
View File
@@ -13,6 +13,8 @@ import { useIsWorkspaceOwner } from '../../../hooks/affine/use-is-workspace-owne
import { fetcher, QueryKey } from '../../../plugins/affine/fetcher'; import { fetcher, QueryKey } from '../../../plugins/affine/fetcher';
import { import {
AffineOfficialWorkspace, AffineOfficialWorkspace,
FlavourToWorkspace,
RemWorkspaceFlavour,
SettingPanel, SettingPanel,
settingPanel, settingPanel,
} from '../../../shared'; } from '../../../shared';
@@ -33,7 +35,14 @@ export type WorkspaceSettingDetailProps = {
currentTab: SettingPanel; currentTab: SettingPanel;
onChangeTab: (tab: SettingPanel) => void; onChangeTab: (tab: SettingPanel) => void;
onDeleteWorkspace: () => 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; export type PanelProps = WorkspaceSettingDetailProps;
apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/index.tsx
+6 -12
View File
@@ -15,9 +15,7 @@ import {
} from '@blocksuite/icons'; } from '@blocksuite/icons';
import React, { useCallback, useState } from 'react'; import React, { useCallback, useState } from 'react';
import { lockMutex } from '../../../../../atoms';
import { useMembers } from '../../../../../hooks/affine/use-members'; import { useMembers } from '../../../../../hooks/affine/use-members';
import { transformWorkspace } from '../../../../../plugins';
import { import {
AffineWorkspace, AffineWorkspace,
LocalWorkspace, LocalWorkspace,
@@ -194,16 +192,12 @@ const LocalCollaborationPanel: React.FC<
setOpen(false); setOpen(false);
}} }}
onConform={() => { onConform={() => {
// todo(himself65): move this function out of affine component onTransferWorkspace(
lockMutex(async () => { RemWorkspaceFlavour.LOCAL,
const id = await transformWorkspace( RemWorkspaceFlavour.AFFINE,
RemWorkspaceFlavour.LOCAL, workspace
RemWorkspaceFlavour.AFFINE, );
workspace setOpen(false);
);
onTransferWorkspace(id);
setOpen(false);
});
}} }}
/> />
</> </>
apps/web/src/components/affine/workspace-setting-detail/panel/publish/index.tsx
+4 -12
View File
@@ -11,14 +11,12 @@ import { Box } from '@mui/material';
import React, { useCallback, useEffect, useState } from 'react'; import React, { useCallback, useEffect, useState } from 'react';
import { useToggleWorkspacePublish } from '../../../../../hooks/affine/use-toggle-workspace-publish'; import { useToggleWorkspacePublish } from '../../../../../hooks/affine/use-toggle-workspace-publish';
import { transformWorkspace } from '../../../../../plugins';
import { import {
AffineOfficialWorkspace, AffineOfficialWorkspace,
AffineWorkspace, AffineWorkspace,
LocalWorkspace, LocalWorkspace,
RemWorkspaceFlavour, RemWorkspaceFlavour,
} from '../../../../../shared'; } from '../../../../../shared';
import { apis } from '../../../../../shared/apis';
import { Unreachable } from '../../../affine-error-eoundary'; import { Unreachable } from '../../../affine-error-eoundary';
import { EnableAffineCloudModal } from '../../../enable-affine-cloud-modal'; import { EnableAffineCloudModal } from '../../../enable-affine-cloud-modal';
import { WorkspaceSettingDetailProps } from '../../index'; import { WorkspaceSettingDetailProps } from '../../index';
@@ -102,8 +100,8 @@ const PublishPanelAffine: React.FC<PublishPanelAffineProps> = ({
onClose={() => { onClose={() => {
setOpen(false); setOpen(false);
}} }}
onConfirm={async () => { onConfirm={() => {
await publishWorkspace(true); publishWorkspace(true);
setOpen(false); setOpen(false);
}} }}
/> />
@@ -144,18 +142,12 @@ const PublishPanelLocal: React.FC<PublishPanelLocalProps> = ({
onClose={() => { onClose={() => {
setOpen(false); setOpen(false);
}} }}
onConfirm={async () => { onConfirm={() => {
const id = await transformWorkspace( onTransferWorkspace(
RemWorkspaceFlavour.LOCAL, RemWorkspaceFlavour.LOCAL,
RemWorkspaceFlavour.AFFINE, RemWorkspaceFlavour.AFFINE,
workspace workspace
); );
await apis.updateWorkspace({
id,
public: true,
});
// fixme: there imply that reload the whole page
onTransferWorkspace(id);
setOpen(false); setOpen(false);
}} }}
/> />
apps/web/src/components/blocksuite/header/header-right-items/SyncUser.tsx
+21 -24
View File
@@ -9,9 +9,8 @@ import { assertEquals, assertExists } from '@blocksuite/store';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { lockMutex } from '../../../../atoms';
import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace'; import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
import { transformWorkspace } from '../../../../plugins'; import { useTransformWorkspace } from '../../../../hooks/use-transform-workspace';
import { import {
AffineOfficialWorkspace, AffineOfficialWorkspace,
LocalWorkspace, LocalWorkspace,
@@ -75,6 +74,7 @@ export const SyncUser = () => {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const { t } = useTranslation(); const { t } = useTranslation();
const transformWorkspace = useTransformWorkspace();
if (status === 'offline') { if (status === 'offline') {
return ( return (
@@ -111,28 +111,25 @@ export const SyncUser = () => {
onClose={() => { onClose={() => {
setOpen(false); setOpen(false);
}} }}
onConform={() => { onConform={async () => {
// todo(himself65): move this function out of affine component assertEquals(workspace.flavour, RemWorkspaceFlavour.LOCAL);
lockMutex(async () => { const id = await transformWorkspace(
assertEquals(workspace.flavour, RemWorkspaceFlavour.LOCAL); RemWorkspaceFlavour.LOCAL,
const id = await transformWorkspace( RemWorkspaceFlavour.AFFINE,
RemWorkspaceFlavour.LOCAL, workspace as LocalWorkspace
RemWorkspaceFlavour.AFFINE, );
workspace as LocalWorkspace // fixme(himself65): refactor this
); router
// fixme(himself65): refactor this .replace({
router pathname: `/workspace/[workspaceId]/all`,
.replace({ query: {
pathname: `/workspace/[workspaceId]/all`, workspaceId: id,
query: { },
workspaceId: id, })
}, .then(() => {
}) router.reload();
.then(() => { });
router.reload(); setOpen(false);
});
setOpen(false);
});
}} }}
/> />
</> </>
apps/web/src/hooks/use-transform-workspace.ts
+37
View File
@@ -0,0 +1,37 @@
import { useSetAtom } from 'jotai';
import { useCallback } from 'react';
import { jotaiWorkspacesAtom } from '../atoms';
import { WorkspacePlugins } from '../plugins';
import { FlavourToWorkspace, RemWorkspaceFlavour } from '../shared';
/**
* Transform workspace from one flavour to another
*
* The logic here is to delete the old workspace and create a new one.
*/
export function useTransformWorkspace() {
const set = useSetAtom(jotaiWorkspacesAtom);
return useCallback(
async <From extends RemWorkspaceFlavour, To extends RemWorkspaceFlavour>(
from: From,
to: To,
workspace: FlavourToWorkspace[From]
): Promise<string> => {
await WorkspacePlugins[from].CRUD.delete(workspace as any);
const newId = await WorkspacePlugins[to].CRUD.create(
workspace.blockSuiteWorkspace
);
set(workspaces => {
const idx = workspaces.findIndex(ws => ws.id === workspace.id);
workspaces.splice(idx, 1, {
id: newId,
flavour: to,
});
return [...workspaces];
});
return newId;
},
[set]
);
}
apps/web/src/pages/_app.tsx
+56 -73
View File
@@ -11,7 +11,6 @@ import Head from 'next/head';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React, { memo, ReactElement, Suspense, useEffect, useMemo } from 'react'; import React, { memo, ReactElement, Suspense, useEffect, useMemo } from 'react';
import { Helmet, HelmetProvider } from 'react-helmet-async'; import { Helmet, HelmetProvider } from 'react-helmet-async';
import { SWRConfig, SWRConfiguration } from 'swr';
import { jotaiStore } from '../atoms'; import { jotaiStore } from '../atoms';
import { AffineErrorBoundary } from '../components/affine/affine-error-eoundary'; import { AffineErrorBoundary } from '../components/affine/affine-error-eoundary';
@@ -38,17 +37,6 @@ const DebugAtoms = memo(function DebugAtoms() {
const clientSideEmotionCache = createEmotionCache(); const clientSideEmotionCache = createEmotionCache();
const helmetContext = {}; const helmetContext = {};
const defaultSWRConfig: SWRConfiguration = {
suspense: true,
fetcher: () => {
const error = new Error(
'you might forget to warp your page with AffineSWRConfigProvider'
);
console.log(error);
throw error;
},
};
const App = function App({ const App = function App({
Component, Component,
pageProps, pageProps,
@@ -71,67 +59,62 @@ const App = function App({
<CacheProvider value={emotionCache}> <CacheProvider value={emotionCache}>
<I18nextProvider i18n={i18n}> <I18nextProvider i18n={i18n}>
<DebugAtoms /> <DebugAtoms />
<SWRConfig value={defaultSWRConfig}> <AffineErrorBoundary router={useRouter()}>
<AffineErrorBoundary router={useRouter()}> <Suspense fallback={<PageLoading key="RootPageLoading" />}>
<Suspense fallback={<PageLoading key="RootPageLoading" />}> <ProviderComposer
<ProviderComposer contexts={useMemo(
contexts={useMemo( () => [
() => [ <AffineSWRConfigProvider key="AffineSWRConfigProvider" />,
<AffineSWRConfigProvider key="AffineSWRConfigProvider" />, <Provider key="JotaiProvider" store={jotaiStore} />,
<Provider key="JotaiProvider" store={jotaiStore} />, <ThemeProvider key="ThemeProvider" />,
<ThemeProvider key="ThemeProvider" />, ],
], []
[] )}
)} >
> <HelmetProvider key="HelmetProvider" context={helmetContext}>
<HelmetProvider key="HelmetProvider" context={helmetContext}> <Helmet>
<Helmet> <title>AFFiNE</title>
<title>AFFiNE</title> <meta
<meta name="viewport"
name="viewport" content="initial-scale=1, width=device-width"
content="initial-scale=1, width=device-width" />
/> </Helmet>
</Helmet> <Head>
<Head> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:url" content="https://app.affine.pro/" />
<meta <meta
name="twitter:url" name="twitter:title"
content="https://app.affine.pro/" content="AFFiNE：There can be more than Notion and Miro."
/> />
<meta <meta
name="twitter:title" name="twitter:description"
content="AFFiNE：There can be more than Notion and Miro." content="There can be more than Notion and Miro. AFFiNE is a next-gen knowledge base that brings planning, sorting and creating all together."
/> />
<meta <meta name="twitter:site" content="@AffineOfficial" />
name="twitter:description" <meta
content="There can be more than Notion and Miro. AFFiNE is a next-gen knowledge base that brings planning, sorting and creating all together." name="twitter:image"
/> content="https://affine.pro/og.jpeg"
<meta name="twitter:site" content="@AffineOfficial" /> />
<meta <meta
name="twitter:image" property="og:title"
content="https://affine.pro/og.jpeg" content="AFFiNE：There can be more than Notion and Miro."
/> />
<meta <meta property="og:type" content="website" />
property="og:title" <meta
content="AFFiNE：There can be more than Notion and Miro." property="og:description"
/> content="There can be more than Notion and Miro. AFFiNE is a next-gen knowledge base that brings planning, sorting and creating all together."
<meta property="og:type" content="website" /> />
<meta <meta property="og:url" content="https://app.affine.pro/" />
property="og:description" <meta
content="There can be more than Notion and Miro. AFFiNE is a next-gen knowledge base that brings planning, sorting and creating all together." property="og:image"
/> content="https://affine.pro/og.jpeg"
<meta property="og:url" content="https://app.affine.pro/" /> />
<meta </Head>
property="og:image" {getLayout(<Component {...pageProps} />)}
content="https://affine.pro/og.jpeg" </HelmetProvider>
/> </ProviderComposer>
</Head> </Suspense>
{getLayout(<Component {...pageProps} />)} </AffineErrorBoundary>
</HelmetProvider>
</ProviderComposer>
</Suspense>
</AffineErrorBoundary>
</SWRConfig>
</I18nextProvider> </I18nextProvider>
</CacheProvider> </CacheProvider>
); );
apps/web/src/pages/workspace/[workspaceId]/all.tsx
+7
View File
@@ -1,6 +1,7 @@
import { useTranslation } from '@affine/i18n'; import { useTranslation } from '@affine/i18n';
import { FolderIcon } from '@blocksuite/icons'; import { FolderIcon } from '@blocksuite/icons';
import { assertExists } from '@blocksuite/store'; import { assertExists } from '@blocksuite/store';
import Head from 'next/head';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
@@ -50,6 +51,9 @@ const AllPage: NextPageWithLayout = () => {
const PageList = WorkspacePlugins[currentWorkspace.flavour].UI.PageList; const PageList = WorkspacePlugins[currentWorkspace.flavour].UI.PageList;
return ( return (
<> <>
<Head>
<title>{t('All Pages')} - AFFiNE</title>
</Head>
<WorkspaceTitle icon={<FolderIcon />}>{t('All pages')}</WorkspaceTitle> <WorkspaceTitle icon={<FolderIcon />}>{t('All pages')}</WorkspaceTitle>
<PageList <PageList
onOpenPage={onClickPage} onOpenPage={onClickPage}
@@ -61,6 +65,9 @@ const AllPage: NextPageWithLayout = () => {
const PageList = WorkspacePlugins[currentWorkspace.flavour].UI.PageList; const PageList = WorkspacePlugins[currentWorkspace.flavour].UI.PageList;
return ( return (
<> <>
<Head>
<title>{t('All Pages')} - AFFiNE</title>
</Head>
<WorkspaceTitle icon={<FolderIcon />}>{t('All pages')}</WorkspaceTitle> <WorkspaceTitle icon={<FolderIcon />}>{t('All pages')}</WorkspaceTitle>
<PageList <PageList
onOpenPage={onClickPage} onOpenPage={onClickPage}
apps/web/src/pages/workspace/[workspaceId]/setting.tsx
+24 -17
View File
@@ -3,19 +3,21 @@ import { SettingsIcon } from '@blocksuite/icons';
import { assertExists } from '@blocksuite/store'; import { assertExists } from '@blocksuite/store';
import { useAtom } from 'jotai'; import { useAtom } from 'jotai';
import { atomWithStorage } from 'jotai/utils'; import { atomWithStorage } from 'jotai/utils';
import Head from 'next/head';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React, { useCallback, useEffect } from 'react'; import React, { useCallback, useEffect } from 'react';
import { Helmet } from 'react-helmet-async';
import { Unreachable } from '../../../components/affine/affine-error-eoundary'; import { Unreachable } from '../../../components/affine/affine-error-eoundary';
import { PageLoading } from '../../../components/pure/loading'; import { PageLoading } from '../../../components/pure/loading';
import { WorkspaceTitle } from '../../../components/pure/workspace-title'; import { WorkspaceTitle } from '../../../components/pure/workspace-title';
import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace'; import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
import { useSyncRouterWithCurrentWorkspace } from '../../../hooks/use-sync-router-with-current-workspace'; import { useSyncRouterWithCurrentWorkspace } from '../../../hooks/use-sync-router-with-current-workspace';
import { useTransformWorkspace } from '../../../hooks/use-transform-workspace';
import { useWorkspacesHelper } from '../../../hooks/use-workspaces'; import { useWorkspacesHelper } from '../../../hooks/use-workspaces';
import { WorkspaceLayout } from '../../../layouts'; import { WorkspaceLayout } from '../../../layouts';
import { WorkspacePlugins } from '../../../plugins'; import { WorkspacePlugins } from '../../../plugins';
import { import {
FlavourToWorkspace,
NextPageWithLayout, NextPageWithLayout,
RemWorkspaceFlavour, RemWorkspaceFlavour,
SettingPanel, SettingPanel,
@@ -96,23 +98,25 @@ const SettingPage: NextPageWithLayout = () => {
const onDeleteWorkspace = useCallback(() => { const onDeleteWorkspace = useCallback(() => {
assertExists(currentWorkspace); assertExists(currentWorkspace);
const workspaceId = currentWorkspace.id; const workspaceId = currentWorkspace.id;
helper.deleteWorkspace(workspaceId); return helper.deleteWorkspace(workspaceId);
}, [currentWorkspace, helper]); }, [currentWorkspace, helper]);
const transformWorkspace = useTransformWorkspace();
const onTransformWorkspace = useCallback( const onTransformWorkspace = useCallback(
(targetWorkspaceId: string) => { async <From extends RemWorkspaceFlavour, To extends RemWorkspaceFlavour>(
router from: From,
.replace({ to: To,
pathname: `/workspace/[workspaceId]/setting`, workspace: FlavourToWorkspace[From]
query: { ): Promise<void> => {
...router.query, const workspaceId = await transformWorkspace(from, to, workspace);
workspaceId: targetWorkspaceId, await router.replace({
}, pathname: `/workspace/[workspaceId]/setting`,
}) query: {
.then(() => { ...router.query,
router.reload(); workspaceId,
}); },
});
}, },
[router] [router, transformWorkspace]
); );
if (!router.isReady) { if (!router.isReady) {
return <PageLoading />; return <PageLoading />;
@@ -125,9 +129,9 @@ const SettingPage: NextPageWithLayout = () => {
WorkspacePlugins[currentWorkspace.flavour].UI.SettingsDetail; WorkspacePlugins[currentWorkspace.flavour].UI.SettingsDetail;
return ( return (
<> <>
<Helmet> <Head>
<title>{t('Workspace Settings')} - AFFiNE</title> <title>{t('Workspace Settings')} - AFFiNE</title>
</Helmet> </Head>
<WorkspaceTitle icon={<SettingsIcon />}> <WorkspaceTitle icon={<SettingsIcon />}>
{t('Workspace Settings')} {t('Workspace Settings')}
</WorkspaceTitle> </WorkspaceTitle>
@@ -145,6 +149,9 @@ const SettingPage: NextPageWithLayout = () => {
WorkspacePlugins[currentWorkspace.flavour].UI.SettingsDetail; WorkspacePlugins[currentWorkspace.flavour].UI.SettingsDetail;
return ( return (
<> <>
<Head>
<title>{t('Workspace Settings')} - AFFiNE</title>
</Head>
<WorkspaceTitle icon={<SettingsIcon />}> <WorkspaceTitle icon={<SettingsIcon />}>
{t('Workspace Settings')} {t('Workspace Settings')}
</WorkspaceTitle> </WorkspaceTitle>
apps/web/src/plugins/affine/index.tsx
+3 -1
View File
@@ -1,6 +1,6 @@
import { createJSONStorage } from 'jotai/utils'; import { createJSONStorage } from 'jotai/utils';
import React from 'react'; import React from 'react';
import { preload } from 'swr'; import { mutate, preload } from 'swr';
import { z } from 'zod'; import { z } from 'zod';
import { createAffineProviders } from '../../blocksuite'; import { createAffineProviders } from '../../blocksuite';
@@ -65,6 +65,7 @@ export const AffinePlugin: WorkspacePlugin<RemWorkspaceFlavour.AFFINE> = {
blockSuiteWorkspace.doc blockSuiteWorkspace.doc
); );
const { id } = await apis.createWorkspace(new Blob([binary.buffer])); const { id } = await apis.createWorkspace(new Blob([binary.buffer]));
await mutate(matcher => matcher === QueryKey.getWorkspaces);
// refresh the local storage // refresh the local storage
await AffinePlugin.CRUD.list(); await AffinePlugin.CRUD.list();
return id; return id;
@@ -83,6 +84,7 @@ export const AffinePlugin: WorkspacePlugin<RemWorkspaceFlavour.AFFINE> = {
await apis.deleteWorkspace({ await apis.deleteWorkspace({
id: workspace.id, id: workspace.id,
}); });
await mutate(matcher => matcher === QueryKey.getWorkspaces);
}, },
get: async workspaceId => { get: async workspaceId => {
try { try {
apps/web/src/plugins/index.tsx
+8 -26
View File
@@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { jotaiStore, jotaiWorkspacesAtom } from '../atoms';
import { import {
BlockSuiteWorkspace, BlockSuiteWorkspace,
FlavourToWorkspace, FlavourToWorkspace,
@@ -20,7 +19,14 @@ type SettingProps<Flavour extends RemWorkspaceFlavour> =
currentTab: SettingPanel; currentTab: SettingPanel;
onChangeTab: (tab: SettingPanel) => void; onChangeTab: (tab: SettingPanel) => void;
onDeleteWorkspace: () => void; onDeleteWorkspace: () => void;
onTransformWorkspace: (targetWorkspaceId: string) => void; onTransformWorkspace: <
From extends RemWorkspaceFlavour,
To extends RemWorkspaceFlavour
>(
from: From,
to: To,
workspace: FlavourToWorkspace[From]
) => void;
}; };
type PageDetailProps<Flavour extends RemWorkspaceFlavour> = type PageDetailProps<Flavour extends RemWorkspaceFlavour> =
@@ -64,27 +70,3 @@ export const WorkspacePlugins = {
} satisfies { } satisfies {
[Key in RemWorkspaceFlavour]: WorkspacePlugin<Key>; [Key in RemWorkspaceFlavour]: WorkspacePlugin<Key>;
}; };
/**
* Transform workspace from one flavour to another
*
* The logic here is to delete the old workspace and create a new one.
*/
export async function transformWorkspace<
From extends RemWorkspaceFlavour,
To extends RemWorkspaceFlavour
>(from: From, to: To, workspace: FlavourToWorkspace[From]): Promise<string> {
// fixme: type cast
await WorkspacePlugins[from].CRUD.delete(workspace as any);
const newId = await WorkspacePlugins[to].CRUD.create(
workspace.blockSuiteWorkspace
);
const workspaces = jotaiStore.get(jotaiWorkspacesAtom);
const idx = workspaces.findIndex(ws => ws.id === workspace.id);
workspaces.splice(idx, 1, {
id: newId,
flavour: to,
});
jotaiStore.set(jotaiWorkspacesAtom, [...workspaces]);
return newId;
}