Skip to content

Commit

Permalink
Merge useInViewSelect work.
Browse files Browse the repository at this point in the history
  • Loading branch information
benbowler committed Aug 30, 2024
2 parents d96ced0 + f1f4f9e commit 41f0bba
Show file tree
Hide file tree
Showing 16 changed files with 226 additions and 76 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,11 @@ import LearnMoreLink from './LearnMoreLink';
import SelectionPanel from '../../../../../../components/SelectionPanel';
import AudienceCreationNotice from './AudienceCreationNotice';
import AudienceCreationSuccessNotice from './AudienceCreationSuccessNotice';
import useViewOnly from '../../../../../../hooks/useViewOnly';

export default function AudienceSelectionPanel() {
const viewOnlyDashboard = useViewOnly();

const isOpen = useSelect( ( select ) =>
select( CORE_UI ).getValue( AUDIENCE_SELECTION_PANEL_OPENED_KEY )
);
Expand Down Expand Up @@ -98,7 +101,7 @@ export default function AudienceSelectionPanel() {
<Header closePanel={ closePanel } />
<AudienceItems savedItemSlugs={ savedItemSlugs } />
<AddGroupNotice />
<AudienceCreationNotice />
{ ! viewOnlyDashboard && <AudienceCreationNotice /> }
<LearnMoreLink />
<ErrorNotice />
<AudienceCreationSuccessNotice />
Expand Down
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, useSelect } from 'googlesitekit-data';
import {
BREAKPOINT_SMALL,
BREAKPOINT_TABLET,
Expand Down Expand Up @@ -77,7 +77,7 @@ export default function AudienceTile( {
} ) {
const breakpoint = useBreakpoint();

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

return (
Expand All @@ -88,25 +88,29 @@ export default function AudienceTile( {
const isSiteKitAudience = useSelect( ( select ) =>
select( MODULES_ANALYTICS_4 ).isSiteKitAudience( audienceResourceName )
);
const isAudiencePartialData = useSelect( ( select ) => {
if ( ! isPropertyPartialData && isSiteKitAudience ) {
return false;
}
const isAudiencePartialData = useInViewSelect(
( select ) => {
if ( ! isPropertyPartialData && isSiteKitAudience ) {
return false;
}

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

const isMobileBreakpoint = [ BREAKPOINT_SMALL, BREAKPOINT_TABLET ].includes(
Expand Down
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 @@ -82,12 +82,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 {
report,
Expand Down Expand Up @@ -250,7 +251,7 @@ export default function AudienceTiles( { Widget, widgetLoading } ) {
};
};

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

Expand Down Expand Up @@ -284,14 +285,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 @@ -302,14 +305,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(
`audience-tile-${ audienceResourceName }`
Expand Down Expand Up @@ -386,7 +389,7 @@ export default function AudienceTiles( { Widget, widgetLoading } ) {
return true;
}

return configuredAudiences.every(
return configuredAudiences?.every(
( audienceResourceName ) =>
individualTileErrors[ audienceResourceName ].length > 0
);
Expand Down
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
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
1 change: 1 addition & 0 deletions assets/js/modules/analytics-4/datastore/base.js
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ const baseModuleStore = Modules.createModuleStore( 'analytics-4', {
'adsLinkedLastSyncedAt',
'availableAudiences',
'availableAudiencesLastSyncedAt',
'detectedEvents',
],
submitChanges,
rollbackChanges,
Expand Down
56 changes: 56 additions & 0 deletions assets/js/modules/analytics-4/datastore/conversion-reporting.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/**
* `modules/analytics-4` data store: conversion reporting.
*
* Site Kit by Google, Copyright 2024 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

/**
* Internal dependencies
*/
import { createRegistrySelector } from 'googlesitekit-data';
import { MODULES_ANALYTICS_4 } from './constants';

export const selectors = {
/**
* Checks whether the provided conversion reporting events are available.
*
* @since n.e.x.t
*
* @param {Object} state Data store's state.
* @param {string|Array<string>} events Conversion reporting events to check.
* @return {(boolean|undefined)} True if all provided custom dimensions are available, otherwise false. Undefined if available custom dimensions are not loaded yet.
*/
hasConversionReportingEvents: createRegistrySelector(
( select ) => ( state, events ) => {
// Ensure events is always an array, even if a string is passed.
const eventsToCheck = Array.isArray( events ) ? events : [ events ];

const detectedEvents =
select( MODULES_ANALYTICS_4 ).getDetectedEvents();

if ( ! detectedEvents?.length ) {
return false;
}

return eventsToCheck.some( ( event ) =>
detectedEvents.includes( event )
);
}
),
};

export default {
selectors,
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
/**
* `modules/analytics-4` data store: conversion-reporting tests.
*
* Site Kit by Google, Copyright 2024 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

/**
* Internal dependencies
*/
import { MODULES_ANALYTICS_4 } from './constants';
import {
createTestRegistry,
provideModules,
provideUserAuthentication,
} from '../../../../../tests/js/utils';

describe( 'modules/analytics-4 conversion-reporting', () => {
let registry;

beforeEach( () => {
registry = createTestRegistry();

provideUserAuthentication( registry );
provideModules( registry );
} );

describe( 'selectors', () => {
describe( 'hasConversionReportingEvents', () => {
it( 'returns false when no conversion reporting events are available', () => {
registry
.dispatch( MODULES_ANALYTICS_4 )
.setSettings( { detectedEvents: [] } );

const hasConversionReportingEvents = registry
.select( MODULES_ANALYTICS_4 )
.hasConversionReportingEvents( [ 'test-event' ] );

expect( hasConversionReportingEvents ).toBe( false );
} );

it( 'returns true when provided conversion reporting event is available', () => {
registry.dispatch( MODULES_ANALYTICS_4 ).setSettings( {
detectedEvents: [ 'test-event', 'test-event-2' ],
} );

const hasConversionReportingEvents = registry
.select( MODULES_ANALYTICS_4 )
.hasConversionReportingEvents( [ 'test-event' ] );

expect( hasConversionReportingEvents ).toBe( true );
} );

it( 'returns true when some of provided conversion reporting events are available', () => {
registry.dispatch( MODULES_ANALYTICS_4 ).setSettings( {
detectedEvents: [
'test-event',
'test-event-2',
'test-event-3',
],
} );

const hasConversionReportingEvents = registry
.select( MODULES_ANALYTICS_4 )
.hasConversionReportingEvents( [
'no-event',
'test-event',
] );

expect( hasConversionReportingEvents ).toBe( true );
} );
} );
} );
} );
Loading

0 comments on commit 41f0bba

Please sign in to comment.