impressions.jsx

const LandmarkRestaurantRows = connect(
    mapStateToProps, 
    dispatch => bindActionCreators({
        onRestaurantViewed: addRestaurantToQueuedDagImpressions,
    }, dispatch)
)(
    ({restaurants, onRestaurantViewed}) => restaurants.map(restaurant => (
        <Restaurant {...restaurant} onRestaurantViewed={onRestaurantViewed} />
    ))
);

const LandmarkPagination = connect(
    state => ({
        page: state.currentPage,
    }),
    dispatch => bindActionCreators({
        onChange: (page) => {
            loadPage(page);
            clearCorrelationId();
        }
    }, dispatch)
)(
    ({page, onChange}) => (
        <div>
            <span>{page}</span>
            <button onClick={() => onChange(page + 1)}>
                next
            </button>
        </div>
    )
)

const selectSearchResultsForLandmarkPage = (state, source) => {
    switch(source) {
        case 'main':
            return state.restaurantsNearbyLandmark;
        case 'nearby':
            return state.nearbyResults;
    }
    throw new Error(`unknown source "${source}" provided.`);
}

const DagAnalytics = connect(
    (state, ownProps) => ({
        correlationId: state.dag.correlationId,
        results: selectSearchResultsForLandmarkPage(state, ownProps.source),
        seenRestaurants: state.dag.seenRestaurants,
    }),
    dispatch => bindActionCreators({
        sendListEvent,
        queueImpressionEvent,
    }, dispatch)
)(
    ({name, correlationId, results, seenRestaurants, sendListEvent, sendImpressionEvent}) => {
        useEffect(() => sendListEvent(name, results), [name, results.restaurants]);
        useEffect(() => queueImpressionEvent(name, seenRestaurants), [name, seenRestaurants]);
        return null;
    }
) 

const App = () => (
    <StandardPage>
        <LandmarkRestaurantRows />
        <LandmarkPagination />
        <DagAnalytics name={'landmark-page-results'} source={'main'} />
        <DagAnalytics name={'nearby-results'} source={'nearby'} />
    </StandardPage>
)

impressions2.jsx

const LandmarkRestaurantRows = connect(
    mapStateToProps, 
    dispatch => bindActionCreators({
        onRestaurantViewed: (rid) => 
            queueImpressionEvent({name: 'landmark-page-results', seenRestaurants: [rid]}),
    }, dispatch)
)(
    ({restaurants, onRestaurantViewed}) => restaurants.map(restaurant => (
        <Restaurant {...restaurant} onRestaurantViewed={onRestaurantViewed} />
    ))
);

const LandmarkPagination = connect(
    state => ({
        page: state.currentPage,
    }),
    dispatch => ({
        ...bindActionCreators({
            onChange: page => (_dispatch, _getState, dependencies) => {
                lib.loadPage(page, dependencies)
                .then(() => 
                    lib.sendListEvent({name: 'landmark-page-results', source: 'main'}, dependencies)
                );
            },
        }),
        onChange: page => {
            const loadPageBound = bindActionCreators(loadPage, dispatch);
            loadPageBound(page, () => sendListEvent(
                {name: 'landmark-page-results', source: 'main'}
            ));
        },
        onChange: page => {
            const options = {
                onLoadComplete: () => dispatch(sendListEvent(
                    {name: 'landmark-page-results', source: 'main'}
                ))
            };
            dispatch(loadPage(page, options));
        }
    }, dispatch)
)(
    ({page, onChange}) => (
        <div>
            <span>{page}</span>
            <button onClick={() => onChange(page + 1)}>
                next
            </button>
        </div>
    )
)

const selectSearchResultsForLandmarkPage = (state, source) => {
    switch(source) {
        case 'main':
            return state.restaurantsNearbyLandmark;
        case 'nearby':
            return state.nearbyResults;
    }
    throw new Error(`unknown source "${source}" provided.`);
}

const App = () => (
    <StandardPage>
        <LandmarkRestaurantRows />
        <LandmarkPagination />
    </StandardPage>
)