Searchbar (#1132)

* search bar function

* Fixes #231, adds searchbar to sketchlist

* Fixes #231, update requested changes to searchbar

* Fixes #231, reset search term after modal closed

Author: raclim

client/constants.js

@@ -121,6 +121,9 @@ export const SET_ASSETS = 'SET_ASSETS';
 
 export const TOGGLE_DIRECTION = 'TOGGLE_DIRECTION';
 export const SET_SORTING = 'SET_SORTING';
+export const SET_SORT_PARAMS = 'SET_SORT_PARAMS';
+export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
+export const CLOSE_SKETCHLIST_MODAL = 'CLOSE_SKETCHLIST_MODAL';
 
 export const START_LOADING = 'START_LOADING';
 export const STOP_LOADING = 'STOP_LOADING';

client/images/magnifyingglass.svg

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

client/modules/IDE/actions/sorting.js

@@ -0,0 +1,91 @@
+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');
+
+class Searchbar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchValue: this.props.searchTerm
+    };
+    this.throttledSearchChange = throttle(this.searchChange, 500);
+  }
+
+  componentWillUnmount() {
+    this.props.resetSearchTerm();
+  }
+
+  handleResetSearch = () => {
+    this.setState({ searchValue: '' }, () => {
+      this.props.resetSearchTerm();
+    });
+  }
+
+  handleSearchEnter = (e) => {
+    if (e.key === 'Enter') {
+      this.props.setSearchTerm(this.state.searchValue);
+    }
+  }
+
+  searchChange = (value) => {
+    this.props.setSearchTerm(this.state.searchValue);
+  };
+
+  handleSearchChange = (e) => {
+    this.setState({ searchValue: e.target.value }, () => {
+      this.throttledSearchChange(this.state.searchValue);
+    });
+  }
+
+  render() {
+    const { searchValue } = this.state;
+    return (
+      <div className="searchbar">
+        <button
+          type="submit"
+          className="searchbar__button"
+          onClick={this.handleSearchEnter}
+        >
+          <InlineSVG className="searchbar__icon" src={searchIcon} />
+        </button>
+        <input
+          className="searchbar__input"
+          type="text"
+          value={searchValue}
+          placeholder="Search files..."
+          onChange={this.handleSearchChange}
+          onKeyUp={this.handleSearchEnter}
+        />
+        <button
+          className="searchbar__clear-button"
+          onClick={this.handleResetSearch}
+        >clear
+        </button>
+      </div>
+    );
+  }
+}
+
+Searchbar.propTypes = {
+  searchTerm: PropTypes.string.isRequired,
+  setSearchTerm: PropTypes.func.isRequired,
+  resetSearchTerm: PropTypes.func.isRequired
+};
+
+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.jsx

@@ -30,7 +30,6 @@ class SketchListRowBase extends React.Component {
       isFocused: false
     };
   }
-
   onFocusComponent = () => {
     this.setState({ isFocused: true });
   }

client/modules/IDE/components/SketchList.jsx

@@ -30,6 +30,7 @@ import * as ConsoleActions from '../actions/console';
 import { getHTMLFile } from '../reducers/files';
 import Overlay from '../../App/components/Overlay';
 import SketchList from '../components/SketchList';
+import Searchbar from '../components/Searchbar';
 import AssetList from '../components/AssetList';
 import About from '../components/About';
 import Feedback from '../components/Feedback';
@@ -371,6 +372,7 @@ class IDEView extends React.Component {
             title="Open a Sketch"
             previousPath={this.props.ide.previousPath}
           >
+            <Searchbar />
             <SketchList
               username={this.props.params.username}
               user={this.props.user}

client/modules/IDE/pages/IDEView.jsx

@@ -13,6 +13,7 @@ const initialState = {
   shareModalProjectId: null,
   shareModalProjectName: null,
   shareModalProjectUsername: null,
+  sketchlistModalVisible: false,
   editorOptionsVisible: false,
   keyboardShortcutVisible: false,
   unsavedChanges: false,

client/modules/IDE/reducers/ide.js

@@ -0,0 +1,14 @@
+import * as ActionTypes from '../../../constants';
+
+const initialState = {
+  searchTerm: ''
+};
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case ActionTypes.SET_SEARCH_TERM:
+      return { ...state, searchTerm: action.query };
+    default:
+      return state;
+  }
+};

client/modules/IDE/reducers/search.js

@@ -6,9 +6,27 @@ 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 getSortedSketches = createSelector(
+const getFilteredSketches = createSelector(
   getSketches,
+  getSearchTerm,
+  (sketches, search) => {
+    if (search) {
+      const searchStrings = sketches.map((sketch) => {
+        const smallSketch = {
+          name: sketch.name
+        };
+        return { ...sketch, searchString: Object.values(smallSketch).join(' ').toLowerCase() };
+      });
+      return searchStrings.filter(sketch => sketch.searchString.includes(search.toLowerCase()));
+    }
+    return sketches;
+  }
+);
+
+const getSortedSketches = createSelector(
+  getFilteredSketches,
   getField,
   getDirection,
   (sketches, field, direction) => {

client/modules/IDE/selectors/projects.js

@@ -10,6 +10,7 @@ import sketches from './modules/IDE/reducers/projects';
 import toast from './modules/IDE/reducers/toast';
 import console from './modules/IDE/reducers/console';
 import assets from './modules/IDE/reducers/assets';
+import search from './modules/IDE/reducers/search';
 import sorting from './modules/IDE/reducers/sorting';
 import loading from './modules/IDE/reducers/loading';
 
@@ -21,6 +22,7 @@ const rootReducer = combineReducers({
   user,
   project,
   sketches,
+  search,
   sorting,
   editorAccessibility,
   toast,