fix(core): unexpected redirect to expired page after accepting invitation (#10257)

Co-authored-by: EYHN <cneyhn@gmail.com>

packages/frontend/component/src/components/member-components/expired.tsx

@@ -0,0 +1,18 @@
+import { useI18n } from '@affine/i18n';
+
+import { Button } from '../../ui/button';
+import { AuthPageContainer } from '../auth-components';
+
+export const ExpiredPage = ({ onOpenAffine }: { onOpenAffine: () => void }) => {
+  const t = useI18n();
+  return (
+    <AuthPageContainer
+      title={t['com.affine.expired.page.title']()}
+      subtitle={t['com.affine.expired.page.new-subtitle']()}
+    >
+      <Button variant="primary" size="large" onClick={onOpenAffine}>
+        {t['com.affine.auth.open.affine']()}
+      </Button>
+    </AuthPageContainer>
+  );
+};

packages/frontend/component/src/components/member-components/index.tsx

@@ -1,4 +1,5 @@
 export * from './accept-invite-page';
+export * from './expired';
 export * from './invite-modal';
 export * from './invite-team-modal';
 export * from './join-failed-page';

packages/frontend/core/src/desktop/pages/expired/index.tsx

@@ -1,6 +1,4 @@
-import { AuthPageContainer } from '@affine/component/auth-components';
+import { ExpiredPage } from '@affine/component/member-components';
-import { Button } from '@affine/component/ui/button';
-import { useI18n } from '@affine/i18n';
 import { useCallback } from 'react';
 
 import {
@@ -14,20 +12,10 @@ import {
  * only on web
  */
 export const Component = () => {
-  const t = useI18n();
   const { jumpToIndex } = useNavigateHelper();
   const onOpenAffine = useCallback(() => {
     jumpToIndex(RouteLogic.REPLACE);
   }, [jumpToIndex]);
 
-  return (
+  return <ExpiredPage onOpenAffine={onOpenAffine} />;
-    <AuthPageContainer
-      title={t['com.affine.expired.page.title']()}
-      subtitle={t['com.affine.expired.page.new-subtitle']()}
-    >
-      <Button variant="primary" size="large" onClick={onOpenAffine}>
-        {t['com.affine.auth.open.affine']()}
-      </Button>
-    </AuthPageContainer>
-  );
 };

packages/frontend/core/src/desktop/pages/invite/index.tsx

@@ -1,5 +1,6 @@
 import {
   AcceptInvitePage,
+  ExpiredPage,
   JoinFailedPage,
 } from '@affine/component/member-components';
 import { ErrorNames, UserFriendlyError } from '@affine/graphql';
@@ -13,10 +14,11 @@ import {
 } from '../../../components/hooks/use-navigate-helper';
 import { AcceptInviteService, AuthService } from '../../../modules/cloud';
 
-const AcceptInvite = ({ inviteId }: { inviteId: string }) => {
+const AcceptInvite = ({ inviteId: targetInviteId }: { inviteId: string }) => {
   const { jumpToPage } = useNavigateHelper();
   const acceptInviteService = useService(AcceptInviteService);
   const error = useLiveData(acceptInviteService.error$);
+  const inviteId = useLiveData(acceptInviteService.inviteId$);
   const inviteInfo = useLiveData(acceptInviteService.inviteInfo$);
   const accepted = useLiveData(acceptInviteService.accepted$);
   const loading = useLiveData(acceptInviteService.loading$);
@@ -29,28 +31,32 @@ const AcceptInvite = ({ inviteId }: { inviteId: string }) => {
     jumpToPage(inviteInfo.workspace.id, 'all', RouteLogic.REPLACE);
   }, [jumpToPage, inviteInfo]);
 
-  useEffect(() => {
+  const onOpenAffine = useCallback(() => {
-    acceptInviteService.revalidate({
+    navigateHelper.jumpToIndex();
-      inviteId,
+  }, [navigateHelper]);
-    });
-  }, [acceptInviteService, inviteId]);
 
   useEffect(() => {
-    if (error) {
+    acceptInviteService.revalidate({
+      inviteId: targetInviteId,
+    });
+  }, [acceptInviteService, targetInviteId]);
+
+  useEffect(() => {
+    if (error && inviteId === targetInviteId) {
       const err = UserFriendlyError.fromAnyError(error);
       if (err.name === ErrorNames.ALREADY_IN_SPACE) {
         return navigateHelper.jumpToIndex();
       }
     }
-  }, [error, navigateHelper]);
+  }, [error, inviteId, navigateHelper, targetInviteId]);
 
-  if (loading) {
+  if (loading || inviteId !== targetInviteId) {
     return null;
   }
 
   if (!inviteInfo) {
     // if invite is expired
-    return <Navigate to="/expired" />;
+    return <ExpiredPage onOpenAffine={onOpenAffine} />;
   }
 
   if (error) {
@@ -66,7 +72,7 @@ const AcceptInvite = ({ inviteId }: { inviteId: string }) => {
     );
   } else {
     // invite is expired
-    return <Navigate to="/expired" />;
+    return <ExpiredPage onOpenAffine={onOpenAffine} />;
   }
 };
 

packages/frontend/core/src/modules/cloud/services/accept-invite.ts

@@ -24,6 +24,7 @@ export class AcceptInviteService extends Service {
   ) {
     super();
   }
+  inviteId$ = new LiveData<string | undefined>(undefined);
   inviteInfo$ = new LiveData<InviteInfo | undefined>(undefined);
   accepted$ = new LiveData<boolean>(false);
   loading$ = new LiveData(false);
@@ -61,6 +62,7 @@ export class AcceptInviteService extends Service {
         }),
         catchErrorInto(this.error$),
         onStart(() => {
+          this.inviteId$.setValue(inviteId);
           this.loading$.setValue(true);
           this.inviteInfo$.setValue(undefined);
           this.accepted$.setValue(false);