wip

source/connector-mobilizon.php

@@ -59,7 +59,7 @@ final class Mobilizon_Connector {
       'timeZone' => wp_timezone_string(),
       'url' => MobilizonConnector\Settings::getUrl()
     );
-    wp_add_inline_script($scriptName, 'var MOBILIZON_CONNECTOR = ' . json_encode($settings), 'before');
+    wp_add_inline_script($scriptName, 'var MOBILIZON_CONNECTOR = ' . json_encode($settings), 'before'); // TODO remove url
   }
 
   public function register_api() {

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

@@ -1,8 +1,10 @@
 /* eslint-disable @wordpress/i18n-ellipsis */
-import { loadEventList } from '../../events-loader.js'
 import {
+  clearEventsList,
+  displayErrorMessage,
+  displayEvents,
+  hideErrorMessages,
   showLoadingIndicator,
-  hideLoadingIndicator
 } from '../../events-displayer.js'
 
 const { InspectorControls, useBlockProps } = wp.blockEditor
@@ -18,7 +20,7 @@ export default ({ attributes, setAttributes }) => {
   const blockProps = useBlockProps({
     className: NAME + '_events-list',
     'data-maximum': attributes.eventsCount,
-    'data-group-name': attributes.groupName,
+    'data-group-name': attributes.groupName, // TODO still necessary?
   })
   function reloadEventList() {
     if (timer) {
@@ -27,10 +29,9 @@ export default ({ attributes, setAttributes }) => {
     timer = setTimeout(() => {
       const container = document.getElementById(blockProps.id)
       if (container) {
-        // loadEventList(container)
-        // TODO use API instead
-        
-        // TODO not using newest values yet
+        // TODO not using newest values yet, can get out of sync
+        hideErrorMessages(container)
+        clearEventsList(container)
         showLoadingIndicator(container)
         const eventsCount = attributes.eventsCount
         const groupName = attributes.groupName
@@ -40,11 +41,11 @@ export default ({ attributes, setAttributes }) => {
         }
         fetch(url)
           .then((response) => response.text()) // TODO also handle response.ok being false
-          .then((data) => {
-            console.log(data) // TODO handle
+          .then((events) => {
+            displayEvents({ events, document, container })
           })
-          .finally(() => {
-            hideLoadingIndicator(container)
+          .catch((data) => {
+            displayErrorMessage({ data, container })
           })
       }
     }, 500)

source/front/events-displayer-test.js

@@ -40,24 +40,20 @@ test.beforeEach((t) => {
 })
 
 test('#displayEvents one event', (t) => {
-  const data = {
-    events: {
-      elements: [
-        {
-          title: 'a',
-          url: 'b',
-          beginsOn: '2021-04-15T10:30:00Z',
-          endsOn: '2021-04-15T15:30:00Z',
-          physicalAddress: {
-            description: 'c',
-            locality: 'd',
-          },
-        },
-      ],
+  const events = [
+    {
+      title: 'a',
+      url: 'b',
+      beginsOn: '2021-04-15T10:30:00Z',
+      endsOn: '2021-04-15T15:30:00Z',
+      physicalAddress: {
+        description: 'c',
+        locality: 'd',
+      },
     },
-  }
+  ]
   const container = t.context.container
-  displayEvents({ data, document, container })
+  displayEvents({ events, 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')

source/front/events-displayer.js

@@ -6,7 +6,7 @@ export function clearEventsList(container) {
   list.replaceChildren()
 }
 
-export function displayEvents({ data, document, container }) {
+export function displayEvents({ events, document, container }) {
   hideLoadingIndicator(container)
 
   const isShortOffsetNameShown =
@@ -15,9 +15,6 @@ export function displayEvents({ data, document, container }) {
   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++) {

source/front/events-loader.js

@@ -36,3 +36,5 @@ export function loadEventList(container) {
       .catch((data) => displayErrorMessage({ data, container }))
   }
 }
+
+// TODO delete file and generated file events-loader.js?