From 11668e9baa0d15f947e03d50add7098b7c9e314f Mon Sep 17 00:00:00 2001
From: dashdashzako <d@dashdashzako.net>
Date: Thu, 10 Oct 2019 16:50:23 +0200
Subject: [PATCH] Implement action monitoring

---
 public/index.html                   |  1 +
 src/actions/shared/remote-loader.ts |  8 +-----
 src/components/app/StoreWrapper.tsx |  6 +++--
 src/middleware/analytics.ts         | 42 +++++++++++++++++++++++++++++
 src/types.ts                        |  7 +++++
 src/utils/user.ts                   | 16 +++++++++++
 6 files changed, 71 insertions(+), 9 deletions(-)
 create mode 100644 src/middleware/analytics.ts
 create mode 100644 src/utils/user.ts

diff --git a/public/index.html b/public/index.html
index 18456ef..dd25754 100644
--- a/public/index.html
+++ b/public/index.html
@@ -36,6 +36,7 @@
   <script>
     window.aiana = {
       "container": '#root',
+      "loggerEndpoint": "http://qlf-mooc-accessibility.bordeaux.inria.fr/api/log",
       "bookmarks": [],
       "chapters": {
         "language": "fr",
diff --git a/src/actions/shared/remote-loader.ts b/src/actions/shared/remote-loader.ts
index 73a6d81..2aa04e0 100644
--- a/src/actions/shared/remote-loader.ts
+++ b/src/actions/shared/remote-loader.ts
@@ -6,7 +6,7 @@ import { DEFAULT_CONFIGURATION_PATH, CONFIGURATION_KEY } from '../../constants';
 import { IWidget } from '../../reducers/preferences';
 import { initialPreferencesState } from '../../constants/default-preferences-state';
 import { CDispatch } from '../../store';
-import { ThunkResult } from '../../types';
+import { ThunkResult, IQueryString } from '../../types';
 import { IPreset } from '../../reducers/presets';
 import { BASE_PRESETS } from '../../constants/presets';
 import md5 from 'md5';
@@ -15,12 +15,6 @@ import { createAction } from 'redux-starter-kit';
 import i18n from '../../i18n';
 import { loadConfiguration } from './configuration';
 
-interface IQueryString {
-  config?: string;
-  mid?: string;
-  src?: string;
-}
-
 // TODO: split function
 // FIXME: language and defaults handling isn't robust enough.
 async function getConfigurationData() {
diff --git a/src/components/app/StoreWrapper.tsx b/src/components/app/StoreWrapper.tsx
index 62281b2..e7e3aeb 100644
--- a/src/components/app/StoreWrapper.tsx
+++ b/src/components/app/StoreWrapper.tsx
@@ -1,7 +1,7 @@
 import throttle from 'lodash.throttle';
 import React from 'react';
 import { Provider } from 'react-redux';
-import { configureStore } from 'redux-starter-kit';
+import { configureStore, getDefaultMiddleware } from 'redux-starter-kit';
 import rootReducer, { IAianaState } from '../../reducers';
 import ConnectedAiana from './ConnectedAiana';
 import i18n from '../../i18n';
@@ -10,10 +10,12 @@ import {
   getLocalPreferencesState
 } from '../../reducers/preferences';
 import { stateToYAML as playerToYAML } from '../../reducers/player';
+import analytics from '../../middleware/analytics';
 
 const store = configureStore({
   reducer: rootReducer,
-  preloadedState: loadState()
+  preloadedState: loadState(),
+  middleware: [...getDefaultMiddleware(), analytics]
 });
 
 store.subscribe(
diff --git a/src/middleware/analytics.ts b/src/middleware/analytics.ts
new file mode 100644
index 0000000..a31bf71
--- /dev/null
+++ b/src/middleware/analytics.ts
@@ -0,0 +1,42 @@
+import { Middleware } from 'redux';
+import { PayloadAction } from 'redux-starter-kit';
+import { loadConfiguration } from '../actions/shared/configuration';
+import { setSubtitlesText } from '../actions/subtitles';
+import { getUserId } from '../utils/user';
+import { IAianaState } from '../reducers';
+
+// TODO: what actions should be monitored?
+const loggedActions = [loadConfiguration.type, setSubtitlesText.type];
+
+const analytics: Middleware = (store) => (next) => (
+  action: PayloadAction<any>
+) => {
+  if (loggedActions.includes(action.type)) {
+    const state: IAianaState = store.getState();
+
+    const playerEvent = {
+      createdAt: Date.now(),
+      payload: action.payload,
+      mediaId: state.player.mediaId,
+      state,
+      type: action.type,
+      userId: getUserId()
+    };
+
+    const strData = JSON.stringify(playerEvent);
+
+    if (process.env.NODE_ENV !== 'production') {
+      console.log(strData);
+    } else {
+      const loggerEndpoint = (window as any).loggerEndpoint;
+
+      if (loggerEndpoint) {
+        navigator.sendBeacon(loggerEndpoint, strData);
+      }
+    }
+  }
+
+  return next(action);
+};
+
+export default analytics;
diff --git a/src/types.ts b/src/types.ts
index 05bf8e8..d6bf1d0 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -42,3 +42,10 @@ export interface ICueBoundaries {
   from: number;
   to: number;
 }
+
+export interface IQueryString {
+  config?: string;
+  mid?: string;
+  src?: string;
+  uid?: string;
+}
diff --git a/src/utils/user.ts b/src/utils/user.ts
new file mode 100644
index 0000000..281e1d3
--- /dev/null
+++ b/src/utils/user.ts
@@ -0,0 +1,16 @@
+import queryString from 'query-string';
+import { IQueryString } from '../types';
+
+export function getUserId() {
+  const parsedQueryString: IQueryString = queryString.parse(
+    window.location.search
+  );
+
+  const { uid } = parsedQueryString;
+
+  if (uid) {
+    return uid;
+  }
+
+  return null;
+}