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