add Gutenberg events list block

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