Fix small bug where the undo/redo toast re-appears #108

CHANGELOG.md

@@ -1,6 +1,6 @@
 # Mailspring Changelog
 
-### 1.0.4 (Coming Soon)
+### 1.0.4 (10/12/2017)
 
 Features:
 

app/internal_packages/undo-redo/lib/undo-redo-thread-list-toast.jsx

@@ -1,38 +1,45 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { UndoRedoStore } from 'mailspring-exports';
-import { UndoToast, ListensToFluxStore } from 'mailspring-component-kit';
+import { UndoToast } from 'mailspring-component-kit';
 
-function onUndo() {
+export default class UndoRedoThreadListToast extends React.Component {
-  AppEnv.commands.dispatch('core:undo');
+  static displayName = 'UndoRedoThreadListToast';
+  static containerRequired = false;
+
+  constructor(props) {
+    super(props);
+
+    // Note: we explicitly do /not/ set initial state to the state of
+    // the UndoRedoStore here because "getMostRecent" might be more
+    // than 3000ms old.
+    this.state = { visible: false, tasks: [] };
+  }
+
+  componentDidMount() {
+    this._unlisten = UndoRedoStore.listen(() => {
+      const tasks = UndoRedoStore.getMostRecent();
+      this.setState({
+        tasks,
+        visible: tasks && tasks.length > 0,
+      });
+    });
+  }
+
+  componentWillUnmount() {
+    if (this._unlisten) {
+      this._unlisten();
+    }
+  }
+
+  render() {
+    return (
+      <UndoToast
+        visible={this.state.visible}
+        visibleDuration={3000}
+        className="undo-redo-thread-list-toast"
+        onUndo={() => AppEnv.commands.dispatch('core:undo')}
+        undoMessage={this.state.tasks.map(t => t.description()).join(', ')}
+      />
+    );
+  }
 }
-
-function UndoRedoThreadListToast(props) {
-  const { tasks } = props;
-  return (
-    <UndoToast
-      {...props}
-      onUndo={onUndo}
-      visibleDuration={3000}
-      className="undo-redo-thread-list-toast"
-      undoMessage={tasks.map(t => t.description()).join(', ')}
-    />
-  );
-}
-
-UndoRedoThreadListToast.displayName = 'UndoRedoThreadListToast';
-UndoRedoThreadListToast.containerRequired = false;
-UndoRedoThreadListToast.propTypes = {
-  tasks: PropTypes.array,
-};
-
-export default ListensToFluxStore(UndoRedoThreadListToast, {
-  stores: [UndoRedoStore],
-  getStateFromStores() {
-    const tasks = UndoRedoStore.getMostRecent();
-    return {
-      tasks,
-      visible: tasks && tasks.length > 0,
-    };
-  },
-});