@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
93 lines (91 loc) • 3.52 kB
JavaScript
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React, { useEffect } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useDispatch } from 'react-redux';
import {
fetchAudiencesPanelModel,
setActiveTargetingModel,
updateAudiencesPanelModel
} from '../../state/actions/preview';
import { ConditionalLoadingState } from '../LoadingState/LoadingState';
import { AudiencesPanelUI } from './AudiencesPanelUI';
import EmptyState from '../EmptyState/EmptyState';
import { useSelection } from '../../hooks/useSelection';
import { useActiveSiteId } from '../../hooks/useActiveSiteId';
const translations = defineMessages({
audiencesPanel: {
id: 'previewAudiencesPanel.title',
defaultMessage: 'Audience Targeting'
},
audiencesPanelLoading: {
id: 'previewAudiencesPanel.loading',
defaultMessage: 'Retrieving targeting options'
}
});
export function PreviewAudiencesPanel(props) {
const site = useActiveSiteId();
const dispatch = useDispatch();
const { formatMessage } = useIntl();
const { fields } = props;
const panelState = useSelection((state) => state.preview.audiencesPanel);
const hasNoFields = !fields || Object.values(fields).length === 0;
useEffect(() => {
if (site && panelState.isFetching === null && !hasNoFields) {
dispatch(fetchAudiencesPanelModel({ fields }));
}
}, [site, panelState, dispatch, fields, hasNoFields]);
const onChange = (model) => {
dispatch(updateAudiencesPanelModel(model));
};
const saveModel = () => {
dispatch(setActiveTargetingModel());
};
if (hasNoFields) {
return React.createElement(EmptyState, { title: 'Audience targeting has not been configured.' });
}
return React.createElement(
ConditionalLoadingState,
{
isLoading: panelState.isFetching === null || panelState.isFetching !== false,
title: formatMessage(translations.audiencesPanelLoading)
},
React.createElement(AudiencesPanelUI, {
model: panelState.model,
fields: fields,
modelApplying: panelState.isApplying,
modelApplied: panelState.applied,
onChange: onChange,
onSaveModel: saveModel
})
);
}
export default PreviewAudiencesPanel;