add Gutenberg events list block

source/front/block-events-loader.js

@@ -1 +1 @@
-import './blocks/events-list'
+import './blocks/events-list/index.js'

source/front/blocks/events-list/edit.js

@@ -1,15 +1,44 @@
-const { InspectorControls } = wp.blockEditor
+/* eslint-disable @wordpress/i18n-ellipsis */
+import { loadEventList } from '../../events-loader.js'
+
+const { InspectorControls, useBlockProps } = wp.blockEditor
 const { PanelBody } = wp.components
+const { useEffect } = wp.element
 const { __ } = wp.i18n
 
+const NAME = '<wordpress-name>'
+
+let timer
+
 export default ({ attributes, setAttributes }) => {
+  const blockProps = useBlockProps({
+    className: NAME + '_events-list',
+    'data-maximum': attributes.eventsCount,
+    'data-group-name': attributes.groupName,
+  })
+  function reloadEventList() {
+    if (timer) {
+      clearTimeout(timer)
+    }
+    timer = setTimeout(() => {
+      const container = document.getElementById(blockProps.id)
+      if (container) {
+        loadEventList(container)
+      }
+    }, 500)
+  }
+  useEffect(() => {
+    reloadEventList()
+  }, [])
   function updateEventsCount(event) {
     let newValue = Number(event.target.value)
     if (newValue < 1) newValue = 1
     setAttributes({ eventsCount: newValue })
+    reloadEventList()
   }
   function updateGroupName(event) {
     setAttributes({ groupName: event.target.value })
+    reloadEventList()
   }
   return [
     <InspectorControls>
@@ -42,12 +71,17 @@ export default ({ attributes, setAttributes }) => {
         />
       </PanelBody>
     </InspectorControls>,
-    <ul>
-      {[...Array(attributes.eventsCount)].map((_, i) => (
-        <li className="busterCards" key={i}>
-          {__('Event', '<wordpress-name>')} {i}
-        </li>
-      ))}
-    </ul>,
+    <div {...blockProps}>
+      <div className="general-error" style={{ display: 'none' }}>
+        {__('The events could not be loaded!', '<wordpress-name>')}
+      </div>
+      <div className="group-not-found" style={{ display: 'none' }}>
+        {__('The group could not be found!', '<wordpress-name>')}
+      </div>
+      <div className="loading-indicator" style={{ display: 'none' }}>
+        {__('Loading...', '<wordpress-name>')}
+      </div>
+      <ul style={{ 'list-style-type': 'none', 'padding-left': 0 }}></ul>
+    </div>,
   ]
 }

source/front/blocks/events-list/index.js

@@ -1,31 +1,7 @@
-import edit from './edit'
-import save from './save'
+import edit from './edit.js'
 
 const { registerBlockType } = wp.blocks
-const { __ } = wp.i18n
 
 const NAME = '<wordpress-name>'
 
-registerBlockType(NAME + '/events-list', {
-  title: __('Events List', '<wordpress-name>'),
-  description: __(
-    'A list of the upcoming events of the connected Mobilizon instance.',
-    '<wordpress-name>'
-  ),
-  icon: 'list-view',
-  category: 'widgets',
-  attributes: {
-    eventsCount: {
-      type: 'number',
-      default: 3,
-    },
-    groupName: {
-      type: 'string',
-    },
-  },
-  supports: {
-    html: false,
-  },
-  edit,
-  save,
-})
+registerBlockType(NAME + '/events-list', { edit })

source/front/blocks/events-list/save.js

@@ -1,25 +0,0 @@
-const { __ } = wp.i18n
-
-const NAME = '<wordpress-name>'
-
-const URL = 'https://mobilizon.fr' // TODO
-const LOCALE = 'en-GB' // TODO
-const TIMEZONE = 'Europe/Rome' // TODO
-const isShortOffsetNameShown = true // eslint-disable-line no-unused-vars
-
-export default ({ attributes }) => {
-  return (
-    <ul
-      className={NAME + '_events-list'}
-      data-url={URL}
-      data-locale={LOCALE}
-      data-maximum={attributes.eventsCount}
-      data-group-name={attributes.groupName}
-      data-time-zone={TIMEZONE}
-    >
-      <li style="display: none;">
-        {__('The events could not be loaded!', '<wordpress-name>')}
-      </li>
-    </ul>
-  )
-}

source/front/events-displayer-test.js

@@ -1,29 +1,45 @@
 import test from 'ava'
-import { JSDOM } from 'jsdom'
+import browserEnv from 'browser-env'
 
-import { displayEvents, displayErrorMessage } from './events-displayer.js'
-
-let document
+import {
+  displayEvents,
+  displayErrorMessage,
+  hideErrorMessages,
+  showLoadingIndicator,
+} from './events-displayer.js'
 
 test.before(() => {
-  document = new JSDOM().window.document
+  browserEnv()
+  window.MOBILIZON_CONNECTOR = {
+    locale: 'en-GB',
+    timeZone: 'utc',
+  }
 })
 
 test.beforeEach((t) => {
-  t.context.list = document.createElement('ul')
-  t.context.list.setAttribute('data-locale', 'en-GB')
-  t.context.list.setAttribute('data-maximum', '2')
-  t.context.list.setAttribute('data-time-zone', 'utc')
-  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')
+  t.context.container.setAttribute('data-maximum', '2')
+
+  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')
+  t.context.container.appendChild(list)
 })
 
 test('#displayEvents one event', (t) => {
-  const list = t.context.list
   const data = {
     events: {
       elements: [
@@ -40,32 +56,35 @@ test('#displayEvents one event', (t) => {
       ],
     },
   }
-  displayEvents({ data, document, list })
-  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')
-  t.is(list.children[2].childNodes[0].childNodes[0].nodeValue, 'a')
-  t.is(list.children[2].childNodes[1].tagName, 'BR')
-  t.is(list.children[2].childNodes[2].nodeValue, '15/04/2021 10:30 - 15:30')
-  t.is(list.children[2].childNodes[3].tagName, 'BR')
-  t.is(list.children[2].childNodes[4].nodeValue, 'c, d')
+  const container = t.context.container
+  displayEvents({ data, document, container })
+  const list = container.querySelector('ul')
+  t.is(list.children[0].childNodes[0].tagName, 'A')
+  t.is(list.children[0].childNodes[0].getAttribute('href'), 'b')
+  t.is(list.children[0].childNodes[0].childNodes[0].nodeValue, 'a')
+  t.is(list.children[0].childNodes[1].tagName, 'BR')
+  t.is(list.children[0].childNodes[2].nodeValue, '15/04/2021 10:30 - 15:30')
+  t.is(list.children[0].childNodes[3].tagName, 'BR')
+  t.is(list.children[0].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
+  displayErrorMessage({ data: '', container })
+  const list = container.querySelector('ul')
+  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')
+test('#displayErrorMessage general error message display', (t) => {
+  const container = t.context.container
+  displayErrorMessage({ data: '', container })
+  t.is(container.querySelector('.general-error').style.display, 'block')
+  t.is(container.querySelector('.group-not-found').style.display, 'none')
+  t.is(container.querySelector('.loading-indicator').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: [
@@ -75,7 +94,29 @@ 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.querySelector('.general-error').style.display, 'none')
+  t.is(container.querySelector('.group-not-found').style.display, 'block')
+  t.is(container.querySelector('.loading-indicator').style.display, 'none')
+})
+
+test('#showLoadingIndicator remove events', (t) => {
+  const container = t.context.container
+  const loadingIndicator = container.querySelector('.loading-indicator')
+  t.is(loadingIndicator.style.display, 'none')
+  showLoadingIndicator(container)
+  t.is(loadingIndicator.style.display, 'block')
+})
+
+test('#hideErrorMessages remove events', (t) => {
+  const container = t.context.container
+  const generalErrorMessage = container.querySelector('.general-error')
+  const groupNotFoundErrorMessage = container.querySelector('.group-not-found')
+  generalErrorMessage.style.display = 'block'
+  groupNotFoundErrorMessage.style.display = 'block'
+  t.is(generalErrorMessage.style.display, 'block')
+  t.is(groupNotFoundErrorMessage.style.display, 'block')
+  hideErrorMessages(container)
+  t.is(generalErrorMessage.style.display, 'none')
+  t.is(groupNotFoundErrorMessage.style.display, 'none')
 })

source/front/events-displayer.js

@@ -1,17 +1,25 @@
 import Formatter from './formatter.js'
 import { createAnchorElement } from './html-creator.js'
 
-export function displayEvents({ data, document, list }) {
-  const locale = list.getAttribute('data-locale')
-  const maxEventsCount = list.getAttribute('data-maximum')
-  const timeZone = list.getAttribute('data-time-zone')
-  const isShortOffsetNameShown = list.hasAttribute(
-    'data-is-short-offset-name-shown'
-  )
+export function clearEventsList(container) {
+  const list = container.querySelector('ul')
+  list.replaceChildren()
+}
+
+export function displayEvents({ data, document, container }) {
+  hideLoadingIndicator(container)
+
+  const isShortOffsetNameShown =
+    window.MOBILIZON_CONNECTOR.isShortOffsetNameShown
+  const locale = window.MOBILIZON_CONNECTOR.locale
+  const maxEventsCount = container.getAttribute('data-maximum')
+  const timeZone = window.MOBILIZON_CONNECTOR.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')
 
@@ -53,8 +61,8 @@ export function displayEvents({ data, document, list }) {
   }
 }
 
-export function displayErrorMessage({ data, list }) {
-  console.error(data)
+export function displayErrorMessage({ data, container }) {
+  hideLoadingIndicator(container)
   if (
     Object.prototype.hasOwnProperty.call(data, 'response') &&
     Object.prototype.hasOwnProperty.call(data.response, 'errors') &&
@@ -62,8 +70,26 @@ 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'
+    const message = container.querySelector('.group-not-found')
+    message.style.display = 'block'
   } else {
-    list.children[0].style.display = 'block'
+    const message = container.querySelector('.general-error')
+    message.style.display = 'block'
+    console.error(data)
   }
 }
+
+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'
+}
+
+export function hideErrorMessages(container) {
+  container.querySelector('.group-not-found').style.display = 'none'
+  container.querySelector('.general-error').style.display = 'none'
+}

source/front/events-loader.js

@@ -1,22 +1,38 @@
-import { displayEvents, displayErrorMessage } from './events-displayer.js'
+import {
+  clearEventsList,
+  displayEvents,
+  displayErrorMessage,
+  hideErrorMessages,
+  showLoadingIndicator,
+} from './events-displayer.js'
 import * as GraphqlWrapper from './graphql-wrapper.js'
 
 const NAME = '<wordpress-name>'
+const URL_SUFFIX = '/api'
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', loadEventLists)
+
+function loadEventLists() {
   const eventLists = document.getElementsByClassName(NAME + '_events-list')
   for (const list of eventLists) {
-    const url = list.getAttribute('data-url') + '/api'
-    const limit = parseInt(list.getAttribute('data-maximum'))
-    const groupName = list.getAttribute('data-group-name')
-    if (groupName) {
-      GraphqlWrapper.getUpcomingEventsByGroupName({ url, limit, groupName })
-        .then((data) => displayEvents({ data, document, list }))
-        .catch((data) => displayErrorMessage({ data, list }))
-    } else {
-      GraphqlWrapper.getUpcomingEvents({ url, limit })
-        .then((data) => displayEvents({ data, document, list }))
-        .catch((data) => displayErrorMessage({ data, list }))
-    }
+    loadEventList(list)
   }
-})
+}
+
+export function loadEventList(container) {
+  const url = MOBILIZON_CONNECTOR.url + URL_SUFFIX
+  const limit = parseInt(container.getAttribute('data-maximum'))
+  const groupName = container.getAttribute('data-group-name')
+  hideErrorMessages(container)
+  clearEventsList(container)
+  showLoadingIndicator(container)
+  if (groupName) {
+    GraphqlWrapper.getUpcomingEventsByGroupName({ url, limit, groupName })
+      .then((data) => displayEvents({ data, document, container }))
+      .catch((data) => displayErrorMessage({ data, container }))
+  } else {
+    GraphqlWrapper.getUpcomingEvents({ url, limit })
+      .then((data) => displayEvents({ data, document, container }))
+      .catch((data) => displayErrorMessage({ data, container }))
+  }
+}

source/front/html-creator-test.js

@@ -1,12 +1,10 @@
 import test from 'ava'
-import { JSDOM } from 'jsdom'
+import browserEnv from 'browser-env'
 
 import { createAnchorElement } from './html-creator.js'
 
-let document
-
 test.beforeEach(() => {
-  document = new JSDOM().window.document
+  browserEnv()
 })
 
 test('#createAnchorElement usual parameters', (t) => {