service-website/src/components/SearchTermsInput.js

   1 import React, {Component} from "react";
   2 import PropTypes from "prop-types";
   3 import SearchTerm from "./SearchTerm";
   4
   5 class SearchTermsInput extends Component {
   6     constructor(props, context) {
   7         super(props, context);
   8         this.handleTermChange = this.handleTermChange.bind(this);
   9         this.handleAddTerm = this.handleAddTerm.bind(this);
  10         this.handleRemoveTerm = this.handleRemoveTerm.bind(this);
  11         this.createSearchTerms = this.createSearchTerms.bind(this);
  12     }
  13
  14     handleAddTerm(event) {
  15         event.preventDefault();
  16         this.props.onAddTerm(event);
  17     }
  18
  19     handleRemoveTerm(id) {
  20         this.props.onRemoveTerm(id);
  21     }
  22
  23     handleTermChange(id, value) {
  24         this.props.onTermChange(id, value);
  25     }
  26
  27     createSearchTerms() {
  28         const terms = this.props.terms;
  29         const searchTerms = [];
  30         for (const entry of terms.entries()) {
  31             console.log(entry);
  32             const id = entry[0];
  33             const value = entry[1];
  34             const searchTerm = (
  35                 <SearchTerm key={id}
  36                             index={id}
  37                             value={value}
  38                             onTermChange={this.handleTermChange}
  39                             onAddTerm={this.handleAddTerm}
  40                             onRemoveTerm={this.handleRemoveTerm}/>
  41             );
  42             searchTerms.push(searchTerm);
  43         }
  44         return searchTerms;
  45     }
  46
  47     render() {
  48         const searchTerms = this.createSearchTerms();
  49         return (
  50             <div className="search-terms-input">
  51                 {searchTerms}
  52                 <button onClick={this.handleAddTerm}>Add term</button>
  53             </div>
  54         );
  55     }
  56 }
  57
  58 SearchTermsInput.propTypes = {
  59     terms: PropTypes.object.isRequired,
  60     onTermChange: PropTypes.func.isRequired,
  61     onAddTerm: PropTypes.func.isRequired,
  62     onRemoveTerm: PropTypes.func.isRequired,
  63 };
  64
  65 export default SearchTermsInput;