Add functionality to add terms

diff --git a/service-website/src/SearchTerm.js b/service-website/src/SearchTerm.js
new file mode 100644 (file)
index 0000000..2345071
--- /dev/null
+++ b/service-website/src/SearchTerm.js
@@ -0,0 +1,42 @@
+import React, {Component} from 'react';
+import PropTypes from "prop-types";
+
+class SearchTerm extends Component {
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            value: '',
+        };
+        this.handleChange = this.handleChange.bind(this);
+        this.handleAddTerm = this.handleAddTerm.bind(this);
+        this.handleRemoveTerm = this.handleRemoveTerm.bind(this);
+    }
+
+    handleChange(event) {
+        console.log(event);
+    }
+
+    handleAddTerm(event) {
+
+    }
+
+    handleRemoveTerm(event) {
+
+    }
+
+    render() {
+        return (
+            <div key={this.props.index} className="search-term">
+                <input type="text" onChange={this.handleChange}/>
+                <button>Remove</button>
+            </div>
+        );
+    }
+}
+
+SearchTerm.propTypes = {
+    index: PropTypes.number.isRequired,
+    onAddTerm: PropTypes.func.isRequired,
+};
+
+export default SearchTerm;

diff --git a/service-website/src/SearchTerms.js b/service-website/src/SearchTerms.js
deleted file mode 100644 (file)
index 36ae4f7..0000000
--- a/service-website/src/SearchTerms.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-
-class SearchTerms extends Component {
-    constructor(props, context) {
-        super(props, context);
-    }
-
-    render() {
-        return null;
-    }
-}
-
-SearchTerms.propTypes = {
-    terms: PropTypes.arrayOf(PropTypes.string),
-};
-
-export default SearchTerms;

diff --git a/service-website/src/SearchTermsInput.js b/service-website/src/SearchTermsInput.js
new file mode 100644 (file)
index 0000000..c49f04f
--- /dev/null
+++ b/service-website/src/SearchTermsInput.js
@@ -0,0 +1,36 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+
+class SearchTermsInput extends Component {
+    constructor(props, context) {
+        super(props, context);
+        this.handleAddTerm = this.handleAddTerm.bind(this);
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleAddTerm(event) {
+        event.preventDefault();
+        this.props.onAddTerm(event);
+    }
+
+    handleChange(event) {
+
+    }
+
+    render() {
+        const terms = this.props.terms;
+        return (
+            <div className="search-terms-input">
+                {terms}
+                <button onClick={this.handleAddTerm}>Add term</button>
+            </div>
+        );
+    }
+}
+
+SearchTermsInput.propTypes = {
+    terms: PropTypes.arrayOf(PropTypes.element).isRequired,
+    onAddTerm: PropTypes.func.isRequired,
+};
+
+export default SearchTermsInput;

diff --git a/service-website/src/SentimentAnalysis.js b/service-website/src/SentimentAnalysis.js
index 309d6e7a90fcab56aa6a462561821e59f91473c9..d32a23812f9abfa68cc04617bf9cecf8bf6ae4a5 100644 (file)
--- a/service-website/src/SentimentAnalysis.js
+++ b/service-website/src/SentimentAnalysis.js
@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
-import SearchTerms from "./SearchTerms";
+import SearchTermsInput from "./SearchTermsInput";
+import SearchTerm from "./SearchTerm";
 
 class SentimentAnalysis extends Component {
     constructor(props, context) {
@@ -8,20 +9,52 @@ class SentimentAnalysis extends Component {
             terms: [],
         };
         this.handleSubmit = this.handleSubmit.bind(this);
+        this.handleAddTerm = this.handleAddTerm.bind(this);
+        this.addEmptyTerm = this.addEmptyTerm.bind(this);
+        this.createEmptyTerm = this.createEmptyTerm.bind(this);
+    }
+
+    componentDidMount() {
+        const terms = this.state.terms;
+        if (terms.length === 0) {
+            this.addEmptyTerm();
+        }
     }
 
     handleSubmit(event) {
         event.preventDefault();
+        const terms = this.state.terms;
+        console.log(terms);
+    }
+
+    handleAddTerm(event) {
+        console.log(event);
+        this.addEmptyTerm();
+    }
+
+    addEmptyTerm() {
+        const term = this.createEmptyTerm();
+        this.setState({
+            terms: [...this.state.terms, term],
+        });
+    }
+
+    createEmptyTerm() {
+        const index = this.state.terms.length;
+        return (
+            <SearchTerm key={index} index={index} onAddTerm={this.handleAddTerm}/>
+        );
     }
 
     render() {
         return (
-            <form onSubmit={this.handleSubmit}>
-                <label>Search Terms</label>
-                <SearchTerms terms={this.state.terms}/>
-                <input type="submit" value="Add term"/>
-                <input type="submit" value="Submit"/>
-            </form>
+            <div className="sentiment-analysis">
+                <form onSubmit={this.handleSubmit}>
+                    <label>Search Terms</label>
+                    <SearchTermsInput terms={this.state.terms} onAddTerm={this.handleAddTerm}/>
+                    <input type="submit" value="Submit"/>
+                </form>
+            </div>
         );
     }
 }