feat: add MessageCenterHandler (#770)

Co-authored-by: Peng Xiao <pengxiao@freewheel.tv>

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

@@ -0,0 +1,35 @@
+import { toast } from '@affine/component';
+import { getApis, MessageCenter } from '@affine/datacenter';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+export function MessageCenterHandler({
+  children,
+}: {
+  children?: React.ReactNode;
+}) {
+  const router = useRouter();
+  useEffect(() => {
+    const instance = MessageCenter.getInstance();
+    if (instance) {
+      return instance.onMessage(async message => {
+        if (message.code === MessageCenter.messageCode.noPermission) {
+          // todo: translate message
+          // todo: more specific message for accessing different resources
+          // todo: error toast style
+          toast('You have no permission to access this workspace');
+          getApis().auth.clear();
+          // the status of the app right now is unknown, and it won't help if we let
+          // the app continue and let the user auth the app.
+          // that's why so we need to reload the page for now.
+          //
+          // fix: a better option is to keep loading the app, and prompt the user to login
+          // or perhaps displaying page 401?
+          router.reload();
+        }
+      });
+    }
+  }, [router]);
+
+  return <>{children}</>;
+}

apps/web/src/hooks/use-members.ts

@@ -11,7 +11,7 @@ export const useMembers = () => {
   const refreshMembers = useCallback(async () => {
     if (!currentWorkspace || !dataCenter) return;
     const members = await dataCenter.getMembers(currentWorkspace.id);
-    setMembers(members);
+    setMembers(members ?? []);
   }, [dataCenter, currentWorkspace]);
 
   useEffect(() => {

apps/web/src/pages/_app.tsx

@@ -24,6 +24,7 @@ import { useTranslation } from '@affine/i18n';
 import React from 'react';
 import { GlobalAppProvider } from '@/store/app';
 import { DataCenterPreloader } from '@/store/app/datacenter';
+import { MessageCenterHandler } from '@/components/message-center-handler';
 
 const ThemeProvider = dynamic(() => import('@/providers/ThemeProvider'), {
   ssr: false,
@@ -77,17 +78,19 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
             <ConfirmProvider key="ConfirmProvider" />,
           ]}
         >
-          {NoNeedAppStatePageList.includes(router.route) ? (
-            getLayout(<Component {...pageProps} />)
-          ) : (
-            <Suspense fallback={<PageLoading />}>
-              <DataCenterPreloader>
-                <AppDefender>
-                  {getLayout(<Component {...pageProps} />)}
-                </AppDefender>
-              </DataCenterPreloader>
-            </Suspense>
-          )}
+          <MessageCenterHandler>
+            {NoNeedAppStatePageList.includes(router.route) ? (
+              getLayout(<Component {...pageProps} />)
+            ) : (
+              <Suspense fallback={<PageLoading />}>
+                <DataCenterPreloader>
+                  <AppDefender>
+                    {getLayout(<Component {...pageProps} />)}
+                  </AppDefender>
+                </DataCenterPreloader>
+              </Suspense>
+            )}
+          </MessageCenterHandler>
         </ProviderComposer>
       </GlobalAppProvider>
     </>