feat: add message center (#1486)

apps/web/src/components/pure/message-center/index.tsx

@@ -0,0 +1,30 @@
+import { toast } from '@affine/component';
+import { MessageCode } from '@affine/datacenter';
+import { messages } from '@affine/datacenter';
+import React, { useEffect } from 'react';
+
+declare global {
+  interface DocumentEventMap {
+    'affine-error': CustomEvent<{
+      code: MessageCode;
+    }>;
+  }
+}
+
+export const MessageCenter: React.FC = () => {
+  useEffect(() => {
+    const listener = (
+      event: CustomEvent<{
+        code: MessageCode;
+      }>
+    ) => {
+      toast(messages[event.detail.code].message);
+    };
+
+    document.addEventListener('affine-error', listener);
+    return () => {
+      document.removeEventListener('affine-error', listener);
+    };
+  }, []);
+  return null;
+};

apps/web/src/pages/_app.tsx

@@ -15,6 +15,7 @@ import { jotaiStore } from '../atoms';
 import { AffineErrorBoundary } from '../components/affine/affine-error-eoundary';
 import { ProviderComposer } from '../components/provider-composer';
 import { PageLoading } from '../components/pure/loading';
+import { MessageCenter } from '../components/pure/message-center';
 import { AffineSWRConfigProvider } from '../providers/AffineSWRConfigProvider';
 import { ThemeProvider } from '../providers/ThemeProvider';
 import { NextPageWithLayout } from '../shared';
@@ -57,6 +58,7 @@ const App = function App({
     <CacheProvider value={emotionCache}>
       <I18nextProvider i18n={i18n}>
         <DebugAtoms />
+        <MessageCenter />
         <AffineErrorBoundary router={useRouter()}>
           <Suspense fallback={<PageLoading key="RootPageLoading" />}>
             <ProviderComposer

packages/data-center/src/index.ts

@@ -27,6 +27,7 @@ export const getDataCenter = _initializeDataCenter();
 
 export type { DataCenter };
 export * from './message';
+export { messages } from './message/code';
 export { AffineProvider } from './provider/affine';
 export * from './provider/affine/apis';
 export { getAuthorizer, GoogleAuth } from './provider/affine/apis/google';

packages/data-center/src/message/code.ts

@@ -62,4 +62,4 @@ export const messages = {
   [MessageCode.refreshTokenError]: {
     message: 'Refresh token failed',
   },
-};
+} as const;

packages/data-center/src/message/message.ts

@@ -26,6 +26,13 @@ export class MessageCenter extends Observable<string> {
   }
 
   private _send(provider: string, messageCode: MessageCode) {
+    document.dispatchEvent(
+      new CustomEvent('affine-error', {
+        detail: {
+          code: messageCode,
+        },
+      })
+    );
     this.emit('message', [
       { ...this._messages[messageCode], provider, code: messageCode },
     ]);