Moved findBar to components and decopuled it from redux as much as possible.

Removed stories from containers. These aren't possible to write since containers depend on redux.

.storybook/config.js

@@ -2,7 +2,6 @@ import { configure } from '@kadira/storybook';
 import '../src/index.css';
 
 function loadStories() {
-  require('../src/containers/stories/');
   require('../src/components/stories/');
 }
 

src/actions/findbar.js

@@ -1,5 +1,5 @@
 import history from '../routing/history';
-import { SEARCH } from '../containers/FindBar';
+import { SEARCH } from '../components/UI/FindBar/FindBar';
 
 export const RUN_COMMAND = 'RUN_COMMAND';
 export const SHOW_COLLECTION = 'SHOW_COLLECTION';

src/components/UI/AppHeader/AppHeader.js

@@ -3,7 +3,7 @@ import pluralize from 'pluralize';
 import { IndexLink } from 'react-router';
 import { Menu, MenuItem, Button } from 'react-toolbox';
 import AppBar from 'react-toolbox/lib/app_bar';
-import FindBar from '../../../containers/FindBar';
+import FindBar from '../FindBar/FindBar';
 import styles from './AppHeader.css';
 
 export default class AppHeader extends React.Component {
@@ -38,7 +38,7 @@ export default class AppHeader extends React.Component {
   }
 
   render() {
-    const { collections, commands, defaultCommands } = this.props;
+    const { collections, commands, defaultCommands, runCommand } = this.props;
     const { createMenuActive } = this.state;
 
     return (
@@ -52,6 +52,7 @@ export default class AppHeader extends React.Component {
         <FindBar
             commands={commands}
             defaultCommands={defaultCommands}
+            runCommand={runCommand}
         />
         <Button
             className={styles.createBtn}

src/components/UI/FindBar/FindBar.js

@@ -1,9 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import fuzzy from 'fuzzy';
 import _ from 'lodash';
-import { runCommand } from '../actions/findbar';
+import { Icon } from '../index';
-import { connect } from 'react-redux';
-import { Icon } from '../components/UI';
 import styles from './FindBar.css';
 
 export const SEARCH = 'SEARCH';
@@ -102,13 +100,15 @@ class FindBar extends Component {
     const paramName = command && command.param ? command.param.name : null;
     const enteredParamValue = command && command.param && match[1] ? match[1].trim() : null;
 
+    console.log(this.props.runCommand);
+
     if (command.search) {
       this.setState({
         activeScope: SEARCH,
         placeholder: ''
       });
 
-      enteredParamValue && this.props.dispatch(runCommand(SEARCH, { searchTerm: enteredParamValue }));
+      enteredParamValue && this.props.runCommand(SEARCH, { searchTerm: enteredParamValue });
     } else if (command.param && !enteredParamValue) {
       // Partial Match
       // Command was partially matched: It requires a param, but param wasn't entered
@@ -133,7 +133,7 @@ class FindBar extends Component {
       if (paramName) {
         payload[paramName] = enteredParamValue;
       }
-      this.props.dispatch(runCommand(command.type, payload));
+      this.props.runCommand(command.type, payload);
     }
   }
 
@@ -373,8 +373,7 @@ FindBar.propTypes = {
     pattern: PropTypes.string.isRequired
   })).isRequired,
   defaultCommands: PropTypes.arrayOf(PropTypes.string),
-  dispatch: PropTypes.func.isRequired,
+  runCommand: PropTypes.func.isRequired,
 };
 
-export { FindBar };
+export default FindBar;
-export default connect()(FindBar);

src/components/stories/FindBar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf, action } from '@kadira/storybook';
 
-import { FindBar } from '../FindBar';
+import FindBar from '../UI/FindBar/FindBar';
 
 const CREATE_COLLECTION = 'CREATE_COLLECTION';
 const CREATE_POST = 'CREATE_POST';
@@ -30,15 +30,13 @@ const style = {
   margin: 20
 };
 
-const dispatch = action('DISPATCH');
-
 storiesOf('FindBar', module)
   .add('Default View', () => (
     <div style={style}>
       <FindBar
           commands={commands}
           defaultCommands={[CREATE_POST, CREATE_COLLECTION, OPEN_SETTINGS, HELP, MORE_COMMANDS]}
-          dispatch={f => f(dispatch)}
+          runCommand={action}
       />
     </div>
   ));

src/components/stories/index.js

@@ -1,3 +1,4 @@
 import './Card';
 import './Icon';
 import './Toast';
+import './FindBar';

src/containers/App.js

@@ -9,9 +9,10 @@ import {
   SHOW_COLLECTION,
   CREATE_COLLECTION,
   HELP,
+  runCommand,
   createNewEntryInCollection
 } from '../actions/findbar';
-import { AppHeader, Loader } from '../components/UI';
+import { AppHeader, Loader } from '../components/UI/index';
 import styles from './App.css';
 
 class App extends React.Component {
@@ -89,12 +90,6 @@ class App extends React.Component {
     return { commands, defaultCommands };
   }
 
-  onCreateEntryClick = collectionName => {
-    this.props.dispatch(
-      createNewEntryInCollection(collectionName)
-    );
-  }
-
   render() {
     const { user, config, children, collections } = this.props;
 
@@ -123,7 +118,8 @@ class App extends React.Component {
               collections={collections}
               commands={commands}
               defaultCommands={defaultCommands}
-              onCreateEntryClick={this.onCreateEntryClick}
+              runCommand={this.props.runCommand}
+              onCreateEntryClick={this.props.createNewEntryInCollection}
           />
           <div className={`${styles.alignable} ${styles.main}`}>
             {children}
@@ -141,4 +137,16 @@ function mapStateToProps(state) {
   return { auth, config, collections, user };
 }
 
-export default connect(mapStateToProps)(App);
+function mapDispatchToProps(dispatch) {
+  return {
+    dispatch,
+    runCommand: (type, payload) => {
+      dispatch(runCommand(type, payload));
+    },
+    createNewEntryInCollection: (collectionName) => {
+      dispatch(createNewEntryInCollection(collectionName));
+    }
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(App);

src/containers/stories/index.js

@@ -1 +0,0 @@
-import './FindBar';