refactor(data-center): remove side effect in affine provider (#1106)

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

@@ -1,14 +1,14 @@
 import { toast } from '@affine/component';
-import { getApis, MessageCenter } from '@affine/datacenter';
+import { MessageCenter } from '@affine/datacenter';
+import { AffineProvider } from '@affine/datacenter';
 import { useRouter } from 'next/router';
-import { useEffect } from 'react';
+import { ReactNode, useCallback, useEffect } from 'react';
 
-export function MessageCenterHandler({
-  children,
-}: {
-  children?: React.ReactNode;
-}) {
+import { useGlobalState } from '@/store/app';
+
+export function MessageCenterHandler({ children }: { children?: ReactNode }) {
   const router = useRouter();
+  const dataCenter = useGlobalState(useCallback(store => store.dataCenter, []));
   useEffect(() => {
     const instance = MessageCenter.getInstance();
     if (instance) {
@@ -18,7 +18,15 @@ export function MessageCenterHandler({
           // todo: more specific message for accessing different resources
           // todo: error toast style
           toast('You have no permission to access this workspace');
-          getApis().auth.clear();
+          // todo(himself65): remove dynamic lookup
+          const affineProvider = dataCenter.providers.find(
+            p => p.id === 'affine'
+          );
+          if (affineProvider && affineProvider instanceof AffineProvider) {
+            affineProvider.apis.auth.clear();
+          } else {
+            console.error('cannot find affine provider, please fix this ASAP');
+          }
           // 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.
@@ -30,7 +38,7 @@ export function MessageCenterHandler({
         }
       });
     }
-  }, [router]);
+  }, [dataCenter?.providers, router]);
 
   return <>{children}</>;
 }