Use ref instead of location hash to scroll to add channels section.

This commit is contained in:
Gan Eng Chin 2023-03-08 02:06:06 +08:00
parent 0cb2fb1cd0
commit 8fe3781266
No known key found for this signature in database
GPG Key ID: 94D5D972860ADB01
6 changed files with 16 additions and 34 deletions

View File

@ -2,5 +2,4 @@ export { useIntroductionBanner } from './useIntroductionBanner';
export { useInstalledPlugins } from './useInstalledPlugins';
export { useRegisteredChannels } from './useRegisteredChannels';
export { useRecommendedChannels } from './useRecommendedChannels';
export { useIsLocationHashAddChannels } from './useIsLocationHashAddChannels';
export { useNewCampaignTypes } from './useNewCampaignTypes';

View File

@ -1,15 +0,0 @@
/**
* External dependencies
*/
import { useLocation } from 'react-router-dom';
/**
* Internal dependencies
*/
import { hashAddChannels } from '~/marketing/overview-multichannel/constants';
export const useIsLocationHashAddChannels = () => {
const location = useLocation();
return location.hash === hashAddChannels;
};

View File

@ -27,12 +27,14 @@ import { RegisteredChannelCardBody } from './RegisteredChannelCardBody';
import './Channels.scss';
type ChannelsProps = {
addChannelsButtonRef: React.ForwardedRef< HTMLButtonElement >;
registeredChannels: Array< RegisteredChannel >;
recommendedChannels: Array< RecommendedChannel >;
onInstalledAndActivated?: () => void;
};
export const Channels: React.FC< ChannelsProps > = ( {
addChannelsButtonRef,
registeredChannels,
recommendedChannels,
onInstalledAndActivated,
@ -81,6 +83,7 @@ export const Channels: React.FC< ChannelsProps > = ( {
<CardDivider />
<CardBody>
<Button
ref={ addChannelsButtonRef }
variant="link"
onClick={ () => setExpanded( ! expanded ) }
>

View File

@ -10,7 +10,6 @@ import { Icon, trendingUp, megaphone, closeSmall } from '@wordpress/icons';
* Internal dependencies
*/
import { CreateNewCampaignModal } from '~/marketing/components';
import { hashAddChannels } from '~/marketing/overview-multichannel/constants';
import './IntroductionBanner.scss';
import wooIconUrl from './woo.svg';
import illustrationUrl from './illustration.svg';
@ -19,11 +18,13 @@ import illustrationLargeUrl from './illustration-large.svg';
type IntroductionBannerProps = {
showButtons: boolean;
onDismiss: () => void;
onAddChannels: () => void;
};
export const IntroductionBanner = ( {
showButtons,
onDismiss,
onAddChannels,
}: IntroductionBannerProps ) => {
const [ open, setOpen ] = useState( false );
@ -98,7 +99,7 @@ export const IntroductionBanner = ( {
>
{ __( 'Create a campaign', 'woocommerce' ) }
</Button>
<Button variant="secondary" href={ hashAddChannels }>
<Button variant="secondary" onClick={ onAddChannels }>
{ __( 'Add channels', 'woocommerce' ) }
</Button>
</Flex>

View File

@ -1,8 +1,8 @@
/**
* External dependencies
*/
import { useRef } from '@wordpress/element';
import { useUser } from '@woocommerce/data';
import { ScrollTo } from '@woocommerce/components';
/**
* Internal dependencies
@ -14,7 +14,6 @@ import {
useIntroductionBanner,
useRegisteredChannels,
useRecommendedChannels,
useIsLocationHashAddChannels,
} from '~/marketing/hooks';
import { getAdminSetting } from '~/utils/admin-settings';
import { IntroductionBanner } from './IntroductionBanner';
@ -38,8 +37,8 @@ export const MarketingOverviewMultichannel: React.FC = () => {
} = useRegisteredChannels();
const { loading: loadingRecommended, data: dataRecommended } =
useRecommendedChannels();
const isLocationHashAddChannels = useIsLocationHashAddChannels();
const { currentUserCan } = useUser();
const addChannelsButtonRef = useRef< HTMLButtonElement >( null );
const shouldShowExtensions =
getAdminSetting( 'allowMarketplaceSuggestions', false ) &&
@ -61,27 +60,24 @@ export const MarketingOverviewMultichannel: React.FC = () => {
!! dataRegistered && dataRegistered.length >= 1
}
onDismiss={ dismissIntroductionBanner }
onAddChannels={ () => {
addChannelsButtonRef.current?.focus();
addChannelsButtonRef.current?.click();
addChannelsButtonRef.current?.scrollIntoView();
} }
/>
) }
{ dataRegistered?.length && <Campaigns /> }
{ dataRegistered &&
dataRecommended &&
( dataRegistered.length || dataRecommended.length ) &&
( isLocationHashAddChannels ? (
<ScrollTo>
<Channels
registeredChannels={ dataRegistered }
recommendedChannels={ dataRecommended }
onInstalledAndActivated={ refetch }
/>
</ScrollTo>
) : (
( dataRegistered.length || dataRecommended.length ) && (
<Channels
addChannelsButtonRef={ addChannelsButtonRef }
registeredChannels={ dataRegistered }
recommendedChannels={ dataRecommended }
onInstalledAndActivated={ refetch }
/>
) ) }
) }
<InstalledExtensions />
{ shouldShowExtensions && <DiscoverTools /> }
<LearnMarketing />

View File

@ -1,2 +0,0 @@
export const idAddChannels = 'add-channels';
export const hashAddChannels = `#${ idAddChannels }`;