mirror of
https://github.com/dwaxweiler/connector-mobilizon
synced 2025-03-12 09:20:13 +01:00
use loading indicator
This commit is contained in:
Daniel Waxweiler
parent
513ee84d48
commit
b3e9034ada
@ -1,3 +1,4 @@
|
||||
/* eslint-disable @wordpress/i18n-ellipsis */
|
||||
import { loadEventLists } from '../../events-loader.js'
|
||||
|
||||
const { InspectorControls } = wp.blockEditor
|
||||
@ -55,17 +56,20 @@ export default ({ attributes, setAttributes }) => {
|
||||
/>
|
||||
</PanelBody>
|
||||
</InspectorControls>,
|
||||
<ul
|
||||
<div
|
||||
className={NAME + '_events-list'}
|
||||
data-maximum={attributes.eventsCount}
|
||||
data-group-name={attributes.groupName}
|
||||
>
|
||||
<li style={{ display: 'none' }}>
|
||||
<div style={{ display: 'none' }}>
|
||||
{__('The events could not be loaded!', '<wordpress-name>')}
|
||||
</li>
|
||||
<li style={{ display: 'none' }}>
|
||||
</div>
|
||||
<div style={{ display: 'none' }}>
|
||||
{__('The group could not be found!', '<wordpress-name>')}
|
||||
</li>
|
||||
</ul>,
|
||||
</div>
|
||||
<ul>
|
||||
<li>{__('Loading...', '<wordpress-name>')}</li>
|
||||
</ul>
|
||||
</div>,
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,20 +1,24 @@
|
||||
/* eslint-disable @wordpress/i18n-ellipsis */
|
||||
const { __ } = wp.i18n
|
||||
|
||||
const NAME = '<wordpress-name>'
|
||||
|
||||
export default ({ attributes }) => {
|
||||
return (
|
||||
<ul
|
||||
<div
|
||||
className={NAME + '_events-list'}
|
||||
data-maximum={attributes.eventsCount}
|
||||
data-group-name={attributes.groupName}
|
||||
>
|
||||
<li style="display: none;">
|
||||
<div style="display: none;">
|
||||
{__('The events could not be loaded!', '<wordpress-name>')}
|
||||
</li>
|
||||
<li style="display: none;">
|
||||
</div>
|
||||
<div style="display: none;">
|
||||
{__('The group could not be found!', '<wordpress-name>')}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li>{__('Loading...', '<wordpress-name>')}</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -15,20 +15,26 @@ test.before(() => {
|
||||
})
|
||||
|
||||
test.beforeEach((t) => {
|
||||
t.context.list = document.createElement('ul')
|
||||
t.context.list.setAttribute('data-maximum', '2')
|
||||
const listElement = document.createElement('li')
|
||||
listElement.setAttribute('style', 'display: none;')
|
||||
t.context.list.appendChild(listElement)
|
||||
const listElement2 = document.createElement('li')
|
||||
listElement2.setAttribute('style', 'display: none;')
|
||||
t.context.list.appendChild(listElement2)
|
||||
t.context.container = document.createElement('div')
|
||||
|
||||
const errorMessageGroupNotFound = document.createElement('div')
|
||||
errorMessageGroupNotFound.setAttribute('style', 'display: none;')
|
||||
t.context.container.appendChild(errorMessageGroupNotFound)
|
||||
const errorMessageGeneral = document.createElement('div')
|
||||
errorMessageGeneral.setAttribute('style', 'display: none;')
|
||||
t.context.container.appendChild(errorMessageGeneral)
|
||||
|
||||
const list = document.createElement('ul')
|
||||
list.setAttribute('data-maximum', '2')
|
||||
const loadingMessage = document.createElement('li')
|
||||
list.appendChild(loadingMessage)
|
||||
t.context.container.appendChild(list)
|
||||
})
|
||||
|
||||
// TODO
|
||||
// eslint-disable-next-line ava/no-skip-test
|
||||
test.skip('#displayEvents one event', (t) => {
|
||||
const list = t.context.list
|
||||
const container = t.context.container
|
||||
const data = {
|
||||
events: {
|
||||
elements: [
|
||||
@ -45,7 +51,8 @@ test.skip('#displayEvents one event', (t) => {
|
||||
],
|
||||
},
|
||||
}
|
||||
displayEvents({ data, document, list })
|
||||
displayEvents({ data, document, container })
|
||||
const list = container.children[2]
|
||||
t.is(list.children.length, 3)
|
||||
t.is(list.children[2].childNodes[0].tagName, 'A')
|
||||
t.is(list.children[2].childNodes[0].getAttribute('href'), 'b')
|
||||
@ -56,21 +63,22 @@ test.skip('#displayEvents one event', (t) => {
|
||||
t.is(list.children[2].childNodes[4].nodeValue, 'c, d')
|
||||
})
|
||||
|
||||
test('#displayErrorMessage no children added', (t) => {
|
||||
const list = t.context.list
|
||||
displayErrorMessage({ data: '', list })
|
||||
t.is(list.children.length, 2)
|
||||
test('#displayErrorMessage no list entries shown', (t) => {
|
||||
const container = t.context.container
|
||||
const list = container.children[2]
|
||||
displayErrorMessage({ data: '', container })
|
||||
t.is(list.children.length, 0)
|
||||
})
|
||||
|
||||
test('#displayErrorMessage error message display', (t) => {
|
||||
const list = t.context.list
|
||||
displayErrorMessage({ data: '', list })
|
||||
t.is(list.children[0].style.display, 'block')
|
||||
t.is(list.children[1].style.display, 'none')
|
||||
const container = t.context.container
|
||||
displayErrorMessage({ data: '', container })
|
||||
t.is(container.children[0].style.display, 'block')
|
||||
t.is(container.children[1].style.display, 'none')
|
||||
})
|
||||
|
||||
test('#displayErrorMessage group not found error message display', (t) => {
|
||||
const list = t.context.list
|
||||
const container = t.context.container
|
||||
const data = {
|
||||
response: {
|
||||
errors: [
|
||||
@ -80,7 +88,7 @@ test('#displayErrorMessage group not found error message display', (t) => {
|
||||
],
|
||||
},
|
||||
}
|
||||
displayErrorMessage({ data, list })
|
||||
t.is(list.children[0].style.display, 'none')
|
||||
t.is(list.children[1].style.display, 'block')
|
||||
displayErrorMessage({ data, container })
|
||||
t.is(container.children[0].style.display, 'none')
|
||||
t.is(container.children[1].style.display, 'block')
|
||||
})
|
||||
|
||||
@ -1,16 +1,24 @@
|
||||
import Formatter from './formatter.js'
|
||||
import { createAnchorElement } from './html-creator.js'
|
||||
|
||||
export function displayEvents({ data, document, list }) {
|
||||
function removeLoadingMessageOrPreviousEvents(container) {
|
||||
const list = container.querySelector('ul')
|
||||
list.replaceChildren()
|
||||
}
|
||||
|
||||
export function displayEvents({ data, document, container }) {
|
||||
removeLoadingMessageOrPreviousEvents(container)
|
||||
|
||||
const isShortOffsetNameShown = SETTINGS.isShortOffsetNameShown
|
||||
const locale = SETTINGS.locale
|
||||
const maxEventsCount = list.getAttribute('data-maximum')
|
||||
const maxEventsCount = container.getAttribute('data-maximum')
|
||||
const timeZone = SETTINGS.timeZone
|
||||
|
||||
const events = data.events
|
||||
? data.events.elements
|
||||
: data.group.organizedEvents.elements
|
||||
const eventsCount = Math.min(maxEventsCount, events.length)
|
||||
const list = container.querySelector('ul')
|
||||
for (let i = 0; i < eventsCount; i++) {
|
||||
const li = document.createElement('li')
|
||||
|
||||
@ -52,7 +60,8 @@ export function displayEvents({ data, document, list }) {
|
||||
}
|
||||
}
|
||||
|
||||
export function displayErrorMessage({ data, list }) {
|
||||
export function displayErrorMessage({ data, container }) {
|
||||
removeLoadingMessageOrPreviousEvents(container)
|
||||
console.error(data)
|
||||
if (
|
||||
Object.prototype.hasOwnProperty.call(data, 'response') &&
|
||||
@ -61,8 +70,8 @@ export function displayErrorMessage({ data, list }) {
|
||||
Object.prototype.hasOwnProperty.call(data.response.errors[0], 'code') &&
|
||||
data.response.errors[0].code === 'group_not_found'
|
||||
) {
|
||||
list.children[1].style.display = 'block'
|
||||
container.children[1].style.display = 'block'
|
||||
} else {
|
||||
list.children[0].style.display = 'block'
|
||||
container.children[0].style.display = 'block'
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,17 +13,17 @@ export function loadEventLists() {
|
||||
}
|
||||
}
|
||||
|
||||
function loadEventList(list) {
|
||||
function loadEventList(container) {
|
||||
const url = SETTINGS.url + URL_SUFFIX
|
||||
const limit = parseInt(list.getAttribute('data-maximum'))
|
||||
const groupName = list.getAttribute('data-group-name')
|
||||
const limit = parseInt(container.getAttribute('data-maximum'))
|
||||
const groupName = container.getAttribute('data-group-name')
|
||||
if (groupName) {
|
||||
GraphqlWrapper.getUpcomingEventsByGroupName({ url, limit, groupName })
|
||||
.then((data) => displayEvents({ data, document, list }))
|
||||
.catch((data) => displayErrorMessage({ data, list }))
|
||||
.then((data) => displayEvents({ data, document, container }))
|
||||
.catch((data) => displayErrorMessage({ data, container }))
|
||||
} else {
|
||||
GraphqlWrapper.getUpcomingEvents({ url, limit })
|
||||
.then((data) => displayEvents({ data, document, list }))
|
||||
.catch((data) => displayErrorMessage({ data, list }))
|
||||
.then((data) => displayEvents({ data, document, container }))
|
||||
.catch((data) => displayErrorMessage({ data, container }))
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,9 +4,12 @@ if (!defined('ABSPATH')) {
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
<ul class="<?php echo esc_attr($classNamePrefix); ?>_events-list"
|
||||
<div class="<?php echo esc_attr($classNamePrefix); ?>_events-list"
|
||||
data-maximum="<?php echo esc_attr($eventsCount); ?>"
|
||||
data-group-name="<?php echo esc_attr($groupName); ?>">
|
||||
<li style="display: none;"><?php esc_html_e('The events could not be loaded!', 'connector-mobilizon'); ?></li>
|
||||
<li style="display: none;"><?php esc_html_e('The group could not be found!', 'connector-mobilizon'); ?></li>
|
||||
</ul>
|
||||
<div style="display: none;"><?php esc_html_e('The events could not be loaded!', 'connector-mobilizon'); ?></div>
|
||||
<div style="display: none;"><?php esc_html_e('The group could not be found!', 'connector-mobilizon'); ?></div>
|
||||
<ul>
|
||||
<li><?php esc_html_e('Loading...', 'connector-mobilizon'); ?></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user