Introduce action creators

These can be used to dispatch actions immediately, or after some asynchronous
work has been done. Also, create GroupActions.fetchJoinedGroups as an example.

The concept of async action creators can be used in the following cases:
 - stores or views that do async work, dispatching based on the results
 - actions that have complicated payloads, would make more sense as functions
   with documentation that dispatch created actions.

src/actions/GroupActions.js

@@ -0,0 +1,27 @@
+/*
+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/actionCreators.js

@@ -0,0 +1,28 @@
+/*
+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';
+
+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});
+        })
+    }
+}

src/components/structures/TagPanel.js

@@ -20,6 +20,9 @@ import { MatrixClient } from 'matrix-js-sdk';
 import FilterStore from '../../stores/FilterStore';
 import FlairStore from '../../stores/FlairStore';
 import TagOrderStore from '../../stores/TagOrderStore';
+
+import GroupActions from '../../actions/GroupActions';
+
 import sdk from '../../index';
 import dis from '../../dispatcher';
 
@@ -62,8 +65,8 @@ const TagPanel = React.createClass({
                 this.setState({orderedGroupTagProfiles});
             });
         });
-
+        // This could be done by anything with a matrix client
-        this._fetchJoinedRooms();
+        GroupActions.fetchJoinedGroups(this.context.matrixClient);
     },
 
     componentWillUnmount() {
@@ -76,7 +79,7 @@ const TagPanel = React.createClass({
 
     _onGroupMyMembership() {
         if (this.unmounted) return;
-        this._fetchJoinedRooms();
+        GroupActions.fetchJoinedGroups(this.context.matrixClient);
     },
 
     onClick() {
@@ -88,16 +91,6 @@ const TagPanel = React.createClass({
         dis.dispatch({action: 'view_create_group'});
     },
 
-    async _fetchJoinedRooms() {
-        // This could be done by anything with a matrix client (, see TagOrderStore).
-        const joinedGroupResponse = await this.context.matrixClient.getJoinedGroups();
-        const joinedGroupIds = joinedGroupResponse.groups;
-        dis.dispatch({
-            action: 'all_tags',
-            tags: joinedGroupIds,
-        });
-    },
-
     render() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const TintableSvg = sdk.getComponent('elements.TintableSvg');

src/stores/TagOrderStore.js

@@ -52,10 +52,10 @@ class TagOrderStore extends Store {
                     this._setState({orderedTags});
                 }
             break;
-            // Initialise the state such that if account data is unset, default to the existing ordering
+            // Initialise the state such that if account data is unset, default to joined groups
-            case 'all_tags':
+            case 'GroupActions.fetchJoinedGroups.success':
                 this._setState({
-                    allTags: payload.tags.sort(), // Sort lexically
+                    allTags: payload.result.groups.sort(), // Sort lexically
                 });
             break;
             // Puts payload.tag at payload.targetTag, placing the targetTag before or after the tag