1
0
mirror of https://github.com/dwaxweiler/connector-mobilizon synced 2025-06-05 21:59:25 +02:00

Merge branch 'main' into block

This commit is contained in:
Daniel Waxweiler
2021-12-14 15:33:07 +01:00
31 changed files with 3557 additions and 5123 deletions

View File

@ -1,7 +1,11 @@
### [Unreleased]
#### Added
- Add specific error message for the case the group is not found
- Add code formatter prettier
#### Changed
- Set minimum PHP version to oldest officially supported 7.4
- Update dependencies
- Simplify build process
#### Deprecated
#### Removed
#### Fixed

View File

@ -20,36 +20,61 @@ if (!defined('ABSPATH')) {
exit;
}
function mobilizon_connector_activate() {
MobilizonConnector\Settings::setDefaultOptions();
}
register_activation_hook(__FILE__, 'mobilizon_connector_activate');
final class Mobilizon_Connector {
function mobilizon_connector_initialize() {
MobilizonConnector\Settings::init();
MobilizonConnector\EventsListShortcut::init();
}
add_action('init', 'mobilizon_connector_initialize');
private function __construct() {
add_action('init', [$this, 'register_blocks']);
add_action('init', [$this, 'register_settings']);
add_action('init', [$this, 'register_shortcut']);
add_action('widgets_init', [$this, 'register_widget']);
add_action('wp_enqueue_scripts', [$this, 'register_scripts']);
register_activation_hook(__FILE__, [$this, 'enable_activation']);
}
function mobilizon_connector_load_scripts() {
wp_enqueue_script(MobilizonConnector\NAME . '-js', plugins_url('front/events-loader.js', __FILE__ ));
}
add_action('wp_enqueue_scripts', 'mobilizon_connector_load_scripts');
public static function init() {
// Create singleton instance.
static $instance = false;
if(!$instance) {
$instance = new self();
}
return $instance;
}
function mobilizon_connector_register_events_list_widget() {
register_widget('MobilizonConnector\EventsListWidget');
}
add_action('widgets_init', 'mobilizon_connector_register_events_list_widget');
public function enable_activation() {
MobilizonConnector\Settings::setDefaultOptions();
}
function mobilizon_connector_initialize_blocks() {
wp_register_script(MobilizonConnector\NAME . '-block-starter', plugins_url('front/block-events-loader.js', __FILE__ ), [
'wp-blocks',
'wp-components',
'wp-editor',
'wp-i18n'
public function register_blocks() {
wp_register_script(MobilizonConnector\NAME . '-block-starter', plugins_url('front/block-events-loader.js', __FILE__ ), [
'wp-blocks',
'wp-components',
'wp-editor',
'wp-i18n'
]);
register_block_type(MobilizonConnector\NAME . '/events-list', [
'editor_script' => MobilizonConnector\NAME . '-block-starter'
]);
register_block_type(MobilizonConnector\NAME . '/events-list', [
'editor_script' => MobilizonConnector\NAME . '-block-starter'
]);
}
public function register_settings() {
MobilizonConnector\Settings::init();
}
public function register_scripts() {
wp_enqueue_script(MobilizonConnector\NAME . '-js', plugins_url('front/events-loader.js', __FILE__ ));
}
public function register_shortcut() {
MobilizonConnector\EventsListShortcut::init();
}
public function register_widget() {
register_widget('MobilizonConnector\EventsListWidget');
}
}
add_action('init', 'mobilizon_connector_initialize_blocks');
function mobilizon_connector_run_plugin() {
return Mobilizon_Connector::init();
}
mobilizon_connector_run_plugin();

View File

@ -11,17 +11,43 @@ export default ({ attributes, setAttributes }) => {
function updateGroupName(event) {
setAttributes({ groupName: event.target.value })
}
return ([
return [
<InspectorControls>
<PanelBody title={ __('Events List Settings', '<wordpress-name>') }>
<label className="components-base-control__label">{ __('Number of events to show', '<wordpress-name>') }</label>
<input className="components-text-control__input" type="number" value={ attributes.eventsCount } onChange={ updateEventsCount } />
<label className="components-base-control__label">{ __('Group name (optional)', '<wordpress-name>') }</label>
<input className="components-text-control__input" type="text" value={ attributes.groupName } onChange={ updateGroupName } />
<PanelBody title={__('Events List Settings', '<wordpress-name>')}>
<label
className="components-base-control__label"
htmlFor="<wordpress-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="<wordpress-name>_events-count"
/>
<label
className="components-base-control__label"
htmlFor="<wordpress-name>_group-name"
>
{__('Group name (optional)', '<wordpress-name>')}
</label>
<input
className="components-text-control__input"
type="text"
value={attributes.groupName}
onChange={updateGroupName}
id="<wordpress-name>_group-name"
/>
</PanelBody>
</InspectorControls>,
<ul>
{ [...Array(attributes.eventsCount)].map((_, i) => <li className="busterCards" key={ i }>{ __('Event', '<wordpress-name>') } { i }</li>) }
</ul>
])
{[...Array(attributes.eventsCount)].map((_, i) => (
<li className="busterCards" key={i}>
{__('Event', '<wordpress-name>')} {i}
</li>
))}
</ul>,
]
}

View File

@ -5,17 +5,21 @@ const NAME = '<wordpress-name>'
const URL = 'https://mobilizon.fr' // TODO
const LOCALE = 'en-GB' // TODO
const TIMEZONE = 'Europe/Rome' // TODO
const isShortOffsetNameShown = true // TODO
const isShortOffsetNameShown = true // eslint-disable-line no-unused-vars
export default ({ attributes }) => {
return(
<ul className={ NAME + '_events-list' }
data-url={ URL }
data-locale={ LOCALE }
data-maximum={ attributes.eventsCount }
data-group-name={ attributes.groupName }
data-time-zone={ TIMEZONE }>
<li style="display: none;">{ __('The events could not be loaded!', '<wordpress-name>') }</li>
return (
<ul
className={NAME + '_events-list'}
data-url={URL}
data-locale={LOCALE}
data-maximum={attributes.eventsCount}
data-group-name={attributes.groupName}
data-time-zone={TIMEZONE}
>
<li style="display: none;">
{__('The events could not be loaded!', '<wordpress-name>')}
</li>
</ul>
)
}

View File

@ -1,67 +1,76 @@
import test from 'ava'
import DateTimeWrapper from './date-time-wrapper'
test('#getShortDate usual date', t => {
test('#getShortDate usual date', (t) => {
const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
t.is(d.getShortDate(), '24/12/2020')
})
test('#getShortDate usual date with timezone string', t => {
const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z', timeZone: 'Europe/Rome' })
test('#getShortDate usual date with timezone string', (t) => {
const d = new DateTimeWrapper({
text: '2020-12-24T16:45:00Z',
timeZone: 'Europe/Rome',
})
t.is(d.getShortDate(), '24/12/2020')
})
test('#getShortDate usual date with fixed offset', t => {
const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z', timeZone: 'UTC+02:00' })
test('#getShortDate usual date with fixed offset', (t) => {
const d = new DateTimeWrapper({
text: '2020-12-24T16:45:00Z',
timeZone: 'UTC+02:00',
})
t.is(d.getShortDate(), '24/12/2020')
})
test('#getShortDate usual date with fixed offset without UTC prefix', t => {
const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z', timeZone: '+02:00' })
test('#getShortDate usual date with fixed offset without UTC prefix', (t) => {
const d = new DateTimeWrapper({
text: '2020-12-24T16:45:00Z',
timeZone: '+02:00',
})
t.is(d.getShortDate(), '24/12/2020')
})
test('#getShortDate usual date with empty time zone', t => {
test('#getShortDate usual date with empty time zone', (t) => {
const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z', timeZone: '' })
t.is(d.getShortDate(), '24/12/2020')
})
test('#get24Time usual time', t => {
test('#get24Time usual time', (t) => {
const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
t.is(d.get24Time(), '16:45')
})
test('#equalsDate same date, different time', t => {
test('#equalsDate same date, different time', (t) => {
const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
const e = new DateTimeWrapper({ text: '2020-12-24T17:46:01Z' })
t.true(d.equalsDate(e))
})
test('#equalsDate different date, different time', t => {
test('#equalsDate different date, different time', (t) => {
const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
const e = new DateTimeWrapper({ text: '2021-11-25T17:46:01Z' })
t.false(d.equalsDate(e))
})
test('#equalsDate different day, different time', t => {
test('#equalsDate different day, different time', (t) => {
const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
const e = new DateTimeWrapper({ text: '2020-12-25T17:46:01Z' })
t.false(d.equalsDate(e))
})
test('#equalsDate different month, different time', t => {
test('#equalsDate different month, different time', (t) => {
const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
const e = new DateTimeWrapper({ text: '2020-11-24T17:46:01Z' })
t.false(d.equalsDate(e))
})
test('#equalsDate different year, different time', t => {
test('#equalsDate different year, different time', (t) => {
const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
const e = new DateTimeWrapper({ text: '2021-12-24T17:46:01Z' })
t.false(d.equalsDate(e))
})
test('#getCurrentDatetimeAsString correct format', t => {
test('#getCurrentDatetimeAsString correct format', (t) => {
const d = DateTimeWrapper.getCurrentDatetimeAsString()
t.is(d[4], '-')
t.is(d[7], '-')
@ -69,10 +78,10 @@ test('#getCurrentDatetimeAsString correct format', t => {
t.is(d[13], ':')
t.is(d[16], ':')
t.is(d[19], '.')
t.is(d[d.length-3], ':')
t.is(d[d.length - 3], ':')
})
test('#getShortOffsetName usual time', t => {
test('#getShortOffsetName usual time', (t) => {
const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
t.is(d.getShortOffsetName(), 'UTC')
})

View File

@ -1,12 +1,14 @@
import { DateTime } from 'luxon'
export default class DateTimeWrapper {
constructor({ locale = 'en-GB', text, timeZone = 'utc' } = {}) {
if (!timeZone) {
timeZone = 'utc'
}
if (timeZone.includes(':') && timeZone.substring(0, 3).toUpperCase() !== 'UTC') {
if (
timeZone.includes(':') &&
timeZone.substring(0, 3).toUpperCase() !== 'UTC'
) {
timeZone = 'UTC' + timeZone
}
this.dateTime = DateTime.fromISO(text, { locale, zone: timeZone })
@ -25,11 +27,13 @@ export default class DateTimeWrapper {
}
equalsDate(other) {
return this.dateTime &&
return (
this.dateTime &&
other.dateTime &&
this.dateTime.day === other.dateTime.day &&
this.dateTime.month === other.dateTime.month &&
this.dateTime.year === other.dateTime.year
)
}
static getCurrentDatetimeAsString() {

View File

@ -9,7 +9,7 @@ test.before(() => {
document = new JSDOM().window.document
})
test.beforeEach(t => {
test.beforeEach((t) => {
t.context.list = document.createElement('ul')
t.context.list.setAttribute('data-locale', 'en-GB')
t.context.list.setAttribute('data-maximum', '2')
@ -17,9 +17,12 @@ test.beforeEach(t => {
const listElement = document.createElement('li')
listElement.setAttribute('style', 'display: none;')
t.context.list.appendChild(listElement)
const listElement2 = document.createElement('li')
listElement2.setAttribute('style', 'display: none;')
t.context.list.appendChild(listElement2)
})
test('#displayEvents one event', t => {
test('#displayEvents one event', (t) => {
const list = t.context.list
const data = {
events: {
@ -31,31 +34,48 @@ test('#displayEvents one event', t => {
endsOn: '2021-04-15T15:30:00Z',
physicalAddress: {
description: 'c',
locality: 'd'
}
}
]
}
locality: 'd',
},
},
],
},
}
displayEvents({ data, document, list })
t.is(list.children.length, 2)
t.is(list.children[1].childNodes[0].tagName, 'A')
t.is(list.children[1].childNodes[0].getAttribute('href'), 'b')
t.is(list.children[1].childNodes[0].childNodes[0].nodeValue, 'a')
t.is(list.children[1].childNodes[1].tagName, 'BR')
t.is(list.children[1].childNodes[2].nodeValue, '15/04/2021 10:30 - 15:30')
t.is(list.children[1].childNodes[3].tagName, 'BR')
t.is(list.children[1].childNodes[4].nodeValue, 'c, d')
t.is(list.children.length, 3)
t.is(list.children[2].childNodes[0].tagName, 'A')
t.is(list.children[2].childNodes[0].getAttribute('href'), 'b')
t.is(list.children[2].childNodes[0].childNodes[0].nodeValue, 'a')
t.is(list.children[2].childNodes[1].tagName, 'BR')
t.is(list.children[2].childNodes[2].nodeValue, '15/04/2021 10:30 - 15:30')
t.is(list.children[2].childNodes[3].tagName, 'BR')
t.is(list.children[2].childNodes[4].nodeValue, 'c, d')
})
test('#displayErrorMessage no children added', t => {
test('#displayErrorMessage no children added', (t) => {
const list = t.context.list
displayErrorMessage({ data: '', list })
t.is(list.children.length, 1)
t.is(list.children.length, 2)
})
test('#displayErrorMessage error message display', t => {
test('#displayErrorMessage error message display', (t) => {
const list = t.context.list
displayErrorMessage({ data: '', list })
t.is(list.children[0].style.display, 'block')
t.is(list.children[1].style.display, 'none')
})
test('#displayErrorMessage group not found error message display', (t) => {
const list = t.context.list
const data = {
response: {
errors: [
{
code: 'group_not_found',
},
],
},
}
displayErrorMessage({ data, list })
t.is(list.children[0].style.display, 'none')
t.is(list.children[1].style.display, 'block')
})

View File

@ -5,13 +5,21 @@ export function displayEvents({ data, document, list }) {
const locale = list.getAttribute('data-locale')
const maxEventsCount = list.getAttribute('data-maximum')
const timeZone = list.getAttribute('data-time-zone')
const isShortOffsetNameShown = list.hasAttribute('data-is-short-offset-name-shown')
const events = data.events ? data.events.elements : data.group.organizedEvents.elements
const isShortOffsetNameShown = list.hasAttribute(
'data-is-short-offset-name-shown'
)
const events = data.events
? data.events.elements
: data.group.organizedEvents.elements
const eventsCount = Math.min(maxEventsCount, events.length)
for (let i = 0; i < eventsCount; i++) {
const li = document.createElement('li')
const a = createAnchorElement({ document, text: events[i].title, url: events[i].url })
const a = createAnchorElement({
document,
text: events[i].title,
url: events[i].url,
})
li.appendChild(a)
const br = document.createElement('br')
@ -30,7 +38,7 @@ export function displayEvents({ data, document, list }) {
if (events[i].physicalAddress) {
const location = Formatter.formatLocation({
description: events[i].physicalAddress.description,
locality: events[i].physicalAddress.locality
locality: events[i].physicalAddress.locality,
})
if (location) {
const brBeforeLocation = document.createElement('br')
@ -47,5 +55,15 @@ export function displayEvents({ data, document, list }) {
export function displayErrorMessage({ data, list }) {
console.error(data)
list.children[0].style.display = 'block'
if (
Object.prototype.hasOwnProperty.call(data, 'response') &&
Object.prototype.hasOwnProperty.call(data.response, 'errors') &&
data.response.errors.length > 0 &&
Object.prototype.hasOwnProperty.call(data.response.errors[0], 'code') &&
data.response.errors[0].code === 'group_not_found'
) {
list.children[1].style.display = 'block'
} else {
list.children[0].style.display = 'block'
}
}

View File

@ -5,7 +5,7 @@ const NAME = '<wordpress-name>'
document.addEventListener('DOMContentLoaded', () => {
const eventLists = document.getElementsByClassName(NAME + '_events-list')
for (let list of eventLists) {
for (const list of eventLists) {
const url = list.getAttribute('data-url') + '/api'
const limit = parseInt(list.getAttribute('data-maximum'))
const groupName = list.getAttribute('data-group-name')

View File

@ -1,37 +1,51 @@
import test from 'ava'
import Formatter from './formatter'
test('#formatDate one date', t => {
const date = Formatter.formatDate({ start: '2021-04-15T10:30:00Z', end: '2021-04-15T15:30:00Z' })
test('#formatDate one date', (t) => {
const date = Formatter.formatDate({
start: '2021-04-15T10:30:00Z',
end: '2021-04-15T15:30:00Z',
})
t.is(date, '15/04/2021 10:30 - 15:30')
})
test('#formatDate one date with short offset name', t => {
const date = Formatter.formatDate({ start: '2021-04-15T10:30:00Z', end: '2021-04-15T15:30:00Z', isShortOffsetNameShown: true })
test('#formatDate one date with short offset name', (t) => {
const date = Formatter.formatDate({
start: '2021-04-15T10:30:00Z',
end: '2021-04-15T15:30:00Z',
isShortOffsetNameShown: true,
})
t.is(date, '15/04/2021 10:30 - 15:30 (UTC)')
})
test('#formatDate two dates', t => {
const date = Formatter.formatDate({ start: '2021-04-15T10:30:00Z', end: '2021-04-16T15:30:00Z' })
test('#formatDate two dates', (t) => {
const date = Formatter.formatDate({
start: '2021-04-15T10:30:00Z',
end: '2021-04-16T15:30:00Z',
})
t.is(date, '15/04/2021 10:30 - 16/04/2021 15:30')
})
test('#formatDate two dates with short offset name', t => {
const date = Formatter.formatDate({ start: '2021-04-15T10:30:00Z', end: '2021-04-16T15:30:00Z', isShortOffsetNameShown: true })
test('#formatDate two dates with short offset name', (t) => {
const date = Formatter.formatDate({
start: '2021-04-15T10:30:00Z',
end: '2021-04-16T15:30:00Z',
isShortOffsetNameShown: true,
})
t.is(date, '15/04/2021 10:30 (UTC) - 16/04/2021 15:30 (UTC)')
})
test('#formatLocation both parameters', t => {
test('#formatLocation both parameters', (t) => {
const date = Formatter.formatLocation({ description: 'a', locality: 'b' })
t.is(date, 'a, b')
})
test('#formatLocation description only', t => {
test('#formatLocation description only', (t) => {
const date = Formatter.formatLocation({ description: 'a' })
t.is(date, 'a')
})
test('#formatLocation locality only', t => {
test('#formatLocation locality only', (t) => {
const date = Formatter.formatLocation({ locality: 'a' })
t.is(date, 'a')
})

View File

@ -1,9 +1,12 @@
import DateTimeWrapper from './date-time-wrapper'
export default class Formatter {
static formatDate({ locale, timeZone, start, end, isShortOffsetNameShown }) {
const startDateTime = new DateTimeWrapper({ locale, text: start, timeZone })
const startDateTime = new DateTimeWrapper({
locale,
text: start,
timeZone,
})
const endDateTime = new DateTimeWrapper({ locale, text: end, timeZone })
let dateText = startDateTime.getShortDate()
dateText += ' ' + startDateTime.get24Time()

View File

@ -21,14 +21,18 @@ export function getUpcomingEvents({ url, limit }) {
}
}
`
const dataInCache = SessionCache.get(sessionStorage, { url, query, variables: { limit }})
if (dataInCache !== null)
const dataInCache = SessionCache.get(sessionStorage, {
url,
query,
variables: { limit },
})
if (dataInCache !== null) {
return Promise.resolve(dataInCache)
return request(url, query, { limit })
.then((data) => {
SessionCache.add(sessionStorage, { url, query, variables: { limit }}, data)
return Promise.resolve(data)
})
}
return request(url, query, { limit }).then((data) => {
SessionCache.add(sessionStorage, { url, query, variables: { limit } }, data)
return Promise.resolve(data)
})
}
export function getUpcomingEventsByGroupName({ url, limit, groupName }) {
@ -53,12 +57,22 @@ export function getUpcomingEventsByGroupName({ url, limit, groupName }) {
}
`
const afterDatetime = DateTimeWrapper.getCurrentDatetimeAsString()
const dataInCache = SessionCache.get(sessionStorage, { url, query, variables: { afterDatetime, groupName, limit }})
if (dataInCache !== null)
const dataInCache = SessionCache.get(sessionStorage, {
url,
query,
variables: { afterDatetime, groupName, limit },
})
if (dataInCache !== null) {
return Promise.resolve(dataInCache)
return request(url, query, { afterDatetime, groupName, limit })
.then((data) => {
SessionCache.add(sessionStorage, { url, query, variables: { afterDatetime, groupName, limit }}, data)
}
return request(url, query, { afterDatetime, groupName, limit }).then(
(data) => {
SessionCache.add(
sessionStorage,
{ url, query, variables: { afterDatetime, groupName, limit } },
data
)
return Promise.resolve(data)
})
}
)
}

View File

@ -9,7 +9,7 @@ test.beforeEach(() => {
document = new JSDOM().window.document
})
test('#createAnchorElement usual parameters', t => {
test('#createAnchorElement usual parameters', (t) => {
const a = createAnchorElement({ document, text: 'a', url: 'b' })
t.is(a.tagName, 'A')
t.is(a.innerHTML, 'a')

View File

@ -1,6 +1,6 @@
import test from 'ava'
import hash from './object-hash-wrapper'
test('#hash object', t => {
t.is(hash({foo: 'bar'}), 'a75c05bdca7d704bdfcd761913e5a4e4636e956b')
test('#hash object', (t) => {
t.is(hash({ foo: 'bar' }), 'a75c05bdca7d704bdfcd761913e5a4e4636e956b')
})

View File

@ -2,7 +2,6 @@ import test from 'ava'
import SessionCache from './session-cache'
const fakeStorage = {
elements: {},
clear() {
@ -17,18 +16,18 @@ const fakeStorage = {
setItem(key, value) {
this.elements[key] = value
}
},
}
test.afterEach(() => {
fakeStorage.clear()
})
test('#add & #get', t => {
test('#add & #get', (t) => {
SessionCache.add(fakeStorage, { a: 'b' }, { c: 'd' })
t.deepEqual(SessionCache.get(fakeStorage, { a: 'b' }), { c: 'd' })
})
test('#get no entry', t => {
test('#get no entry', (t) => {
t.is(SessionCache.get(fakeStorage, { a: 'bb' }), null)
})

View File

@ -3,7 +3,6 @@ import hash from './object-hash-wrapper'
const MAX_AGE_IN_MS = 120000
export default class SessionCache {
static add(storage, parameters, data) {
const key = hash(parameters)
const timestamp = Date.now()
@ -17,7 +16,11 @@ export default class SessionCache {
static get(storage, parameters) {
const key = hash(parameters)
const value = JSON.parse(storage.getItem(key))
if (value && value.timestamp && value.timestamp > Date.now() - MAX_AGE_IN_MS)
if (
value &&
value.timestamp &&
value.timestamp > Date.now() - MAX_AGE_IN_MS
)
return value.data
return null
}

View File

@ -12,4 +12,5 @@ if (!defined('ABSPATH')) {
data-time-zone="<?php echo esc_attr($timeZone); ?>"
<?php echo $isShortOffsetNameShown ? 'data-is-short-offset-name-shown' : ''; ?>>
<li style="display: none;"><?php esc_html_e('The events could not be loaded!', 'connector-mobilizon'); ?></li>
<li style="display: none;"><?php esc_html_e('The group could not be found!', 'connector-mobilizon'); ?></li>
</ul>