Mobilizon
/
connector-wordpress
mirror of https://github.com/dwaxweiler/connector-mobilizon
1
0
Fork 0
Code Issues Releases Wiki Activity

use loading indicator

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'
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>,
]
}

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

@ -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>
)
}

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

@ -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')
})

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

@ -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'
}
}

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 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 }))
}
}

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

@ -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>