Convert emoji actions to use redux-thunk

ACKNOWLEDGMENTS.md

@@ -2342,6 +2342,10 @@ Signal Desktop makes use of the following open source projects.
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
     SOFTWARE.
 
+## redux-thunk
+
+    License: MIT
+
 ## redux-ts-utils
 
     The MIT License (MIT)

package.json

@@ -132,6 +132,7 @@
     "redux": "4.0.1",
     "redux-logger": "3.0.6",
     "redux-promise-middleware": "6.1.0",
+    "redux-thunk": "2.3.0",
     "redux-ts-utils": "3.2.2",
     "reselect": "4.0.0",
     "rimraf": "2.6.2",

ts/state/createStore.ts

@@ -8,6 +8,7 @@ import {
 } from 'redux';
 
 import promise from 'redux-promise-middleware';
+import thunk from 'redux-thunk';
 import { createLogger } from 'redux-logger';
 
 import { reducer, StateType } from './reducer';
@@ -34,8 +35,11 @@ const logger = createLogger({
   logger: directConsole,
 });
 
-// Exclude logger if we're in production mode
-const middlewareList = env === 'production' ? [promise] : [promise, logger];
+const middlewareList = [
+  promise,
+  thunk,
+  ...(env === 'production' ? [] : [logger]),
+];
 
 const enhancer = applyMiddleware(...middlewareList);
 

ts/state/ducks/emojis.ts

@@ -1,4 +1,5 @@
 import { take, uniq } from 'lodash';
+import { ThunkAction } from 'redux-thunk';
 import { EmojiPickDataType } from '../../components/emoji/EmojiPicker';
 import dataInterface from '../../sql/Client';
 import { useBoundActions } from '../../util/hooks';
@@ -13,37 +14,40 @@ export type EmojisStateType = {
 
 // Actions
 
-type OnUseEmojiPayloadType = string;
-type OnUseEmojiAction = {
+type UseEmojiAction = {
   type: 'emojis/USE_EMOJI';
-  payload: Promise<OnUseEmojiPayloadType>;
-};
-type OnUseEmojiFulfilledAction = {
-  type: 'emojis/USE_EMOJI_FULFILLED';
-  payload: OnUseEmojiPayloadType;
+  payload: string;
 };
 
-export type EmojisActionType = OnUseEmojiAction | OnUseEmojiFulfilledAction;
+type EmojisActionType = UseEmojiAction;
 
 // Action Creators
 
 export const actions = {
   onUseEmoji,
+  useEmoji,
 };
 
 export const useActions = (): typeof actions => useBoundActions(actions);
 
-function onUseEmoji({ shortName }: EmojiPickDataType): OnUseEmojiAction {
-  return {
-    type: 'emojis/USE_EMOJI',
-    payload: doUseEmoji(shortName),
+function onUseEmoji({
+  shortName,
+}: EmojiPickDataType): ThunkAction<void, unknown, unknown, UseEmojiAction> {
+  return async dispatch => {
+    try {
+      await updateEmojiUsage(shortName);
+      dispatch(useEmoji(shortName));
+    } catch (err) {
+      // Errors are ignored.
+    }
   };
 }
 
-async function doUseEmoji(shortName: string): Promise<OnUseEmojiPayloadType> {
-  await updateEmojiUsage(shortName);
-
-  return shortName;
+function useEmoji(payload: string): UseEmojiAction {
+  return {
+    type: 'emojis/USE_EMOJI',
+    payload,
+  };
 }
 
 // Reducer
@@ -58,7 +62,7 @@ export function reducer(
   state: EmojisStateType = getEmptyState(),
   action: EmojisActionType
 ): EmojisStateType {
-  if (action.type === 'emojis/USE_EMOJI_FULFILLED') {
+  if (action.type === 'emojis/USE_EMOJI') {
     const { payload } = action;
 
     return {

yarn.lock

@@ -13670,6 +13670,11 @@ redux-promise-middleware@6.1.0:
   resolved "https://registry.yarnpkg.com/redux-promise-middleware/-/redux-promise-middleware-6.1.0.tgz#ecdb22488cdd673c1a3f0d278d82b48d92ca5d06"
   integrity sha512-C62Ku3TgMwxFh5r3h1/iD+XPdsoizyHLT74dTkqhJ8c0LCbEVl1z9fm8zKitAjI16e6w6+h3mxf6wHdonaYXfQ==
 
+redux-thunk@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
+  integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
+
 redux-ts-utils@3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/redux-ts-utils/-/redux-ts-utils-3.2.2.tgz#da01c19919156d957d685784fb309c0250b8db31"