From ee6df105feb7ab43c87383de9fca20cc00449f21 Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Thu, 7 Dec 2017 14:17:32 +0000
Subject: [PATCH] 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           | 27 ++++++++++++++++++++++++++
 src/actions/actionCreators.js         | 28 +++++++++++++++++++++++++++
 src/components/structures/TagPanel.js | 19 ++++++------------
 src/stores/TagOrderStore.js           |  6 +++---
 4 files changed, 64 insertions(+), 16 deletions(-)
 create mode 100644 src/actions/GroupActions.js
 create mode 100644 src/actions/actionCreators.js

diff --git a/src/actions/GroupActions.js b/src/actions/GroupActions.js
new file mode 100644
index 0000000000..30249f846c
--- /dev/null
+++ b/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;
diff --git a/src/actions/actionCreators.js b/src/actions/actionCreators.js
new file mode 100644
index 0000000000..c4e20a0a3f
--- /dev/null
+++ b/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});
+        })
+    }
+}
diff --git a/src/components/structures/TagPanel.js b/src/components/structures/TagPanel.js
index d488d57b4d..ae86bef4c1 100644
--- a/src/components/structures/TagPanel.js
+++ b/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._fetchJoinedRooms();
+        // This could be done by anything with a matrix client
+        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');
diff --git a/src/stores/TagOrderStore.js b/src/stores/TagOrderStore.js
index f2f5ca5569..885eaafb38 100644
--- a/src/stores/TagOrderStore.js
+++ b/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
-            case 'all_tags':
+            // Initialise the state such that if account data is unset, default to joined groups
+            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