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}</>;
 }

apps/web/src/pages/_app.tsx

@@ -78,19 +78,19 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
             <ConfirmProvider key="ConfirmProvider" />,
           ]}
         >
-          <MessageCenterHandler>
-            {NoNeedAppStatePageList.includes(router.route) ? (
-              getLayout(<Component {...pageProps} />)
-            ) : (
-              <Suspense fallback={<PageLoading />}>
-                <DataCenterPreloader>
+          {NoNeedAppStatePageList.includes(router.route) ? (
+            getLayout(<Component {...pageProps} />)
+          ) : (
+            <Suspense fallback={<PageLoading />}>
+              <DataCenterPreloader>
+                <MessageCenterHandler>
                   <AppDefender>
                     {getLayout(<Component {...pageProps} />)}
                   </AppDefender>
-                </DataCenterPreloader>
-              </Suspense>
-            )}
-          </MessageCenterHandler>
+                </MessageCenterHandler>
+              </DataCenterPreloader>
+            </Suspense>
+          )}
         </ProviderComposer>
       </GlobalAppProvider>
     </>