From e12d5f8750eaeb8b82c868b3d0c4497e11237fc6 Mon Sep 17 00:00:00 2001 From: JimmFly Date: Tue, 26 Nov 2024 05:49:12 +0000 Subject: [PATCH] fix(core): multiple settings dialog should not appear when click user plan button repeatedly (#8924) --- .../affine/auth/user-plan-button.tsx | 22 +++++++------------ .../components/root-app-sidebar/user-info.tsx | 11 +++++++++- .../user-with-workspace-list/index.tsx | 9 ++++++++ .../user-account/index.tsx | 5 ++++- .../dialogs/setting/setting-sidebar/index.tsx | 19 ++++++++++++++-- 5 files changed, 48 insertions(+), 18 deletions(-) diff --git a/packages/frontend/core/src/components/affine/auth/user-plan-button.tsx b/packages/frontend/core/src/components/affine/auth/user-plan-button.tsx index a6480f5112..4c02c7f934 100644 --- a/packages/frontend/core/src/components/affine/auth/user-plan-button.tsx +++ b/packages/frontend/core/src/components/affine/auth/user-plan-button.tsx @@ -1,10 +1,8 @@ import { Tooltip } from '@affine/component/ui/tooltip'; -import { useCatchEventCallback } from '@affine/core/components/hooks/use-catch-event-hook'; -import { GlobalDialogService } from '@affine/core/modules/dialogs'; import { SubscriptionPlan } from '@affine/graphql'; import { useI18n } from '@affine/i18n'; -import { useLiveData, useService, useServices } from '@toeverything/infra'; -import { useEffect } from 'react'; +import { useLiveData, useServices } from '@toeverything/infra'; +import { type SyntheticEvent, useEffect } from 'react'; import { ServerConfigService, @@ -12,7 +10,11 @@ import { } from '../../../modules/cloud'; import * as styles from './style.css'; -export const UserPlanButton = () => { +export const UserPlanButton = ({ + onClick, +}: { + onClick: (e: SyntheticEvent) => void; +}) => { const { serverConfigService, subscriptionService } = useServices({ ServerConfigService, SubscriptionService, @@ -34,14 +36,6 @@ export const UserPlanButton = () => { subscriptionService.subscription.revalidate(); }, [subscriptionService]); - const globalDialogService = useService(GlobalDialogService); - const handleClick = useCatchEventCallback(() => { - globalDialogService.open('setting', { - activeTab: 'plans', - scrollAnchor: 'cloudPricingPlan', - }); - }, [globalDialogService]); - const t = useI18n(); if (!hasPayment) { @@ -61,7 +55,7 @@ export const UserPlanButton = () => {
{planLabel} diff --git a/packages/frontend/core/src/components/root-app-sidebar/user-info.tsx b/packages/frontend/core/src/components/root-app-sidebar/user-info.tsx index 657cce9f71..a94abc9983 100644 --- a/packages/frontend/core/src/components/root-app-sidebar/user-info.tsx +++ b/packages/frontend/core/src/components/root-app-sidebar/user-info.tsx @@ -30,6 +30,7 @@ import { } from '../../modules/cloud'; import { UserPlanButton } from '../affine/auth/user-plan-button'; import { useSignOut } from '../hooks/affine/use-sign-out'; +import { useCatchEventCallback } from '../hooks/use-catch-event-hook'; import * as styles from './index.css'; import { UnknownUserIcon } from './unknow-user'; @@ -113,6 +114,14 @@ const CloudUsage = () => { const quota = useService(UserQuotaService).quota; const quotaError = useLiveData(quota.error$); + const globalDialogService = useService(GlobalDialogService); + const handleClick = useCatchEventCallback(() => { + globalDialogService.open('setting', { + activeTab: 'plans', + scrollAnchor: 'cloudPricingPlan', + }); + }, [globalDialogService]); + useEffect(() => { // revalidate quota to get the latest status quota.revalidate(); @@ -150,7 +159,7 @@ const CloudUsage = () => {  /  {maxFormatted}
- +
diff --git a/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/index.tsx b/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/index.tsx index 9ed211c19f..c3bc19c4f7 100644 --- a/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/index.tsx +++ b/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/index.tsx @@ -16,6 +16,7 @@ import { import { useSetAtom } from 'jotai'; import { useCallback } from 'react'; +import { useCatchEventCallback } from '../../hooks/use-catch-event-hook'; import { AddWorkspace } from './add-workspace'; import * as styles from './index.css'; import { UserAccountItem } from './user-account'; @@ -129,12 +130,20 @@ const UserWithWorkspaceListInner = ({ const workspaceManager = useService(WorkspacesService); const workspaces = useLiveData(workspaceManager.list.workspaces$); + const onOpenPricingPlan = useCatchEventCallback(() => { + globalDialogService.open('setting', { + activeTab: 'plans', + scrollAnchor: 'cloudPricingPlan', + }); + }, [globalDialogService]); + return (
{isAuthenticated ? ( ) : ( diff --git a/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/user-account/index.tsx b/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/user-account/index.tsx index a784cea283..3848962ee2 100644 --- a/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/user-account/index.tsx +++ b/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/user-account/index.tsx @@ -1,11 +1,14 @@ import { UserPlanButton } from '@affine/core/components/affine/auth/user-plan-button'; +import type { SyntheticEvent } from 'react'; import * as styles from './index.css'; export const UserAccountItem = ({ email, + onClick, }: { email: string; + onClick: (e: SyntheticEvent) => void; onEventEnd?: () => void; }) => { return ( @@ -13,7 +16,7 @@ export const UserAccountItem = ({
{email}
- +
); }; diff --git a/packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/index.tsx b/packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/index.tsx index 116c215989..162dea9290 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/index.tsx +++ b/packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/index.tsx @@ -7,6 +7,7 @@ import { Tooltip } from '@affine/component/ui/tooltip'; import { WorkspaceAvatar } from '@affine/component/workspace-avatar'; import { UserPlanButton } from '@affine/core/components/affine/auth/user-plan-button'; import { authAtom } from '@affine/core/components/atoms'; +import { useCatchEventCallback } from '@affine/core/components/hooks/use-catch-event-hook'; import { useWorkspaceInfo } from '@affine/core/components/hooks/use-workspace-info'; import { AuthService } from '@affine/core/modules/cloud'; import { UserFeatureService } from '@affine/core/modules/cloud/services/user-feature'; @@ -38,11 +39,24 @@ import * as style from './style.css'; export type UserInfoProps = { onAccountSettingClick: () => void; + onTabChange: ( + key: SettingTab, + workspaceMetadata: WorkspaceMetadata | null + ) => void; active?: boolean; }; -export const UserInfo = ({ onAccountSettingClick, active }: UserInfoProps) => { +export const UserInfo = ({ + onAccountSettingClick, + onTabChange, + active, +}: UserInfoProps) => { const account = useLiveData(useService(AuthService).session.account$); + + const onClick = useCatchEventCallback(() => { + onTabChange('plans', null); + }, [onTabChange]); + if (!account) { // TODO(@eyhn): loading ui return; @@ -68,7 +82,7 @@ export const UserInfo = ({ onAccountSettingClick, active }: UserInfoProps) => {
{account.label}
- +
@@ -193,6 +207,7 @@ export const SettingSidebar = ({ ) : null}