From b3e9034adacb50831082b21771ad3186519ebc85 Mon Sep 17 00:00:00 2001 From: Daniel Waxweiler Date: Sun, 5 Jun 2022 21:22:34 +0200 Subject: [PATCH] use loading indicator --- source/front/blocks/events-list/edit.js | 16 +++++--- source/front/blocks/events-list/save.js | 16 +++++--- source/front/events-displayer-test.js | 52 ++++++++++++++----------- source/front/events-displayer.js | 19 ++++++--- source/front/events-loader.js | 14 +++---- source/view/events-list.php | 11 ++++-- 6 files changed, 78 insertions(+), 50 deletions(-) diff --git a/source/front/blocks/events-list/edit.js b/source/front/blocks/events-list/edit.js index a8afae0..863392a 100644 --- a/source/front/blocks/events-list/edit.js +++ b/source/front/blocks/events-list/edit.js @@ -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 }) => { /> , - , + + + , ] } diff --git a/source/front/blocks/events-list/save.js b/source/front/blocks/events-list/save.js index 1f003ba..f6e1702 100644 --- a/source/front/blocks/events-list/save.js +++ b/source/front/blocks/events-list/save.js @@ -1,20 +1,24 @@ +/* eslint-disable @wordpress/i18n-ellipsis */ const { __ } = wp.i18n const NAME = '' export default ({ attributes }) => { return ( - + + + ) } diff --git a/source/front/events-displayer-test.js b/source/front/events-displayer-test.js index f500171..156f7ce 100644 --- a/source/front/events-displayer-test.js +++ b/source/front/events-displayer-test.js @@ -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') }) diff --git a/source/front/events-displayer.js b/source/front/events-displayer.js index c86b64b..7f70835 100644 --- a/source/front/events-displayer.js +++ b/source/front/events-displayer.js @@ -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' } } diff --git a/source/front/events-loader.js b/source/front/events-loader.js index e69b494..14f237a 100644 --- a/source/front/events-loader.js +++ b/source/front/events-loader.js @@ -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 })) } } diff --git a/source/view/events-list.php b/source/view/events-list.php index ccb32d6..957ce03 100644 --- a/source/view/events-list.php +++ b/source/view/events-list.php @@ -4,9 +4,12 @@ if (!defined('ABSPATH')) { exit; } ?> - +
+
+ +