1
0
mirror of https://github.com/dwaxweiler/connector-mobilizon synced 2025-06-05 21:59:25 +02:00

only reload current block's events

This commit is contained in:
Daniel Waxweiler
2022-06-06 12:16:12 +02:00
parent b3e9034ada
commit 456b4a9da1
5 changed files with 17 additions and 7 deletions

View File

@ -63,6 +63,7 @@ final class Mobilizon_Connector {
'wp-i18n' 'wp-i18n'
]); ]);
register_block_type(MobilizonConnector\NAME . '/events-list', [ register_block_type(MobilizonConnector\NAME . '/events-list', [
'api_version' => 2,
'editor_script' => $name 'editor_script' => $name
]); ]);
$this->load_settings_globally_before_script($name); $this->load_settings_globally_before_script($name);

View File

@ -1,7 +1,7 @@
/* eslint-disable @wordpress/i18n-ellipsis */ /* eslint-disable @wordpress/i18n-ellipsis */
import { loadEventLists } from '../../events-loader.js' import { loadEventList } from '../../events-loader.js'
const { InspectorControls } = wp.blockEditor const { InspectorControls, useBlockProps } = wp.blockEditor
const { useEffect } = wp.element const { useEffect } = wp.element
const { PanelBody } = wp.components const { PanelBody } = wp.components
const { __ } = wp.i18n const { __ } = wp.i18n
@ -9,11 +9,15 @@ const { __ } = wp.i18n
const NAME = '<wordpress-name>' const NAME = '<wordpress-name>'
export default ({ attributes, setAttributes }) => { export default ({ attributes, setAttributes }) => {
const blockProps = useBlockProps()
useEffect(() => { useEffect(() => {
reloadEventLists() reloadEventLists()
}, []) }, [])
function reloadEventLists() { function reloadEventLists() {
loadEventLists() const container = document.getElementById(blockProps.id)
if (container) {
loadEventList(container)
}
} }
function updateEventsCount(event) { function updateEventsCount(event) {
let newValue = Number(event.target.value) let newValue = Number(event.target.value)
@ -60,6 +64,7 @@ export default ({ attributes, setAttributes }) => {
className={NAME + '_events-list'} className={NAME + '_events-list'}
data-maximum={attributes.eventsCount} data-maximum={attributes.eventsCount}
data-group-name={attributes.groupName} data-group-name={attributes.groupName}
{...blockProps}
> >
<div style={{ display: 'none' }}> <div style={{ display: 'none' }}>
{__('The events could not be loaded!', '<wordpress-name>')} {__('The events could not be loaded!', '<wordpress-name>')}

View File

@ -7,6 +7,7 @@ const { __ } = wp.i18n
const NAME = '<wordpress-name>' const NAME = '<wordpress-name>'
registerBlockType(NAME + '/events-list', { registerBlockType(NAME + '/events-list', {
apiVersion: 2,
title: __('Events List', '<wordpress-name>'), title: __('Events List', '<wordpress-name>'),
description: __( description: __(
'A list of the upcoming events of the connected Mobilizon instance.', 'A list of the upcoming events of the connected Mobilizon instance.',

View File

@ -1,19 +1,22 @@
/* eslint-disable @wordpress/i18n-ellipsis */ /* eslint-disable @wordpress/i18n-ellipsis */
const { useBlockProps } = wp.blockEditor
const { __ } = wp.i18n const { __ } = wp.i18n
const NAME = '<wordpress-name>' const NAME = '<wordpress-name>'
export default ({ attributes }) => { export default ({ attributes }) => {
const blockProps = useBlockProps.save()
return ( return (
<div <div
className={NAME + '_events-list'} className={NAME + '_events-list'}
data-maximum={attributes.eventsCount} data-maximum={attributes.eventsCount}
data-group-name={attributes.groupName} data-group-name={attributes.groupName}
{...blockProps}
> >
<div style="display: none;"> <div style={{ display: 'none' }}>
{__('The events could not be loaded!', '<wordpress-name>')} {__('The events could not be loaded!', '<wordpress-name>')}
</div> </div>
<div style="display: none;"> <div style={{ display: 'none' }}>
{__('The group could not be found!', '<wordpress-name>')} {__('The group could not be found!', '<wordpress-name>')}
</div> </div>
<ul> <ul>

View File

@ -6,14 +6,14 @@ const URL_SUFFIX = '/api'
document.addEventListener('DOMContentLoaded', loadEventLists) document.addEventListener('DOMContentLoaded', loadEventLists)
export function loadEventLists() { function loadEventLists() {
const eventLists = document.getElementsByClassName(NAME + '_events-list') const eventLists = document.getElementsByClassName(NAME + '_events-list')
for (const list of eventLists) { for (const list of eventLists) {
loadEventList(list) loadEventList(list)
} }
} }
function loadEventList(container) { export function loadEventList(container) {
const url = SETTINGS.url + URL_SUFFIX const url = SETTINGS.url + URL_SUFFIX
const limit = parseInt(container.getAttribute('data-maximum')) const limit = parseInt(container.getAttribute('data-maximum'))
const groupName = container.getAttribute('data-group-name') const groupName = container.getAttribute('data-group-name')