From c4c3b11bafc19052c3785042c4da92d456b1b41e Mon Sep 17 00:00:00 2001 From: Daniel Waxweiler Date: Mon, 6 Jun 2022 12:42:49 +0200 Subject: [PATCH] improve loading indicator --- source/front/blocks/events-list/edit.js | 19 ++++++++++--------- source/front/blocks/events-list/save.js | 16 +++++++++------- source/front/events-displayer-test.js | 22 +++++++++++++++------- source/front/events-displayer.js | 22 +++++++++++++++++----- source/front/events-loader.js | 9 ++++++++- source/view/events-list.php | 9 ++++----- 6 files changed, 63 insertions(+), 34 deletions(-) diff --git a/source/front/blocks/events-list/edit.js b/source/front/blocks/events-list/edit.js index 6eca55a..4925e24 100644 --- a/source/front/blocks/events-list/edit.js +++ b/source/front/blocks/events-list/edit.js @@ -11,9 +11,9 @@ const NAME = '' export default ({ attributes, setAttributes }) => { const blockProps = useBlockProps() useEffect(() => { - reloadEventLists() + reloadEventList() }, []) - function reloadEventLists() { + function reloadEventList() { const container = document.getElementById(blockProps.id) if (container) { loadEventList(container) @@ -23,11 +23,11 @@ export default ({ attributes, setAttributes }) => { let newValue = Number(event.target.value) if (newValue < 1) newValue = 1 setAttributes({ eventsCount: newValue }) - reloadEventLists() + reloadEventList() } function updateGroupName(event) { setAttributes({ groupName: event.target.value }) - reloadEventLists() + reloadEventList() } return [ @@ -66,15 +66,16 @@ export default ({ attributes, setAttributes }) => { data-group-name={attributes.groupName} {...blockProps} > -
+
{__('The events could not be loaded!', '')}
-
+
{__('The group could not be found!', '')}
-
    -
  • {__('Loading...', '')}
    • -
+
+ {__('Loading...', '')} +
+
    , ] } diff --git a/source/front/blocks/events-list/save.js b/source/front/blocks/events-list/save.js index 7aa8b4e..6d835ff 100644 --- a/source/front/blocks/events-list/save.js +++ b/source/front/blocks/events-list/save.js @@ -5,23 +5,25 @@ const { __ } = wp.i18n const NAME = '' export default ({ attributes }) => { - const blockProps = useBlockProps.save() + const blockProps = useBlockProps.save({ + className: NAME + '_events-list', + }) return (
    -
    +
    {__('The events could not be loaded!', '')}
    -
    +
    {__('The group could not be found!', '')}
    -
      -
    • {__('Loading...', '')}
      • -
    +
    + {__('Loading...', '')} +
    +
      ) } diff --git a/source/front/events-displayer-test.js b/source/front/events-displayer-test.js index 156f7ce..331a801 100644 --- a/source/front/events-displayer-test.js +++ b/source/front/events-displayer-test.js @@ -16,18 +16,24 @@ test.before(() => { test.beforeEach((t) => { t.context.container = document.createElement('div') + t.context.container.setAttribute('data-maximum', '2') - const errorMessageGroupNotFound = document.createElement('div') - errorMessageGroupNotFound.setAttribute('style', 'display: none;') - t.context.container.appendChild(errorMessageGroupNotFound) const errorMessageGeneral = document.createElement('div') + errorMessageGeneral.setAttribute('class', 'general-error') errorMessageGeneral.setAttribute('style', 'display: none;') t.context.container.appendChild(errorMessageGeneral) + const errorMessageGroupNotFound = document.createElement('div') + errorMessageGroupNotFound.setAttribute('class', 'group-not-found') + errorMessageGroupNotFound.setAttribute('style', 'display: none;') + t.context.container.appendChild(errorMessageGroupNotFound) + + const loadingIndicator = document.createElement('div') + loadingIndicator.setAttribute('class', 'loading-indicator') + loadingIndicator.setAttribute('style', 'display: none;') + t.context.container.appendChild(loadingIndicator) + const list = document.createElement('ul') - list.setAttribute('data-maximum', '2') - const loadingMessage = document.createElement('li') - list.appendChild(loadingMessage) t.context.container.appendChild(list) }) @@ -65,7 +71,7 @@ test.skip('#displayEvents one event', (t) => { test('#displayErrorMessage no list entries shown', (t) => { const container = t.context.container - const list = container.children[2] + const list = container.children[3] displayErrorMessage({ data: '', container }) t.is(list.children.length, 0) }) @@ -75,6 +81,7 @@ test('#displayErrorMessage error message display', (t) => { displayErrorMessage({ data: '', container }) t.is(container.children[0].style.display, 'block') t.is(container.children[1].style.display, 'none') + t.is(container.children[2].style.display, 'none') }) test('#displayErrorMessage group not found error message display', (t) => { @@ -91,4 +98,5 @@ test('#displayErrorMessage group not found error message display', (t) => { displayErrorMessage({ data, container }) t.is(container.children[0].style.display, 'none') t.is(container.children[1].style.display, 'block') + t.is(container.children[2].style.display, 'none') }) diff --git a/source/front/events-displayer.js b/source/front/events-displayer.js index 7f70835..7ece706 100644 --- a/source/front/events-displayer.js +++ b/source/front/events-displayer.js @@ -1,13 +1,13 @@ import Formatter from './formatter.js' import { createAnchorElement } from './html-creator.js' -function removeLoadingMessageOrPreviousEvents(container) { +export function clearEventsList(container) { const list = container.querySelector('ul') list.replaceChildren() } export function displayEvents({ data, document, container }) { - removeLoadingMessageOrPreviousEvents(container) + hideLoadingIndicator(container) const isShortOffsetNameShown = SETTINGS.isShortOffsetNameShown const locale = SETTINGS.locale @@ -61,7 +61,7 @@ export function displayEvents({ data, document, container }) { } export function displayErrorMessage({ data, container }) { - removeLoadingMessageOrPreviousEvents(container) + hideLoadingIndicator(container) console.error(data) if ( Object.prototype.hasOwnProperty.call(data, 'response') && @@ -70,8 +70,20 @@ export function displayErrorMessage({ data, container }) { Object.prototype.hasOwnProperty.call(data.response.errors[0], 'code') && data.response.errors[0].code === 'group_not_found' ) { - container.children[1].style.display = 'block' + const message = container.querySelector('.group-not-found') + message.style.display = 'block' } else { - container.children[0].style.display = 'block' + const message = container.querySelector('.general-error') + message.style.display = 'block' } } + +export function showLoadingIndicator(container) { + const indicator = container.querySelector('.loading-indicator') + indicator.style.display = 'block' +} + +function hideLoadingIndicator(container) { + const indicator = container.querySelector('.loading-indicator') + indicator.style.display = 'none' +} diff --git a/source/front/events-loader.js b/source/front/events-loader.js index 5053572..dc2311c 100644 --- a/source/front/events-loader.js +++ b/source/front/events-loader.js @@ -1,4 +1,9 @@ -import { displayEvents, displayErrorMessage } from './events-displayer.js' +import { + clearEventsList, + displayEvents, + displayErrorMessage, + showLoadingIndicator, +} from './events-displayer.js' import * as GraphqlWrapper from './graphql-wrapper.js' const NAME = '' @@ -17,6 +22,8 @@ export function loadEventList(container) { const url = SETTINGS.url + URL_SUFFIX const limit = parseInt(container.getAttribute('data-maximum')) const groupName = container.getAttribute('data-group-name') + clearEventsList(container) + showLoadingIndicator(container) if (groupName) { GraphqlWrapper.getUpcomingEventsByGroupName({ url, limit, groupName }) .then((data) => displayEvents({ data, document, container })) diff --git a/source/view/events-list.php b/source/view/events-list.php index 957ce03..f8700f5 100644 --- a/source/view/events-list.php +++ b/source/view/events-list.php @@ -7,9 +7,8 @@ if (!defined('ABSPATH')) {
      -
      -
      -
        -
        • -
      + + + +