From 81641ed7a71d3d00de2dd5c90953d8ecd65e03a3 Mon Sep 17 00:00:00 2001
From: Himself65 <himself65@outlook.com>
Date: Thu, 9 Mar 2023 21:17:44 -0600
Subject: [PATCH] feat: add message center (#1486)

---
 .../components/pure/message-center/index.tsx  | 30 +++++++++++++++++++
 apps/web/src/pages/_app.tsx                   |  2 ++
 packages/data-center/src/index.ts             |  1 +
 packages/data-center/src/message/code.ts      |  2 +-
 packages/data-center/src/message/message.ts   |  7 +++++
 5 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/src/components/pure/message-center/index.tsx

diff --git a/apps/web/src/components/pure/message-center/index.tsx b/apps/web/src/components/pure/message-center/index.tsx
new file mode 100644
index 0000000000..53208643b0
--- /dev/null
+++ b/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;
+};
diff --git a/apps/web/src/pages/_app.tsx b/apps/web/src/pages/_app.tsx
index 79615c08d6..fe684e7469 100644
--- a/apps/web/src/pages/_app.tsx
+++ b/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
diff --git a/packages/data-center/src/index.ts b/packages/data-center/src/index.ts
index 2bc51a30d0..758d59dfed 100644
--- a/packages/data-center/src/index.ts
+++ b/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';
diff --git a/packages/data-center/src/message/code.ts b/packages/data-center/src/message/code.ts
index 8f4b9f4b7e..f9bb200948 100644
--- a/packages/data-center/src/message/code.ts
+++ b/packages/data-center/src/message/code.ts
@@ -62,4 +62,4 @@ export const messages = {
   [MessageCode.refreshTokenError]: {
     message: 'Refresh token failed',
   },
-};
+} as const;
diff --git a/packages/data-center/src/message/message.ts b/packages/data-center/src/message/message.ts
index 548f26c3be..0b54a2f077 100644
--- a/packages/data-center/src/message/message.ts
+++ b/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 },
     ]);