simplify handling
This commit is contained in:
parent
53231ee0fe
commit
208d2de4c1
|
@ -17,10 +17,9 @@ const NAME = '<wordpress-name>'
|
||||||
let timer
|
let timer
|
||||||
|
|
||||||
export default ({ attributes, setAttributes }) => {
|
export default ({ attributes, setAttributes }) => {
|
||||||
|
const { eventsCount, groupName } = attributes
|
||||||
const blockProps = useBlockProps({
|
const blockProps = useBlockProps({
|
||||||
className: NAME + '_events-list',
|
className: NAME + '_events-list',
|
||||||
'data-maximum': attributes.eventsCount,
|
|
||||||
'data-group-name': attributes.groupName, // TODO still necessary?
|
|
||||||
})
|
})
|
||||||
function reloadEventList() {
|
function reloadEventList() {
|
||||||
if (timer) {
|
if (timer) {
|
||||||
|
@ -33,8 +32,6 @@ export default ({ attributes, setAttributes }) => {
|
||||||
hideErrorMessages(container)
|
hideErrorMessages(container)
|
||||||
clearEventsList(container)
|
clearEventsList(container)
|
||||||
showLoadingIndicator(container)
|
showLoadingIndicator(container)
|
||||||
const eventsCount = attributes.eventsCount
|
|
||||||
const groupName = attributes.groupName
|
|
||||||
let url = `/wp-json/connector-mobilizon/v1/events?eventsCount=${eventsCount}`
|
let url = `/wp-json/connector-mobilizon/v1/events?eventsCount=${eventsCount}`
|
||||||
if (groupName) {
|
if (groupName) {
|
||||||
url += `&groupName=${groupName}`
|
url += `&groupName=${groupName}`
|
||||||
|
@ -43,7 +40,12 @@ export default ({ attributes, setAttributes }) => {
|
||||||
.then((response) => response.text()) // TODO also handle response.ok being false
|
.then((response) => response.text()) // TODO also handle response.ok being false
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
const events = JSON.parse(data)
|
const events = JSON.parse(data)
|
||||||
displayEvents({ events, document, container })
|
displayEvents({
|
||||||
|
events,
|
||||||
|
document,
|
||||||
|
container,
|
||||||
|
maxEventsCount: eventsCount,
|
||||||
|
})
|
||||||
})
|
})
|
||||||
.catch((data) => {
|
.catch((data) => {
|
||||||
displayErrorMessage({ data, container })
|
displayErrorMessage({ data, container })
|
||||||
|
@ -55,12 +57,14 @@ export default ({ attributes, setAttributes }) => {
|
||||||
reloadEventList()
|
reloadEventList()
|
||||||
}, [])
|
}, [])
|
||||||
function updateEventsCount(event) {
|
function updateEventsCount(event) {
|
||||||
|
// console.log('new value: ', event.target.value) // TODO
|
||||||
let newValue = Number(event.target.value)
|
let newValue = Number(event.target.value)
|
||||||
if (newValue < 1) newValue = 1
|
if (newValue < 1) newValue = 1
|
||||||
setAttributes({ eventsCount: newValue })
|
setAttributes({ eventsCount: newValue })
|
||||||
reloadEventList()
|
reloadEventList()
|
||||||
}
|
}
|
||||||
function updateGroupName(event) {
|
function updateGroupName(event) {
|
||||||
|
// console.log('new value: ', event.target.value) // TODO
|
||||||
// TODO not triggered on pasting only
|
// TODO not triggered on pasting only
|
||||||
setAttributes({ groupName: event.target.value })
|
setAttributes({ groupName: event.target.value })
|
||||||
reloadEventList()
|
reloadEventList()
|
||||||
|
@ -77,7 +81,7 @@ export default ({ attributes, setAttributes }) => {
|
||||||
<input
|
<input
|
||||||
className="components-text-control__input"
|
className="components-text-control__input"
|
||||||
type="number"
|
type="number"
|
||||||
value={attributes.eventsCount}
|
value={eventsCount}
|
||||||
onChange={updateEventsCount}
|
onChange={updateEventsCount}
|
||||||
id={NAME + '_events-count'}
|
id={NAME + '_events-count'}
|
||||||
/>
|
/>
|
||||||
|
@ -90,7 +94,7 @@ export default ({ attributes, setAttributes }) => {
|
||||||
<input
|
<input
|
||||||
className="components-text-control__input"
|
className="components-text-control__input"
|
||||||
type="text"
|
type="text"
|
||||||
value={attributes.groupName}
|
value={groupName}
|
||||||
onChange={updateGroupName}
|
onChange={updateGroupName}
|
||||||
id={NAME + '_group-name'}
|
id={NAME + '_group-name'}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -18,7 +18,6 @@ test.before(() => {
|
||||||
|
|
||||||
test.beforeEach((t) => {
|
test.beforeEach((t) => {
|
||||||
t.context.container = document.createElement('div')
|
t.context.container = document.createElement('div')
|
||||||
t.context.container.setAttribute('data-maximum', '2')
|
|
||||||
|
|
||||||
const errorMessageGeneral = document.createElement('div')
|
const errorMessageGeneral = document.createElement('div')
|
||||||
errorMessageGeneral.setAttribute('class', 'general-error')
|
errorMessageGeneral.setAttribute('class', 'general-error')
|
||||||
|
@ -53,7 +52,7 @@ test('#displayEvents one event', (t) => {
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
const container = t.context.container
|
const container = t.context.container
|
||||||
displayEvents({ events, document, container })
|
displayEvents({ events, document, container, maxEventsCount: 2 })
|
||||||
const list = container.querySelector('ul')
|
const list = container.querySelector('ul')
|
||||||
t.is(list.children[0].childNodes[0].tagName, 'A')
|
t.is(list.children[0].childNodes[0].tagName, 'A')
|
||||||
t.is(list.children[0].childNodes[0].getAttribute('href'), 'b')
|
t.is(list.children[0].childNodes[0].getAttribute('href'), 'b')
|
||||||
|
|
|
@ -6,13 +6,12 @@ export function clearEventsList(container) {
|
||||||
list.replaceChildren()
|
list.replaceChildren()
|
||||||
}
|
}
|
||||||
|
|
||||||
export function displayEvents({ events, document, container }) {
|
export function displayEvents({ events, document, container, maxEventsCount }) {
|
||||||
hideLoadingIndicator(container)
|
hideLoadingIndicator(container)
|
||||||
|
|
||||||
const isShortOffsetNameShown =
|
const isShortOffsetNameShown =
|
||||||
window.MOBILIZON_CONNECTOR.isShortOffsetNameShown
|
window.MOBILIZON_CONNECTOR.isShortOffsetNameShown
|
||||||
const locale = window.MOBILIZON_CONNECTOR.locale
|
const locale = window.MOBILIZON_CONNECTOR.locale
|
||||||
const maxEventsCount = container.getAttribute('data-maximum')
|
|
||||||
const timeZone = window.MOBILIZON_CONNECTOR.timeZone
|
const timeZone = window.MOBILIZON_CONNECTOR.timeZone
|
||||||
|
|
||||||
const eventsCount = Math.min(maxEventsCount, events.length)
|
const eventsCount = Math.min(maxEventsCount, events.length)
|
||||||
|
|
Loading…
Reference in New Issue