service-website/src/SentimentAnalysis.js

   1 import React, {Component} from 'react';
   2 import SearchTermsInput from "./SearchTermsInput";
   3 import SearchTerm from "./SearchTerm";
   4
   5 class SentimentAnalysis extends Component {
   6     constructor(props, context) {
   7         super(props, context);
   8         this.state = {
   9             terms: [],
  10         };
  11         this.handleSubmit = this.handleSubmit.bind(this);
  12         this.handleAddTerm = this.handleAddTerm.bind(this);
  13         this.handleRemoveTerm = this.handleRemoveTerm.bind(this);
  14         this.addEmptyTerm = this.addEmptyTerm.bind(this);
  15         this.createEmptyTerm = this.createEmptyTerm.bind(this);
  16     }
  17
  18     componentDidMount() {
  19         const terms = this.state.terms;
  20         if (terms.length === 0) {
  21             this.addEmptyTerm();
  22         }
  23     }
  24
  25     handleSubmit(event) {
  26         event.preventDefault();
  27         const target = event.target;
  28         console.log(target);
  29         const terms = this.state.terms;
  30         terms.forEach((term) => {
  31             console.log(term);
  32         });
  33     }
  34
  35     handleAddTerm(event) {
  36         this.addEmptyTerm();
  37     }
  38
  39     handleRemoveTerm(index) {
  40         const terms = this.state.terms;
  41         this.setState({
  42             terms: [...terms.slice(0, index), ...terms.slice(index + 1)],
  43         });
  44     }
  45
  46     addEmptyTerm() {
  47         const term = this.createEmptyTerm();
  48         this.setState({
  49             terms: [...this.state.terms, term],
  50         });
  51     }
  52
  53     createEmptyTerm() {
  54         const index = this.state.terms.length;
  55         return (
  56             <SearchTerm key={index} index={index} onAddTerm={this.handleAddTerm} onRemoveTerm={this.handleRemoveTerm}/>
  57         );
  58     }
  59
  60     render() {
  61         return (
  62             <div className="sentiment-analysis">
  63                 <form onSubmit={this.handleSubmit}>
  64                     <label>Search Terms</label>
  65                     <SearchTermsInput terms={this.state.terms} onAddTerm={this.handleAddTerm}/>
  66                     <input type="submit" value="Submit"/>
  67                 </form>
  68             </div>
  69         );
  70     }
  71 }
  72
  73 SentimentAnalysis.propTypes = {};
  74
  75 export default SentimentAnalysis;