Mobilizon/connector-wordpress
1
0
Fork 0
mirror of https://github.com/dwaxweiler/connector-mobilizon synced 2025-03-12 17:30:17 +01:00
Code Issues Releases Wiki Activity

use loading indicator

Browse Source
This commit is contained in:
Daniel Waxweiler 2022-06-05 21:22:34 +02:00
parent 513ee84d48
commit b3e9034ada
6 changed files with 78 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
source/front/blocks/events-list/edit.js
View File

@ -1,3 +1,4 @@
/* eslint-disable @wordpress/i18n-ellipsis */
import { loadEventLists } from '../../events-loader.js' import { loadEventLists } from '../../events-loader.js'
const { InspectorControls } = wp.blockEditor const { InspectorControls } = wp.blockEditor
@ -55,17 +56,20 @@ export default ({ attributes, setAttributes }) => {
/> />
</PanelBody> </PanelBody>
</InspectorControls>, </InspectorControls>,
<ul <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}
> >
<li style={{ display: 'none' }}> <div style={{ display: 'none' }}>
{__('The events could not be loaded!', '<wordpress-name>')} {__('The events could not be loaded!', '<wordpress-name>')}
</li> </div>
<li style={{ display: 'none' }}> <div style={{ display: 'none' }}>
{__('The group could not be found!', '<wordpress-name>')} {__('The group could not be found!', '<wordpress-name>')}
</li> </div>
</ul>, <ul>
<li>{__('Loading...', '<wordpress-name>')}</li>
</ul>
</div>,
] ]
} }

14
source/front/blocks/events-list/save.js
View File

@ -1,20 +1,24 @@
/* eslint-disable @wordpress/i18n-ellipsis */
const { __ } = wp.i18n const { __ } = wp.i18n
const NAME = '<wordpress-name>' const NAME = '<wordpress-name>'
export default ({ attributes }) => { export default ({ attributes }) => {
return ( return (
<ul <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}
> >
<li style="display: none;"> <div style="display: none;">
{__('The events could not be loaded!', '<wordpress-name>')} {__('The events could not be loaded!', '<wordpress-name>')}
</li> </div>
<li style="display: none;"> <div style="display: none;">
{__('The group could not be found!', '<wordpress-name>')} {__('The group could not be found!', '<wordpress-name>')}
</li> </div>
<ul>
<li>{__('Loading...', '<wordpress-name>')}</li>
</ul> </ul>
</div>
) )
} }

52
source/front/events-displayer-test.js
View File

@ -15,20 +15,26 @@ test.before(() => {
}) })
test.beforeEach((t) => { test.beforeEach((t) => {
t.context.list = document.createElement('ul') t.context.container = document.createElement('div')
t.context.list.setAttribute('data-maximum', '2')
const listElement = document.createElement('li') const errorMessageGroupNotFound = document.createElement('div')
listElement.setAttribute('style', 'display: none;') errorMessageGroupNotFound.setAttribute('style', 'display: none;')
t.context.list.appendChild(listElement) t.context.container.appendChild(errorMessageGroupNotFound)
const listElement2 = document.createElement('li') const errorMessageGeneral = document.createElement('div')
listElement2.setAttribute('style', 'display: none;') errorMessageGeneral.setAttribute('style', 'display: none;')
t.context.list.appendChild(listElement2) 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 // TODO
// eslint-disable-next-line ava/no-skip-test // eslint-disable-next-line ava/no-skip-test
test.skip('#displayEvents one event', (t) => { test.skip('#displayEvents one event', (t) => {
const list = t.context.list const container = t.context.container
const data = { const data = {
events: { events: {
elements: [ 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.length, 3)
t.is(list.children[2].childNodes[0].tagName, 'A') t.is(list.children[2].childNodes[0].tagName, 'A')
t.is(list.children[2].childNodes[0].getAttribute('href'), 'b') 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') t.is(list.children[2].childNodes[4].nodeValue, 'c, d')
}) })
test('#displayErrorMessage no children added', (t) => { test('#displayErrorMessage no list entries shown', (t) => {
const list = t.context.list const container = t.context.container
displayErrorMessage({ data: '', list }) const list = container.children[2]
t.is(list.children.length, 2) displayErrorMessage({ data: '', container })
t.is(list.children.length, 0)
}) })
test('#displayErrorMessage error message display', (t) => { test('#displayErrorMessage error message display', (t) => {
const list = t.context.list const container = t.context.container
displayErrorMessage({ data: '', list }) displayErrorMessage({ data: '', container })
t.is(list.children[0].style.display, 'block') t.is(container.children[0].style.display, 'block')
t.is(list.children[1].style.display, 'none') t.is(container.children[1].style.display, 'none')
}) })
test('#displayErrorMessage group not found error message display', (t) => { test('#displayErrorMessage group not found error message display', (t) => {
const list = t.context.list const container = t.context.container
const data = { const data = {
response: { response: {
errors: [ errors: [
@ -80,7 +88,7 @@ test('#displayErrorMessage group not found error message display', (t) => {
], ],
}, },
} }
displayErrorMessage({ data, list }) displayErrorMessage({ data, container })
t.is(list.children[0].style.display, 'none') t.is(container.children[0].style.display, 'none')
t.is(list.children[1].style.display, 'block') t.is(container.children[1].style.display, 'block')
}) })

19
source/front/events-displayer.js
View File

@ -1,16 +1,24 @@
import Formatter from './formatter.js' import Formatter from './formatter.js'
import { createAnchorElement } from './html-creator.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 isShortOffsetNameShown = SETTINGS.isShortOffsetNameShown
const locale = SETTINGS.locale const locale = SETTINGS.locale
const maxEventsCount = list.getAttribute('data-maximum') const maxEventsCount = container.getAttribute('data-maximum')
const timeZone = SETTINGS.timeZone const timeZone = SETTINGS.timeZone
const events = data.events const events = data.events
? data.events.elements ? data.events.elements
: data.group.organizedEvents.elements : data.group.organizedEvents.elements
const eventsCount = Math.min(maxEventsCount, events.length) const eventsCount = Math.min(maxEventsCount, events.length)
const list = container.querySelector('ul')
for (let i = 0; i < eventsCount; i++) { for (let i = 0; i < eventsCount; i++) {
const li = document.createElement('li') 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) console.error(data)
if ( if (
Object.prototype.hasOwnProperty.call(data, 'response') && Object.prototype.hasOwnProperty.call(data, 'response') &&
@ -61,8 +70,8 @@ export function displayErrorMessage({ data, list }) {
Object.prototype.hasOwnProperty.call(data.response.errors[0], 'code') && Object.prototype.hasOwnProperty.call(data.response.errors[0], 'code') &&
data.response.errors[0].code === 'group_not_found' data.response.errors[0].code === 'group_not_found'
) { ) {
list.children[1].style.display = 'block' container.children[1].style.display = 'block'
} else { } else {
list.children[0].style.display = 'block' container.children[0].style.display = 'block'
} }
} }

14
source/front/events-loader.js
View File

@ -13,17 +13,17 @@ export function loadEventLists() {
} }
} }
function loadEventList(list) { function loadEventList(container) {
const url = SETTINGS.url + URL_SUFFIX const url = SETTINGS.url + URL_SUFFIX
const limit = parseInt(list.getAttribute('data-maximum')) const limit = parseInt(container.getAttribute('data-maximum'))
const groupName = list.getAttribute('data-group-name') const groupName = container.getAttribute('data-group-name')
if (groupName) { if (groupName) {
GraphqlWrapper.getUpcomingEventsByGroupName({ url, limit, groupName }) GraphqlWrapper.getUpcomingEventsByGroupName({ url, limit, groupName })
.then((data) => displayEvents({ data, document, list })) .then((data) => displayEvents({ data, document, container }))
.catch((data) => displayErrorMessage({ data, list })) .catch((data) => displayErrorMessage({ data, container }))
} else { } else {
GraphqlWrapper.getUpcomingEvents({ url, limit }) GraphqlWrapper.getUpcomingEvents({ url, limit })
.then((data) => displayEvents({ data, document, list })) .then((data) => displayEvents({ data, document, container }))
.catch((data) => displayErrorMessage({ data, list })) .catch((data) => displayErrorMessage({ data, container }))
} }
} }

9
source/view/events-list.php
View File

@ -4,9 +4,12 @@ if (!defined('ABSPATH')) {
exit; 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-maximum="<?php echo esc_attr($eventsCount); ?>"
data-group-name="<?php echo esc_attr($groupName); ?>"> 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> <div style="display: none;"><?php esc_html_e('The events could not be loaded!', 'connector-mobilizon'); ?></div>
<li style="display: none;"><?php esc_html_e('The group could not be found!', 'connector-mobilizon'); ?></li> <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> </ul>
</div>