DnD Ordered TagPanel

src/MatrixClientPeg.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd.
+Copyright 2017 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

src/actions/GroupActions.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2017 Vector Creations Ltd
+Copyright 2017 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -18,6 +18,14 @@ import { asyncAction } from './actionCreators';
 
 const GroupActions = {};
 
+/**
+ * Create a GroupActions.fetchJoinedGroups action that represents an
+ * asyncronous request to fetch the groups to which a user is joined.
+ *
+ * @param {MatrixClient} matrixClient the matrix client to query.
+ * @returns {function} an asyncronous action of type
+ *                   GroupActions.fetchJoinedGroups.
+ */
 GroupActions.fetchJoinedGroups = function(matrixClient) {
     return asyncAction('GroupActions.fetchJoinedGroups', () => matrixClient.getJoinedGroups());
 };

src/actions/MatrixActionCreators.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2017 Vector Creations Ltd
+Copyright 2017 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -19,8 +19,7 @@ import dis from '../dispatcher';
 // TODO: migrate from sync_state to MatrixActions.sync so that more js-sdk events
 //       become dispatches in the same place.
 /**
- * An action creator that will map a `sync` event to a MatrixActions.sync action,
- * each parameter mapping to a key-value in the action.
+ * Create a MatrixActions.sync action that represents a MatrixClient `sync` event.
  *
  * @param {MatrixClient} matrixClient the matrix client
  * @param {string} state the current sync state.
@@ -37,11 +36,10 @@ function createSyncAction(matrixClient, state, prevState) {
 }
 
 /**
- * An action creator that will map an account data matrix event to a
- * MatrixActions.accountData action.
+ * Create a MatrixActions.accountData action that represents a MatrixClient `accountData`
+ * matrix event.
  *
- * @param {MatrixClient} matrixClient the matrix client with which to
- *                                    register a listener.
+ * @param {MatrixClient} matrixClient the matrix client.
  * @param {MatrixEvent} accountDataEvent the account data event.
  * @returns {Object} an action of type MatrixActions.accountData.
  */
@@ -54,14 +52,33 @@ function createAccountDataAction(matrixClient, accountDataEvent) {
     };
 }
 
+/**
+ * This object is responsible for dispatching actions when certain events are emitted by
+ * the given MatrixClient.
+ */
 export default {
+    // A list of callbacks to call to unregister all listeners added
     _matrixClientListenersStop: [],
 
+    /**
+     * Start listening to certain events from the MatrixClient and dispatch actions when
+     * they are emitted.
+     * @param {MatrixClient} matrixClient the MatrixClient to listen to events from
+     */
     start(matrixClient) {
         this._addMatrixClientListener(matrixClient, 'sync', createSyncAction);
         this._addMatrixClientListener(matrixClient, 'accountData', createAccountDataAction);
     },
 
+    /**
+     * Start listening to events emitted by matrixClient, dispatch an action created by the
+     * actionCreator function.
+     * @param {MatrixClient} matrixClient a MatrixClient to register a listener with.
+     * @param {string} eventName the event to listen to on MatrixClient.
+     * @param {function} actionCreator a function that should return an action to dispatch
+     *                                 when given the arguments emitted in the MatrixClient
+     *                                 event.
+     */
     _addMatrixClientListener(matrixClient, eventName, actionCreator) {
         const listener = (...args) => {
             dis.dispatch(actionCreator(matrixClient, ...args));
@@ -72,6 +89,9 @@ export default {
         });
     },
 
+    /**
+     * Stop listening to events.
+     */
     stop() {
         this._matrixClientListenersStop.forEach((stopListener) => stopListener());
     },

src/actions/TagOrderActions.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2017 Vector Creations Ltd
+Copyright 2017 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -20,6 +20,16 @@ import TagOrderStore from '../stores/TagOrderStore';
 
 const TagOrderActions = {};
 
+/**
+ * Create a TagOrderActions.commitTagOrdering action that represents an
+ * asyncronous request to commit TagOrderStore.getOrderedTags() to account
+ * data.
+ *
+ * @param {MatrixClient} matrixClient the matrix client to set the account
+ *                                    data on.
+ * @returns {function} an asyncronous action of type
+ *                   TagOrderActions.commitTagOrdering.
+ */
 TagOrderActions.commitTagOrdering = function(matrixClient) {
     return asyncAction('TagOrderActions.commitTagOrdering', () => {
         // Only commit tags if the state is ready, i.e. not null

src/actions/actionCreators.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2017 Vector Creations Ltd
+Copyright 2017 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -21,8 +21,8 @@ limitations under the License.
  *                    suffix determining whether it is pending, successful or
  *                    a failure.
  * @param {function} fn a function that returns a Promise.
- * @returns {function} a function that uses its single argument as a dispatch
- *                     function.
+ * @returns {function} an asyncronous action creator - a function that uses its
+ *                     single argument as a dispatch function.
  */
 export function asyncAction(id, fn) {
     return (dispatch) => {

src/components/structures/TagPanel.js

@@ -36,7 +36,15 @@ const TagPanel = React.createClass({
 
     getInitialState() {
         return {
-            orderedGroupTagProfiles: [],
+            // A list of group profiles for group tags
+            orderedGroupTagProfiles: [
+            // {
+            //     groupId: '+awesome:foo.bar',{
+            //     name: 'My Awesome Community',
+            //     avatarUrl: 'mxc://...',
+            //     shortDescription: 'Some description...',
+            // },
+            ],
             selectedTags: [],
         };
     },
@@ -64,6 +72,7 @@ const TagPanel = React.createClass({
             Promise.all(orderedGroupTags.map(
                 (groupId) => FlairStore.getGroupProfileCached(this.context.matrixClient, groupId),
             )).then((orderedGroupTagProfiles) => {
+                if (this.unmounted) return;
                 this.setState({orderedGroupTagProfiles});
             });
         });
@@ -81,7 +90,7 @@ const TagPanel = React.createClass({
 
     _onGroupMyMembership() {
         if (this.unmounted) return;
-        dis.dispatch(GroupActions.fetchJoinedGroups.bind(this.context.matrixClient));
+        dis.dispatch(GroupActions.fetchJoinedGroups(this.context.matrixClient));
     },
 
     onClick() {

src/dispatcher.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

src/stores/TagOrderStore.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2017 Vector Creations Ltd
+Copyright 2017 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -31,7 +31,7 @@ class TagOrderStore extends Store {
         super(dis);
 
         // Initialise state
-        this._state = INITIAL_STATE;
+        this._state = Object.assign({}, INITIAL_STATE);
     }
 
     _setState(newState) {
@@ -93,6 +93,12 @@ class TagOrderStore extends Store {
                 this._setState({orderedTags});
                 break;
             }
+            case 'on_logged_out': {
+                // Reset state without pushing an update to the view, which generally assumes that
+                // the matrix client isn't `null` and so causing a re-render will cause NPEs.
+                this._state = Object.assign({}, INITIAL_STATE);
+                break;
+            }
         }
     }