connector-wordpress/source/front/blocks/events-list/edit.js

114 lines
3.5 KiB
JavaScript

/* eslint-disable @wordpress/i18n-ellipsis */
import {
clearEventsList,
displayErrorMessage,
displayEvents,
hideErrorMessages,
showLoadingIndicator,
} from '../../events-displayer.js'
const { InspectorControls, useBlockProps } = wp.blockEditor
const { Panel, PanelBody } = wp.components
const { useEffect } = wp.element
const { __ } = wp.i18n
const NAME = '<wordpress-name>'
export default ({ attributes, setAttributes }) => {
let timer
const blockProps = useBlockProps({
className: NAME + '_events-list',
})
function reloadEventList(eventsCount, groupName) {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(async () => {
const container = document.getElementById(blockProps.id)
if (container) {
hideErrorMessages(container)
clearEventsList(container)
showLoadingIndicator(container)
let url = `/wp-json/connector-mobilizon/v1/events?eventsCount=${eventsCount}`
if (groupName) {
url += `&groupName=${groupName}`
}
await fetch(url)
.then((response) => response.text())
.then((data) => {
const events = JSON.parse(data)
displayEvents({
events,
document,
container,
maxEventsCount: eventsCount,
})
})
.catch((data) => {
displayErrorMessage({ data, container })
})
}
}, 500)
}
useEffect(() => {
reloadEventList(attributes.eventsCount, attributes.groupName)
}, [])
function updateEventsCount(event) {
let newValue = Number(event.target.value)
if (newValue < 1) newValue = 1
setAttributes({ eventsCount: newValue })
reloadEventList(newValue, attributes.groupName)
}
function updateGroupName(event) {
const newValue = event.target.value
setAttributes({ groupName: newValue })
reloadEventList(attributes.eventsCount, newValue)
}
return [
<InspectorControls>
<Panel>
<PanelBody title={__('Events List Settings', '<wordpress-name>')}>
<label
className="components-base-control__label"
htmlFor={NAME + '_events-count'}
>
{__('Number of events to show', '<wordpress-name>')}
</label>
<input
className="components-text-control__input"
type="number"
value={attributes.eventsCount}
onChange={updateEventsCount}
id={NAME + '_events-count'}
/>
<label
className="components-base-control__label"
htmlFor={NAME + '_group-name'}
>
{__('Group name (optional)', '<wordpress-name>')}
</label>
<input
className="components-text-control__input"
type="text"
value={attributes.groupName}
onChange={updateGroupName}
id={NAME + '_group-name'}
/>
</PanelBody>
</Panel>
</InspectorControls>,
<div {...blockProps}>
<div className="general-error" style={{ display: 'none' }}>
{__('The events could not be loaded!', '<wordpress-name>')}
</div>
<div className="group-not-found" style={{ display: 'none' }}>
{__('The group could not be found!', '<wordpress-name>')}
</div>
<div className="loading-indicator" style={{ display: 'none' }}>
{__('Loading...', '<wordpress-name>')}
</div>
<ul style={{ 'list-style-type': 'none', 'padding-left': 0 }}></ul>
</div>,
]
}