fix using changed attribute, use Panel element

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

@@ -8,7 +8,7 @@ import {
 } 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
 
@@ -16,11 +16,10 @@ const NAME = '<wordpress-name>'
 
 export default ({ attributes, setAttributes }) => {
   let timer
-  const { eventsCount, groupName } = attributes
   const blockProps = useBlockProps({
     className: NAME + '_events-list',
   })
-  function reloadEventList() {
+  function reloadEventList(eventsCount, groupName) {
     if (timer) {
       clearTimeout(timer)
     }
@@ -35,12 +34,7 @@ export default ({ attributes, setAttributes }) => {
           url += `&groupName=${groupName}`
         }
         await fetch(url)
-          .then((response) => {
-            if (!response.ok) {
-              return Promise.reject('Network response was not OK.')
-            }
-            return response.text()
-          })
+          .then((response) => response.text())
           .then((data) => {
             const events = JSON.parse(data)
             displayEvents({
@@ -57,51 +51,51 @@ export default ({ attributes, setAttributes }) => {
     }, 500)
   }
   useEffect(() => {
-    reloadEventList()
+    reloadEventList(attributes.eventsCount, attributes.groupName)
   }, [])
   function updateEventsCount(event) {
-    // console.log('new value: ', event.target.value) // TODO
     let newValue = Number(event.target.value)
     if (newValue < 1) newValue = 1
     setAttributes({ eventsCount: newValue })
-    reloadEventList()
+    reloadEventList(newValue, attributes.groupName)
   }
   function updateGroupName(event) {
-    // console.log('new value: ', event.target.value) // TODO
-    // TODO not triggered on pasting only
-    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={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={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' }}>