UI updates (#151)

* infer card title

* Infer entry body & image

* infer image

* Better terminology: EntryListing accept a single Collection

* remove log

* Refactored Collections VO into selectors

* use selectors when showning card

* fixed size cards

* Added 'bio' and 'biography' to collection description inference synonyms

* Removed unused card file

* throw error instance

* bugfix for file based collections

* lint

* moved components with css to own folder

* Search Bugfix: More than one collection might be returned

* Changed sidebar implementation. Closes #104 & #152

* Show spinning loading for unpublished entries

* Refactored Sidebar into a separate container

* Make preview widgets more robust

src/containers/App.js

@@ -2,13 +2,15 @@ import React, { PropTypes } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import pluralize from 'pluralize';
 import { connect } from 'react-redux';
-import { Layout, Panel, NavDrawer } from 'react-toolbox/lib/layout';
+import { Layout, Panel } from 'react-toolbox/lib/layout';
 import { Navigation } from 'react-toolbox/lib/navigation';
 import { Link } from 'react-toolbox/lib/link';
 import { Notifs } from 'redux-notifications';
 import TopBarProgress from 'react-topbar-progress-indicator';
+import Sidebar from './Sidebar';
 import { loadConfig } from '../actions/config';
 import { loginUser, logoutUser } from '../actions/auth';
+import { toggleSidebar } from '../actions/globalUI';
 import { currentBackend } from '../backends/backend';
 import {
   SHOW_COLLECTION,
@@ -42,6 +44,7 @@ class App extends React.Component {
     createNewEntryInCollection: PropTypes.func.isRequired,
     logoutUser: PropTypes.func.isRequired,
     dispatch: PropTypes.func.isRequired,
+    toggleSidebar: PropTypes.func.isRequired,
     navigateToCollection: PropTypes.func.isRequired,
     user: ImmutablePropTypes.map,
     runCommand: PropTypes.func.isRequired,
@@ -59,10 +62,6 @@ class App extends React.Component {
     </div>);
   }
 
-  state = {
-    navDrawerIsVisible: true,
-  };
-
   componentDidMount() {
     this.props.dispatch(loadConfig());
   }
@@ -123,19 +122,13 @@ class App extends React.Component {
     return { commands, defaultCommands };
   }
 
-  toggleNavDrawer = () => {
-    this.setState({
-      navDrawerIsVisible: !this.state.navDrawerIsVisible,
-    });
-  };
-
   render() {
-    const { navDrawerIsVisible } = this.state;
     const {
       user,
       config,
       children,
       collections,
+      toggleSidebar,
       runCommand,
       navigateToCollection,
       createNewEntryInCollection,
@@ -160,67 +153,65 @@ class App extends React.Component {
     }
 
     const { commands, defaultCommands } = this.generateFindBarCommands();
+    const sidebarContent = (
+      <nav className={styles.nav}>
+        <h1 className={styles.heading}>Collections</h1>
+        <Navigation type="vertical">
+          {
+            collections.valueSeq().map(collection =>
+              <Link
+                key={collection.get('name')}
+                onClick={navigateToCollection.bind(this, collection.get('name'))} // eslint-disable-line
+              >
+                {collection.get('label')}
+              </Link>
+            )
+          }
+        </Navigation>
+      </nav>
+    );
 
     return (
-      <Layout theme={styles}>
-        <Notifs
-          className={styles.notifsContainer}
-          CustomComponent={Toast}
-        />
-        <NavDrawer
-          active={navDrawerIsVisible}
-          scrollY
-          permanentAt={navDrawerIsVisible ? 'lg' : null}
-          onOverlayClick={this.toggleNavDrawer} // eslint-disable-line
-          theme={styles}
-        >
-          <nav className={styles.nav}>
-            <h1 className={styles.heading}>Collections</h1>
-            <Navigation type="vertical">
-              {
-                collections.valueSeq().map(collection =>
-                  <Link
-                    key={collection.get('name')}
-                    onClick={navigateToCollection.bind(this, collection.get('name'))} // eslint-disable-line
-                  >
-                    {collection.get('label')}
-                  </Link>
-                )
-              }
-            </Navigation>
-          </nav>
-        </NavDrawer>
-        <AppHeader
-          user={user}
-          collections={collections}
-          commands={commands}
-          defaultCommands={defaultCommands}
-          runCommand={runCommand}
-          onCreateEntryClick={createNewEntryInCollection}
-          onLogoutClick={logoutUser}
-          toggleNavDrawer={this.toggleNavDrawer}
-        />
-        <Panel scrollY>
-          { isFetching && <TopBarProgress /> }
-          <div className={styles.main}>
-            {children}
-          </div>
-        </Panel>
-      </Layout>
+      <Sidebar content={sidebarContent}>
+        <Layout theme={styles}>
+          <Notifs
+            className={styles.notifsContainer}
+            CustomComponent={Toast}
+          />
+          <AppHeader
+            user={user}
+            collections={collections}
+            commands={commands}
+            defaultCommands={defaultCommands}
+            runCommand={runCommand}
+            onCreateEntryClick={createNewEntryInCollection}
+            onLogoutClick={logoutUser}
+            toggleDrawer={toggleSidebar}
+          />
+          <Panel scrollY>
+            { isFetching && <TopBarProgress /> }
+            <div className={styles.main}>
+              {children}
+            </div>
+          </Panel>
+
+        </Layout>
+      </Sidebar>
     );
   }
 }
 
 function mapStateToProps(state) {
-  const { auth, config, collections, global } = state;
+  const { auth, config, collections, globalUI } = state;
   const user = auth && auth.get('user');
-  const { isFetching } = global;
+  const isFetching = globalUI.get('isFetching');
   return { auth, config, collections, user, isFetching };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
     dispatch,
+    toggleSidebar: () => dispatch(toggleSidebar()),
     runCommand: (type, payload) => {
       dispatch(runCommand(type, payload));
     },