release version 0.3.0

.eslintrc.json

@@ -0,0 +1,31 @@
+{
+  "env": {
+    "browser": true,
+    "es2020": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:ava/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 11,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "ava"
+  ],
+  "rules": {
+    "indent": [
+      "error",
+      2
+    ],
+    "quotes": [
+      "error",
+      "single"
+    ],
+    "semi": [
+      "error",
+      "never"
+    ]
+  }
+}

README.md

@@ -1,4 +1,8 @@
-# Connector Mobilizon
+# Connector for Mobilizon
+
+Connector for Mobilizon allows you to display the upcoming events of [Mobilizon](https://joinmobilizon.org/), which is a federated event listing platform, on your WordPress website.
+
+More details can be found in the [WordPress Plugin Directory](https://wordpress.org/plugins/connector-mobilizon/).
 
 ## Development
 
@@ -9,12 +13,21 @@
 
 ### Development build
 1. Build: `npm run build-dev`
+2. Make sure to keep `changelog.txt` up-to-date.
 
 ### Release procedure
-1. Build: `npm run build-prod`
+1. Make sure `changelog.txt` is up-to-date. Use a new version number and copy over the new section into `readme.txt`.
-2. Determine minimum PHP version for code and update package.json if needed: `./vendor/bin/phpcompatinfo analyser:run ./source`
+2. Update `package.json` with the same version number.
-3. Make sure screenshots are up-to-date.
+3. Build: `npm run build-prod`
+4. Determine minimum PHP version for code and update package.json if needed: `./vendor/bin/phpcompatinfo analyser:run ./source`
+5. Make sure screenshots are up-to-date.
+6. Copy the built plugin into `/trunk` of SVN.
+7. Create a new tag of the new version: `svn cp trunk tags/<version>`
+8. Check the version number occurences in both folders.
+9. Commit everything together: `svn ci -m "release version <version>"`
+10. Tag the new version in `git` too.
 
 ### Other commands
+- Run ESLint: `npm run eslint`
 - Run tests: `npm test`
 - Delete build folder: `gulp clean`

gulpfile.js

@@ -32,7 +32,7 @@ function bundleFrontend() {
       },
     }))
     .pipe(dest(FOLDER_BUILD));
-  }
+}
 
 function copyBackend() {
   return src([
@@ -52,6 +52,7 @@ function injectMetadata() {
     .pipe(replace('<wordpress-author-name>', PACKAGE.author.name))
     .pipe(replace('<wordpress-author-url>', PACKAGE.author.url))
     .pipe(replace('<wordpress-description>', PACKAGE.description))
+    .pipe(replace('<wordpress-donation-link>', PACKAGE.funding.url))
     .pipe(replace('<wordpress-license>', PACKAGE.license))
     .pipe(replace('<wordpress-minimum-version>', PACKAGE.additionalDetails.wordpressMinimumVersion))
     .pipe(replace('<wordpress-name>', PACKAGE.name))

package.json

@@ -1,33 +1,41 @@
 {
   "name": "connector-mobilizon",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Display mobilizon events in WordPress.",
   "private": true,
   "scripts": {
     "build-dev": "gulp dev",
     "build-prod": "ava && gulp prod",
+    "eslint": "npx eslint source/**/*.js",
     "test": "ava"
   },
   "author": {
     "name": "Daniel Waxweiler",
     "url": "https://www.danielwaxweiler.net/"
   },
+  "funding": {
+    "type": "individual",
+    "url": "https://paypal.me/dwaxweiler"
+  },
   "license": "Apache-2.0",
   "dependencies": {
-    "graphql": "^15.4.0",
+    "graphql": "^15.5.0",
     "graphql-request": "^3.4.0",
-    "luxon": "^1.25.0"
+    "luxon": "^1.26.0",
+    "object-hash": "^2.1.1"
   },
   "devDependencies": {
     "ava": "^3.15.0",
     "del": "^6.0.0",
+    "eslint": "^7.23.0",
+    "eslint-plugin-ava": "^12.0.0",
     "esm": "^3.2.25",
     "gulp": "^4.0.2",
     "gulp-replace": "^1.0.0",
-    "jsdom": "^16.4.0",
+    "jsdom": "^16.5.2",
-    "webpack": "^5.11.1",
+    "webpack": "^5.30.0",
-    "webpack-cli": "^4.3.1",
+    "webpack-cli": "^4.6.0",
-    "webpack-stream": "^6.1.1"
+    "webpack-stream": "^6.1.2"
   },
   "ava": {
     "files": [
@@ -41,6 +49,6 @@
     "niceName": "Connector for Mobilizon",
     "phpMinimumVersion": 5.4,
     "wordpressMinimumVersion": 5.6,
-    "wordpressTestedUpToVersion": 5.6
+    "wordpressTestedUpToVersion": 5.7
   }
 }

source/connector-mobilizon/changelog.txt

@@ -0,0 +1,38 @@
+### [Unreleased]
+#### Added
+#### Changed
+#### Deprecated
+#### Removed
+#### Fixed
+#### Security
+
+### [0.3.0] - 2021-04-05
+#### Added
+- Donation link to WordPress Plugin Directory sidebar and to `package.json`
+- Cache requests for 2 minutes
+- Set up ESLint static code analysis
+#### Changed
+- Update luxon dependency
+- Update dev dependencies jsdom, webpack, webpack-cli
+
+### [0.2.2] - 2021-03-10
+#### Changed
+- Confirm compatibility with WordPress 5.7
+- Update graphql dependency
+- Update dev dependencies jsdom, webpack, webpack-cli, webpack-stream
+
+### [0.2.1] - 2021-01-15
+#### Fixed
+- Add missing backtick to `readme.txt`
+
+### [0.2.0] - 2021-01-15
+#### Added
+- `changelog.txt`
+- Changelog maintenance steps to `README.md`
+- Link to Github repository in `readme.txt`
+- Option to show events of a specific group by indicating its name
+#### Changed
+- Use same Markdown style in `README.md` as in other documents
+
+### [0.1.0] - 2021-01-09
+initial release

source/connector-mobilizon/connector-mobilizon.php

@@ -1,10 +1,10 @@
 <?php
 /**
- * Plugin Name: 	    <wordpress-nice-name>
+ * Plugin Name:       <wordpress-nice-name>
- * Author: 				    <wordpress-author-name>
+ * Author:            <wordpress-author-name>
- * Author URI:		    <wordpress-author-url>
+ * Author URI:        <wordpress-author-url>
- * Description: 	    <wordpress-description>
+ * Description:       <wordpress-description>
- * Version:				    <wordpress-version>
+ * Version:           <wordpress-version>
  * Requires at least: <wordpress-minimum-version>
  * Requires PHP:      <wordpress-php-minimum-version>
  * License:           <wordpress-license>

source/connector-mobilizon/front/date-time-wrapper-test.js

@@ -1,5 +1,5 @@
-import test from 'ava';
+import test from 'ava'
-import { DateTimeWrapper } from './date-time-wrapper';
+import { DateTimeWrapper } from './date-time-wrapper'
 
 test('#getShortDate usual date', t => {
   const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
@@ -40,3 +40,14 @@ test('#equalsDate different year, different time', t => {
   const e = new DateTimeWrapper('2021-12-24T17:46:01Z')
   t.false(d.equalsDate(e))
 })
+
+test('#getCurrentDatetimeAsString correct format', t => {
+  const d = DateTimeWrapper.getCurrentDatetimeAsString()
+  t.is(d[4], '-')
+  t.is(d[7], '-')
+  t.is(d[10], 'T')
+  t.is(d[13], ':')
+  t.is(d[16], ':')
+  t.is(d[19], '.')
+  t.is(d[d.length-3], ':')
+})

source/connector-mobilizon/front/date-time-wrapper.js

@@ -1,4 +1,4 @@
-import { DateTime } from 'luxon';
+import { DateTime } from 'luxon'
 
 export class DateTimeWrapper {
 
@@ -21,4 +21,8 @@ export class DateTimeWrapper {
       this.dateTime.month === other.dateTime.month &&
       this.dateTime.year === other.dateTime.year
   }
+
+  static getCurrentDatetimeAsString() {
+    return DateTime.local().toString()
+  }
 }

source/connector-mobilizon/front/events-loader.js

@@ -1,62 +1,59 @@
-import { DateTimeWrapper } from './date-time-wrapper';
+import { DateTimeWrapper } from './date-time-wrapper'
 import * as GraphqlWrapper from './graphql-wrapper'
 import * as HtmlCreator from './html-creator'
 
-const NAME = '<wordpress-name>';
+const NAME = '<wordpress-name>'
 
-function displayEvents(data, lists) {
+function displayEvents(data, list) {
-  for (let list of lists) {
+  const maxEventsCount = list.getAttribute('data-maximum')
-    const maxEventsCount = list.getAttribute('data-maximum')
+  const events = data.events ? data.events.elements : data.group.organizedEvents.elements
-    const events = data.events.elements
+  const eventsCount = Math.min(maxEventsCount, events.length)
-    const eventsCount = Math.min(maxEventsCount, events.length)
+  for (let i = 0; i < eventsCount; i++) {
-    for (let i = 0; i < eventsCount; i++) {
+    const li = document.createElement('li')
-      const li = document.createElement('li')
+    
-      
+    const a = HtmlCreator.createAnchorElement({ text: events[i].title, url: events[i].url })
-      const a = HtmlCreator.createAnchorElement({ text: events[i].title, url: events[i].url });
+    li.appendChild(a)
-      li.appendChild(a)
 
-      const br = document.createElement('br')
+    const br = document.createElement('br')
-      li.appendChild(br)
+    li.appendChild(br)
 
-      const beginsOn = new DateTimeWrapper(events[i].beginsOn)
+    const beginsOn = new DateTimeWrapper(events[i].beginsOn)
-      const endsOn = new DateTimeWrapper(events[i].endsOn)
+    const endsOn = new DateTimeWrapper(events[i].endsOn)
-      let dateText = beginsOn.getShortDate()
+    let dateText = beginsOn.getShortDate()
-      dateText += ' ' + beginsOn.get24Time()
+    dateText += ' ' + beginsOn.get24Time()
-      dateText += ' - '
+    dateText += ' - '
-      if (!beginsOn.equalsDate(endsOn)) {
+    if (!beginsOn.equalsDate(endsOn)) {
-          dateText += endsOn.getShortDate() + ' '
+      dateText += endsOn.getShortDate() + ' '
-      }
-      dateText += endsOn.get24Time()
-      const textnode = document.createTextNode(dateText);
-      li.appendChild(textnode)
-
-      list.appendChild(li)
     }
+    dateText += endsOn.get24Time()
+    const textnode = document.createTextNode(dateText)
+    li.appendChild(textnode)
+
+    list.appendChild(li)
   }
 }
 
-function displayErrorMessage(data, lists) {
+function displayErrorMessage(data, list) {
   console.error(data)
-  for (let list of lists) {
+  for (let i = 0; i < list.children.length; i++) {
-    for (let i = 0; i < list.children.length; i++) {
+    list.children[i].style.display = 'block'
-      list.children[i].style.display = 'block'
-    }
   }
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-  const eventLists = document.getElementsByClassName(NAME + '_events-list');
+  const eventLists = document.getElementsByClassName(NAME + '_events-list')
-  if (eventLists.length) {
+  for (let list of eventLists) {
-    // Currently, the URL is the same for all widgets, so just take the first one.
+    const url = list.getAttribute('data-url') + '/api'
-    const url = eventLists[0].getAttribute('data-url') + '/api';
+    const limit = parseInt(list.getAttribute('data-maximum'))
-
+    const groupName = list.getAttribute('data-group-name')
-    let maxEventsCount = 0
+    if (groupName) {
-    for (let list of eventLists) {
+      GraphqlWrapper.getUpcomingEventsByGroupName({ url, limit, groupName })
-      maxEventsCount = Math.max(maxEventsCount, list.getAttribute('data-maximum'))
+        .then((data) => displayEvents(data, list))
+        .catch((data) => displayErrorMessage(data, list))
+    } else {
+      GraphqlWrapper.getUpcomingEvents({ url, limit })
+        .then((data) => displayEvents(data, list))
+        .catch((data) => displayErrorMessage(data, list))
     }
-
-    GraphqlWrapper.getEvents({ url, limit: maxEventsCount })
-      .then((data) => displayEvents(data, eventLists))
-      .catch((data) => displayErrorMessage(data, eventLists))
   }
 })

source/connector-mobilizon/front/graphql-wrapper.js

@@ -1,19 +1,56 @@
-import { request, gql } from 'graphql-request'
+import { SessionCache } from './session-cache'
+import { request } from 'graphql-request'
+import { DateTimeWrapper } from './date-time-wrapper'
 
-export function getEvents({ url, limit }) {  
+export function getUpcomingEvents({ url, limit }) {
-  const query = gql`
+  const query = `
-  query {
+    query ($limit: Int) {
-    events(limit:${limit}) {
+      events(limit: $limit) {
-      elements {
+        elements {
-        id,
+          id,
-        title,
+          title,
-        url,
+          url,
-        beginsOn,
+          beginsOn,
-        endsOn
+          endsOn
-      },
+        },
-      total
+        total
+      }
     }
-  }
   `
-  return request(url, query)
+  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)
+    })
+}
+
+export function getUpcomingEventsByGroupName({ url, limit, groupName }) {
+  const query = `
+    query ($afterDatetime: DateTime, $groupName: String, $limit: Int) {
+      group(preferredUsername: $groupName) {
+        organizedEvents(afterDatetime: $afterDatetime, limit: $limit) {
+          elements {
+            id,
+            title,
+            url,
+            beginsOn,
+            endsOn
+          },
+          total
+        }
+      }
+    }
+  `
+  const afterDatetime = DateTimeWrapper.getCurrentDatetimeAsString()
+  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 Promise.resolve(data)
+    })
 }

source/connector-mobilizon/front/html-creator-test.js

@@ -1,15 +1,15 @@
-import test from 'ava';
+import test from 'ava'
-import { JSDOM } from 'jsdom';
+import { JSDOM } from 'jsdom'
 
-import * as HtmlCreator from './html-creator';
+import * as HtmlCreator from './html-creator'
 
 test.beforeEach(() => {
   global.document = new JSDOM().window.document
 })
 
-test('createAnchorElement() usual parameters', t => {
+test('#createAnchorElement usual parameters', t => {
   const a = HtmlCreator.createAnchorElement({ text: 'a', url: 'b' })
   t.is(a.tagName, 'A')
   t.is(a.innerHTML, 'a')
-	t.is(a.getAttribute('href'), 'b')
+  t.is(a.getAttribute('href'), 'b')
 })

source/connector-mobilizon/front/object-hash-wrapper-test.js

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

source/connector-mobilizon/front/object-hash-wrapper.js

@@ -0,0 +1,5 @@
+import objectHash from 'object-hash'
+
+export default function hash(object) {
+  return objectHash(object)
+}

source/connector-mobilizon/front/session-cache-test.js

@@ -0,0 +1,34 @@
+import test from 'ava'
+import { SessionCache } from './session-cache'
+
+const fakeStorage = {
+
+  elements: {},
+
+  clear() {
+    this.elements = {}
+  },
+
+  getItem(key) {
+    const value = this.elements[key]
+    if (value === undefined) return null
+    return value
+  },
+
+  setItem(key, value) {
+    this.elements[key] = value
+  }
+}
+
+test.afterEach(() => {
+  fakeStorage.clear()
+})
+
+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 => {
+  t.is(SessionCache.get(fakeStorage, { a: 'bb' }), null)
+})

source/connector-mobilizon/front/session-cache.js

@@ -0,0 +1,24 @@
+import hash from './object-hash-wrapper'
+
+const MAX_AGE_IN_MS = 120000
+
+export class SessionCache {
+
+  static add(storage, parameters, data) {
+    const key = hash(parameters)
+    const timestamp = Date.now()
+    const value = {
+      data,
+      timestamp,
+    }
+    storage.setItem(key, JSON.stringify(value))
+  }
+
+  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)
+      return value.data
+    return null
+  }
+}

source/connector-mobilizon/includes/events-list-shortcut.php

@@ -20,11 +20,13 @@ class EventsListShortcut {
     $atts_with_overriden_defaults = shortcode_atts(
       array(
         'events-count' => DEFAULT_EVENTS_COUNT,
+        'group-name' => '',
       ), $atts
     );
 
     $classNamePrefix = NAME;
     $eventsCount = $atts_with_overriden_defaults['events-count'];
+    $groupName = $atts_with_overriden_defaults['group-name'];
     $url = Settings::getUrl();
     $textDomain = TEXT_DOMAIN;
 

source/connector-mobilizon/includes/events-list-widget.php

@@ -27,6 +27,7 @@ class EventsListWidget extends \WP_Widget {
 
     $classNamePrefix = NAME;
     $eventsCount = $options['eventsCount'];
+    $groupName = isset($options['groupName']) ? $options['groupName'] : '';
     $url = Settings::getUrl();
     $textDomain = TEXT_DOMAIN;
 
@@ -38,6 +39,7 @@ class EventsListWidget extends \WP_Widget {
   public function form($options) {
     $title = !empty($options['title']) ? $options['title'] : esc_html__('Events', TEXT_DOMAIN);
     $eventsCount = !empty($options['eventsCount']) ? $options['eventsCount'] : DEFAULT_EVENTS_COUNT;
+    $groupName = !empty($options['groupName']) ? $options['groupName'] : '';
     $textDomain = TEXT_DOMAIN;
     
     require dirname(__DIR__) . '/view/events-list-widget/form.php';
@@ -50,6 +52,7 @@ class EventsListWidget extends \WP_Widget {
     $options = array();
     $options['title'] = !empty($new_options['title']) ? sanitize_text_field($new_options['title']) : '';
     $options['eventsCount'] = !empty($new_options['eventsCount']) ? sanitize_text_field($new_options['eventsCount']) : 5;
+    $options['groupName'] = !empty($new_options['groupName']) ? sanitize_text_field($new_options['groupName']) : '';
     return $options;
   }
 }

source/connector-mobilizon/readme.txt

@@ -1,5 +1,6 @@
-=== <wordpress-nice-name> ===
+# <wordpress-nice-name>
 Contributors: dwaxweiler
+Donate link: <wordpress-donation-link>
 Tags: mobilizon, events
 Stable tag: <wordpress-version>
 Requires at least: <wordpress-minimum-version>
@@ -9,22 +10,54 @@ License: <wordpress-license>
 
 <wordpress-description>
 
-== Description ==
+## Description
 
-<wordpress-nice-name> allows you to display the upcoming events of one Mobilizon instance.
+<wordpress-nice-name> allows you to display the upcoming events of [Mobilizon](https://joinmobilizon.org/), which is a federated event listing platform, on your WordPress website.
-[Mobilizon](https://joinmobilizon.org/) is an event listening tool.
 
 You can display the upcoming events using a widget and everywhere else using a shortcut.
 
-Shortcut format with limiting the number of events to show to 3: `[<wordpress-name>-events-list events-count=3]`
+Shortcut format with limiting the number of events to show to 3 for example: `[<wordpress-name>-events-list events-count=3]`
+Optionally, you can only show the events of a specific group by indicatings its name: `[<wordpress-name>-events-list events-count=3 group-name="mygroup"]`
 
-== Screenshots ==
+The requests' responses are cached for 2 minutes.
+
+The source code is available on [Github](https://github.com/dwaxweiler/connector-mobilizon).
+
+## Screenshots
 1. Events list
 2. General settings
 3. Widget creation
 4. Shortcut creation
 
-== Changelog ==
+## Changelog
 
-= 0.1.0 =
+### [0.3.0] - 2021-04-05
-* initial release
+#### Added
+- Donation link to WordPress Plugin Directory sidebar and to `package.json`
+- Cache requests for 2 minutes
+- Set up ESLint static code analysis
+#### Changed
+- Update luxon dependency
+- Update dev dependencies jsdom, webpack, webpack-cli
+
+### [0.2.2] - 2021-03-10
+#### Changed
+- Confirm compatibility with WordPress 5.7
+- Update graphql dependency
+- Update dev dependencies jsdom, webpack, webpack-cli, webpack-stream
+
+### [0.2.1] - 2021-01-15
+#### Fixed
+- Add missing backtick to `readme.txt`
+
+### [0.2.0] - 2021-01-15
+#### Added
+- `changelog.txt`
+- Changelog maintenance steps to `README.md`
+- Link to Github repository in `readme.txt`
+- Option to show events of a specific group by indicating its name
+#### Changed
+- Use same Markdown style in `README.md` as in other documents
+
+### [0.1.0] - 2021-01-09
+initial release

source/connector-mobilizon/view/events-list-widget/form.php

@@ -12,3 +12,7 @@ if (!defined('ABSPATH')) {
   <label for="<?php echo esc_attr($this->get_field_id('eventsCount')); ?>"><?php esc_attr_e('Number of events to show', $textDomain); ?>:</label>
   <input class="tiny-text" id="<?php echo esc_attr($this->get_field_id('eventsCount')); ?>" name="<?php echo esc_attr($this->get_field_name('eventsCount')); ?>" type="number" value="<?php echo esc_attr($eventsCount); ?>" min="1">
 </p>
+<p>
+  <label for="<?php echo esc_attr($this->get_field_id('groupName')); ?>"><?php esc_attr_e('Group name (optional)', $textDomain); ?>:</label> 
+  <input class="widefat" id="<?php echo esc_attr($this->get_field_id('groupName')); ?>" name="<?php echo esc_attr($this->get_field_name('groupName')); ?>" type="text" value="<?php echo esc_attr($groupName); ?>">
+</p>

source/connector-mobilizon/view/events-list.php

@@ -5,7 +5,8 @@ if (!defined('ABSPATH')) {
 }
 ?>
 <ul class="<?php echo esc_attr($classNamePrefix); ?>_events-list"
+  data-url="<?php echo esc_attr($url); ?>"
   data-maximum="<?php echo esc_attr($eventsCount); ?>"
-  data-url="<?php echo esc_attr($url); ?>">
+  data-group-name="<?php echo esc_attr($groupName); ?>">
   <li style="display: none;"><?php echo esc_html_e('The events could not be loaded!', $textDomain); ?></li>
 </ul>