Code refactor with useIsLocationHashAddChannels.
This commit is contained in:
parent
86cc1181bf
commit
f92f4d3dee
|
@ -2,3 +2,4 @@ export { useIntroductionBanner } from './useIntroductionBanner';
|
||||||
export { useInstalledPlugins } from './useInstalledPlugins';
|
export { useInstalledPlugins } from './useInstalledPlugins';
|
||||||
export { useRegisteredChannels } from './useRegisteredChannels';
|
export { useRegisteredChannels } from './useRegisteredChannels';
|
||||||
export { useRecommendedChannels } from './useRecommendedChannels';
|
export { useRecommendedChannels } from './useRecommendedChannels';
|
||||||
|
export { useIsLocationHashAddChannels } from './useIsLocationHashAddChannels';
|
||||||
|
|
|
@ -0,0 +1,15 @@
|
||||||
|
/**
|
||||||
|
* 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;
|
||||||
|
};
|
|
@ -5,16 +5,13 @@ import { useState, useEffect, useRef } from '@wordpress/element';
|
||||||
import { __ } from '@wordpress/i18n';
|
import { __ } from '@wordpress/i18n';
|
||||||
import { CardBody, CardDivider, Button, Icon } from '@wordpress/components';
|
import { CardBody, CardDivider, Button, Icon } from '@wordpress/components';
|
||||||
import { chevronUp, chevronDown } from '@wordpress/icons';
|
import { chevronUp, chevronDown } from '@wordpress/icons';
|
||||||
import { useLocation } from 'react-router-dom';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
*/
|
*/
|
||||||
|
import { useIsLocationHashAddChannels } from '~/marketing/hooks';
|
||||||
import { RecommendedChannel } from '~/marketing/types';
|
import { RecommendedChannel } from '~/marketing/types';
|
||||||
import {
|
import { idAddChannels } from '~/marketing/overview-multichannel/constants';
|
||||||
idAddChannels,
|
|
||||||
hashAddChannels,
|
|
||||||
} from '~/marketing/overview-multichannel/constants';
|
|
||||||
import { RecommendedChannelsList } from './RecommendedChannelsList';
|
import { RecommendedChannelsList } from './RecommendedChannelsList';
|
||||||
import './RecommendedChannels.scss';
|
import './RecommendedChannels.scss';
|
||||||
|
|
||||||
|
@ -27,13 +24,13 @@ export const RecommendedChannels: React.FC< RecommendedChannelsType > = ( {
|
||||||
} ) => {
|
} ) => {
|
||||||
const [ collapsed, setCollapsed ] = useState( true );
|
const [ collapsed, setCollapsed ] = useState( true );
|
||||||
const buttonRef = useRef< HTMLAnchorElement >( null );
|
const buttonRef = useRef< HTMLAnchorElement >( null );
|
||||||
const location = useLocation();
|
const isLocationHashAddChannels = useIsLocationHashAddChannels();
|
||||||
|
|
||||||
useEffect( () => {
|
useEffect( () => {
|
||||||
if ( buttonRef.current && location.hash === hashAddChannels ) {
|
if ( buttonRef.current && isLocationHashAddChannels ) {
|
||||||
buttonRef.current.focus();
|
buttonRef.current.focus();
|
||||||
}
|
}
|
||||||
}, [ location.hash ] );
|
}, [ isLocationHashAddChannels ] );
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="woocommerce-marketing-recommended-channels">
|
<div className="woocommerce-marketing-recommended-channels">
|
||||||
|
|
|
@ -3,7 +3,6 @@
|
||||||
*/
|
*/
|
||||||
import { useUser } from '@woocommerce/data';
|
import { useUser } from '@woocommerce/data';
|
||||||
import { ScrollTo } from '@woocommerce/components';
|
import { ScrollTo } from '@woocommerce/components';
|
||||||
import { useLocation } from 'react-router-dom';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
|
@ -20,8 +19,8 @@ import {
|
||||||
useIntroductionBanner,
|
useIntroductionBanner,
|
||||||
useRegisteredChannels,
|
useRegisteredChannels,
|
||||||
useRecommendedChannels,
|
useRecommendedChannels,
|
||||||
|
useIsLocationHashAddChannels,
|
||||||
} from '~/marketing/hooks';
|
} from '~/marketing/hooks';
|
||||||
import { hashAddChannels } from '~/marketing/overview-multichannel/constants';
|
|
||||||
import './MarketingOverviewMultichannel.scss';
|
import './MarketingOverviewMultichannel.scss';
|
||||||
import { CenteredSpinner } from '../components';
|
import { CenteredSpinner } from '../components';
|
||||||
|
|
||||||
|
@ -35,7 +34,7 @@ export const MarketingOverviewMultichannel: React.FC = () => {
|
||||||
useRegisteredChannels();
|
useRegisteredChannels();
|
||||||
const { loading: loadingRecommended, data: dataRecommended } =
|
const { loading: loadingRecommended, data: dataRecommended } =
|
||||||
useRecommendedChannels();
|
useRecommendedChannels();
|
||||||
const location = useLocation();
|
const isLocationHashAddChannels = useIsLocationHashAddChannels();
|
||||||
const { currentUserCan } = useUser();
|
const { currentUserCan } = useUser();
|
||||||
|
|
||||||
const shouldShowExtensions =
|
const shouldShowExtensions =
|
||||||
|
@ -60,7 +59,7 @@ export const MarketingOverviewMultichannel: React.FC = () => {
|
||||||
) }
|
) }
|
||||||
{ dataRegistered.length >= 1 && <Campaigns /> }
|
{ dataRegistered.length >= 1 && <Campaigns /> }
|
||||||
{ ( dataRegistered.length >= 1 || dataRecommended.length >= 1 ) &&
|
{ ( dataRegistered.length >= 1 || dataRecommended.length >= 1 ) &&
|
||||||
( location.hash === hashAddChannels ? (
|
( isLocationHashAddChannels ? (
|
||||||
<ScrollTo>
|
<ScrollTo>
|
||||||
<Channels
|
<Channels
|
||||||
registeredChannels={ dataRegistered }
|
registeredChannels={ dataRegistered }
|
||||||
|
|
Loading…
Reference in New Issue