Implement CollectionSearchbar in addition to SketchSearchbar

client/modules/IDE/actions/sorting.js

@@ -26,13 +26,14 @@ export function toggleDirectionForField(field) {
   };
 }
 
-export function setSearchTerm(searchTerm) {
+export function setSearchTerm(scope, searchTerm) {
   return {
     type: ActionTypes.SET_SEARCH_TERM,
-    query: searchTerm
+    query: searchTerm,
+    scope,
   };
 }
 
-export function resetSearchTerm() {
+export function resetSearchTerm(scope) {
-  return setSearchTerm('');
+  return setSearchTerm(scope, '');
 }

client/modules/IDE/components/Searchbar/Collection.jsx

@@ -0,0 +1,24 @@
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import * as SortingActions from '../../actions/sorting';
+
+import Searchbar from './Searchbar';
+
+const scope = 'collection';
+
+function mapStateToProps(state) {
+  return {
+    searchLabel: 'Search collections...',
+    searchTerm: state.search[`${scope}SearchTerm`],
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  const actions = {
+    setSearchTerm: term => SortingActions.setSearchTerm(scope, term),
+    resetSearchTerm: () => SortingActions.resetSearchTerm(scope),
+  };
+  return bindActionCreators(Object.assign({}, actions), dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Searchbar);

client/modules/IDE/components/Searchbar/Searchbar.jsx

@@ -1,14 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import InlineSVG from 'react-inlinesvg';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
 import { throttle } from 'lodash';
-import * as SortingActions from '../actions/sorting';
 
-const searchIcon = require('../../../images/magnifyingglass.svg');
+const searchIcon = require('../../../../images/magnifyingglass.svg');
 
-export class Searchbar extends React.Component {
+class Searchbar extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -83,15 +80,4 @@ Searchbar.defaultProps = {
   searchLabel: 'Search sketches...',
 };
 
-
+export default Searchbar;
-function mapStateToProps(state) {
-  return {
-    searchTerm: state.search.searchTerm
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return bindActionCreators(Object.assign({}, SortingActions), dispatch);
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Searchbar);

client/modules/IDE/components/Searchbar/Sketch.jsx

@@ -0,0 +1,23 @@
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import * as SortingActions from '../../actions/sorting';
+
+import Searchbar from './Searchbar';
+
+const scope = 'sketch';
+
+function mapStateToProps(state) {
+  return {
+    searchTerm: state.search[`${scope}SearchTerm`],
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  const actions = {
+    setSearchTerm: term => SortingActions.setSearchTerm(scope, term),
+    resetSearchTerm: () => SortingActions.resetSearchTerm(scope),
+  };
+  return bindActionCreators(Object.assign({}, actions), dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Searchbar);

client/modules/IDE/components/Searchbar/index.js

@@ -0,0 +1,2 @@
+export { default as CollectionSearchbar } from './Collection.jsx';
+export { default as SketchSearchbar } from './Sketch.jsx';

client/modules/IDE/pages/IDEView.jsx

@@ -32,6 +32,7 @@ import Overlay from '../../App/components/Overlay';
 import About from '../components/About';
 import CollectionList from '../components/AddToCollectionList';
 import Feedback from '../components/Feedback';
+import { CollectionSearchbar } from '../components/Searchbar';
 
 class IDEView extends React.Component {
   constructor(props) {
@@ -390,6 +391,7 @@ class IDEView extends React.Component {
             ariaLabel="add to collection"
             title="Add sketch to collection"
             previousPath={this.props.ide.previousPath}
+            actions={<CollectionSearchbar />}
           >
             <CollectionList
               projectId={this.props.params.project_id}

client/modules/IDE/reducers/search.js

@@ -1,13 +1,14 @@
 import * as ActionTypes from '../../../constants';
 
 const initialState = {
-  searchTerm: ''
+  collectionSearchTerm: '',
+  sketchSearchTerm: ''
 };
 
 export default (state = initialState, action) => {
   switch (action.type) {
     case ActionTypes.SET_SEARCH_TERM:
-      return { ...state, searchTerm: action.query };
+      return { ...state, [`${action.scope}SearchTerm`]: action.query };
     default:
       return state;
   }

client/modules/IDE/selectors/collections.js

@@ -7,9 +7,28 @@ import { DIRECTION } from '../actions/sorting';
 const getCollections = state => state.collections;
 const getField = state => state.sorting.field;
 const getDirection = state => state.sorting.direction;
+const getSearchTerm = state => state.search.collectionSearchTerm;
+
+const getFilteredCollections = createSelector(
+  getCollections,
+  getSearchTerm,
+  (collections, search) => {
+    if (search) {
+      const searchStrings = collections.map((collection) => {
+        const smallCollection = {
+          name: collection.name
+        };
+        return { ...collection, searchString: Object.values(smallCollection).join(' ').toLowerCase() };
+      });
+      return searchStrings.filter(collection => collection.searchString.includes(search.toLowerCase()));
+    }
+    return collections;
+  }
+);
+
 
 const getSortedCollections = createSelector(
-  getCollections,
+  getFilteredCollections,
   getField,
   getDirection,
   (collections, field, direction) => {

client/modules/IDE/selectors/projects.js

@@ -6,7 +6,7 @@ import { DIRECTION } from '../actions/sorting';
 const getSketches = state => state.sketches;
 const getField = state => state.sorting.field;
 const getDirection = state => state.sorting.direction;
-const getSearchTerm = state => state.search.searchTerm;
+const getSearchTerm = state => state.search.sketchSearchTerm;
 
 const getFilteredSketches = createSelector(
   getSketches,

client/modules/User/components/Collection.jsx

@@ -19,7 +19,7 @@ import EditableInput from '../../IDE/components/EditableInput';
 import Overlay from '../../App/components/Overlay';
 import SketchList from '../../IDE/components/AddToCollectionSketchList';
 import CopyableInput from '../../IDE/components/CopyableInput';
-import SketchSearchbar from '../../IDE/components/Searchbar';
+import { SketchSearchbar } from '../../IDE/components/Searchbar';
 
 const arrowUp = require('../../../images/sort-arrow-up.svg');
 const arrowDown = require('../../../images/sort-arrow-down.svg');

client/modules/User/pages/DashboardView.jsx

@@ -11,7 +11,7 @@ import AssetList from '../../IDE/components/AssetList';
 import AssetSize from '../../IDE/components/AssetSize';
 import CollectionList from '../../IDE/components/CollectionList';
 import SketchList from '../../IDE/components/SketchList';
-import SketchSearchbar from '../../IDE/components/Searchbar';
+import { CollectionSearchbar, SketchSearchbar } from '../../IDE/components/Searchbar';
 
 import CollectionCreate from '../components/CollectionCreate';
 import DashboardTabSwitcher, { TabKey } from '../components/DashboardTabSwitcher';
@@ -77,7 +77,13 @@ class DashboardView extends React.Component {
       case TabKey.assets:
         return this.isOwner() && <AssetSize />;
       case TabKey.collections:
-        return this.isOwner() && <Link className="dashboard__action-button" to={`/${username}/collections/create`}>Create collection</Link>;
+        return this.isOwner() && (
+          <React.Fragment>
+            <CollectionSearchbar />
+            <Link className="dashboard__action-button" to={`/${username}/collections/create`}>
+              Create collection
+            </Link>
+          </React.Fragment>);
       case TabKey.sketches:
       default:
         return (