Adds a replay action button. (#139)

packages/demo-react-js/src/Redux/Store.js

@@ -26,8 +26,8 @@ export default () => {
     isActionImportant: action => action.type === LogoTypes.Size && action.size > 100
   })
   const enhancers = compose(
-    applyMiddleware(logger, sagaMiddleware),
-    tracker
+    tracker,
+    applyMiddleware(logger, sagaMiddleware)
   )
 
   const store = createStore(rootReducer, enhancers)

packages/demo-react-native/App/Redux/index.js

@@ -33,8 +33,8 @@ export default () => {
   const sagaMiddleware = createSagaMiddleware()
   const tracker = createTrackingEnhancer(Reactotron, {})
   const enhancers = compose(
-    applyMiddleware(logger, sagaMiddleware),
-    tracker
+    tracker,
+    applyMiddleware(logger, sagaMiddleware)
   )
 
   const store = createStore(rootReducer, enhancers)

packages/reactotron-app/App/Shared/Command.js

@@ -4,7 +4,9 @@ import AppStyles from '../Theme/AppStyles'
 import Timestamp from '../Shared/Timestamp'
 import { observer } from 'mobx-react'
 import { isNilOrEmpty } from 'ramdasauce'
-import { merge, is } from 'ramda'
+import { merge } from 'ramda'
+import CommandToolbar from './CommandToolbar'
+
 const IconOpen = require('react-icons/lib/md/expand-more')
 const IconClosed = require('react-icons/lib/md/chevron-right')
 
@@ -114,9 +116,8 @@ class Command extends Component {
 
   render () {
     const { isOpen } = this.state
-    const { command, children, title, subtitle, preview } = this.props
+    const { command, children, title, preview } = this.props
     const { important } = command
-    const hasSubtitle = !isNilOrEmpty(subtitle)
     const { date } = command
     const titleTextStyle = merge(Styles.titleText, important ? Styles.titleTextInverse : {})
     const topRowStyle = Styles.topRow
@@ -131,8 +132,8 @@ class Command extends Component {
             <div style={Styles.title}>
               <span style={titleTextStyle}>{title}</span>
             </div>
-            {isOpen && hasSubtitle && <span style={Styles.subtitle}>{subtitle}</span>}
             {!isOpen && <span style={Styles.preview}>{preview}</span>}
+            {isOpen && <CommandToolbar command={command} />}
             {isOpen && <span style={Styles.spacer}></span>}
             <Icon size={20} style={Styles.icon} />
           </div>

packages/reactotron-app/App/Shared/CommandToolbar.js

@@ -0,0 +1,50 @@
+import React, { Component, PropTypes } from 'react'
+import { inject, observer } from 'mobx-react'
+import Button from './CommandToolbarButton'
+import AppStyles from '../Theme/AppStyles'
+
+const Styles = {
+  container: {
+    ...AppStyles.Layout.hbox,
+    marginLeft: -6
+  }
+}
+
+// the tips
+const TIP_REPLAY_ACTION = 'Replay this action again.'
+
+// the buttons (minus the onClick)
+const ReplayButton = props => <Button icon='play-circle-outline' onClick={props.onClick} tip={TIP_REPLAY_ACTION} />
+
+@inject('session')
+@observer
+class CommandToolbar extends Component {
+
+  static propTypes = {
+    command: PropTypes.object.isRequired
+  }
+
+  // fires when it is time to replay an action
+  handleReplayAction = (event) => {
+    const { command, session } = this.props
+    const { ui } = session
+    ui.dispatchAction(command.payload.action)
+    event.stopPropagation()
+  }
+
+  render () {
+    const { command } = this.props
+    const showReplayAction = command.type === 'state.action.complete'
+
+    return (
+      <div style={Styles.container}>
+        {showReplayAction &&
+          <ReplayButton onClick={this.handleReplayAction} />
+        }
+      </div>
+    )
+  }
+
+}
+
+export default CommandToolbar

packages/reactotron-app/App/Shared/CommandToolbarButton.js

@@ -0,0 +1,36 @@
+import React, { Component, PropTypes } from 'react'
+import Colors from '../Theme/Colors'
+import ReactTooltip from 'react-tooltip'
+
+const Styles = {
+  container: {
+    color: Colors.highlight,
+    marginTop: -2
+  },
+  iconSize: 24,
+  icon: {
+  }
+}
+
+class CommandToolbarButton extends Component {
+
+  static propTypes = {
+    tip: PropTypes.string,
+    icon: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired
+  }
+
+  render () {
+    const { tip, icon, onClick } = this.props
+    const Icon = require(`react-icons/lib/md/${icon}`)
+    return (
+      <div data-tip={tip} onClick={onClick} style={Styles.container}>
+        <Icon size={Styles.iconSize} style={Styles.icon} />
+        <ReactTooltip place='bottom' className='tooltipTheme' />
+      </div>
+    )
+  }
+
+}
+
+export default CommandToolbarButton

packages/reactotron-app/App/Stores/SessionStore.js

@@ -2,7 +2,7 @@ import UiStore from './UiStore'
 import { createServer } from 'reactotron-core-server'
 import { computed, reaction } from 'mobx'
 import { last, isNil, reject, reverse, pipe, propEq } from 'ramda'
-import { dotPath, log } from 'ramdasauce'
+import { dotPath } from 'ramdasauce'
 
 class Session {