Skip to content

Commit

Permalink
Merge pull request #9244 from google/enhancement/8879-audience-segmen…
Browse files Browse the repository at this point in the history 
…tation-useInViewSelect

Update the Audience Segmentation Widget components to use the useInViewSelect hook.
  • Loading branch information
@kuasha420
kuasha420 authored Aug 29, 2024
2 parents a1e4685 + 48197cc commit f1f4f9e
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 71 deletions.
16 changes: 9 additions & 7 deletions ...cs-4/components/audience-segmentation/dashboard/AudienceTilesWidget/AudienceTile/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import { __, sprintf } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { useSelect } from 'googlesitekit-data';
import { useInViewSelect } from 'googlesitekit-data';
import {
BREAKPOINT_SMALL,
BREAKPOINT_TABLET,
Expand Down Expand Up @@ -77,28 +77,30 @@ export default function AudienceTile( {
} ) {
const breakpoint = useBreakpoint();

const isPropertyPartialData = useSelect( ( select ) => {
const isPropertyPartialData = useInViewSelect( ( select ) => {
const propertyID = select( MODULES_ANALYTICS_4 ).getPropertyID();

return (
propertyID &&
select( MODULES_ANALYTICS_4 ).isPropertyPartialData( propertyID )
);
} );
const isAudiencePartialData = useSelect(
}, [] );
const isAudiencePartialData = useInViewSelect(
( select ) =>
! isPropertyPartialData &&
audienceResourceName &&
select( MODULES_ANALYTICS_4 ).isAudiencePartialData(
audienceResourceName
)
),
[ isPropertyPartialData, audienceResourceName ]
);
const isTopContentPartialData = useSelect(
const isTopContentPartialData = useInViewSelect(
( select ) =>
! isAudiencePartialData &&
select( MODULES_ANALYTICS_4 ).isCustomDimensionPartialData(
'googlesitekit_post_type'
)
),
[ isAudiencePartialData ]
);

const isMobileBreakpoint = [ BREAKPOINT_SMALL, BREAKPOINT_TABLET ].includes(
Expand Down
122 changes: 70 additions & 52 deletions ...alytics-4/components/audience-segmentation/dashboard/AudienceTilesWidget/AudienceTiles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ import {
* Internal dependencies
*/
import { Tab, TabBar } from 'googlesitekit-components';
import { useDispatch, useSelect } from 'googlesitekit-data';
import { useDispatch, useInViewSelect, useSelect } from 'googlesitekit-data';
import {
BREAKPOINT_SMALL,
BREAKPOINT_TABLET,
Expand Down Expand Up @@ -71,12 +71,13 @@ export default function AudienceTiles( { Widget, widgetLoading } ) {
breakpoint === BREAKPOINT_SMALL || breakpoint === BREAKPOINT_TABLET;

// An array of audience resource names.
const configuredAudiences = useSelect( ( select ) =>
select( CORE_USER ).getConfiguredAudiences()
const configuredAudiences = useInViewSelect(
( select ) => select( CORE_USER ).getConfiguredAudiences(),
[]
);
const audiences = useSelect( ( select ) => {
const audiences = useInViewSelect( ( select ) => {
return select( MODULES_ANALYTICS_4 ).getAvailableAudiences();
} );
}, [] );

const audiencesDimensionFilter = {
audienceResourceName: configuredAudiences,
Expand All @@ -103,9 +104,12 @@ export default function AudienceTiles( { Widget, widgetLoading } ) {
],
};

const report = useSelect( ( select ) => {
return select( MODULES_ANALYTICS_4 ).getReport( reportOptions );
} );
const report = useInViewSelect(
( select ) => {
return select( MODULES_ANALYTICS_4 ).getReport( reportOptions );
},
[ reportOptions ]
);

const reportLoaded = useSelect( ( select ) =>
select( MODULES_ANALYTICS_4 ).hasFinishedResolution( 'getReport', [
Expand All @@ -127,22 +131,27 @@ export default function AudienceTiles( { Widget, widgetLoading } ) {
metrics: [ { name: 'screenPageViews' } ],
};

const totalPageviewsReport = useSelect( ( select ) => {
return select( MODULES_ANALYTICS_4 ).getReport(
totalPageviewsReportOptions
);
} );
const totalPageviewsReport = useInViewSelect(
( select ) => {
return select( MODULES_ANALYTICS_4 ).getReport(
totalPageviewsReportOptions
);
},
[ totalPageviewsReportOptions ]
);

const totalPageviewsReportLoaded = useSelect( ( select ) =>
select( MODULES_ANALYTICS_4 ).hasFinishedResolution( 'getReport', [
totalPageviewsReportOptions,
] )
);

const totalPageviewsReportError = useSelect( ( select ) =>
select( MODULES_ANALYTICS_4 ).getErrorForSelector( 'getReport', [
totalPageviewsReportOptions,
] )
const totalPageviewsReportError = useInViewSelect(
( select ) =>
select( MODULES_ANALYTICS_4 ).getErrorForSelector( 'getReport', [
totalPageviewsReportOptions,
] ),
[ totalPageviewsReportOptions ]
);

const totalPageviews =
Expand All @@ -166,15 +175,17 @@ export default function AudienceTiles( { Widget, widgetLoading } ) {
limit: 3,
};

const topCitiesReport = useSelect( ( select ) =>
select( MODULES_ANALYTICS_4 ).getReportForAllAudiences(
topCitiesReportOptions,
configuredAudiences
)
const topCitiesReport = useInViewSelect(
( select ) =>
select( MODULES_ANALYTICS_4 ).getReportForAllAudiences(
topCitiesReportOptions,
configuredAudiences
),
[ topCitiesReportOptions, configuredAudiences ]
);

const topCitiesReportLoaded = useSelect( ( select ) =>
configuredAudiences.every( ( audienceResourceName ) =>
configuredAudiences?.every( ( audienceResourceName ) =>
select( MODULES_ANALYTICS_4 ).hasFinishedResolution( 'getReport', [
{
...topCitiesReportOptions,
Expand All @@ -185,7 +196,7 @@ export default function AudienceTiles( { Widget, widgetLoading } ) {
);

const topCitiesReportErrors = useSelect( ( select ) => {
return configuredAudiences.reduce( ( acc, audienceResourceName ) => {
return configuredAudiences?.reduce( ( acc, audienceResourceName ) => {
const error = select( MODULES_ANALYTICS_4 ).getErrorForSelector(
'getReport',
[
Expand Down Expand Up @@ -213,15 +224,17 @@ export default function AudienceTiles( { Widget, widgetLoading } ) {
limit: 3,
};

const topContentReport = useSelect( ( select ) =>
select( MODULES_ANALYTICS_4 ).getReportForAllAudiences(
topContentReportOptions,
configuredAudiences
)
const topContentReport = useInViewSelect(
( select ) =>
select( MODULES_ANALYTICS_4 ).getReportForAllAudiences(
topContentReportOptions,
configuredAudiences
),
[ topContentReportOptions, configuredAudiences ]
);

const topContentReportLoaded = useSelect( ( select ) =>
configuredAudiences.every( ( audienceResourceName ) =>
configuredAudiences?.every( ( audienceResourceName ) =>
select( MODULES_ANALYTICS_4 ).hasFinishedResolution( 'getReport', [
{
...topContentReportOptions,
Expand All @@ -232,7 +245,7 @@ export default function AudienceTiles( { Widget, widgetLoading } ) {
);

const topContentReportErrors = useSelect( ( select ) => {
return configuredAudiences.reduce( ( acc, audienceResourceName ) => {
return configuredAudiences?.reduce( ( acc, audienceResourceName ) => {
const error = select( MODULES_ANALYTICS_4 ).getErrorForSelector(
'getReport',
[
Expand Down Expand Up @@ -260,15 +273,17 @@ export default function AudienceTiles( { Widget, widgetLoading } ) {
limit: 15,
};

const topContentPageTitlesReport = useSelect( ( select ) =>
select( MODULES_ANALYTICS_4 ).getReportForAllAudiences(
topContentPageTitlesReportOptions,
configuredAudiences
)
const topContentPageTitlesReport = useInViewSelect(
( select ) =>
select( MODULES_ANALYTICS_4 ).getReportForAllAudiences(
topContentPageTitlesReportOptions,
configuredAudiences
),
[ topContentPageTitlesReportOptions, configuredAudiences ]
);

const topContentPageTitlesReportLoaded = useSelect( ( select ) =>
configuredAudiences.every( ( audienceResourceName ) =>
configuredAudiences?.every( ( audienceResourceName ) =>
select( MODULES_ANALYTICS_4 ).hasFinishedResolution( 'getReport', [
{
...topContentPageTitlesReportOptions,
Expand All @@ -279,7 +294,7 @@ export default function AudienceTiles( { Widget, widgetLoading } ) {
);

const topContentPageTitlesReportErrors = useSelect( ( select ) => {
return configuredAudiences.reduce( ( acc, audienceResourceName ) => {
return configuredAudiences?.reduce( ( acc, audienceResourceName ) => {
const error = select( MODULES_ANALYTICS_4 ).getErrorForSelector(
'getReport',
[
Expand All @@ -298,7 +313,7 @@ export default function AudienceTiles( { Widget, widgetLoading } ) {
}, {} );
} );

const individualTileErrors = configuredAudiences.reduce(
const individualTileErrors = configuredAudiences?.reduce(
( acc, audienceResourceName ) => {
acc[ audienceResourceName ] = [];

Expand All @@ -323,16 +338,17 @@ export default function AudienceTiles( { Widget, widgetLoading } ) {
return true;
}

return configuredAudiences.every(
return configuredAudiences?.every(
( audienceResourceName ) =>
individualTileErrors[ audienceResourceName ].length > 0
);
}

const allTilesError = checkForAllTilesError();

const dismissedItems = useSelect( ( select ) =>
select( CORE_USER ).getDismissedItems()
const dismissedItems = useInViewSelect(
( select ) => select( CORE_USER ).getDismissedItems(),
[]
);

const { isDismissingItem } = useSelect( ( select ) => select( CORE_USER ) );
Expand All @@ -345,14 +361,16 @@ export default function AudienceTiles( { Widget, widgetLoading } ) {
[ dismissItem ]
);

const partialDataStates = useSelect( ( select ) =>
configuredAudiences.reduce( ( acc, audienceResourceName ) => {
acc[ audienceResourceName ] =
select( MODULES_ANALYTICS_4 ).isAudiencePartialData(
audienceResourceName
);
return acc;
}, {} )
const partialDataStates = useInViewSelect(
( select ) =>
configuredAudiences?.reduce( ( acc, audienceResourceName ) => {
acc[ audienceResourceName ] =
select( MODULES_ANALYTICS_4 ).isAudiencePartialData(
audienceResourceName
);
return acc;
}, {} ),
[ configuredAudiences ]
);

// useRef to track if the dismissal logic has already been executed.
Expand All @@ -363,14 +381,14 @@ export default function AudienceTiles( { Widget, widgetLoading } ) {
const visible = [];
// Filter `configuredAudiences` to ensure only available audiences are included.
const tempAudiences = configuredAudiences
.slice()
?.slice()
.filter( ( audienceResourceName ) =>
audiences.some(
( audience ) => audience.name === audienceResourceName
)
);

while ( tempAudiences.length > 0 ) {
while ( tempAudiences?.length > 0 ) {
const audienceResourceName = tempAudiences.shift();

const isDismissed = dismissedItems?.includes(
Expand Down
7 changes: 4 additions & 3 deletions assets/js/modules/analytics-4/components/audience-segmentation/dashboard/ChangeGroupsLink.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,17 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { useSelect, useDispatch } from 'googlesitekit-data';
import { useInViewSelect, useDispatch } from 'googlesitekit-data';
import { AUDIENCE_SELECTION_PANEL_OPENED_KEY } from './AudienceSelectionPanel/constants';
import { CORE_UI } from '../../../../../googlesitekit/datastore/ui/constants';
import { MODULES_ANALYTICS_4 } from '../../../datastore/constants';
import Link from '../../../../../components/Link';
import PencilIcon from '../../../../../../svg/icons/pencil-alt.svg';

export default function ChangeGroupsLink() {
const availableAudiences = useSelect( ( select ) =>
select( MODULES_ANALYTICS_4 ).getConfigurableAudiences()
const availableAudiences = useInViewSelect(
( select ) => select( MODULES_ANALYTICS_4 ).getConfigurableAudiences(),
[]
);

const { setValue } = useDispatch( CORE_UI );
Expand Down
25 changes: 16 additions & 9 deletions .../modules/analytics-4/components/audience-segmentation/dashboard/InfoNoticeWidget/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { useDispatch, useSelect } from 'googlesitekit-data';
import { useDispatch, useInViewSelect, useSelect } from 'googlesitekit-data';
import { CORE_USER } from '../../../../../../googlesitekit/datastore/user/constants';
import { WEEK_IN_SECONDS } from '../../../../../../util';
import whenActive from '../../../../../../util/when-active';
Expand All @@ -44,12 +44,13 @@ import { MODULES_ANALYTICS_4 } from '../../../../datastore/constants';
import { CORE_UI } from '../../../../../../googlesitekit/datastore/ui/constants';

function InfoNoticeWidget( { Widget, WidgetNull } ) {
const availableAudiences = useSelect( ( select ) => {
const availableAudiences = useInViewSelect( ( select ) => {
const audiences = select( MODULES_ANALYTICS_4 ).getAvailableAudiences();
return audiences?.map( ( audience ) => audience.name );
} );
const configuredAudiences = useSelect( ( select ) =>
select( CORE_USER ).getConfiguredAudiences()
}, [] );
const configuredAudiences = useInViewSelect(
( select ) => select( CORE_USER ).getConfiguredAudiences(),
[]
);

const hasMatchingAudience = configuredAudiences?.some( ( audience ) =>
Expand All @@ -58,16 +59,22 @@ function InfoNoticeWidget( { Widget, WidgetNull } ) {

const noticesCount = AUDIENCE_INFO_NOTICES.length;

const isDismissed = useSelect( ( select ) =>
select( CORE_USER ).isPromptDismissed( AUDIENCE_INFO_NOTICE_SLUG )
const isDismissed = useInViewSelect(
( select ) =>
select( CORE_USER ).isPromptDismissed( AUDIENCE_INFO_NOTICE_SLUG ),
[]
);

const hideNotice = useSelect( ( select ) =>
select( CORE_UI ).getValue( AUDIENCE_INFO_NOTICE_HIDE_UI )
);

const dismissCount = useSelect( ( select ) =>
select( CORE_USER ).getPromptDismissCount( AUDIENCE_INFO_NOTICE_SLUG )
const dismissCount = useInViewSelect(
( select ) =>
select( CORE_USER ).getPromptDismissCount(
AUDIENCE_INFO_NOTICE_SLUG
),
[]
);

const { dismissPrompt } = useDispatch( CORE_USER );
Expand Down

0 comments on commit f1f4f9e

Please sign in to comment.