| 1 |
import {createRoot} from '@wordpress/element'; |
| 2 |
import {CampaignBlockType} from './types'; |
| 3 |
import useCampaign from '../shared/hooks/useCampaign'; |
| 4 |
import CampaignCard from '../shared/components/CampaignCard'; |
| 5 |
|
| 6 |
export const CampaignBlockApp = ({attributes}: { attributes: CampaignBlockType }) => { |
| 7 |
const {campaign, hasResolved} = useCampaign(attributes?.campaignId); |
| 8 |
|
| 9 |
if (!hasResolved) { |
| 10 |
return null; |
| 11 |
} |
| 12 |
|
| 13 |
return ( |
| 14 |
<CampaignCard |
| 15 |
campaign={campaign} |
| 16 |
showImage={attributes?.showImage} |
| 17 |
showDescription={attributes?.showDescription} |
| 18 |
showGoal={attributes?.showGoal} |
| 19 |
/> |
| 20 |
); |
| 21 |
} |
| 22 |
|
| 23 |
/** |
| 24 |
* @since 4.0.0 |
| 25 |
*/ |
| 26 |
const nodeList = document.querySelectorAll('[data-givewp-campaign-block]'); |
| 27 |
|
| 28 |
if (nodeList) { |
| 29 |
const containers = Array.from(nodeList); |
| 30 |
|
| 31 |
containers.map((container: any) => { |
| 32 |
const attributes: CampaignBlockType = JSON.parse(container.dataset?.attributes); |
| 33 |
const root = createRoot(container); |
| 34 |
return root.render(<CampaignBlockApp attributes={attributes} />) |
| 35 |
}); |
| 36 |
} |
| 37 |
|
