| 1 |
import {useEffect} from 'react'; |
| 2 |
import Inspector from './Inspector'; |
| 3 |
import useCampaigns from '../../hooks/useCampaigns'; |
| 4 |
import Selector from './Selector'; |
| 5 |
import {useEntityProp} from '@wordpress/core-data'; |
| 6 |
|
| 7 |
type CampaignSelectorProps = { |
| 8 |
campaignId: number; |
| 9 |
children: JSX.Element | JSX.Element[], |
| 10 |
handleSelect: (id: number) => void; |
| 11 |
inspectorControls?: JSX.Element | JSX.Element[]; |
| 12 |
showInspectorControl?: boolean; |
| 13 |
} |
| 14 |
|
| 15 |
export default function CampaignSelector({campaignId, handleSelect, children, inspectorControls = null, showInspectorControl = true}: CampaignSelectorProps){ |
| 16 |
const [id] = useEntityProp('postType', 'page', 'campaignId'); |
| 17 |
const {campaigns, hasResolved} = useCampaigns({status: ['active', 'draft']}); |
| 18 |
|
| 19 |
// set campaign id from context |
| 20 |
useEffect(() => { |
| 21 |
// if campaign page ID changes, update the campaign ID in block attributes |
| 22 |
// or default the campaignId in the block attributes to the campaign page ID |
| 23 |
if (id && campaignId !== id) { |
| 24 |
handleSelect(id); |
| 25 |
} |
| 26 |
}, [id]); |
| 27 |
|
| 28 |
return ( |
| 29 |
<> |
| 30 |
{!campaignId && ( |
| 31 |
<Selector |
| 32 |
handleSelect={(id: number) => handleSelect(id)} |
| 33 |
campaigns={campaigns} |
| 34 |
hasResolved={hasResolved} |
| 35 |
/> |
| 36 |
)} |
| 37 |
|
| 38 |
{!id && showInspectorControl && ( |
| 39 |
<Inspector |
| 40 |
campaignId={campaignId} |
| 41 |
campaigns={campaigns} |
| 42 |
hasResolved={hasResolved} |
| 43 |
handleSelect={(id: number) => handleSelect(id)} |
| 44 |
inspectorControls={inspectorControls} |
| 45 |
/> |
| 46 |
)} |
| 47 |
|
| 48 |
{campaignId && children} |
| 49 |
</> |
| 50 |
); |
| 51 |
} |
| 52 |
|
