Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Remove useChannels and use useRegisteredChannels and useRecommendedChannels directly.

This commit is contained in:
Gan Eng Chin 2022-12-24 00:32:23 +08:00
parent 9e0b71ff1c
commit 7bd32ba638
No known key found for this signature in database
GPG Key ID: 94D5D972860ADB01
2 changed files with 15 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx
View File

@ -13,24 +13,25 @@ import {
CardHeaderDescription, CardHeaderDescription,
CenteredSpinner, CenteredSpinner,
} from '~/marketing/components'; } from '~/marketing/components';
import { useChannels } from './useChannels'; import { useRegisteredChannels } from './useRegisteredChannels';
import './Channels.scss'; import { useRecommendedChannels } from './useRecommendedChannels';
import { InstalledChannelCardBody } from './InstalledChannelCardBody'; import { InstalledChannelCardBody } from './InstalledChannelCardBody';
import { RecommendedChannels } from './RecommendedChannels'; import { RecommendedChannels } from './RecommendedChannels';
import { RecommendedChannelsList } from './RecommendedChannelsList'; import { RecommendedChannelsList } from './RecommendedChannelsList';
import './Channels.scss';
export const Channels = () => { export const Channels = () => {
const { const { loading: loadingRegistered, data: dataRegistered } =
loading, useRegisteredChannels();
data: { registeredChannels, recommendedChannels }, const { loading: loadingRecommended, data: dataRecommended } =
} = useChannels(); useRecommendedChannels();
/** /**
* TODO: we may need to filter the channels against * TODO: we may need to filter the channels against
* `@woocommerce/data` installed plugins. * `@woocommerce/data` installed plugins.
*/ */
if ( loading ) { if ( loadingRegistered || loadingRecommended ) {
return ( return (
<Card> <Card>
<CardHeader> <CardHeader>
@ -50,12 +51,12 @@ export const Channels = () => {
* we should display recommended channels without collapsible list * we should display recommended channels without collapsible list
* and with a description in the card header. * and with a description in the card header.
*/ */
if ( registeredChannels.length === 0 ) { if ( dataRegistered.length === 0 ) {
/** /**
* If for some reasons we don't have recommended channels, * If for some reasons we don't have recommended channels,
* then we should not show the Channels card at all. * then we should not show the Channels card at all.
*/ */
if ( recommendedChannels.length === 0 ) { if ( dataRecommended.length === 0 ) {
return null; return null;
} }
@ -73,7 +74,7 @@ export const Channels = () => {
</CardHeaderDescription> </CardHeaderDescription>
</CardHeader> </CardHeader>
<RecommendedChannelsList <RecommendedChannelsList
recommendedChannels={ recommendedChannels } recommendedChannels={ dataRecommended }
/> />
</Card> </Card>
); );
@ -94,22 +95,18 @@ export const Channels = () => {
</CardHeader> </CardHeader>
{ /* Registered channels section. */ } { /* Registered channels section. */ }
{ registeredChannels.map( ( el, idx ) => { { dataRegistered.map( ( el, idx ) => {
return ( return (
<Fragment key={ el.slug }> <Fragment key={ el.slug }>
<InstalledChannelCardBody installedChannel={ el } /> <InstalledChannelCardBody installedChannel={ el } />
{ idx < registeredChannels.length - 1 && ( { idx < dataRegistered.length - 1 && <CardDivider /> }
<CardDivider />
) }
</Fragment> </Fragment>
); );
} ) } } ) }
{ /* Recommended channels section. */ } { /* Recommended channels section. */ }
{ recommendedChannels.length > 0 && ( { dataRecommended.length > 0 && (
<RecommendedChannels <RecommendedChannels recommendedChannels={ dataRecommended } />
recommendedChannels={ recommendedChannels }
/>
) } ) }
</Card> </Card>
); );

20
plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useChannels.ts
View File

@ -1,20 +0,0 @@
/**
* Internal dependencies
*/
import { useRecommendedChannels } from './useRecommendedChannels';
import { useRegisteredChannels } from './useRegisteredChannels';
export const useChannels = () => {
const { loading: loadingRegistered, data: dataRegistered } =
useRegisteredChannels();
const { loading: loadingRecommended, data: dataRecommended } =
useRecommendedChannels();
return {
loading: loadingRegistered || loadingRecommended,
data: {
registeredChannels: dataRegistered,
recommendedChannels: dataRecommended,
},
};
};