Generating findbar commands dynamically based on config

package.json

@@ -76,6 +76,7 @@
     "js-base64": "^2.1.9",
     "json-loader": "^0.5.4",
     "localforage": "^1.4.2",
-    "lodash": "^4.13.1"
+    "lodash": "^4.13.1",
+    "pluralize": "^3.0.0"
   }
 }

src/actions/findbar.js

@@ -2,8 +2,8 @@ import history from '../routing/history';
 import { SEARCH } from '../containers/FindBar';
 
 export const RUN_COMMAND = 'RUN_COMMAND';
-export const LIST_POSTS = 'LIST_POSTS';
+export const SHOW_COLLECTION = 'SHOW_COLLECTION';
-export const LIST_FAQ = 'LIST_FAQ';
+export const CREATE_COLLECTION = 'CREATE_COLLECTION';
 export const HELP = 'HELP';
 
 export function run(commandName, payload) {
@@ -13,11 +13,11 @@ export function run(commandName, payload) {
 export function runCommand(commandName, payload) {
   return (dispatch, getState) => {
     switch (commandName) {
-      case LIST_POSTS:
+      case SHOW_COLLECTION:
-        history.push('/collections/posts');
+        history.push(`/collections/${payload.collectionName}`);
         break;
-      case LIST_FAQ:
+      case CREATE_COLLECTION:
-        history.push('/collections/faq');
+        window.alert(`Create a new ${payload.collectionName} - not supported yet`);
         break;
       case HELP:
         window.alert('Find Bar Help (PLACEHOLDER)\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit.');

src/containers/App.js

@@ -3,9 +3,10 @@ import { connect } from 'react-redux';
 import { loadConfig } from '../actions/config';
 import { loginUser } from '../actions/auth';
 import { currentBackend } from '../backends/backend';
-import { LIST_POSTS, LIST_FAQ, HELP, MORE_COMMANDS } from '../actions/findbar';
+import { SHOW_COLLECTION, CREATE_COLLECTION, HELP } from '../actions/findbar';
 import FindBar from './FindBar';
 import styles from './App.css';
+import pluralize from 'pluralize';
 
 class App extends React.Component {
   componentDidMount() {
@@ -50,6 +51,37 @@ class App extends React.Component {
     </div>;
   }
 
+  generateFindBarCommands() {
+    // Generate command list
+    const commands = [];
+    const defaultCommands = [];
+
+    this.props.collections.forEach(collection => {
+      commands.push({
+        id: `show_${collection.get('name')}`,
+        pattern: `Show ${pluralize(collection.get('label'))}`,
+        type: SHOW_COLLECTION,
+        payload: { collectionName:collection.get('name') }
+      });
+
+      if (defaultCommands.length < 5) defaultCommands.push(`show_${collection.get('name')}`);
+
+      if (collection.get('create') === true) {
+        commands.push({
+          id: `create_${collection.get('name')}`,
+          pattern: `Create new ${pluralize(collection.get('label'), 1)}(:itemName as ${pluralize(collection.get('label'), 1)} Name)`,
+          type: CREATE_COLLECTION,
+          payload: { collectionName:collection.get('name') }
+        });
+      }
+    });
+
+    commands.push({ id: HELP, type: HELP, pattern: 'Help' });
+    defaultCommands.push(HELP);
+
+    return { commands, defaultCommands };
+  }
+
   render() {
     const { user, config, children } = this.props;
 
@@ -69,15 +101,16 @@ class App extends React.Component {
       return this.authenticating();
     }
 
+    const { commands, defaultCommands } = this.generateFindBarCommands();
+
     return (
       <div>
         <header>
           <div className={styles.alignable}>
-            <FindBar commands={[
+            <FindBar
-              { id: LIST_POSTS, pattern: 'List Posts' },
+                commands={commands}
-              { id: LIST_FAQ, pattern: 'List FAQs' },
+                defaultCommands={defaultCommands}
-              { id: HELP, pattern: 'Help' },
+            />
-            ]} />
           </div>
         </header>
         <div className={`${styles.alignable} ${styles.main}`}>
@@ -89,10 +122,10 @@ class App extends React.Component {
 }
 
 function mapStateToProps(state) {
-  const { auth, config } = state;
+  const { auth, config, collections } = state;
   const user = auth && auth.get('user');
 
-  return { auth, config, user };
+  return { auth, config, collections, user };
 }
 
 export default connect(mapStateToProps)(App);

src/containers/FindBar.js

@@ -124,8 +124,11 @@ class FindBar extends Component {
       }, () => {
         this._input.blur();
       });
-      const payload = paramName ? { [paramName]: enteredParamValue } : null;
+      const payload = command.payload || {};
-      this.props.dispatch(runCommand(command.id, payload));
+      if (paramName) {
+        payload[paramName] = enteredParamValue;
+      }
+      this.props.dispatch(runCommand(command.type, payload));
     }
   }
 
@@ -358,6 +361,7 @@ class FindBar extends Component {
 FindBar.propTypes = {
   commands: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
     pattern: PropTypes.string.isRequired
   })).isRequired,
   defaultCommands: PropTypes.arrayOf(PropTypes.string),