All files / src/components SearchBar.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
 
 
 
 
 
 
5x
 
 
 
 
 
 
 
 
 
 
1x
1x
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5x
 
 
 
 
 
 
5x
 
 
 
 
 
5x
 
 
 
import React, { Component } from "react";
import TextField from "material-ui/TextField";
import { connect } from "react-redux";
import { search, searchClear } from "../redux/actions";
import { withStyles } from "material-ui/styles";
import { getSearchText } from "../redux/selectors";
 
const styles = theme => ({
  bar: {
    marginLeft: 3 * theme.spacing.unit,
    marginRight: 3 * theme.spacing.unit,
    marginTop: 4 * theme.spacing.unit
    //width: "90%"
  }
});
 
export class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.handleTextChanged = this.handleTextChanged.bind(this);
    this.dispatchSearch = this.dispatchSearch.bind(this);
  }
  handleTextChanged(event) {
    debugger;
    const text = event.target.value;
    if (this.state.typingTimeout) {
      clearTimeout(this.state.typingTimeout);
    }
    this.setState({
      typingTimeout: setTimeout(() => this.dispatchSearch(text), 500)
    });
  }
  dispatchSearch(text) {
    if (text.trim() === "") this.props.clear();
    else {
      this.props.search(text);
    }
  }
  componentDidMount() {
    //debugger;
  }
  render() {
    const { classes, searchText } = this.props;
    return (
      <TextField
        className={classes.bar}
        id="search"
        autoFocus
        label="Enter text to search"
        type="search"
        defaultValue={searchText}
        //npm className={classes.textField}
        margin="normal"
        onChange={this.handleTextChanged}
      />
    );
  }
}
 
const mapDispatchToProps = dispatch => {
  return {
    search: text => dispatch(search(text)),
    clear: () => dispatch(searchClear())
  };
};
 
const mapStateToProps = state => {
  return {
    searchText: getSearchText(state)
  };
};
 
export const SearchBarS = withStyles(styles)(SearchBar);
 
export default connect(mapStateToProps, mapDispatchToProps)(SearchBarS);