move requests to backend (#18)

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

@@ -1,75 +1,101 @@
 /* eslint-disable @wordpress/i18n-ellipsis */
-import { loadEventList } from '../../events-loader.js'
+import {
+  clearEventsList,
+  displayErrorMessage,
+  displayEvents,
+  hideErrorMessages,
+  showLoadingIndicator,
+} from '../../events-displayer.js'
 
 const { InspectorControls, useBlockProps } = wp.blockEditor
-const { PanelBody } = wp.components
+const { Panel, PanelBody } = wp.components
 const { useEffect } = wp.element
 const { __ } = wp.i18n
 
 const NAME = '<wordpress-name>'
 
-let timer
-
 export default ({ attributes, setAttributes }) => {
+  let timer
   const blockProps = useBlockProps({
     className: NAME + '_events-list',
-    'data-maximum': attributes.eventsCount,
-    'data-group-name': attributes.groupName,
   })
-  function reloadEventList() {
+  function reloadEventList(eventsCount, groupName) {
     if (timer) {
       clearTimeout(timer)
     }
-    timer = setTimeout(() => {
+    timer = setTimeout(async () => {
       const container = document.getElementById(blockProps.id)
       if (container) {
-        loadEventList(container)
+        hideErrorMessages(container)
+        clearEventsList(container)
+        showLoadingIndicator(container)
+        let url = `/wp-json/connector-mobilizon/v1/events?eventsCount=${eventsCount}`
+        if (groupName) {
+          url += `&groupName=${groupName}`
+        }
+        await fetch(url)
+          .then((response) => response.text())
+          .then((data) => {
+            const events = JSON.parse(data)
+            displayEvents({
+              events,
+              document,
+              container,
+              maxEventsCount: eventsCount,
+            })
+          })
+          .catch((data) => {
+            displayErrorMessage({ data, container })
+          })
       }
     }, 500)
   }
   useEffect(() => {
-    reloadEventList()
+    reloadEventList(attributes.eventsCount, attributes.groupName)
   }, [])
   function updateEventsCount(event) {
     let newValue = Number(event.target.value)
     if (newValue < 1) newValue = 1
     setAttributes({ eventsCount: newValue })
-    reloadEventList()
+    reloadEventList(newValue, attributes.groupName)
   }
   function updateGroupName(event) {
-    setAttributes({ groupName: event.target.value })
-    reloadEventList()
+    const newValue = event.target.value
+    setAttributes({ groupName: newValue })
+    reloadEventList(attributes.eventsCount, newValue)
   }
   return [
     <InspectorControls>
-      <PanelBody title={__('Events List Settings', '<wordpress-name>')}>
-        <label
-          className="components-base-control__label"
-          htmlFor={NAME + '_events-count'}
-        >
-          {__('Number of events to show', '<wordpress-name>')}
-        </label>
-        <input
-          className="components-text-control__input"
-          type="number"
-          value={attributes.eventsCount}
-          onChange={updateEventsCount}
-          id={NAME + '_events-count'}
-        />
-        <label
-          className="components-base-control__label"
-          htmlFor={NAME + '_group-name'}
-        >
-          {__('Group name (optional)', '<wordpress-name>')}
-        </label>
-        <input
-          className="components-text-control__input"
-          type="text"
-          value={attributes.groupName}
-          onChange={updateGroupName}
-          id={NAME + '_group-name'}
-        />
-      </PanelBody>
+      <Panel>
+        <PanelBody title={__('Events List Settings', '<wordpress-name>')}>
+          <label
+            className="components-base-control__label"
+            htmlFor={NAME + '_events-count'}
+          >
+            {__('Number of events to show', '<wordpress-name>')}
+          </label>
+          <input
+            className="components-text-control__input"
+            type="number"
+            value={attributes.eventsCount}
+            onChange={updateEventsCount}
+            id={NAME + '_events-count'}
+          />
+          <label
+            className="components-base-control__label"
+            htmlFor={NAME + '_group-name'}
+          >
+            {__('Group name (optional)', '<wordpress-name>')}
+          </label>
+          <input
+            className="components-text-control__input"
+            type="text"
+            value={attributes.groupName}
+            onChange={updateGroupName}
+            id={NAME + '_group-name'}
+          />
+        </PanelBody>
+      </Panel>
     </InspectorControls>,
     <div {...blockProps}>
       <div className="general-error" style={{ display: 'none' }}>

source/front/events-displayer-test.js

@@ -18,7 +18,6 @@ test.before(() => {
 
 test.beforeEach((t) => {
   t.context.container = document.createElement('div')
-  t.context.container.setAttribute('data-maximum', '2')
 
   const errorMessageGeneral = document.createElement('div')
   errorMessageGeneral.setAttribute('class', 'general-error')
@@ -40,24 +39,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, maxEventsCount: 2 })
   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,18 +6,14 @@ export function clearEventsList(container) {
   list.replaceChildren()
 }
 
-export function displayEvents({ data, document, container }) {
+export function displayEvents({ events, document, container, maxEventsCount }) {
   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++) {

source/front/events-loader.js

@@ -1,38 +0,0 @@
-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', loadEventLists)
-
-function loadEventLists() {
-  const eventLists = document.getElementsByClassName(NAME + '_events-list')
-  for (const list of eventLists) {
-    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 }))
-  }
-}