DnD Ordered TagPanel

package.json

@@ -77,6 +77,8 @@
     "querystring": "^0.2.0",
     "react": "^15.4.0",
     "react-addons-css-transition-group": "15.3.2",
+    "react-dnd": "^2.1.4",
+    "react-dnd-html5-backend": "^2.1.2",
     "react-dom": "^15.4.0",
     "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef",
     "sanitize-html": "^1.14.1",

src/MatrixClientPeg.js

@@ -22,6 +22,7 @@ import EventTimeline from 'matrix-js-sdk/lib/models/event-timeline';
 import EventTimelineSet from 'matrix-js-sdk/lib/models/event-timeline-set';
 import createMatrixClient from './utils/createMatrixClient';
 import SettingsStore from './settings/SettingsStore';
+import MatrixActionCreators from './actions/MatrixActionCreators';
 
 interface MatrixClientCreds {
     homeserverUrl: string,
@@ -68,6 +69,8 @@ class MatrixClientPeg {
 
     unset() {
         this.matrixClient = null;
+
+        MatrixActionCreators.stop();
     }
 
     /**
@@ -108,6 +111,9 @@ class MatrixClientPeg {
         // regardless of errors, start the client. If we did error out, we'll
         // just end up doing a full initial /sync.
 
+        // Connect the matrix client to the dispatcher
+        MatrixActionCreators.start(this.matrixClient);
+
         console.log(`MatrixClientPeg: really starting MatrixClient`);
         this.get().startClient(opts);
         console.log(`MatrixClientPeg: MatrixClient started`);

src/actions/GroupActions.js

@@ -0,0 +1,26 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { createPromiseActionCreator } from './actionCreators';
+
+const GroupActions = {};
+
+GroupActions.fetchJoinedGroups = createPromiseActionCreator(
+    'GroupActions.fetchJoinedGroups',
+    (matrixClient) => matrixClient.getJoinedGroups(),
+);
+
+export default GroupActions;

src/actions/MatrixActionCreators.js

@@ -0,0 +1,39 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { createMatrixActionCreator } from './actionCreators';
+
+// Events emitted from the matrixClient that we want to dispatch as actions
+// via MatrixActionCreators. See createMatrixActionCreator.
+const REGISTERED_EVENTS = [
+    "accountData",
+];
+
+export default {
+    actionCreators: [],
+    actionCreatorsStop: [],
+
+    start(matrixClient) {
+        this.actionCreators = REGISTERED_EVENTS.map((eventId) =>
+            createMatrixActionCreator(matrixClient, eventId),
+        );
+        this.actionCreatorsStop = this.actionCreators.map((ac) => ac());
+    },
+
+    stop() {
+        this.actionCreatorsStop.map((stop) => stop());
+    },
+};

src/actions/TagOrderActions.js

@@ -0,0 +1,33 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import Analytics from '../Analytics';
+import { createPromiseActionCreator } from './actionCreators';
+import TagOrderStore from '../stores/TagOrderStore';
+
+const TagOrderActions = {};
+
+TagOrderActions.commitTagOrdering = createPromiseActionCreator(
+    'TagOrderActions.commitTagOrdering',
+    (matrixClient) => {
+        Analytics.trackEvent('TagOrderActions', 'commitTagOrdering');
+        return matrixClient.setAccountData('im.vector.web.tag_ordering', {
+            tags: TagOrderStore.getOrderedTags(),
+        });
+    },
+);
+
+export default TagOrderActions;

src/actions/actionCreators.js

@@ -0,0 +1,72 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import dis from '../dispatcher';
+
+/**
+ * Create an action creator that will dispatch actions asynchronously that
+ * indicate the current status of promise returned by the given function, fn.
+ * @param {string} id the id to give the dispatched actions. This is given a
+ *                   suffix determining whether it is pending, successful or
+ *                   a failure.
+ * @param {function} fn the function to call with arguments given to the
+ *                   returned function. This function should return a Promise.
+ * @returns {function} a function that dispatches asynchronous actions when called.
+ */
+export function createPromiseActionCreator(id, fn) {
+    return (...args) => {
+        dis.dispatch({action: id + '.pending'});
+        fn(...args).then((result) => {
+            dis.dispatch({action: id + '.success', result});
+        }).catch((err) => {
+            dis.dispatch({action: id + '.failure', err});
+        });
+    };
+}
+
+/**
+ * Create an action creator that will listen to events of type eventId emitted
+ * by matrixClient and dispatch a corresponding action of the following shape:
+ *     {
+ *         action: 'MatrixActions.' + eventId,
+ *         event: matrixEvent,
+ *         event_type: matrixEvent.getType(),
+ *         event_content: matrixEvent.getContent(),
+ *     }
+ * @param {MatrixClient} matrixClient the matrix client with which to register
+ *                                    a listener.
+ * @param {string} eventId the ID of the event that hen emitted will cause the
+ *                         an action to be dispatched.
+ * @returns {function} a function that, when called, will begin to listen to
+ *                     dispatches from matrixClient. The result from that
+ *                     function can be called to stop listening.
+ */
+export function createMatrixActionCreator(matrixClient, eventId) {
+    const listener = (matrixEvent) => {
+        dis.dispatch({
+            action: 'MatrixActions.' + eventId,
+            event: matrixEvent,
+            event_type: matrixEvent.getType(),
+            event_content: matrixEvent.getContent(),
+        });
+    };
+    return () => {
+        matrixClient.on(eventId, listener);
+        return () => {
+            matrixClient.removeListener(eventId, listener);
+        };
+    };
+}

src/components/structures/LoggedInView.js

@@ -18,6 +18,8 @@ limitations under the License.
 
 import * as Matrix from 'matrix-js-sdk';
 import React from 'react';
+import { DragDropContext } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
 
 import { KeyCode, isOnlyCtrlOrCmdKeyEvent } from '../../Keyboard';
 import Notifier from '../../Notifier';
@@ -38,7 +40,7 @@ import SettingsStore from "../../settings/SettingsStore";
  *
  * Components mounted below us can access the matrix client via the react context.
  */
-export default React.createClass({
+const LoggedInView = React.createClass({
     displayName: 'LoggedInView',
 
     propTypes: {
@@ -344,3 +346,5 @@ export default React.createClass({
         );
     },
 });
+
+export default DragDropContext(HTML5Backend)(LoggedInView);

src/components/structures/MatrixChat.js

@@ -84,7 +84,7 @@ const ONBOARDING_FLOW_STARTERS = [
     'view_create_group',
 ];
 
-module.exports = React.createClass({
+export default React.createClass({
     // we export this so that the integration tests can use it :-S
     statics: {
         VIEWS: VIEWS,