From 7051c76b40509dde3375dcede8645f8d352aae99 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 8 Sep 2017 17:37:27 +0700
Subject: [PATCH 1/6] Init step for plugins and bootstrap, introspection
 service

---
 client/coral-admin/src/index.js               | 28 ++++----
 client/coral-embed-stream/src/index.js        | 67 ++++++++++---------
 client/coral-framework/services/bootstrap.js  | 42 +++++++++---
 client/coral-framework/services/client.js     |  6 +-
 .../coral-framework/services/introspection.js | 31 +++++++++
 client/coral-framework/services/plugins.js    |  8 +++
 6 files changed, 122 insertions(+), 60 deletions(-)
 create mode 100644 client/coral-framework/services/introspection.js

diff --git a/client/coral-admin/src/index.js b/client/coral-admin/src/index.js
index 5df2ce391..736d3efc9 100644
--- a/client/coral-admin/src/index.js
+++ b/client/coral-admin/src/index.js
@@ -12,23 +12,23 @@ import {toast} from 'react-toastify';
 import {createNotificationService} from './services/notification';
 import {hideShortcutsNote} from './actions/moderation';
 
-function hidrateStore({store, storage}) {
+smoothscroll.polyfill();
+
+function init({store, storage}) {
   if (storage && storage.getItem('coral:shortcutsNote') === 'hide') {
     store.dispatch(hideShortcutsNote());
   }
 }
 
-smoothscroll.polyfill();
+async function main() {
+  const notification = createNotificationService(toast);
+  const context = await createContext({reducers, graphqlExtension, pluginsConfig, notification, init});
+  render(
+    <TalkProvider {...context}>
+      <App />
+    </TalkProvider>
+    , document.querySelector('#root')
+  );
+}
 
-const notification = createNotificationService(toast);
-const context = createContext({reducers, graphqlExtension, pluginsConfig, notification});
-
-// hidrate Store with external data.
-hidrateStore(context);
-
-render(
-  <TalkProvider {...context}>
-    <App />
-  </TalkProvider>
-  , document.querySelector('#root')
-);
+main();
diff --git a/client/coral-embed-stream/src/index.js b/client/coral-embed-stream/src/index.js
index 5d72ea3e7..c8d3101ab 100644
--- a/client/coral-embed-stream/src/index.js
+++ b/client/coral-embed-stream/src/index.js
@@ -10,11 +10,6 @@ import reducers from './reducers';
 import TalkProvider from 'coral-framework/components/TalkProvider';
 import pluginsConfig from 'pluginsConfig';
 
-const context = createContext({reducers, graphqlExtension, pluginsConfig});
-
-// TODO: move init code into `bootstrap` service after auth has been refactored.
-const {store, pym} = context;
-
 function inIframe() {
   try {
     return window.self !== window.top;
@@ -23,37 +18,45 @@ function inIframe() {
   }
 }
 
-function init(config = {}) {
-  store.dispatch(addExternalConfig(config));
-  store.dispatch(checkLogin());
-}
+// TODO: move init code into `bootstrap` service after auth has been refactored.
+function preInit({store, pym}) {
 
-// Don't run this in the popup.
-if (!window.opener) {
-  if (inIframe()) {
+  // TODO: This is popup specific code and needs to be refactored.
+  if (!inIframe()) {
+    store.dispatch(addExternalConfig({}));
+    store.dispatch(checkLogin());
+    return;
+  }
+
+  pym.onMessage('login', (token) => {
+    if (token) {
+      store.dispatch(handleAuthToken(token));
+    }
+    store.dispatch(checkLogin());
+  });
+
+  pym.onMessage('logout', () => {
+    store.dispatch(logout());
+  });
+
+  return new Promise((resolve) => {
     pym.sendMessage('getConfig');
     pym.onMessage('config', (config) => {
-      init(JSON.parse(config));
-    });
-
-    pym.onMessage('login', (token) => {
-      if (token) {
-        store.dispatch(handleAuthToken(token));
-      }
+      store.dispatch(addExternalConfig(config));
       store.dispatch(checkLogin());
+      resolve();
     });
-
-    pym.onMessage('logout', () => {
-      store.dispatch(logout());
-    });
-  } else {
-    init();
-  }
+  });
 }
 
-render(
-  <TalkProvider {...context}>
-    <AppRouter />
-  </TalkProvider>
-  , document.querySelector('#talk-embed-stream-container')
-);
+async function main() {
+  const context = await createContext({reducers, graphqlExtension, pluginsConfig, preInit});
+  render(
+    <TalkProvider {...context}>
+      <AppRouter />
+    </TalkProvider>
+    , document.querySelector('#talk-embed-stream-container')
+  );
+}
+
+main();
diff --git a/client/coral-framework/services/bootstrap.js b/client/coral-framework/services/bootstrap.js
index a3ae5b18e..5b627125e 100644
--- a/client/coral-framework/services/bootstrap.js
+++ b/client/coral-framework/services/bootstrap.js
@@ -14,6 +14,8 @@ import {createGraphQLRegistry} from './graphqlRegistry';
 import globalFragments from 'coral-framework/graphql/fragments';
 import {createStorage} from 'coral-framework/services/storage';
 import {createHistory} from 'coral-framework/services/history';
+import {createIntrospection} from 'coral-framework/services/introspection';
+import introspectionData from 'coral-framework/graphql/introspection.json';
 
 /**
  * getStaticConfiguration will return a singleton of the static configuration
@@ -60,17 +62,27 @@ const getAuthToken = (store, storage) => {
 /**
  * createContext setups and returns Talk dependencies that should be
  * passed to `TalkProvider`.
- * @param  {Object} [config]                    configuration
- * @param  {Object} [config.reducers]           extra reducers to add to redux
- * @param  {Array}  [config.pluginsConfig]      plugin configuration as returned by importing pluginsConfig
- * @param  {Object} [config.graphqlExtensions]  additional extension to the graphql framework
- * @param  {Object} [config.notification]       replace default notification service
- * @return {Object}                             context
+ * @param  {Object}   [config]                    configuration
+ * @param  {Object}   [config.reducers]           extra reducers to add to redux
+ * @param  {Array}    [config.pluginsConfig]      plugin configuration as returned by importing pluginsConfig
+ * @param  {Object}   [config.graphqlExtensions]  additional extension to the graphql framework
+ * @param  {Object}   [config.notification]       replace default notification service
+ * @param  {Function} [config.init]               run initialization e.g. to hydrate redux store
+ * @param  {Function} [config.preInit]            same as init but run and resolve before init and plugins init
+ * @return {Object}                               context
  */
-export function createContext({reducers = {}, pluginsConfig = [], graphqlExtension = {}, notification} = {}) {
+export async function createContext({
+  reducers = {},
+  pluginsConfig = [],
+  graphqlExtension = {},
+  notification,
+  preInit,
+  init,
+} = {}) {
   const eventEmitter = new EventEmitter({wildcard: true});
   const storage = createStorage();
   const history = createHistory(BASE_PATH);
+  const introspection = createIntrospection(introspectionData);
   let store = null;
   const token = () => {
 
@@ -104,6 +116,7 @@ export function createContext({reducers = {}, pluginsConfig = [], graphqlExtensi
     uri: `${BASE_PATH}api/v1/graph/ql`,
     liveUri,
     token,
+    introspectionData,
   });
   const plugins = createPluginsService(pluginsConfig);
   const graphqlRegistry = createGraphQLRegistry(plugins.getSlotFragments.bind(plugins));
@@ -123,6 +136,7 @@ export function createContext({reducers = {}, pluginsConfig = [], graphqlExtensi
     notification,
     storage,
     history,
+    introspection,
   };
 
   // Load framework fragments.
@@ -155,8 +169,14 @@ export function createContext({reducers = {}, pluginsConfig = [], graphqlExtensi
     createReduxEmitter(eventEmitter),
   ]);
 
-  return {
-    ...context,
-    store,
-  };
+  context.store = store;
+
+  // Run pre initialization.
+  if (preInit) {
+    await preInit(context);
+  }
+
+  // Run initialization.
+  await Promise.all([init, plugins.executeInit(context)]);
+  return context;
 }
diff --git a/client/coral-framework/services/client.js b/client/coral-framework/services/client.js
index 5907488e3..52088ad79 100644
--- a/client/coral-framework/services/client.js
+++ b/client/coral-framework/services/client.js
@@ -1,7 +1,6 @@
 import ApolloClient, {addTypename, IntrospectionFragmentMatcher, createNetworkInterface} from 'apollo-client';
 import {SubscriptionClient, addGraphQLSubscriptions} from 'subscriptions-transport-ws';
 import MessageTypes from 'subscriptions-transport-ws/dist/message-types';
-import introspectionQueryResultData from '../graphql/introspection.json';
 
 // Redux middleware to report any errors to the console.
 export const apolloErrorReporter = () => (next) => (action) => {
@@ -21,10 +20,11 @@ function resolveToken(token) {
  * @param  {string|function} [options.token]    auth token
  * @param  {string}          [options.uri]      uri of the graphql server
  * @param  {string}          [options.liveUri]  uri of the graphql subscription server
+ * @param  {Object}          [options.introspectionData] introspection query result data
  * @return {Object}          apollo client
  */
 export function createClient(options = {}) {
-  const {token, uri, liveUri} = options;
+  const {token, uri, liveUri, introspectionData} = options;
   const wsClient = new SubscriptionClient(liveUri, {
     reconnect: true,
     lazy: true,
@@ -63,7 +63,7 @@ export function createClient(options = {}) {
   const client = new ApolloClient({
     connectToDevTools: true,
     addTypename: true,
-    fragmentMatcher: new IntrospectionFragmentMatcher({introspectionQueryResultData}),
+    fragmentMatcher: new IntrospectionFragmentMatcher({introspectionQueryResultData: introspectionData}),
     queryTransformer: addTypename,
     dataIdFromObject: (result) => {
       if (result.id && result.__typename) { // eslint-disable-line no-underscore-dangle
diff --git a/client/coral-framework/services/introspection.js b/client/coral-framework/services/introspection.js
new file mode 100644
index 000000000..fd82d41d6
--- /dev/null
+++ b/client/coral-framework/services/introspection.js
@@ -0,0 +1,31 @@
+class Introspection {
+  _enums=null;
+
+  constructor(data) {
+    this._enums = data.__schema.types
+      .filter((type) => type.kind === 'ENUM')
+      .reduce((obj, enumType) => {
+        obj[enumType.name] = enumType.enumValues.map((value) => value.name);
+        return obj;
+      }, {});
+  }
+
+  /**
+   * isValidEnumValue returns true when given enum and value exists.
+   * @param  {string}  name
+   * @param  {string}  value
+   * @return {boolean}
+   */
+  isValidEnumValue(name, value) {
+    return this._enums[name] && this._enums[name].indexOf(value) >= 0;
+  }
+}
+
+/**
+ * createIntrospection returns a introspection service
+ * @param  {Object}  data   introspection query data
+ * @return {Object}         introspection service
+ */
+export function createIntrospection(data) {
+  return new Introspection(data);
+}
diff --git a/client/coral-framework/services/plugins.js b/client/coral-framework/services/plugins.js
index 301428c12..dbda672ba 100644
--- a/client/coral-framework/services/plugins.js
+++ b/client/coral-framework/services/plugins.js
@@ -172,6 +172,14 @@ class PluginsService {
         .map((o) => ({[camelize(o.name)] : o.module.reducer}))
     );
   }
+
+  async executeInit(context) {
+    const results = this.plugins
+      .map((o) => o.module.init)
+      .filter((fn) => fn)
+      .map((fn) => fn(context));
+    await Promise.all(results);
+  }
 }
 
 /**

From e5bd8e2a3ba377eba836cb9607bf05123e05d5d0 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 8 Sep 2017 17:47:02 +0700
Subject: [PATCH 2/6] No need to check for loading config anymore

---
 client/coral-embed-stream/src/containers/Embed.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-embed-stream/src/containers/Embed.js b/client/coral-embed-stream/src/containers/Embed.js
index cd374291d..132e7f5e7 100644
--- a/client/coral-embed-stream/src/containers/Embed.js
+++ b/client/coral-embed-stream/src/containers/Embed.js
@@ -215,6 +215,6 @@ const mapDispatchToProps = (dispatch) =>
 
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
-  branch((props) => !props.auth.checkedInitialLogin && props.config, renderComponent(Spinner)),
+  branch((props) => !props.auth.checkedInitialLogin, renderComponent(Spinner)),
   withEmbedQuery,
 )(EmbedContainer);

From c8d1da5715d64a328a261a45e8cf9bc9dc7b643a Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 8 Sep 2017 17:50:22 +0700
Subject: [PATCH 3/6] Remember sort plugin

---
 .eslintignore                                 |  1 +
 .gitignore                                    |  1 +
 .../talk-plugin-remember-sort/client/.babelrc | 14 ++++++++
 .../client/.eslintrc.json                     | 23 +++++++++++++
 .../talk-plugin-remember-sort/client/index.js | 34 +++++++++++++++++++
 plugins/talk-plugin-remember-sort/index.js    |  1 +
 6 files changed, 74 insertions(+)
 create mode 100644 plugins/talk-plugin-remember-sort/client/.babelrc
 create mode 100644 plugins/talk-plugin-remember-sort/client/.eslintrc.json
 create mode 100644 plugins/talk-plugin-remember-sort/client/index.js
 create mode 100644 plugins/talk-plugin-remember-sort/index.js

diff --git a/.eslintignore b/.eslintignore
index 4805e34a4..c558f1256 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -22,5 +22,6 @@ plugins/*
 !plugins/talk-plugin-author-menu
 !plugins/talk-plugin-member-since
 !plugins/talk-plugin-ignore-user
+!plugins/talk-plugin-remember-sort
 
 node_modules
diff --git a/.gitignore b/.gitignore
index 0a2ac00df..05e41eac3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,5 +38,6 @@ plugins/*
 !plugins/talk-plugin-author-menu
 !plugins/talk-plugin-member-since
 !plugins/talk-plugin-ignore-user
+!plugins/talk-plugin-remember-sort
 
 **/node_modules/*
diff --git a/plugins/talk-plugin-remember-sort/client/.babelrc b/plugins/talk-plugin-remember-sort/client/.babelrc
new file mode 100644
index 000000000..60be246eb
--- /dev/null
+++ b/plugins/talk-plugin-remember-sort/client/.babelrc
@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}
\ No newline at end of file
diff --git a/plugins/talk-plugin-remember-sort/client/.eslintrc.json b/plugins/talk-plugin-remember-sort/client/.eslintrc.json
new file mode 100644
index 000000000..9fe56bd14
--- /dev/null
+++ b/plugins/talk-plugin-remember-sort/client/.eslintrc.json
@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}
diff --git a/plugins/talk-plugin-remember-sort/client/index.js b/plugins/talk-plugin-remember-sort/client/index.js
new file mode 100644
index 000000000..515eda186
--- /dev/null
+++ b/plugins/talk-plugin-remember-sort/client/index.js
@@ -0,0 +1,34 @@
+import {setSort} from 'plugin-api/beta/client/actions/stream';
+import {sortOrderSelector, sortBySelector} from 'plugin-api/beta/client/selectors/stream';
+
+const STORAGE_PATH = 'talkPluginRememberSort';
+
+export default {
+  init: ({store, storage, introspection}) => {
+
+    // TODO: workaround as this plugin is included in any target and
+    // embeds (e.g. admin), but should only be included inside the stream.
+
+    // Detect if we are currently running inside the stream.
+    if (!store.getState().stream) {
+      return;
+    }
+
+    const sort = JSON.parse(storage.getItem(STORAGE_PATH));
+    if (
+      sort &&
+      introspection.isValidEnumValue('SORT_ORDER', sort.sortOrder) &&
+      introspection.isValidEnumValue('SORT_COMMENTS_BY', sort.sortBy)
+    ) {
+      store.dispatch(setSort(sort));
+    }
+    store.subscribe(() => {
+      const state = store.getState();
+      const sortOrder = sortOrderSelector(state);
+      const sortBy = sortBySelector(state);
+      if (!sort || sort.sortOrder !== sortOrder || sort.sortBy !== sortBy) {
+        storage.setItem(STORAGE_PATH, JSON.stringify({sortOrder, sortBy}));
+      }
+    });
+  }
+};
diff --git a/plugins/talk-plugin-remember-sort/index.js b/plugins/talk-plugin-remember-sort/index.js
new file mode 100644
index 000000000..f053ebf79
--- /dev/null
+++ b/plugins/talk-plugin-remember-sort/index.js
@@ -0,0 +1 @@
+module.exports = {};

From 244a4b108de743f9a6258204b7eb8e815ace12e4 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 8 Sep 2017 18:16:49 +0700
Subject: [PATCH 4/6] Correctly detect subsequent change

---
 plugins/talk-plugin-remember-sort/client/index.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/plugins/talk-plugin-remember-sort/client/index.js b/plugins/talk-plugin-remember-sort/client/index.js
index 515eda186..4f1850b3f 100644
--- a/plugins/talk-plugin-remember-sort/client/index.js
+++ b/plugins/talk-plugin-remember-sort/client/index.js
@@ -14,7 +14,7 @@ export default {
       return;
     }
 
-    const sort = JSON.parse(storage.getItem(STORAGE_PATH));
+    let sort = JSON.parse(storage.getItem(STORAGE_PATH));
     if (
       sort &&
       introspection.isValidEnumValue('SORT_ORDER', sort.sortOrder) &&
@@ -26,8 +26,11 @@ export default {
       const state = store.getState();
       const sortOrder = sortOrderSelector(state);
       const sortBy = sortBySelector(state);
+
+      // Save sorting choice to storage if it has changed.
       if (!sort || sort.sortOrder !== sortOrder || sort.sortBy !== sortBy) {
-        storage.setItem(STORAGE_PATH, JSON.stringify({sortOrder, sortBy}));
+        sort = {sortOrder, sortBy};
+        storage.setItem(STORAGE_PATH, JSON.stringify(sort));
       }
     });
   }

From 9f33a77745e1acc0c895572d6ac02bce4a1ffc1d Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Sat, 9 Sep 2017 00:11:15 +0700
Subject: [PATCH 5/6] Implement and use pymStorage

---
 .../src/containers/Comment.js                 |  6 --
 client/coral-embed/src/Stream.js              |  4 +
 client/coral-embed/src/index.js               |  2 +-
 client/coral-framework/services/bootstrap.js  |  4 +-
 client/coral-framework/services/storage.js    | 88 +++++++++++++++++++
 .../talk-plugin-remember-sort/client/index.js |  9 +-
 6 files changed, 102 insertions(+), 11 deletions(-)

diff --git a/client/coral-embed-stream/src/containers/Comment.js b/client/coral-embed-stream/src/containers/Comment.js
index 733708a97..bd3160643 100644
--- a/client/coral-embed-stream/src/containers/Comment.js
+++ b/client/coral-embed-stream/src/containers/Comment.js
@@ -92,12 +92,6 @@ const singleCommentFragment = gql`
 const withCommentFragments = withFragments({
   root: gql`
     fragment CoralEmbedStream_Comment_root on RootQuery {
-      me {
-        ignoredUsers {
-          id
-        }
-      }
-      __typename
       me {
         ignoredUsers {
           id
diff --git a/client/coral-embed/src/Stream.js b/client/coral-embed/src/Stream.js
index b81964529..cb8bb5bca 100644
--- a/client/coral-embed/src/Stream.js
+++ b/client/coral-embed/src/Stream.js
@@ -3,6 +3,7 @@ import pym from 'pym.js';
 import EventEmitter from 'eventemitter2';
 import {buildUrl} from 'coral-framework/utils/url';
 import Snackbar from './Snackbar';
+import {createStorage, connectStorageToPym} from 'coral-framework/services/storage';
 
 const NOTIFICATION_OFFSET = 200;
 
@@ -134,6 +135,9 @@ export default class Stream {
 
     // If the user clicks outside the embed, then tell the embed.
     document.addEventListener('click', this.handleClick.bind(this), true);
+
+    // Listens to storage requests on pym and relay it to local storage.
+    connectStorageToPym(createStorage(), this.pym);
   }
 
   login(token) {
diff --git a/client/coral-embed/src/index.js b/client/coral-embed/src/index.js
index 2b17ed465..34bee1797 100644
--- a/client/coral-embed/src/index.js
+++ b/client/coral-embed/src/index.js
@@ -83,7 +83,7 @@ Talk.render = (el, opts) => {
       console.warn(
         'This page does not include a canonical link tag. Talk has inferred this asset_url from the window object. Query params have been stripped, which may cause a single thread to be present across multiple pages.'
       );
-      
+
       if (!window.location.origin) {
         window.location.origin = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}`;
       }
diff --git a/client/coral-framework/services/bootstrap.js b/client/coral-framework/services/bootstrap.js
index 5b627125e..492f6cc40 100644
--- a/client/coral-framework/services/bootstrap.js
+++ b/client/coral-framework/services/bootstrap.js
@@ -12,7 +12,7 @@ import {createPluginsService} from './plugins';
 import {createNotificationService} from './notification';
 import {createGraphQLRegistry} from './graphqlRegistry';
 import globalFragments from 'coral-framework/graphql/fragments';
-import {createStorage} from 'coral-framework/services/storage';
+import {createStorage, createPymStorage} from 'coral-framework/services/storage';
 import {createHistory} from 'coral-framework/services/history';
 import {createIntrospection} from 'coral-framework/services/introspection';
 import introspectionData from 'coral-framework/graphql/introspection.json';
@@ -81,6 +81,7 @@ export async function createContext({
 } = {}) {
   const eventEmitter = new EventEmitter({wildcard: true});
   const storage = createStorage();
+  const pymStorage = createPymStorage(pym);
   const history = createHistory(BASE_PATH);
   const introspection = createIntrospection(introspectionData);
   let store = null;
@@ -137,6 +138,7 @@ export async function createContext({
     storage,
     history,
     introspection,
+    pymStorage,
   };
 
   // Load framework fragments.
diff --git a/client/coral-framework/services/storage.js b/client/coral-framework/services/storage.js
index 9f06595fa..91ff10680 100644
--- a/client/coral-framework/services/storage.js
+++ b/client/coral-framework/services/storage.js
@@ -1,3 +1,4 @@
+import uuid from 'uuid/v4';
 
 function getStorage(type) {
   let storage = window[type], x = '__storage_test__';
@@ -41,3 +42,90 @@ function getStorage(type) {
 export function createStorage() {
   return getStorage('localStorage');
 }
+
+/**
+ * Creates a storage that relay requests over to pym.
+ * This is the counterpart of `connectStorageToPym`.
+ * @param  {string} pym  pym
+ * @return {Object} storage
+ */
+export function createPymStorage(pym) {
+
+  // A Map of requestID => {resolve, reject}
+  const requests = {};
+
+  // Requests method with parameters over pym.
+  const call = (method, parameters) => {
+    const id = uuid();
+    return new Promise((resolve, reject) => {
+      requests[id] = {resolve, reject};
+      pym.sendMessage('pymStorage.request', JSON.stringify({id, method, parameters}));
+    });
+  };
+
+  // Receive successful responses.
+  pym.onMessage('pymStorage.response', (msg) => {
+    const {id, result} = JSON.parse(msg);
+    requests[id].resolve(result);
+    delete requests[id];
+  });
+
+  // Receive error responses.
+  pym.onMessage('pymStorage.error', (msg) => {
+    const {id, error} = JSON.parse(msg);
+    requests[id].reject(error);
+    delete requests[id];
+  });
+
+  return {
+    setItem: (key, value) => call('setItem', {key, value}),
+    getItem: (key, value) => call('getItem', {key, value}),
+    removeItem: (key) => call('removeItem', {key}),
+  };
+}
+
+/**
+ * Listens to `pym` and relay storage requests to `storage`.
+ * This is the counterpart of `createPymStorage`.
+ * @param  {string} pym  pym
+ * @return {Object} storage
+ */
+export function connectStorageToPym(storage, pym) {
+  pym.onMessage('pymStorage.request', (msg) => {
+    const {id, method, parameters} = JSON.parse(msg);
+    const {key, value} = parameters;
+    const prefixedKey = `talkPymStorage:${key}`;
+
+    // Variable for the method return value.
+    let result;
+
+    const sendError = (error) => {
+      console.error(error);
+      pym.sendMessage('pymStorage.error', JSON.stringify({id, error}));
+    };
+
+    try {
+      switch(method) {
+      case 'setItem':
+        result = storage.setItem(prefixedKey, value);
+        break;
+      case 'getItem':
+        result = storage.getItem(prefixedKey);
+        break;
+      case 'removeItem':
+        result = storage.removeItem(prefixedKey);
+        break;
+      default:
+        sendError(`Unknown method ${method}`);
+        return;
+      }
+    }
+    catch(err) {
+      sendError(err.toString());
+      return;
+    }
+
+    pym.sendMessage('pymStorage.response', JSON.stringify({id, result}));
+  });
+}
+
diff --git a/plugins/talk-plugin-remember-sort/client/index.js b/plugins/talk-plugin-remember-sort/client/index.js
index 4f1850b3f..061f71809 100644
--- a/plugins/talk-plugin-remember-sort/client/index.js
+++ b/plugins/talk-plugin-remember-sort/client/index.js
@@ -4,7 +4,7 @@ import {sortOrderSelector, sortBySelector} from 'plugin-api/beta/client/selector
 const STORAGE_PATH = 'talkPluginRememberSort';
 
 export default {
-  init: ({store, storage, introspection}) => {
+  init: async ({store, pymStorage, introspection}) => {
 
     // TODO: workaround as this plugin is included in any target and
     // embeds (e.g. admin), but should only be included inside the stream.
@@ -14,7 +14,10 @@ export default {
       return;
     }
 
-    let sort = JSON.parse(storage.getItem(STORAGE_PATH));
+    // We use pymStorage instead to persist the data directly on the parent page,
+    // in order to mitigate strict cross domain security settings.
+
+    let sort = JSON.parse(await pymStorage.getItem(STORAGE_PATH));
     if (
       sort &&
       introspection.isValidEnumValue('SORT_ORDER', sort.sortOrder) &&
@@ -30,7 +33,7 @@ export default {
       // Save sorting choice to storage if it has changed.
       if (!sort || sort.sortOrder !== sortOrder || sort.sortBy !== sortBy) {
         sort = {sortOrder, sortBy};
-        storage.setItem(STORAGE_PATH, JSON.stringify(sort));
+        pymStorage.setItem(STORAGE_PATH, JSON.stringify(sort));
       }
     });
   }

From 6b74877d016d08b5b4e7e9dff8c6057d0a61e5fc Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Sat, 9 Sep 2017 00:15:19 +0700
Subject: [PATCH 6/6] Implement and use pymStorage

---
 client/coral-framework/services/storage.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/client/coral-framework/services/storage.js b/client/coral-framework/services/storage.js
index 91ff10680..11aa5df98 100644
--- a/client/coral-framework/services/storage.js
+++ b/client/coral-framework/services/storage.js
@@ -87,14 +87,15 @@ export function createPymStorage(pym) {
 /**
  * Listens to `pym` and relay storage requests to `storage`.
  * This is the counterpart of `createPymStorage`.
- * @param  {string} pym  pym
- * @return {Object} storage
+ * @param  {Object} storage  storage to perform requests on
+ * @param  {Object} pym      pym to listen to storage requests
+ * @param  {string} prefix   namespace requests by prepending a prefix to the keys
  */
-export function connectStorageToPym(storage, pym) {
+export function connectStorageToPym(storage, pym, prefix = 'talkPymStorage:') {
   pym.onMessage('pymStorage.request', (msg) => {
     const {id, method, parameters} = JSON.parse(msg);
     const {key, value} = parameters;
-    const prefixedKey = `talkPymStorage:${key}`;
+    const prefixedKey = `${prefix}${key}`;
 
     // Variable for the method return value.
     let result;