remove space

This reverts commit 9662e1f333.

.github/workflows/codeql-analysis.yml

@@ -1,71 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: 'CodeQL'
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [main]
-  schedule:
-    - cron: '39 19 * * 4'
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: ['javascript']
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
-        # Learn more:
-        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v2
-
-      # Initializes the CodeQL tools for scanning.
-      - name: Initialize CodeQL
-        uses: github/codeql-action/init@v1
-        with:
-          languages: ${{ matrix.language }}
-          # If you wish to specify custom queries, you can do so here or in a config file.
-          # By default, queries listed here will override any specified in a config file.
-          # Prefix the list here with "+" to use these queries and those in the config file.
-          # queries: ./path/to/local/query, your-org/your-repo/queries@main
-
-      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-      # If this step fails, then you should remove it and run the build manually (see below)
-      #- name: Autobuild
-      #  uses: github/codeql-action/autobuild@v1
-
-      # ℹ️ Command-line programs to run using the OS shell.
-      # 📚 https://git.io/JvXDl
-
-      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-      #    and modify them (or add more) to build your code if your project
-      #    uses a compiled language
-
-      - run: |
-          npm install
-          npm run build-prod
-
-      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v1

.github/workflows/codeql.yml

@@ -0,0 +1,96 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL Advanced"
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+  schedule:
+    - cron: '20 7 * * 0'
+
+jobs:
+  analyze:
+    name: Analyze (${{ matrix.language }})
+    # Runner size impacts CodeQL analysis time. To learn more, please see:
+    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
+    #   - https://gh.io/supported-runners-and-hardware-resources
+    #   - https://gh.io/using-larger-runners (GitHub.com only)
+    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
+    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
+    permissions:
+      # required for all workflows
+      security-events: write
+
+      # required to fetch internal or private CodeQL packs
+      packages: read
+
+      # only required for workflows in private repositories
+      actions: read
+      contents: read
+
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+        - language: actions
+          build-mode: none
+        - language: javascript-typescript
+          build-mode: none
+        # CodeQL supports the following values keywords for 'language': 'actions', 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'swift'
+        # Use `c-cpp` to analyze code written in C, C++ or both
+        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
+        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
+        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
+        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
+        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
+        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    # Add any setup steps before running the `github/codeql-action/init` action.
+    # This includes steps like installing compilers or runtimes (`actions/setup-node`
+    # or others). This is typically only required for manual builds.
+    # - name: Setup runtime (example)
+    #   uses: actions/setup-example@v1
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v3
+      with:
+        languages: ${{ matrix.language }}
+        build-mode: ${{ matrix.build-mode }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+    # If the analyze step fails for one of the languages you are analyzing with
+    # "We were unable to automatically build your code", modify the matrix above
+    # to set the build mode to "manual" for that language. Then modify this step
+    # to build your code.
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+    - if: matrix.build-mode == 'manual'
+      shell: bash
+      run: |
+        npm install
+        npm run build-prod
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v3
+      with:
+        category: "/language:${{matrix.language}}"

.github/workflows/qodana-code-quality.yml

@@ -1,23 +0,0 @@
-name: Qodana
-on:
-  workflow_dispatch:
-  pull_request:
-  push:
-    branches:
-      - main
-      - 'releases/*'
-
-jobs:
-  qodana:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - name: 'Qodana Scan'
-        uses: JetBrains/qodana-action@v2022.3.2
-        env:
-          QODANA_TOKEN: ${{ secrets.QODANA_TOKEN }}
-      - uses: github/codeql-action/upload-sarif@v2
-        with:
-          sarif_file: ${{ runner.temp }}/qodana/results/qodana.sarif.json

.github/workflows/test.yml

@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

.gitignore

@@ -3,3 +3,6 @@ build/
 coverage/
 node_modules/
 vendor/
+
+.phpunit.cache
+.phpunit.result.cache

.husky/pre-commit

@@ -1,5 +1,2 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npm test
-npx lint-staged
+lint-staged

.vscode/settings.json

@@ -0,0 +1,73 @@
+{
+  "intelephense.stubs": [
+    "apache",
+    "bcmath",
+    "bz2",
+    "calendar",
+    "com_dotnet",
+    "Core",
+    "ctype",
+    "curl",
+    "date",
+    "dba",
+    "dom",
+    "enchant",
+    "exif",
+    "FFI",
+    "fileinfo",
+    "filter",
+    "fpm",
+    "ftp",
+    "gd",
+    "gettext",
+    "gmp",
+    "hash",
+    "iconv",
+    "imap",
+    "intl",
+    "json",
+    "ldap",
+    "libxml",
+    "mbstring",
+    "meta",
+    "mysqli",
+    "oci8",
+    "odbc",
+    "openssl",
+    "pcntl",
+    "pcre",
+    "PDO",
+    "pgsql",
+    "Phar",
+    "posix",
+    "pspell",
+    "random",
+    "readline",
+    "Reflection",
+    "session",
+    "shmop",
+    "SimpleXML",
+    "snmp",
+    "soap",
+    "sockets",
+    "sodium",
+    "SPL",
+    "sqlite3",
+    "standard",
+    "superglobals",
+    "sysvmsg",
+    "sysvsem",
+    "sysvshm",
+    "tidy",
+    "tokenizer",
+    "xml",
+    "xmlreader",
+    "xmlrpc",
+    "xmlwriter",
+    "xsl",
+    "Zend OPcache",
+    "zip",
+    "zlib",
+    "wordpress"
+  ]
+}

README.md

@@ -6,6 +6,8 @@ More details can be found in the [WordPress Plugin Directory](https://wordpress.
 
 The current changelog can be found under [source/changelog.txt](source/changelog.txt).
 
+This plugin uses [Mobilizon's GraphQL API](https://docs.joinmobilizon.org/contribute/graphql_api/).
+
 ## Development
 
 ### Setup
@@ -22,18 +24,23 @@ The current changelog can be found under [source/changelog.txt](source/changelog
 ### Release procedure
 
 1. Make sure `changelog.txt` is up-to-date.
-2. Use a new version number and copy over the new section into `readme.txt`.
-3. Update `package.json` with the same version number.
-4. Update the `package-lock.json`: `npm i --package-lock-only`
-5. Build: `npm run build-prod`
-6. Make sure screenshots are up-to-date.
-7. Copy the built plugin into `/trunk` of SVN.
-8. Create a new tag of the new version: `svn cp trunk tags/<version>`
-9. Check the version number occurrences in both folders.
-10. Commit everything together to the release SVN: `svn ci -m "release version <version>"` Make sure to add new files beforehand.
-11. Commit the new version in git with the same message.
-12. Tag the new version: `git tag v<version>`
-13. Push the new tag to the repository: `git push --tags`
+2. Create a new section with a new version number.
+3. Copy over the new section into `readme.txt`.
+4. Update `package.json` with the same version number.
+5. Update the `package-lock.json`: `npm i --package-lock-only`
+6. Build: `npm run build-prod`
+7. Make sure screenshots are up-to-date.
+8. Copy the built plugin into `/trunk` of SVN.
+9. Create a new tag of the new version: `svn cp trunk tags/<version>`
+10. Check the version number occurrences in both folders.
+11. Make sure to handle exclamation and question marks in `svn status`.
+12. Commit everything together to the release SVN: `svn ci -m "release version <version>"`
+13. Commit the new version in git with the same message.
+14. Tag the new version: `git tag v<version>`
+15. Push the new tag to the repository: `git push --tags`
+16. Append `-next` to the version number in `package.json`.
+17. Update the `package-lock.json`: `npm i --package-lock-only`
+18. Commit: `git commit -am "prepare next release"`
 
 ### Other commands
 
@@ -44,3 +51,4 @@ The current changelog can be found under [source/changelog.txt](source/changelog
 - Update PHP dependencies: `composer update`
 - Check for direct PHP dependency updates: `composer outdated --direct`
 - Format code with prettier: `npm run format`
+- Generate `vendor/autoload.php` file after creating new class: `composer dump-autoload`

composer.json

@@ -1 +1,10 @@
-{}
+{
+  "autoload": {
+    "psr-4": {
+      "MobilizonConnector\\": "source/includes/"
+    }
+  },
+  "require-dev": {
+    "phpunit/phpunit": "^9.6"
+  }
+}

gulpfile.cjs

@@ -11,12 +11,11 @@ function injectMetadata() {
   return src(
     [
       FOLDER_BUILD + '/front/block-events-loader.js',
-      FOLDER_BUILD + '/front/events-loader.js',
       FOLDER_BUILD + '/' + PACKAGE.name + '.php',
-      FOLDER_BUILD + '/includes/constants.php',
+      FOLDER_BUILD + '/includes/Constants.php',
       FOLDER_BUILD + '/readme.txt',
     ],
-    { base: './' }
+    { base: './' },
   )
     .pipe(replace('<wordpress-author-name>', PACKAGE.author.name))
     .pipe(replace('<wordpress-author-url>', PACKAGE.author.url))
@@ -26,22 +25,22 @@ function injectMetadata() {
     .pipe(
       replace(
         '<wordpress-minimum-version>',
-        PACKAGE.additionalDetails.wordpressMinimumVersion
-      )
+        PACKAGE.additionalDetails.wordpressMinimumVersion,
+      ),
     )
     .pipe(replace('<wordpress-name>', PACKAGE.name))
     .pipe(replace('<wordpress-nice-name>', PACKAGE.additionalDetails.niceName))
     .pipe(
       replace(
         '<wordpress-php-minimum-version>',
-        PACKAGE.additionalDetails.phpMinimumVersion
-      )
+        PACKAGE.additionalDetails.phpMinimumVersion,
+      ),
     )
     .pipe(
       replace(
         '<wordpress-tested-up-to-version>',
-        PACKAGE.additionalDetails.wordpressTestedUpToVersion
-      )
+        PACKAGE.additionalDetails.wordpressTestedUpToVersion,
+      ),
     )
     .pipe(replace('<wordpress-version>', PACKAGE.version))
     .pipe(dest('.'))

package.json

@@ -1,18 +1,18 @@
 {
   "name": "connector-mobilizon",
-  "version": "0.11.0",
+  "version": "1.4.0-next",
   "description": "Display Mobilizon events in WordPress.",
   "private": true,
   "type": "module",
   "scripts": {
     "build-dev": "webpack --mode=development && gulp inject",
-    "build-prod": "ava && webpack --mode=production && gulp inject",
+    "build-prod": "rimraf -- build && ava && webpack --mode=production && gulp inject",
     "clean": "rimraf -- build",
     "coverage": "c8 --all --reporter=html --reporter=text --include=source/**/*.js ava",
     "eslint": "npx eslint source/**/*.js",
     "format": "npx prettier --write .",
-    "prepare": "husky install",
-    "test": "ava"
+    "prepare": "husky",
+    "test": "ava && ./vendor/bin/phpunit"
   },
   "author": {
     "name": "Daniel Waxweiler",
@@ -24,35 +24,33 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "graphql": "16.6.0",
-    "graphql-request": "5.2.0",
-    "luxon": "3.3.0",
-    "object-hash": "3.0.0"
+    "graphql": "16.11.0",
+    "luxon": "3.6.1"
   },
   "devDependencies": {
-    "@babel/core": "7.21.3",
-    "@babel/eslint-parser": "7.21.3",
-    "@babel/preset-env": "7.20.2",
-    "@babel/preset-react": "7.18.6",
-    "@wordpress/eslint-plugin": "14.3.0",
-    "ava": "5.2.0",
-    "babel-loader": "9.1.2",
-    "browser-env": "3.3.0",
-    "c8": "7.13.0",
-    "copy-webpack-plugin": "11.0.0",
-    "eslint": "8.37.0",
+    "@babel/core": "7.27.1",
+    "@babel/eslint-parser": "7.27.1",
+    "@babel/preset-env": "7.27.2",
+    "@babel/preset-react": "7.27.1",
+    "@wordpress/eslint-plugin": "22.10.0",
+    "ava": "6.3.0",
+    "babel-loader": "10.0.0",
+    "c8": "10.1.3",
+    "copy-webpack-plugin": "13.0.0",
+    "eslint": "8.57.1",
     "eslint-plugin-ava": "14.0.0",
     "eslint-plugin-jsx": "0.1.0",
-    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react": "7.37.5",
     "esm": "3.2.25",
-    "gulp": "4.0.2",
+    "gulp": "5.0.0",
     "gulp-replace": "1.1.4",
-    "husky": "8.0.3",
-    "lint-staged": "13.2.0",
-    "prettier": "2.8.7",
-    "rimraf": "4.4.1",
-    "webpack": "5.77.0",
-    "webpack-cli": "5.0.1"
+    "husky": "9.1.7",
+    "jsdom": "26.1.0",
+    "lint-staged": "15.5.2",
+    "prettier": "3.5.3",
+    "rimraf": "5.0.10",
+    "webpack": "5.99.9",
+    "webpack-cli": "6.0.1"
   },
   "ava": {
     "files": [
@@ -61,9 +59,9 @@
   },
   "additionalDetails": {
     "niceName": "Connector for Mobilizon",
-    "phpMinimumVersion": 8,
+    "phpMinimumVersion": 7.4,
     "wordpressMinimumVersion": 5.6,
-    "wordpressTestedUpToVersion": "6.2"
+    "wordpressTestedUpToVersion": "6.8"
   },
   "lint-staged": {
     "source/**/*.js": "eslint",

phpunit.xml

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:noNamespaceSchemaLocation="https://schema.phpunit.de/9.6/phpunit.xsd"
+         bootstrap="vendor/autoload.php"
+         cacheResultFile=".phpunit.cache/test-results"
+         executionOrder="depends,defects"
+         forceCoversAnnotation="false"
+         beStrictAboutCoversAnnotation="true"
+         beStrictAboutOutputDuringTests="true"
+         beStrictAboutTodoAnnotatedTests="true"
+         convertDeprecationsToExceptions="true"
+         failOnRisky="true"
+         failOnWarning="true"
+         verbose="true">
+    <testsuites>
+        <testsuite name="default">
+            <directory>tests</directory>
+        </testsuite>
+    </testsuites>
+
+    <coverage cacheDirectory=".phpunit.cache/code-coverage"
+              processUncoveredFiles="true">
+        <include>
+            <directory suffix=".php">source/includes</directory>
+        </include>
+    </coverage>
+</phpunit>

qodana.yaml

@@ -1,2 +0,0 @@
-version: '1.0'
-linter: jetbrains/qodana-js:2022.3-eap

source/changelog.txt

@@ -1,10 +1,82 @@
 ### [Unreleased]
 #### Added
+- Display "Show more events" button below the events list
+- Document basic installation
+- Add settings link to plugin on plugins page
+- Add donation link to plugin on plugins page
 #### Changed
+- Use `wp_remote_get()` instead of cURL functions for downloading the images
+- Use date and time formats from general site settings
 #### Deprecated
 #### Removed
+- Removed option "Display named offset"
 #### Fixed
+- Show group not found error message in block
 #### Security
+- Escape translated strings to prevent HTML injections
+
+### [1.4.0]
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.8
+
+### [1.3.0]
+#### Added
+- Comment for translators what placeholder will contain
+#### Changed
+- Confirm compatibility with WordPress 6.7
+- Load block script only in footer to reduce waiting time
+- Update dependencies
+#### Fixed
+- Mark event-related data as non-translatable within plugin
+- Add version number to script registration to break browser caching
+- Handle location being null
+
+### [1.2.0]
+#### Added
+- Display event picture if available
+#### Changed
+- Update dependencies
+
+### [1.1.0]
+#### Added
+- Add some spacing between event items
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.6
+#### Fixed
+- Fix undefined variable $classNamePrefix for both error views
+
+### [1.0.0]
+#### Added
+- Display name of group when it cannot be found
+#### Changed
+- Let backend do requests to API of Mobilizon instance for increased privacy
+- Update dependencies
+#### Fixed
+- Fix displaying more than one block in the editor
+
+### [0.11.5]
+#### Changed
+- Confirm compatibility with WordPress 6.5
+
+### [0.11.4]
+#### Changed
+- Confirm compatibility with WordPress 6.4
+- Update dependencies
+
+### [0.11.3]
+#### Fixed
+- Clean up distributed files
+
+### [0.11.2]
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.3
+
+### [0.11.1]
+#### Fixed
+- Revert minimum PHP version to 7.4 to allow some more time for upgrading PHP
 
 ### [0.11.0]
 #### Changed

source/connector-mobilizon.php

@@ -10,11 +10,20 @@
  * License:           <wordpress-license>
  */
 
-require_once __DIR__ . '/includes/constants.php';
-require_once __DIR__ . '/includes/settings.php';
-require_once __DIR__ . '/includes/events-list-block.php';
-require_once __DIR__ . '/includes/events-list-shortcut.php';
-require_once __DIR__ . '/includes/events-list-widget.php';
+require_once __DIR__ . '/includes/exceptions/GeneralException.php';
+require_once __DIR__ . '/includes/exceptions/GroupNotFoundException.php';
+require_once __DIR__ . '/includes/Constants.php';
+require_once __DIR__ . '/includes/Api.php';
+require_once __DIR__ . '/includes/EventsCache.php';
+require_once __DIR__ . '/includes/Settings.php';
+require_once __DIR__ . '/includes/SiteSettings.php';
+require_once __DIR__ . '/includes/LocalDateTime.php';
+require_once __DIR__ . '/includes/LocalDateTimeFormatter.php';
+require_once __DIR__ . '/includes/LineFormatter.php';
+require_once __DIR__ . '/includes/GraphQlClient.php';
+require_once __DIR__ . '/includes/EventsListBlock.php';
+require_once __DIR__ . '/includes/EventsListShortcut.php';
+require_once __DIR__ . '/includes/EventsListWidget.php';
 
 // Exit if this file is called directly.
 if (!defined('ABSPATH')) {
@@ -24,12 +33,14 @@ if (!defined('ABSPATH')) {
 final class Mobilizon_Connector {
 
   private function __construct() {
+    add_action('init', [$this, 'register_api']);
     add_action('init', [$this, 'register_blocks']);
     add_action('init', [$this, 'register_settings'], 1); // required for register_blocks
     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']);
+    add_filter('plugin_action_links_connector-mobilizon/connector-mobilizon.php', [$this, 'add_donation_link_to_plugins_page']);
+    add_filter('plugin_action_links_connector-mobilizon/connector-mobilizon.php', [$this, 'add_settings_link_to_plugins_page']);
   }
 
   public static function init() {
@@ -41,20 +52,42 @@ final class Mobilizon_Connector {
     return $instance;
   }
 
+  public function add_donation_link_to_plugins_page(array $links) {
+    $url = esc_url('<wordpress-donation-link>');
+    $settings_link = "<a href='$url'>" . esc_html__('Donate', 'connector-mobilizon') . '</a>';
+    array_unshift($links, $settings_link);
+    return $links;
+  }
+
+  public function add_settings_link_to_plugins_page(array $links) {
+    $url = esc_url(
+      add_query_arg(
+        'page',
+        'connector-mobilizon-settings',
+        get_admin_url() . 'options-general.php'
+      )
+    );
+    $settings_link = "<a href='$url'>" . esc_html__('Settings', 'connector-mobilizon') . '</a>';
+    array_unshift($links, $settings_link);
+    return $links;
+  }
+
   public function enable_activation() {
     MobilizonConnector\Settings::setDefaultOptions();
+    MobilizonConnector\Settings::removeObsoleteOptionsIfNeeded();
   }
 
   private function load_settings_globally_before_script($scriptName) {
     $settings = array(
-      'isShortOffsetNameShown' => MobilizonConnector\Settings::isShortOffsetNameShown(),
-      'locale' => str_replace('_', '-', get_locale()),
-      'timeZone' => wp_timezone_string(),
       'url' => MobilizonConnector\Settings::getUrl()
     );
     wp_add_inline_script($scriptName, 'var MOBILIZON_CONNECTOR = ' . json_encode($settings), 'before');
   }
 
+  public function register_api() {
+    MobilizonConnector\Api::init();
+  }
+
   public function register_blocks() {
     $scriptName = MobilizonConnector\EventsListBlock::initAndReturnScriptName();
     $this->load_settings_globally_before_script($scriptName);
@@ -64,12 +97,6 @@ final class Mobilizon_Connector {
     MobilizonConnector\Settings::init();
   }
 
-  public function register_scripts() {
-    $name = MobilizonConnector\NAME . '-js';
-    wp_enqueue_script($name, plugins_url('front/events-loader.js', __FILE__ ));
-    $this->load_settings_globally_before_script($name);
-  }
-
   public function register_shortcut() {
     MobilizonConnector\EventsListShortcut::init();
   }

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

@@ -1,87 +1,147 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 /* eslint-disable @wordpress/i18n-ellipsis */
-import { loadEventList } from '../../events-loader.js'
+import {
+  clearEventsList,
+  displayErrorMessage,
+  displayEvents,
+  hideErrorMessages,
+  showLoadingIndicator,
+} from '../../events-displayer.js'
+import Formatter from '../../formatter.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}`
+        let showMoreUrl = window.MOBILIZON_CONNECTOR.url
+        if (groupName) {
+          showMoreUrl += '/@' + groupName + '/events'
+          url += `&groupName=${groupName}`
+        }
+        container.querySelector('a').href = showMoreUrl
+        await fetch(url)
+          .then(async (response) => {
+            if (!response.ok) {
+              // Reject if no 2xx response.
+              const data = await response.text()
+              return Promise.reject(data)
+            }
+            return response.text()
+          })
+          .then((data) => {
+            const events = JSON.parse(data)
+            displayEvents({
+              events,
+              document,
+              container,
+              maxEventsCount: eventsCount,
+            })
+          })
+          .catch((data) => {
+            const parsedData = JSON.parse(data)
+            displayErrorMessage({ data: parsedData, container })
+          })
       }
     }, 500)
   }
   useEffect(() => {
-    reloadEventList()
+    reloadEventList(attributes.eventsCount, attributes.groupName)
   }, [])
   function updateEventsCount(event) {
     let newValue = Number(event.target.value)
-    if (newValue < 1) newValue = 1
+    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'}
+      <Panel>
+        <PanelBody
+          title={Formatter.escapeHTML(
+            __('Events List Settings', '<wordpress-name>'),
+          )}
         >
-          {__('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>
+          <label
+            className="components-base-control__label"
+            htmlFor={NAME + '_events-count'}
+          >
+            {Formatter.escapeHTML(
+              __('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'}
+          >
+            {Formatter.escapeHTML(
+              __('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' }}>
-        {__('The events could not be loaded!', '<wordpress-name>')}
+        {Formatter.escapeHTML(
+          __('The events could not be loaded!', '<wordpress-name>'),
+        )}
       </div>
       <div className="group-not-found" style={{ display: 'none' }}>
-        {__('The group could not be found!', '<wordpress-name>')}
+        {Formatter.escapeHTML(
+          __('The group could not be found!', '<wordpress-name>'),
+        )}
       </div>
       <div className="loading-indicator" style={{ display: 'none' }}>
-        {__('Loading...', '<wordpress-name>')}
+        {Formatter.escapeHTML(__('Loading...', '<wordpress-name>'))}
       </div>
       <ul style={{ 'list-style-type': 'none', 'padding-left': 0 }}></ul>
+      <a
+        href=""
+        target="_blank"
+        style={{ display: 'inline-block', 'margin-top': '20px;' }}
+      >
+        {Formatter.escapeHTML(__('Show more events', '<wordpress-name>'))}
+      </a>
     </div>,
   ]
 }

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

@@ -1,87 +0,0 @@
-import test from 'ava'
-import DateTimeWrapper from './date-time-wrapper.js'
-
-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',
-  })
-  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',
-  })
-  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',
-  })
-  t.is(d.getShortDate(), '24/12/2020')
-})
-
-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) => {
-  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
-  t.is(d.get24Time(), '16:45')
-})
-
-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) => {
-  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) => {
-  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) => {
-  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) => {
-  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) => {
-  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], ':')
-})
-
-test('#getShortOffsetName usual time', (t) => {
-  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
-  t.is(d.getShortOffsetName(), 'UTC')
-})

source/front/date-time-wrapper.js

@@ -1,42 +0,0 @@
-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'
-    ) {
-      timeZone = 'UTC' + timeZone
-    }
-    this.dateTime = DateTime.fromISO(text, { locale, zone: timeZone })
-  }
-
-  getShortDate() {
-    return this.dateTime.toLocaleString(DateTime.DATE_SHORT)
-  }
-
-  getShortOffsetName() {
-    return this.dateTime.offsetNameShort
-  }
-
-  get24Time() {
-    return this.dateTime.toLocaleString(DateTime.TIME_24_SIMPLE)
-  }
-
-  equalsDate(other) {
-    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() {
-    return DateTime.now().toString()
-  }
-}

source/front/events-displayer-test.js

@@ -1,5 +1,5 @@
 import test from 'ava'
-import browserEnv from 'browser-env'
+import { JSDOM } from 'jsdom'
 
 import {
   displayEvents,
@@ -9,7 +9,9 @@ import {
 } from './events-displayer.js'
 
 test.before(() => {
-  browserEnv()
+  const dom = new JSDOM()
+  global.document = dom.window.document
+  global.window = dom.window
   window.MOBILIZON_CONNECTOR = {
     locale: 'en-GB',
     timeZone: 'utc',
@@ -18,7 +20,6 @@ test.before(() => {
 
 test.beforeEach((t) => {
   t.context.container = document.createElement('div')
-  t.context.container.setAttribute('data-maximum', '2')
 
   const errorMessageGeneral = document.createElement('div')
   errorMessageGeneral.setAttribute('class', 'general-error')
@@ -40,24 +41,24 @@ test.beforeEach((t) => {
 })
 
 test('#displayEvents one event', (t) => {
-  const data = {
-    events: {
-      elements: [
-        {
-          title: 'a',
-          url: 'b',
-          beginsOn: '2021-04-15T10:30:00Z',
-          endsOn: '2021-04-15T15:30:00Z',
-          physicalAddress: {
-            description: 'c',
-            locality: 'd',
-          },
-        },
-      ],
+  const events = [
+    {
+      title: 'a',
+      url: 'b',
+      beginsOn: '2021-04-15T10:30:00Z',
+      endsOn: '2021-04-15T15:30:00Z',
+      physicalAddress: {
+        description: 'c',
+        locality: 'd',
+      },
+      startDateFormatted: '15/04/2021',
+      startTimeFormatted: '10:30',
+      endDateFormatted: '15/04/2021',
+      endTimeFormatted: '15:30',
     },
-  }
+  ]
   const container = t.context.container
-  displayEvents({ data, document, container })
+  displayEvents({ events, document, container, maxEventsCount: 2 })
   const list = container.querySelector('ul')
   t.is(list.children[0].childNodes[0].tagName, 'A')
   t.is(list.children[0].childNodes[0].getAttribute('href'), 'b')
@@ -86,13 +87,7 @@ test('#displayErrorMessage general error message display', (t) => {
 test('#displayErrorMessage group not found error message display', (t) => {
   const container = t.context.container
   const data = {
-    response: {
-      errors: [
-        {
-          code: 'group_not_found',
-        },
-      ],
-    },
+    code: 'group_not_found',
   }
   displayErrorMessage({ data, container })
   t.is(container.querySelector('.general-error').style.display, 'none')

source/front/events-displayer.js

@@ -1,27 +1,31 @@
 import Formatter from './formatter.js'
-import { createAnchorElement } from './html-creator.js'
+import { createAnchorElement, createImageElement } from './html-creator.js'
 
 export function clearEventsList(container) {
   const list = container.querySelector('ul')
   list.replaceChildren()
 }
 
-export function displayEvents({ data, document, container }) {
+export function displayEvents({ events, document, container, maxEventsCount }) {
   hideLoadingIndicator(container)
 
-  const isShortOffsetNameShown =
-    window.MOBILIZON_CONNECTOR.isShortOffsetNameShown
-  const locale = window.MOBILIZON_CONNECTOR.locale
-  const maxEventsCount = container.getAttribute('data-maximum')
-  const timeZone = window.MOBILIZON_CONNECTOR.timeZone
-
-  const events = data.events
-    ? data.events.elements
-    : data.group.organizedEvents.elements
   const eventsCount = Math.min(maxEventsCount, events.length)
   const list = container.querySelector('ul')
   for (let i = 0; i < eventsCount; i++) {
     const li = document.createElement('li')
+    li.style.lineHeight = '150%'
+    li.style.marginTop = '20px'
+
+    if (events[i].picture) {
+      const img = createImageElement({
+        document,
+        alt: events[i].picture.alt ? events[i].picture.alt : '',
+        src: events[i].picture.base64 ? events[i].picture.base64 : '',
+      })
+      img.style.display = 'block'
+      img.style.maxWidth = '100%'
+      li.appendChild(img)
+    }
 
     const a = createAnchorElement({
       document,
@@ -34,11 +38,10 @@ export function displayEvents({ data, document, container }) {
     li.appendChild(br)
 
     const date = Formatter.formatDate({
-      locale,
-      start: events[i].beginsOn,
-      end: events[i].endsOn,
-      timeZone,
-      isShortOffsetNameShown,
+      startDateFormatted: events[i].startDateFormatted,
+      startTimeFormatted: events[i].startTimeFormatted,
+      endDateFormatted: events[i].endDateFormatted,
+      endTimeFormatted: events[i].endTimeFormatted,
     })
     const textnode = document.createTextNode(date)
     li.appendChild(textnode)
@@ -63,13 +66,7 @@ export function displayEvents({ data, document, container }) {
 
 export function displayErrorMessage({ data, container }) {
   hideLoadingIndicator(container)
-  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'
-  ) {
+  if (Object.hasOwn(data, 'code') && data.code === 'group_not_found') {
     const message = container.querySelector('.group-not-found')
     message.style.display = 'block'
   } else {

source/front/events-loader.js

@@ -1,38 +0,0 @@
-import {
-  clearEventsList,
-  displayEvents,
-  displayErrorMessage,
-  hideErrorMessages,
-  showLoadingIndicator,
-} from './events-displayer.js'
-import * as GraphqlWrapper from './graphql-wrapper.js'
-
-const NAME = '<wordpress-name>'
-const URL_SUFFIX = '/api'
-
-document.addEventListener('DOMContentLoaded', loadEventLists)
-
-function loadEventLists() {
-  const eventLists = document.getElementsByClassName(NAME + '_events-list')
-  for (const list of eventLists) {
-    loadEventList(list)
-  }
-}
-
-export function loadEventList(container) {
-  const url = MOBILIZON_CONNECTOR.url + URL_SUFFIX
-  const limit = parseInt(container.getAttribute('data-maximum'))
-  const groupName = container.getAttribute('data-group-name')
-  hideErrorMessages(container)
-  clearEventsList(container)
-  showLoadingIndicator(container)
-  if (groupName) {
-    GraphqlWrapper.getUpcomingEventsByGroupName({ url, limit, groupName })
-      .then((data) => displayEvents({ data, document, container }))
-      .catch((data) => displayErrorMessage({ data, container }))
-  } else {
-    GraphqlWrapper.getUpcomingEvents({ url, limit })
-      .then((data) => displayEvents({ data, document, container }))
-      .catch((data) => displayErrorMessage({ data, container }))
-  }
-}

source/front/formatter-test.js

@@ -1,57 +1,48 @@
 import test from 'ava'
+import { JSDOM } from 'jsdom'
+
 import Formatter from './formatter.js'
 
+test.beforeEach(() => {
+  const dom = new JSDOM()
+  global.document = dom.window.document
+})
+
+test('#escapeHTML', (t) => {
+  const escaped = Formatter.escapeHTML('<b>a</b>')
+  t.is(escaped, '&lt;b&gt;a&lt;/b&gt;')
+})
+
 test('#formatDate one date', (t) => {
   const date = Formatter.formatDate({
-    start: '2021-04-15T10:30:00Z',
-    end: '2021-04-15T15:30:00Z',
+    startDateFormatted: '15/04/2021',
+    startTimeFormatted: '10:30',
+    endDateFormatted: '15/04/2021',
+    endTimeFormatted: '15:30',
   })
   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,
-  })
-  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',
+    startDateFormatted: '15/04/2021',
+    startTimeFormatted: '10:30',
+    endDateFormatted: '16/04/2021',
+    endTimeFormatted: '15:30',
   })
   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,
-  })
-  t.is(date, '15/04/2021 10:30 - 16/04/2021 15:30 (UTC)')
-})
-
 test('#formatDate second date is null', (t) => {
   const date = Formatter.formatDate({
-    start: '2021-04-15T10:30:00Z',
-    end: null,
+    startDateFormatted: '15/04/2021',
+    startTimeFormatted: '10:30',
+    endDateFormatted: undefined,
+    endTimeFormatted: undefined,
   })
   t.is(date, '15/04/2021 10:30')
 })
 
-test('#formatDate second date is null with short offset name', (t) => {
-  const date = Formatter.formatDate({
-    start: '2021-04-15T10:30:00Z',
-    end: null,
-    isShortOffsetNameShown: true,
-  })
-  t.is(date, '15/04/2021 10:30 (UTC)')
-})
-
 test('#formatLocation both parameters', (t) => {
   const location = Formatter.formatLocation({ description: 'a', locality: 'b' })
   t.is(location, 'a, b')

source/front/formatter.js

@@ -1,30 +1,26 @@
-import DateTimeWrapper from './date-time-wrapper.js'
-
 export default class Formatter {
-  static formatDate({ locale, timeZone, start, end, isShortOffsetNameShown }) {
-    const startDateTime = new DateTimeWrapper({
-      locale,
-      text: start,
-      timeZone,
-    })
-    let dateText = startDateTime.getShortDate()
-    dateText += ' ' + startDateTime.get24Time()
-    if (!end && isShortOffsetNameShown) {
-      dateText += ' (' + startDateTime.getShortOffsetName() + ')'
-    }
+  static escapeHTML(input) {
+    const div = document.createElement('div')
+    div.appendChild(document.createTextNode(input))
+    return div.innerHTML
+  }
 
-    if (end) {
-      const endDateTime = new DateTimeWrapper({ locale, text: end, timeZone })
-      if (!startDateTime.equalsDate(endDateTime)) {
+  static formatDate({
+    startDateFormatted,
+    startTimeFormatted,
+    endDateFormatted,
+    endTimeFormatted,
+  }) {
+    let dateText = startDateFormatted
+    dateText += ' ' + startTimeFormatted
+    if (endDateFormatted) {
+      if (startDateFormatted !== endDateFormatted) {
         dateText += ' - '
-        dateText += endDateTime.getShortDate() + ' '
+        dateText += endDateFormatted + ' '
       } else {
         dateText += ' - '
       }
-      dateText += endDateTime.get24Time()
-      if (isShortOffsetNameShown) {
-        dateText += ' (' + endDateTime.getShortOffsetName() + ')'
-      }
+      dateText += endTimeFormatted
     }
     return dateText
   }

source/front/graphql-wrapper.js

@@ -1,78 +0,0 @@
-import SessionCache from './session-cache.js'
-import { request } from 'graphql-request'
-import DateTimeWrapper from './date-time-wrapper.js'
-
-export function getUpcomingEvents({ url, limit }) {
-  const query = `
-    query ($limit: Int) {
-      events(limit: $limit) {
-        elements {
-          id,
-          title,
-          url,
-          beginsOn,
-          endsOn,
-          physicalAddress {
-            description,
-            locality
-          }
-        },
-        total
-      }
-    }
-  `
-  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,
-            physicalAddress {
-              description,
-              locality
-            }
-          },
-          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/front/html-creator-test.js

@@ -1,10 +1,11 @@
 import test from 'ava'
-import browserEnv from 'browser-env'
+import { JSDOM } from 'jsdom'
 
 import { createAnchorElement } from './html-creator.js'
 
 test.beforeEach(() => {
-  browserEnv()
+  const dom = new JSDOM()
+  global.document = dom.window.document
 })
 
 test('#createAnchorElement usual parameters', (t) => {

source/front/html-creator.js

@@ -5,3 +5,10 @@ export function createAnchorElement({ document, text, url }) {
   a.innerHTML = text
   return a
 }
+
+export function createImageElement({ document, alt, src }) {
+  const img = document.createElement('img')
+  img.setAttribute('alt', alt)
+  img.setAttribute('src', src)
+  return img
+}

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

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

source/front/object-hash-wrapper.js

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

source/front/session-cache-test.js

@@ -1,33 +0,0 @@
-import test from 'ava'
-import SessionCache from './session-cache.js'
-
-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/front/session-cache.js

@@ -1,27 +0,0 @@
-import hash from './object-hash-wrapper.js'
-
-const MAX_AGE_IN_MS = 120000
-
-export default 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/includes/Api.php

@@ -0,0 +1,71 @@
+<?php
+namespace MobilizonConnector;
+
+class Api {
+  public static function init() {
+    add_action('rest_api_init', 'MobilizonConnector\Api::init_api');
+  }
+
+  public static function init_api() {
+    register_rest_route(
+      NAME . '/v1',
+      '/events',
+      [
+        'methods' => 'GET',
+        'callback' => 'MobilizonConnector\Api::get_events',
+        'args' => [
+          'eventsCount' => [
+            'required' => true,
+            'validate_callback' => function($param, $request, $key) {
+              return is_numeric($param) && $param > 0;
+            }
+          ],
+          'groupName' => [
+            'validate_callback' => function($param, $request, $key) {
+              return !is_numeric($param);
+            }
+          ]
+        ],
+        'permission_callback' => '__return_true',
+      ]
+      );
+  }
+
+  public static function get_events($request) {
+    $eventsCount = $request['eventsCount'];
+    $groupName = isset($request['groupName']) ? $request['groupName'] : '';
+
+    $url = Settings::getUrl();
+
+    try {
+      if ($groupName) {
+        $events = GraphQlClient::get_upcoming_events_by_group_name($url, (int) $eventsCount, $groupName);
+      } else {
+        $events = GraphQlClient::get_upcoming_events($url, (int) $eventsCount);
+      }
+      $events = array_map([self::class, 'addDateAndTimeFormats'], $events);
+      return $events;
+    } catch (GeneralException $e) {
+      return new \WP_Error('events_not_loading', 'The events could not be loaded!', array('status' => 500));
+    } catch (GroupNotFoundException $e) {
+      return new \WP_Error('group_not_found', sprintf('The group "%s" could not be found!', $groupName), array('status' => 404));
+    }
+  }
+
+  public static function addDateAndTimeFormats($event) {
+    $dateFormat = SiteSettings::getDateFormat();
+    $timeFormat = SiteSettings::getTimeFormat();
+    $timeZone = SiteSettings::getTimeZone();
+
+    $startDateTime = new LocalDateTime($event['beginsOn'], $timeZone);
+    $event['startDateFormatted'] = LocalDateTimeFormatter::format($startDateTime, $dateFormat);
+    $event['startTimeFormatted'] = LocalDateTimeFormatter::format($startDateTime, $timeFormat);
+
+    if ($event['endsOn']) {
+      $endDateTime = new LocalDateTime($event['endsOn'], $timeZone);
+      $event['endDateFormatted'] = LocalDateTimeFormatter::format($endDateTime, $dateFormat);
+      $event['endTimeFormatted'] = LocalDateTimeFormatter::format($endDateTime, $timeFormat);
+    }
+    return $event;
+  }
+}

source/includes/Constants.php

@@ -1,11 +1,7 @@
 <?php
 namespace MobilizonConnector;
 
-// Exit if this file is called directly.
-if (!defined('ABSPATH')) {
-  exit;
-}
-
 const DEFAULT_EVENTS_COUNT = 5;
 const NAME = '<wordpress-name>';
 const NICE_NAME = '<wordpress-nice-name>';
+const PLUGIN_VERSION = '<wordpress-version>';

source/includes/EventsCache.php

@@ -0,0 +1,19 @@
+<?php
+namespace MobilizonConnector;
+
+final class EventsCache {
+
+  private static $MAX_AGE_IN_S = 120;
+
+  public static function set(array $parameters, mixed $data): void {
+    // md5 is used as key must be 172 characters or fewer in length.
+    $key = md5(json_encode($parameters));
+    set_transient($key, $data, self::$MAX_AGE_IN_S);
+  }
+
+  public static function get(array $parameters): mixed {
+    $key = md5(json_encode($parameters));
+    $data = get_transient($key);
+    return $data;
+  }
+}

source/includes/EventsListBlock.php

@@ -1,11 +1,6 @@
 <?php
 namespace MobilizonConnector;
 
-// Exit if this file is called directly.
-if (!defined('ABSPATH')) {
-  exit;
-}
-
 class EventsListBlock {
 
   public static function initAndReturnScriptName(): string {
@@ -15,11 +10,11 @@ class EventsListBlock {
         'wp-blocks',
         'wp-components',
         'wp-i18n'
-      ]);
+      ], '<wordpress-version>', array('in_footer' => true));
     register_block_type(NAME . '/events-list', [
       'api_version' => 2,
-      'title' => __('Events List', 'connector-mobilizon'),
-      'description' =>  __('A list of the upcoming events of the connected Mobilizon instance.', 'connector-mobilizon'),
+      'title' => esc_html__('Events List', 'connector-mobilizon'),
+      'description' =>  esc_html__('A list of the upcoming events of the connected Mobilizon instance.', 'connector-mobilizon'),
       'category' => 'widgets',
       'icon' => 'list-view',
       'supports' => [
@@ -41,12 +36,31 @@ class EventsListBlock {
   }
 
   public static function render($block_attributes, $content) {
-    $classNamePrefix = NAME;
+    $url = Settings::getUrl();
     $eventsCount = $block_attributes['eventsCount'];
     $groupName = isset($block_attributes['groupName']) ? $block_attributes['groupName'] : '';
+    $classNamePrefix = NAME;
 
     ob_start();
-    require dirname(__DIR__) . '/view/events-list.php';
+    try {
+      $showMoreUrl = Settings::getUrl();
+      if ($groupName) {
+        $events = GraphQlClient::get_upcoming_events_by_group_name($url, (int) $eventsCount, $groupName);
+        $showMoreUrl .= '/@' . $groupName . '/events';
+      } else {
+        $events = GraphQlClient::get_upcoming_events($url, (int) $eventsCount);
+      }
+
+      $dateFormat = SiteSettings::getDateFormat();
+      $timeFormat = SiteSettings::getTimeFormat();
+      $timeZone = SiteSettings::getTimeZone();
+
+      require dirname(__DIR__) . '/view/events-list.php';
+    } catch (GeneralException $e) {
+      require dirname(__DIR__) . '/view/events-list-not-loaded.php';
+    } catch (GroupNotFoundException $e) {
+      require dirname(__DIR__) . '/view/events-list-group-not-found.php';
+    }
     $output = ob_get_clean();
     return $output;
   }

source/includes/EventsListShortcut.php

@@ -1,11 +1,6 @@
 <?php
 namespace MobilizonConnector;
 
-// Exit if this file is called directly.
-if (!defined('ABSPATH')) {
-  exit;
-}
-
 class EventsListShortcut {
   
   public static function init() {
@@ -24,12 +19,31 @@ class EventsListShortcut {
       ), $atts
     );
 
-    $classNamePrefix = NAME;
+    $url = Settings::getUrl();
     $eventsCount = $atts_with_overriden_defaults['events-count'];
     $groupName = $atts_with_overriden_defaults['group-name'];
+    $classNamePrefix = NAME;
 
     ob_start();
-    require dirname(__DIR__) . '/view/events-list.php';
+    try {
+      $showMoreUrl = Settings::getUrl();
+      if ($groupName) {
+        $events = GraphQlClient::get_upcoming_events_by_group_name($url, (int) $eventsCount, $groupName);
+        $showMoreUrl .= '/@' . $groupName . '/events';
+      } else {
+        $events = GraphQlClient::get_upcoming_events($url, (int) $eventsCount);
+      }
+
+      $dateFormat = SiteSettings::getDateFormat();
+      $timeFormat = SiteSettings::getTimeFormat();
+      $timeZone = SiteSettings::getTimeZone();
+
+      require dirname(__DIR__) . '/view/events-list.php';
+    } catch (GeneralException $e) {
+      require dirname(__DIR__) . '/view/events-list-not-loaded.php';
+    } catch (GroupNotFoundException $e) {
+      require dirname(__DIR__) . '/view/events-list-group-not-found.php';
+    }
     $output = ob_get_clean();
     return $output;
   }

source/includes/EventsListWidget.php

@@ -1,19 +1,14 @@
 <?php
 namespace MobilizonConnector;
 
-// Exit if this file is called directly.
-if (!defined('ABSPATH')) {
-  exit;
-}
-
 class EventsListWidget extends \WP_Widget {
 
   public function __construct() {
     parent::__construct(
       NAME . '-events-list',
-      NICE_NAME . ' ' . __('Events List', 'connector-mobilizon'),
+      NICE_NAME . ' ' . esc_html__('Events List', 'connector-mobilizon'),
       array(
-        'description' => __('A list of the upcoming events of the connected Mobilizon instance.', 'connector-mobilizon'),
+        'description' => esc_html__('A list of the upcoming events of the connected Mobilizon instance.', 'connector-mobilizon'),
       ),
     );
   }
@@ -25,17 +20,36 @@ class EventsListWidget extends \WP_Widget {
       echo $args['before_title'].apply_filters('widget_title', $options['title']).$args['after_title'];
     }
 
-    $classNamePrefix = NAME;
+    $url = Settings::getUrl();
     $eventsCount = $options['eventsCount'];
     $groupName = isset($options['groupName']) ? $options['groupName'] : '';
+    $classNamePrefix = NAME;
 
-    require dirname(__DIR__) . '/view/events-list.php';
+    try {
+      $showMoreUrl = Settings::getUrl();
+      if ($groupName) {
+        $events = GraphQlClient::get_upcoming_events_by_group_name($url, (int) $eventsCount, $groupName);
+        $showMoreUrl .= '/@' . $groupName . '/events';
+      } else {
+        $events = GraphQlClient::get_upcoming_events($url, (int) $eventsCount);
+      }
+
+      $dateFormat = SiteSettings::getDateFormat();
+      $timeFormat = SiteSettings::getTimeFormat();
+      $timeZone = SiteSettings::getTimeZone();
+  
+      require dirname(__DIR__) . '/view/events-list.php';
+    } catch (GeneralException $e) {
+      require dirname(__DIR__) . '/view/events-list-not-loaded.php';
+    } catch (GroupNotFoundException $e) {
+      require dirname(__DIR__) . '/view/events-list-group-not-found.php';
+    }
 
     echo $args['after_widget'];
   }
 
   public function form($options) {
-    $title = !empty($options['title']) ? $options['title'] : __('Events', 'connector-mobilizon');
+    $title = !empty($options['title']) ? $options['title'] : esc_html__('Events', 'connector-mobilizon');
     $eventsCount = !empty($options['eventsCount']) ? $options['eventsCount'] : DEFAULT_EVENTS_COUNT;
     $groupName = !empty($options['groupName']) ? $options['groupName'] : '';
     

source/includes/GraphQlClient.php

@@ -0,0 +1,152 @@
+<?php
+namespace MobilizonConnector;
+
+final class GraphQlClient {
+
+  public static function query(string $endpoint, string $query, array $variables = [], ?string $token = null): array
+  {
+    $headers = ['Content-Type: application/json'];
+    if ($token !== null) {
+        $headers[] = "Authorization: bearer $token";
+    }
+
+    $context = stream_context_create([
+        'http' => [
+            'method' => 'POST',
+            'header' => $headers,
+            'content' => json_encode(['query' => $query, 'variables' => $variables]),
+        ]
+      ]);
+    $data = @file_get_contents($endpoint, false, $context);
+
+    if ($data === false) {
+      $error = error_get_last();
+      throw new \ErrorException($error['message'], $error['type']);
+    }
+
+    return json_decode($data, true);
+  }
+
+  public static function get_upcoming_events(string $url, int $limit): array {
+    $query = <<<'GRAPHQL'
+      query ($limit: Int) {
+        events(limit: $limit) {
+          elements {
+            id,
+            title,
+            url,
+            beginsOn,
+            endsOn,
+            physicalAddress {
+              description,
+              locality
+            },
+            picture {
+              alt,
+              contentType,
+              url
+            }
+          },
+          total
+        }
+      }
+      GRAPHQL;
+
+    $cachedEvents = EventsCache::get(['url' => $url, 'query' => $query, 'limit' => $limit]);
+    if ($cachedEvents !== false) {
+      return $cachedEvents;
+    }
+
+    $endpoint = $url . '/api';
+    $data = self::query($endpoint, $query, ['limit' => $limit]);
+    self::checkData($data);
+
+    $events = $data['data']['events']['elements'];
+    foreach ($events as &$event) {
+      if ($event['picture']) {
+        $picture_response = self::download_image($event['picture']['url']);
+        if ($picture_response !== false) {
+          $picture_encoded = 'data:' . $event['picture']['contentType'] . ';base64,' . base64_encode($picture_response);
+          $event['picture']['base64'] = $picture_encoded;
+        }
+      }
+      unset($event);
+    }
+
+    EventsCache::set(['url' => $url, 'query' => $query, 'limit' => $limit], $events);
+    return $events;
+  }
+
+  public static function get_upcoming_events_by_group_name(string $url, int $limit, string $groupName): array {
+    $query = <<<'GRAPHQL'
+      query ($afterDatetime: DateTime, $groupName: String!, $limit: Int) {
+        group(preferredUsername: $groupName) {
+          organizedEvents(afterDatetime: $afterDatetime, limit: $limit) {
+            elements {
+              id,
+              title,
+              url,
+              beginsOn,
+              endsOn,
+              physicalAddress {
+                description,
+                locality
+              },
+              picture {
+                alt,
+                contentType,
+                url
+              }
+            },
+            total
+          }
+        }
+      }
+      GRAPHQL;
+
+    $afterDatetime = date(\DateTime::ISO8601);
+
+    $cachedEvents = EventsCache::get(['url' => $url, 'query' => $query, 'afterDatetime' => $afterDatetime, 'groupName' => $groupName, 'limit' => $limit]);
+    if ($cachedEvents !== false) {
+      return $cachedEvents;
+    }
+
+    $endpoint = $url . '/api';
+    $data = self::query($endpoint, $query, ['afterDatetime' => $afterDatetime, 'groupName' => $groupName, 'limit' => $limit]);
+    self::checkData($data);
+
+    $events = $data['data']['group']['organizedEvents']['elements'];
+    
+    foreach ($events as &$event) {
+      if ($event['picture']) {
+        $picture_response = self::download_image($event['picture']['url']);
+        if ($picture_response !== false) {
+          $picture_encoded = 'data:' . $event['picture']['contentType'] . ';base64,' . base64_encode($picture_response);
+          $event['picture']['base64'] = $picture_encoded;
+        }
+      }
+      unset($event);
+    }
+
+    EventsCache::set(['url' => $url, 'query' => $query, 'afterDatetime' => $afterDatetime, 'groupName' => $groupName, 'limit' => $limit], $events);
+    return $events;
+  }
+
+  private static function checkData($data) {
+    if (isset($data['errors'])) {
+      if (count($data['errors']) > 0 &&
+          isset($data['errors'][0]['code']) &&
+          $data['errors'][0]['code'] === 'group_not_found') {
+        throw new GroupNotFoundException(serialize($data['errors'][0]));
+      } else {
+        throw new GeneralException(serialize($data['errors']));
+      }
+    }
+  }
+
+  private static function download_image($url) {
+    $response = wp_remote_get($url);
+    $image_data = $response['body'];
+    return $image_data;
+  }
+}

source/includes/LineFormatter.php

@@ -0,0 +1,41 @@
+<?php
+namespace MobilizonConnector;
+
+final class LineFormatter
+{
+  public static function format_date_time(\DateTimeZone $timeZone, string $dateFormat, string $timeFormat, string $start, ?string $end): string {
+    $startDateTime = new LocalDateTime($start, $timeZone);
+    $startDate = LocalDateTimeFormatter::format($startDateTime, $dateFormat);
+    $startTime = LocalDateTimeFormatter::format($startDateTime, $timeFormat);
+
+    $dateText = $startDate . ' ' . $startTime;
+    if ($end) {
+      $endDateTime = new LocalDateTime($end, $timeZone);
+      $endDate = LocalDateTimeFormatter::format($endDateTime, $dateFormat);
+      $endTime = LocalDateTimeFormatter::format($endDateTime, $timeFormat);
+
+      if ($startDate != $endDate) {
+        $dateText .= ' - ';
+        $dateText .= $endDate . ' ';
+      } else {
+        $dateText .= ' - ';
+      }
+      $dateText .= $endTime;
+    }
+    return $dateText;
+  }
+
+  public static function format_location(string $description, ?string $locality): string {
+    $location = '';
+    if ($description && trim($description)) {
+      $location .= trim($description);
+    }
+    if ($location && $locality) {
+      $location .= ', ';
+    }
+    if ($locality) {
+      $location .= $locality;
+    }
+    return $location;
+  }
+}

source/includes/LocalDateTime.php

@@ -0,0 +1,15 @@
+<?php
+namespace MobilizonConnector;
+
+final class LocalDateTime {
+  private $dateTime;
+
+  public function __construct(string $dateTimeString, \DateTimeZone $timeZone) {
+    $date = new \DateTimeImmutable($dateTimeString);
+    $this->dateTime = $date->setTimezone($timeZone);
+  }
+
+  public function getValue() {
+    return $this->dateTime;
+  }
+}

source/includes/LocalDateTimeFormatter.php

@@ -0,0 +1,12 @@
+<?php
+namespace MobilizonConnector;
+
+final class LocalDateTimeFormatter
+{
+  public static function format(LocalDateTime $dateTime, string $format) {
+    $timestamp = $dateTime->getValue()->getTimestamp();
+    $offset = $dateTime->getValue()->getOffset();
+    $timestampWithOffset = $timestamp + $offset;
+    return date_i18n($format, $timestampWithOffset);
+  }
+}

source/includes/Settings.php

@@ -1,20 +1,14 @@
 <?php
 namespace MobilizonConnector;
 
-// Exit if this file is called directly.
-if (!defined('ABSPATH')) {
-  exit;
-}
-
 class Settings {
 
   private static $DEFAULT_OPTION_URL = 'https://mobilizon.fr';
-  private static $DEFAULT_IS_SHORT_OFFSET_NAME_SHOWN = false;
   private static $PAGE_NAME = 'wordpress_mobilizon';
   private static $OPTIONS_GROUP_NAME = 'wordpress_mobilizon';
   private static $OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN = 'wordpress_mobilizon_is_short_offset_name_shown';
+  private static $OPTION_NAME_PLUGIN_VERSION = 'wordpress_mobilizon_plugin_version';
   private static $OPTION_NAME_URL = 'wordpress_mobilizon_url';
-  private static $SETTING_FIELD_NAME_IS_SHORT_OFFSET_NAME_SHOWN = 'wordpress_mobilizon_field_is_short_offset_name_shown';
   private static $SETTING_FIELD_NAME_URL = 'wordpress_mobilizon_field_url';
   private static $SETTINGS_SECTION_NAME = 'wordpress_mobilizon_section_general';
 
@@ -24,10 +18,6 @@ class Settings {
   }
 
   public static function init_settings() {
-    register_setting(
-      self::$OPTIONS_GROUP_NAME,
-      self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN
-    );
     register_setting(
       self::$OPTIONS_GROUP_NAME,
       self::$OPTION_NAME_URL,
@@ -36,14 +26,14 @@ class Settings {
 
     add_settings_section(
       self::$SETTINGS_SECTION_NAME,
-      __('General Settings', 'connector-mobilizon'),
+      esc_html__('General Settings', 'connector-mobilizon'),
       '',
       self::$PAGE_NAME
     );
 
     add_settings_field(
       self::$SETTING_FIELD_NAME_URL,
-      __('URL', 'connector-mobilizon'),
+      esc_html__('URL', 'connector-mobilizon'),
       'MobilizonConnector\Settings::output_field_url',
       self::$PAGE_NAME,
       self::$SETTINGS_SECTION_NAME,
@@ -51,21 +41,6 @@ class Settings {
         'label_for' => self::$SETTING_FIELD_NAME_URL
       )
     );
-    add_settings_field(
-      self::$SETTING_FIELD_NAME_IS_SHORT_OFFSET_NAME_SHOWN,
-      __('Display named offset', 'connector-mobilizon'),
-      'MobilizonConnector\Settings::output_field_is_short_offset_name_shown',
-      self::$PAGE_NAME,
-      self::$SETTINGS_SECTION_NAME,
-      array(
-        'label_for' => self::$SETTING_FIELD_NAME_IS_SHORT_OFFSET_NAME_SHOWN
-      )
-    );
-  }
-
-  public static function output_field_is_short_offset_name_shown($args) {
-    $isShortOffsetNameShown = self::isShortOffsetNameShown();
-    require dirname(__DIR__) . '/view/settings/is-short-offset-name-shown-field.php';
   }
 
   public static function output_field_url($args) {
@@ -79,7 +54,7 @@ class Settings {
       add_settings_error(
         self::$OPTION_NAME_URL,
         'wordpress_mobilizon_field_url_error',
-        __('The URL is invalid.', 'connector-mobilizon'),
+        esc_html__('The URL is invalid.', 'connector-mobilizon'),
         'error'
       );
     }
@@ -91,7 +66,7 @@ class Settings {
 
   public static function register_settings_page() {
     add_options_page(
-      NICE_NAME . ' ' . __('Settings', 'connector-mobilizon'),
+      NICE_NAME . ' ' . esc_html__('Settings', 'connector-mobilizon'),
       NICE_NAME,
       'manage_options',
       NAME . '-settings',
@@ -106,22 +81,26 @@ class Settings {
     require dirname(__DIR__) . '/view/settings/page.php';
   }
 
-  public static function isShortOffsetNameShown() {
-    return get_option(self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN);
-  }
-
   public static function getUrl() {
     return get_option(self::$OPTION_NAME_URL);
   }
 
   public static function setDefaultOptions() {
-    add_option(self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN, self::$DEFAULT_IS_SHORT_OFFSET_NAME_SHOWN);
     add_option(self::$OPTION_NAME_URL, self::$DEFAULT_OPTION_URL);
   }
 
   public static function deleteAllOptions() {
-    delete_option(self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN);
     delete_option(self::$OPTION_NAME_URL);
   }
 
+  public static function removeObsoleteOptionsIfNeeded() {
+    $storedPluginVersion = get_option(self::$OPTION_NAME_PLUGIN_VERSION);
+    if ($storedPluginVersion !== PLUGIN_VERSION) {
+      if (version_compare($storedPluginVersion, '1.5.0', '<') ) {
+        delete_option(self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN);
+      }
+      update_option(self::$OPTION_NAME_PLUGIN_VERSION, PLUGIN_VERSION);
+    }    
+  }
+
 }

source/includes/SiteSettings.php

@@ -0,0 +1,25 @@
+<?php
+namespace MobilizonConnector;
+
+class SiteSettings {
+
+  private static $OPTION_NAME_DATE_FORMAT = 'date_format';
+  private static $OPTION_NAME_TIME_FORMAT = 'time_format';
+
+  public static function getDateFormat() {
+    return get_option(self::$OPTION_NAME_DATE_FORMAT);
+  }
+
+  public static function getTimeFormat() {
+    return get_option(self::$OPTION_NAME_TIME_FORMAT);
+  }
+
+  public static function getTimeZone() {
+    return wp_timezone();
+  }
+
+  public static function getTimeZoneString() {
+    return wp_timezone_string();
+  }
+
+}

source/includes/exceptions/GeneralException.php

@@ -0,0 +1,12 @@
+<?php
+namespace MobilizonConnector;
+
+class GeneralException extends \Exception {
+  public function __construct($message, $code = 0, Throwable $previous = null) {
+    parent::__construct($message, $code, $previous);
+  }
+
+  public function __toString() {
+    return __CLASS__ . ": [{$this->code}]: {$this->message}\n";
+}
+}

source/includes/exceptions/GroupNotFoundException.php

@@ -0,0 +1,12 @@
+<?php
+namespace MobilizonConnector;
+
+class GroupNotFoundException extends \Exception {
+  public function __construct($message, $code = 0, Throwable $previous = null) {
+    parent::__construct($message, $code, $previous);
+  }
+
+  public function __toString() {
+    return __CLASS__ . ": [{$this->code}]: {$this->message}\n";
+}
+}

source/readme.txt

@@ -16,17 +16,25 @@ License: <wordpress-license>
 
 Features
 - Display events as Gutenberg block, as widget and as shortcut
-- Display events' title, date, and location, if available
-- Cache requests' responses for 2 minutes in the browser's `sessionStorage`
+- Display events' picture, if available, title with link, date, and location, if available
+- Cache requests' responses for 2 minutes in the database
 - Configure number of events to show per block, per widget and per shortcut
-- Optionally filter events by a specific group per block, per widget and per shortcut
+- Optionally filter events by a specific public group per block, per widget and per shortcut
 - Set the URL of the Mobilizon instance in the settings
-- Toggle adding named offset in brackets after the time in the settings
+
+This plugin requests the events via Mobilizon's GraphQL API.
 
 The source code is available on [Github](https://github.com/dwaxweiler/connector-mobilizon).
 
 ## Installation
 
+Install this plugin on the "Add Plugin" page in the administrator backend of your WordPress website by searching for it by its name or by uploading its archive by clicking on "Upload Plugin".
+In both cases, you then need to click the corresponding "Install now" button.
+
+After the installation, you can adapt the URL of the Mobilizon instance whose events you want to list on the plugin's settings' page.
+
+### Shortcut usage
+
 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"]`
@@ -41,6 +49,69 @@ You have to use their username, e.g. `@nosliensvivants`, and append the name of
 
 ## Changelog
 
+### [1.4.0]
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.8
+
+### [1.3.0]
+#### Added
+- Comment for translators what placeholder will contain
+#### Changed
+- Confirm compatibility with WordPress 6.7
+- Load block script only in footer to reduce waiting time
+- Update dependencies
+#### Fixed
+- Mark event-related data as non-translatable within plugin
+- Add version number to script registration to break browser caching
+- Handle location being null
+
+### [1.2.0]
+#### Added
+- Display event picture if available
+#### Changed
+- Update dependencies
+
+### [1.1.0]
+#### Added
+- Add some spacing between event items
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.6
+#### Fixed
+- Fix undefined variable $classNamePrefix for both error views
+
+### [1.0.0]
+#### Added
+- Display name of group when it cannot be found
+#### Changed
+- Let backend do requests to API of Mobilizon instance for increased privacy
+- Update dependencies
+#### Fixed
+- Fix displaying more than one block in the editor
+
+### [0.11.5]
+#### Changed
+- Confirm compatibility with WordPress 6.5
+
+### [0.11.4]
+#### Changed
+- Confirm compatibility with WordPress 6.4
+- Update dependencies
+
+### [0.11.3]
+#### Fixed
+- Clean up distributed files
+
+### [0.11.2]
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.3
+
+### [0.11.1]
+#### Fixed
+- Revert minimum PHP version to 7.4 to allow some more time for upgrading PHP
+
 ### [0.11.0]
 #### Changed
 - Update dependencies

source/uninstall.php

@@ -1,6 +1,6 @@
 <?php
-require_once __DIR__ . '/includes/constants.php';
-require_once __DIR__ . '/includes/settings.php';
+require_once __DIR__ . '/includes/Constants.php';
+require_once __DIR__ . '/includes/Settings.php';
 
 // If uninstall.php is not called by WordPress, exit.
 if (!defined('WP_UNINSTALL_PLUGIN')) {

source/view/events-list-group-not-found.php

@@ -0,0 +1,14 @@
+<?php
+namespace MobilizonConnector;
+
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+?>
+<div class="<?php echo esc_attr($classNamePrefix); ?>_events-list">
+  <?php
+  /* translators: %s is replaced with the name of the group. */
+  echo esc_html(sprintf(__('The group "%s" could not be found!', 'connector-mobilizon'), $groupName));
+  ?>
+</div>

source/view/events-list-not-loaded.php

@@ -0,0 +1,11 @@
+<?php
+namespace MobilizonConnector;
+
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+?>
+<div class="<?php echo esc_attr($classNamePrefix); ?>_events-list">
+  <?php esc_html_e('The events could not be loaded!', 'connector-mobilizon'); ?>
+</div>

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

@@ -1,4 +1,6 @@
 <?php
+namespace MobilizonConnector;
+
 // Exit if this file is called directly.
 if (!defined('ABSPATH')) {
   exit;

source/view/events-list.php

@@ -1,14 +1,29 @@
 <?php
+namespace MobilizonConnector;
+
 // Exit if this file is called directly.
 if (!defined('ABSPATH')) {
   exit;
 }
 ?>
-<div class="<?php echo esc_attr($classNamePrefix); ?>_events-list"
-  data-maximum="<?php echo esc_attr($eventsCount); ?>"
-  data-group-name="<?php echo esc_attr($groupName); ?>">
-  <div class="general-error" style="display: none;"><?php esc_html_e('The events could not be loaded!', 'connector-mobilizon'); ?></div>
-  <div class="group-not-found" style="display: none;"><?php esc_html_e('The group could not be found!', 'connector-mobilizon'); ?></div>
-  <div class="loading-indicator" style="display: none;"><?php esc_html_e('Loading...', 'connector-mobilizon'); ?></div>
-  <ul style="list-style-type: none; padding-left: 0;"></ul>
+<div class="<?php echo esc_attr($classNamePrefix); ?>_events-list">
+  <ul style="list-style-type: none; padding-left: 0;">
+    <?php foreach ($events as $event) { ?>
+    <li style="line-height: 150%; margin-top: 20px;">
+      <?php if (isset($event['picture'])) { ?>
+      <img alt="<?php echo esc_attr($event['picture']['alt']); ?>" src="<?php echo esc_attr($event['picture']['base64']); ?>" style="display: block; max-width: 100%;">
+      <?php } ?>
+      <a href="<?php echo esc_attr($event['url']); ?>"><?php echo esc_html($event['title']); ?></a>
+      <br>
+      <?php echo esc_html(LineFormatter::format_date_time($timeZone, $dateFormat, $timeFormat, $event['beginsOn'], $event['endsOn'])); ?>
+      <?php if (isset($event['physicalAddress'])) { ?>
+      <br>
+      <?php echo esc_html(LineFormatter::format_location($event['physicalAddress']['description'], $event['physicalAddress']['locality'])) ?>
+      <?php } ?>
+    </li>
+    <?php } ?>
+  </ul>
+  <a href="<?php echo esc_attr($showMoreUrl); ?>" class="button" style="display:inline-block; margin-top: 20px;">
+    <?php esc_html_e('Show more events', 'connector-mobilizon'); ?>
+  </a>
 </div>

source/view/settings/is-short-offset-name-shown-field.php

@@ -1,13 +0,0 @@
-<?php
-// Exit if this file is called directly.
-if (!defined('ABSPATH')) {
-  exit;
-}
-?>
-<input id="<?php echo esc_attr($args['label_for']); ?>"
-  name="<?php echo esc_attr(self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN); ?>"
-  type="checkbox"
-  <?php echo $isShortOffsetNameShown == true ? 'checked' : ''; ?>>
-<p class="description">
-  <?php esc_html_e('The time zone of this WordPress installation is used. Whether the current offset should be displayed in brackets after the time, e.g. 10:00 (UTC)', 'connector-mobilizon'); ?>
-</p>

source/view/settings/page.php

@@ -1,4 +1,6 @@
 <?php
+namespace MobilizonConnector;
+
 // Exit if this file is called directly.
 if (!defined('ABSPATH')) {
   exit;

source/view/settings/url-field.php

@@ -1,4 +1,6 @@
 <?php
+namespace MobilizonConnector;
+
 // Exit if this file is called directly.
 if (!defined('ABSPATH')) {
   exit;

tests/LineFormatterTest.php

@@ -0,0 +1,58 @@
+<?php
+declare(strict_types=1);
+
+use MobilizonConnector\LineFormatter;
+use PHPUnit\Framework\TestCase;
+
+function date_i18n(string $format, int $timestamp) {
+  // Mock WordPress function.
+  if ($format == 'H:i') {
+    if ($timestamp == 1618482600) {
+      return '10:30';
+    } else if ($timestamp == 1618500600 || $timestamp == 1618587000) {
+      return '15:30';
+    }
+  } else if ($format == 'd/m/Y') {
+    if ($timestamp == 1618482600 || $timestamp == 1618500600) {
+      return '15/04/2021';
+    } else if ($timestamp == 1618587000) {
+      return '16/04/2021';
+    }
+  }
+  return '';
+}
+
+final class LineFormatterTest extends TestCase
+{
+  public function testCanDateFormatOneDate(): void {
+    $this->assertSame('15/04/2021 10:30 - 15:30', LineFormatter::format_date_time(new \DateTimeZone('UTC'), 'd/m/Y', 'H:i', '2021-04-15T10:30:00Z', '2021-04-15T15:30:00Z'));
+  }
+
+  public function testCanDateFormatTwoDates(): void {
+    $this->assertSame('15/04/2021 10:30 - 16/04/2021 15:30', LineFormatter::format_date_time(new \DateTimeZone('UTC'), 'd/m/Y', 'H:i', '2021-04-15T10:30:00Z', '2021-04-16T15:30:00Z'));
+  }
+
+  public function testCanDateFormatWhenSecondDateIsNull(): void {
+    $this->assertSame('15/04/2021 10:30', LineFormatter::format_date_time(new \DateTimeZone('UTC'), 'd/m/Y', 'H:i', '2021-04-15T10:30:00Z', null));
+  }
+
+  public function testCanLocationFormatBothParameters(): void {
+    $this->assertSame('a, b', LineFormatter::format_location('a', 'b'));
+  }
+
+  public function testLocationFormatDescriptionOnly(): void {
+    $this->assertSame('a', LineFormatter::format_location('a', ''));
+  }
+
+  public function testLocationFormatDescriptionOnlyWithNull(): void {
+    $this->assertSame('a', LineFormatter::format_location('a', null));
+  }
+
+  public function testLocationFormatDescriptionWithSpaceOnly(): void {
+    $this->assertSame('', LineFormatter::format_location(' ', ''));
+  }
+
+  public function testLocationFormatLocalityOnly(): void {
+    $this->assertSame('a', LineFormatter::format_location('', 'a'));
+  }
+}

tests/LocalDateTimeTest.php

@@ -0,0 +1,12 @@
+<?php
+declare(strict_types=1);
+
+use MobilizonConnector\LocalDateTime;
+use PHPUnit\Framework\TestCase;
+
+final class LocalDateTimeTest extends TestCase {
+  public function testCanGet24TimeForUsualTime(): void {
+    $d = new LocalDateTime('2020-12-24T16:45:00Z', new DateTimeZone("utc"));
+    $this->assertEquals(new DateTimeImmutable('2020-12-24T16:45:00Z'), $d->getValue());
+  }
+}

webpack.config.cjs

@@ -8,7 +8,6 @@ const FOLDER_SOURCE = './source'
 module.exports = {
   entry: {
     'block-events-loader': FOLDER_SOURCE + '/front/block-events-loader.js',
-    'events-loader': FOLDER_SOURCE + '/front/events-loader.js',
   },
   output: {
     filename: '[name].js',