add 2 min request cache, remove a few unneeded semicolons

package-lock.json

@@ -11,7 +11,8 @@
       "dependencies": {
         "graphql": "^15.5.0",
         "graphql-request": "^3.4.0",
-        "luxon": "^1.26.0"
+        "luxon": "^1.26.0",
+        "object-hash": "^2.1.1"
       },
       "devDependencies": {
         "ava": "^3.15.0",
@@ -6670,6 +6671,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.1.1.tgz",
+      "integrity": "sha512-VOJmgmS+7wvXf8CjbQmimtCnEx3IAoLxI3fp2fbWehxrWBcAQFbk+vcwb6vzR0VZv/eNCJ/27j151ZTwqW/JeQ==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
@@ -16445,6 +16454,11 @@
         }
       }
     },
+    "object-hash": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.1.1.tgz",
+      "integrity": "sha512-VOJmgmS+7wvXf8CjbQmimtCnEx3IAoLxI3fp2fbWehxrWBcAQFbk+vcwb6vzR0VZv/eNCJ/27j151ZTwqW/JeQ=="
+    },
     "object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",

package.json

@@ -20,7 +20,8 @@
   "dependencies": {
     "graphql": "^15.5.0",
     "graphql-request": "^3.4.0",
-    "luxon": "^1.26.0"
+    "luxon": "^1.26.0",
+    "object-hash": "^2.1.1"
   },
   "devDependencies": {
     "ava": "^3.15.0",

source/connector-mobilizon/changelog.txt

@@ -1,6 +1,7 @@
 ### [Unreleased]
 #### Added
 - Donation link to WordPress Plugin Directory sidebar and to `package.json`
+- Cache requests for 2 minutes
 #### Changed
 - Update luxon dependency
 - Update dev dependencies jsdom, webpack, webpack-cli

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

@@ -1,5 +1,5 @@
-import test from 'ava';
-import { DateTimeWrapper } from './date-time-wrapper';
+import test from 'ava'
+import { DateTimeWrapper } from './date-time-wrapper'
 
 test('#getShortDate usual date', t => {
   const d = new DateTimeWrapper('2020-12-24T16:45:00Z')

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

@@ -1,4 +1,4 @@
-import { DateTime } from 'luxon';
+import { DateTime } from 'luxon'
 
 export class DateTimeWrapper {
 
@@ -23,6 +23,6 @@ export class DateTimeWrapper {
   }
 
   static getCurrentDatetimeAsString() {
-    return DateTime.local().toString();
+    return DateTime.local().toString()
   }
 }

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

@@ -1,8 +1,8 @@
-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, list) {
   const maxEventsCount = list.getAttribute('data-maximum')
@@ -11,7 +11,7 @@ function displayEvents(data, list) {
   for (let i = 0; i < eventsCount; i++) {
     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)
 
     const br = document.createElement('br')
@@ -26,7 +26,7 @@ function displayEvents(data, list) {
         dateText += endsOn.getShortDate() + ' '
     }
     dateText += endsOn.get24Time()
-    const textnode = document.createTextNode(dateText);
+    const textnode = document.createTextNode(dateText)
     li.appendChild(textnode)
 
     list.appendChild(li)
@@ -44,7 +44,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const eventLists = document.getElementsByClassName(NAME + '_events-list')
   for (let list of eventLists) {
     const url = list.getAttribute('data-url') + '/api'
-    const limit = list.getAttribute('data-maximum')
+    const limit = parseInt(list.getAttribute('data-maximum'))
     const groupName = list.getAttribute('data-group-name')
     if (groupName) {
       GraphqlWrapper.getUpcomingEventsByGroupName({ url, limit, groupName })

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

@@ -1,10 +1,11 @@
-import { request, gql } from 'graphql-request'
+import { SessionCache } from './session-cache'
+import { request } from 'graphql-request'
 import { DateTimeWrapper } from './date-time-wrapper'
 
 export function getUpcomingEvents({ url, limit }) {
-  const query = gql`
-  query {
-    events(limit:${limit}) {
+  const query = `
+    query ($limit: Int) {
+      events(limit: $limit) {
         elements {
           id,
           title,
@@ -16,15 +17,21 @@ export function getUpcomingEvents({ url, limit }) {
       }
     }
   `
-  return request(url, query)
+  const dataInCache = SessionCache.get({ url, query, variables: { limit }})
+  if (dataInCache !== null)
+    return Promise.resolve(dataInCache)
+  return request(url, query, { limit })
+    .then((data) => {
+      SessionCache.add({ url, query, variables: { limit }}, data)
+      return Promise.resolve(data)
+    })
 }
 
 export function getUpcomingEventsByGroupName({ url, limit, groupName }) {
-  const afterDatetime = DateTimeWrapper.getCurrentDatetimeAsString();
-  const query = gql`
-  query {
-    group(preferredUsername:"${groupName}") {
-      organizedEvents(afterDatetime:"${afterDatetime}", limit:${limit}) {
+  const query = `
+    query ($afterDatetime: DateTime, $groupName: String, $limit: Int) {
+      group(preferredUsername: $groupName) {
+        organizedEvents(afterDatetime: $afterDatetime, limit: $limit) {
           elements {
             id,
             title,
@@ -37,5 +44,13 @@ export function getUpcomingEventsByGroupName({ url, limit, groupName }) {
       }
     }
   `
-  return request(url, query)
+  const afterDatetime = DateTimeWrapper.getCurrentDatetimeAsString()
+  const dataInCache = SessionCache.get({ url, query, variables: { afterDatetime, groupName, limit }})
+  if (dataInCache !== null)
+    return Promise.resolve(dataInCache)
+  return request(url, query, { afterDatetime, groupName, limit })
+    .then((data) => {
+      SessionCache.add({ url, query, variables: { afterDatetime, groupName, limit }}, data)
+      return Promise.resolve(data)
+    })
 }

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

@@ -1,7 +1,7 @@
-import test from 'ava';
-import { JSDOM } from 'jsdom';
+import test from 'ava'
+import { JSDOM } from 'jsdom'
 
-import * as HtmlCreator from './html-creator';
+import * as HtmlCreator from './html-creator'
 
 test.beforeEach(() => {
   global.document = new JSDOM().window.document

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.js

@@ -0,0 +1,24 @@
+import hash from './object-hash-wrapper'
+
+const MAX_AGE_IN_MS = 120000
+
+export class SessionCache {
+
+  static add(parameters, data) {
+    const key = hash(parameters)
+    const timestamp = Date.now()
+    const value = {
+      data,
+      timestamp,
+    }
+    sessionStorage.setItem(key, JSON.stringify(value))
+  }
+
+  static get(parameters) {
+    const key = hash(parameters)
+    const value = JSON.parse(sessionStorage.getItem(key))
+    if (value.timestamp && value.timestamp > Date.now() - MAX_AGE_IN_MS)
+      return value.data
+    return null
+  }
+}