fix: some login & enable affine cloud issues (#999)

Co-authored-by: himself65 <himself65@outlook.com>

apps/web/src/components/enable-workspace-modal/index.tsx

@@ -1,12 +1,10 @@
-import { Modal, ModalWrapper } from '@affine/component';
-import { IconButton } from '@affine/component';
-import { useTranslation } from '@affine/i18n';
 import { useAppState } from '@/providers/app-state-provider';
-import { useState } from 'react';
-import router from 'next/router';
-import { toast } from '@affine/component';
+import { IconButton, Modal, ModalWrapper, toast } from '@affine/component';
+import { useTranslation } from '@affine/i18n';
 import { CloseIcon } from '@blocksuite/icons';
-import { Header, Content, ContentTitle, StyleTips, StyleButton } from './style';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import { Content, ContentTitle, Header, StyleButton, StyleTips } from './style';
 
 interface EnableWorkspaceModalProps {
   open: boolean;
@@ -20,6 +18,8 @@ export const EnableWorkspaceModal = ({
   const { t } = useTranslation();
   const { user, dataCenter, login, currentWorkspace } = useAppState();
   const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
   return (
     <Modal open={open} onClose={onClose} data-testid="logout-modal">
       <ModalWrapper width={560} height={292}>
@@ -43,17 +43,19 @@ export const EnableWorkspaceModal = ({
               loading={loading}
               onClick={async () => {
                 setLoading(true);
-                if (!user) {
-                  await login();
-                }
-                if (currentWorkspace) {
-                  const workspace = await dataCenter.enableWorkspaceCloud(
-                    currentWorkspace
-                  );
-                  workspace &&
-                    router.push(`/workspace/${workspace.id}/setting`);
-                  toast(t('Enabled success'));
+                if (user || (await login())) {
+                  if (currentWorkspace) {
+                    const workspace = await dataCenter.enableWorkspaceCloud(
+                      currentWorkspace
+                    );
+                    toast(t('Enabled success'));
+
+                    if (workspace) {
+                      router.push(`/workspace/${workspace.id}/setting`);
+                    }
+                  }
                 }
+                setLoading(false);
               }}
             >
               {user ? t('Enable') : t('Sign in and Enable')}

apps/web/src/components/enable-workspace-modal/style.ts

@@ -6,6 +6,7 @@ export const Header = styled('div')({
   flexDirection: 'row-reverse',
   paddingRight: '10px',
   paddingTop: '10px',
+  flexShrink: 0,
 });
 
 export const Content = styled('div')({

apps/web/src/components/workspace-layout/index.tsx

@@ -4,10 +4,11 @@ import { useRouter } from 'next/router';
 import { StyledPage, StyledToolWrapper, StyledWrapper } from './styles';
 import { PropsWithChildren } from 'react';
 import useEnsureWorkspace from '@/hooks/use-ensure-workspace';
+import { PageLoading } from '../loading';
 
 export const WorkspaceDefender = ({ children }: PropsWithChildren) => {
   const { workspaceLoaded } = useEnsureWorkspace();
-  return <>{workspaceLoaded ? children : null}</>;
+  return <>{workspaceLoaded ? children : <PageLoading />}</>;
 };
 
 export const WorkspaceLayout = ({ children }: PropsWithChildren) => {

apps/web/src/components/workspace-modal/styles.ts

@@ -70,6 +70,7 @@ export const StyledCard = styled.div<{
 export const StyledFooter = styled('div')({
   height: '84px',
   padding: '0 40px',
+  flexShrink: 0,
   ...displayFlex('space-between', 'center'),
 });
 

apps/web/src/hooks/use-ensure-workspace.ts

@@ -1,11 +1,11 @@
-import { useState, useEffect } from 'react';
 import { useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
 // It is a fully effective hook
 // Cause it not just ensure workspace loaded, but also have router change.
 export const useEnsureWorkspace = () => {
   const [workspaceLoaded, setWorkspaceLoaded] = useState(false);
-  const { workspaceList, loadWorkspace, user } = useAppState();
+  const { dataCenter, loadWorkspace } = useAppState();
   const router = useRouter();
   const [activeWorkspaceId, setActiveWorkspaceId] = useState(
     router.query.workspaceId as string
@@ -14,15 +14,20 @@ export const useEnsureWorkspace = () => {
   // const defaultOutLineWorkspaceId = '99ce7eb7';
   // console.log(defaultOutLineWorkspaceId);
   useEffect(() => {
+    setWorkspaceLoaded(false);
+    let aborted = false;
+    const abortController = new AbortController();
+
+    const workspaceList = dataCenter.workspaces;
+    const workspaceId =
+      (router.query.workspaceId as string) || workspaceList[0]?.id;
+
     // If router.query.workspaceId is not in workspace list, jump to 404 page
     // If workspaceList is empty, we need to create a default workspace but not jump to 404
     if (
+      workspaceId &&
       workspaceList.length &&
-      // FIXME: router is not ready when this hook is called
-      location.pathname.startsWith(`/workspace/${router.query.workspaceId}`) &&
-      workspaceList.findIndex(
-        meta => meta.id.toString() === router.query.workspaceId
-      ) === -1
+      workspaceList.findIndex(meta => meta.id.toString() === workspaceId) === -1
     ) {
       router.push('/404');
       return;
@@ -36,13 +41,19 @@ export const useEnsureWorkspace = () => {
     //   router.push('/404');
     //   return;
     // }
-    const workspaceId =
-      (router.query.workspaceId as string) || workspaceList[0]?.id;
-    loadWorkspace.current(workspaceId).finally(() => {
-      setWorkspaceLoaded(true);
-      setActiveWorkspaceId(activeWorkspaceId);
+
+    loadWorkspace.current(workspaceId, abortController.signal).then(unit => {
+      if (!aborted && unit) {
+        setWorkspaceLoaded(true);
+        setActiveWorkspaceId(workspaceId);
+      }
     });
-  }, [loadWorkspace, router, user, workspaceList, activeWorkspaceId]);
+
+    return () => {
+      aborted = true;
+      abortController.abort();
+    };
+  }, [dataCenter, loadWorkspace, router]);
 
   return {
     workspaceLoaded,

apps/web/src/providers/app-state-provider/Provider.tsx

@@ -23,6 +23,7 @@ export const AppStateProvider = ({
   children,
 }: PropsWithChildren<AppStateContextProps>) => {
   const [appState, setAppState] = useState<AppStateValue>({} as AppStateValue);
+  const { dataCenter } = appState;
   const [blobState, setBlobState] = useState(false);
   const [userInfo, setUser] = useState<User | null>({} as User);
   useEffect(() => {
@@ -73,21 +74,20 @@ export const AppStateProvider = ({
   }, [appState]);
 
   useEffect(() => {
-    const { dataCenter } = appState;
     // FIXME: onWorkspacesChange should have dispose function
-    dataCenter?.onWorkspacesChange(
+    return dataCenter?.onWorkspacesChange(
       () => {
-        setAppState({
-          ...appState,
+        setAppState(_appState => ({
+          ..._appState,
           workspaceList: dataCenter.workspaces,
-        });
+        }));
       },
       { immediate: false }
     );
-  }, [appState]);
+  }, [dataCenter]);
 
   const loadPage = useRef<AppStateFunction['loadPage']>();
-  loadPage.current = (pageId: string) => {
+  loadPage.current = pageId => {
     const { currentWorkspace, currentPage } = appState;
     if (pageId === currentPage?.id) {
       return;
@@ -101,7 +101,7 @@ export const AppStateProvider = ({
 
   const loadWorkspace: AppStateFunction['loadWorkspace'] =
     useRef() as AppStateFunction['loadWorkspace'];
-  loadWorkspace.current = async (workspaceId: string) => {
+  loadWorkspace.current = async (workspaceId, abort) => {
     const { dataCenter, workspaceList, currentWorkspace } = appState;
     if (!workspaceList.find(v => v.id.toString() === workspaceId)) {
       return null;
@@ -110,7 +110,21 @@ export const AppStateProvider = ({
       return currentWorkspace;
     }
 
+    let aborted = false;
+
+    const onAbort = () => {
+      aborted = true;
+    };
+
+    abort?.addEventListener('abort', onAbort);
+
     const workspace = (await dataCenter.loadWorkspace(workspaceId)) ?? null;
+
+    if (aborted) {
+      // do not update state if aborted
+      return null;
+    }
+
     let isOwner;
     if (workspace?.provider === 'local') {
       // isOwner is useful only in the cloud
@@ -132,6 +146,8 @@ export const AppStateProvider = ({
       isOwner,
     });
 
+    abort?.removeEventListener('abort', onAbort);
+
     return workspace;
   };
 
@@ -174,15 +190,19 @@ export const AppStateProvider = ({
 
   const login = async () => {
     const { dataCenter } = appState;
-    await dataCenter.login();
-
-    const user = (await dataCenter.getUserInfo()) as User;
-    if (!user) {
-      throw new Error('User info not found');
+    try {
+      await dataCenter.login();
+      const user = (await dataCenter.getUserInfo()) as User;
+      if (!user) {
+        throw new Error('User info not found');
+      }
+      setUser(user);
+      return user;
+    } catch (error) {
+      return null; // login failed
     }
-    setUser(user);
-    return user;
   };
+
   const logout = async () => {
     const { dataCenter } = appState;
     await dataCenter.logout();

apps/web/src/providers/app-state-provider/interface.ts

@@ -34,11 +34,11 @@ export type AppStateFunction = {
   setBlockHub: MutableRefObject<(BlockHub: BlockHub) => void>;
 
   loadWorkspace: MutableRefObject<
-    (workspaceId: string) => Promise<WorkspaceUnit | null>
+    (workspaceId: string, abort?: AbortSignal) => Promise<WorkspaceUnit | null>
   >;
   loadPage: (pageId: string) => void;
 
-  login: () => Promise<User>;
+  login: () => Promise<User | null>;
   logout: () => Promise<void>;
 };
 

apps/web/src/store/globalModal/index.tsx

@@ -1,5 +1,11 @@
 import type React from 'react';
-import { createContext, useCallback, useContext, useMemo } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+} from 'react';
 import { createStore, useStore } from 'zustand';
 import { combine, subscribeWithSelector } from 'zustand/middleware';
 import { UseBoundStore } from 'zustand/react';
@@ -9,6 +15,7 @@ import QuickSearch from '@/components/quick-search';
 import { LoginModal } from '@/components/login-modal';
 import ImportModal from '@/components/import';
 import { EnableWorkspaceModal } from '@/components/enable-workspace-modal';
+import { useRouter } from 'next/router';
 
 export type ModalState = {
   contact: boolean;
@@ -28,51 +35,50 @@ export type ModalActions = {
   triggerEnableWorkspaceModal: () => void;
 };
 
+const defaultModalState: ModalState = {
+  contact: false,
+  shortcuts: false,
+  quickSearch: false,
+  import: false,
+  login: false,
+  enableWorkspace: false,
+};
+
 const create = () =>
   createStore(
     subscribeWithSelector(
-      combine<ModalState, ModalActions>(
-        {
-          contact: false,
-          shortcuts: false,
-          quickSearch: false,
-          import: false,
-          login: false,
-          enableWorkspace: false,
+      combine<ModalState, ModalActions>({ ...defaultModalState }, set => ({
+        triggerShortcutsModal: () => {
+          set(({ shortcuts }) => ({
+            shortcuts: !shortcuts,
+          }));
         },
-        set => ({
-          triggerShortcutsModal: () => {
-            set(({ shortcuts }) => ({
-              shortcuts: !shortcuts,
-            }));
-          },
-          triggerContactModal: () => {
-            set(({ contact }) => ({
-              contact: !contact,
-            }));
-          },
-          triggerQuickSearchModal: (visible?: boolean) => {
-            set(({ quickSearch }) => ({
-              quickSearch: visible ?? !quickSearch,
-            }));
-          },
-          triggerImportModal: () => {
-            set(state => ({
-              import: !state.import,
-            }));
-          },
-          triggerLoginModal: () => {
-            set(({ login }) => ({
-              login: !login,
-            }));
-          },
-          triggerEnableWorkspaceModal: () => {
-            set(({ enableWorkspace }) => ({
-              enableWorkspace: !enableWorkspace,
-            }));
-          },
-        })
-      )
+        triggerContactModal: () => {
+          set(({ contact }) => ({
+            contact: !contact,
+          }));
+        },
+        triggerQuickSearchModal: (visible?: boolean) => {
+          set(({ quickSearch }) => ({
+            quickSearch: visible ?? !quickSearch,
+          }));
+        },
+        triggerImportModal: () => {
+          set(state => ({
+            import: !state.import,
+          }));
+        },
+        triggerLoginModal: () => {
+          set(({ login }) => ({
+            login: !login,
+          }));
+        },
+        triggerEnableWorkspaceModal: () => {
+          set(({ enableWorkspace }) => ({
+            enableWorkspace: !enableWorkspace,
+          }));
+        },
+      }))
     )
   );
 type Store = ReturnType<typeof create>;
@@ -81,9 +87,20 @@ const ModalContext = createContext<Store | null>(null);
 
 export const useModalApi = () => {
   const api = useContext(ModalContext);
+
   if (!api) {
     throw new Error('cannot find modal context');
   }
+
+  const router = useRouter();
+
+  useEffect(() => {
+    router.events.on('routeChangeStart', () => {
+      // normally modal should be closed when route change
+      api.setState(defaultModalState);
+    });
+  }, [api, router.events]);
+
   return api;
 };