Store terms in map instead of object array

diff --git a/service-website/src/components/SearchTerm.js b/service-website/src/components/SearchTerm.js
index d683fc69e7d30bc975b73a6ef529f687380ac061..04a4f67810c1b606f68df196154feca837b2619f 100644 (file)
--- a/service-website/src/components/SearchTerm.js
+++ b/service-website/src/components/SearchTerm.js
@@ -4,9 +4,6 @@ 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);
@@ -15,9 +12,8 @@ class SearchTerm extends Component {
     handleChange(event) {
         const target = event.target;
         const value = target.value;
-        this.setState({
-            value,
-        });
+        const id = this.props.index;
+        this.props.onTermChange(id, value);
     }
 
     handleAddTerm(event) {
@@ -41,6 +37,8 @@ class SearchTerm extends Component {
 
 SearchTerm.propTypes = {
     index: PropTypes.number.isRequired,
+    value: PropTypes.string.isRequired,
+    onTermChange: PropTypes.func.isRequired,
     onAddTerm: PropTypes.func.isRequired,
     onRemoveTerm: PropTypes.func.isRequired,
 };

diff --git a/service-website/src/components/SearchTermsInput.js b/service-website/src/components/SearchTermsInput.js
index f28868a60416323020e54be87f8ec51024215f3a..a81bf787210647f964c550cae1b6686f1a9fe4a3 100644 (file)
--- a/service-website/src/components/SearchTermsInput.js
+++ b/service-website/src/components/SearchTermsInput.js
@@ -1,11 +1,14 @@
 import React, {Component} from "react";
 import PropTypes from "prop-types";
+import SearchTerm from "./SearchTerm";
 
 class SearchTermsInput extends Component {
     constructor(props, context) {
         super(props, context);
+        this.handleTermChange = this.handleTermChange.bind(this);
         this.handleAddTerm = this.handleAddTerm.bind(this);
-        this.handleChange = this.handleChange.bind(this);
+        this.handleRemoveTerm = this.handleRemoveTerm.bind(this);
+        this.createSearchTerms = this.createSearchTerms.bind(this);
     }
 
     handleAddTerm(event) {
@@ -13,15 +16,39 @@ class SearchTermsInput extends Component {
         this.props.onAddTerm(event);
     }
 
-    handleChange(event) {
+    handleRemoveTerm(id) {
+        this.props.onRemoveTerm(id);
+    }
 
+    handleTermChange(id, value) {
+        this.props.onTermChange(id, value);
     }
 
-    render() {
+    createSearchTerms() {
         const terms = this.props.terms;
+        const searchTerms = [];
+        for (const entry of terms.entries()) {
+            console.log(entry);
+            const id = entry[0];
+            const value = entry[1];
+            const searchTerm = (
+                <SearchTerm key={id}
+                            index={id}
+                            value={value}
+                            onTermChange={this.handleTermChange}
+                            onAddTerm={this.handleAddTerm}
+                            onRemoveTerm={this.handleRemoveTerm}/>
+            );
+            searchTerms.push(searchTerm);
+        }
+        return searchTerms;
+    }
+
+    render() {
+        const searchTerms = this.createSearchTerms();
         return (
             <div className="search-terms-input">
-                {terms}
+                {searchTerms}
                 <button onClick={this.handleAddTerm}>Add term</button>
             </div>
         );
@@ -29,8 +56,10 @@ class SearchTermsInput extends Component {
 }
 
 SearchTermsInput.propTypes = {
-    terms: PropTypes.arrayOf(PropTypes.element).isRequired,
+    terms: PropTypes.object.isRequired,
+    onTermChange: PropTypes.func.isRequired,
     onAddTerm: PropTypes.func.isRequired,
+    onRemoveTerm: PropTypes.func.isRequired,
 };
 
 export default SearchTermsInput;

diff --git a/service-website/src/components/SentimentAnalysis.js b/service-website/src/components/SentimentAnalysis.js
index 6568460e99caa316db9a805cb9b82a7920b62a7e..4a7c71baf8ac0b6a5f7837144d45a29227e33bf9 100644 (file)
--- a/service-website/src/components/SentimentAnalysis.js
+++ b/service-website/src/components/SentimentAnalysis.js
@@ -1,18 +1,19 @@
 import React, {Component} from "react";
 import SearchTermsInput from "./SearchTermsInput";
-import SearchTerm from "./SearchTerm";
+import {Map} from "immutable";
 
 class SentimentAnalysis extends Component {
     constructor(props, context) {
         super(props, context);
         this.state = {
-            terms: [],
+            terms: new Map(),
+            nextTermId: 0,
         };
         this.handleSubmit = this.handleSubmit.bind(this);
+        this.handleTermChange = this.handleTermChange.bind(this);
         this.handleAddTerm = this.handleAddTerm.bind(this);
         this.handleRemoveTerm = this.handleRemoveTerm.bind(this);
         this.addEmptyTerm = this.addEmptyTerm.bind(this);
-        this.createEmptyTerm = this.createEmptyTerm.bind(this);
     }
 
     componentDidMount() {
@@ -32,37 +33,42 @@ class SentimentAnalysis extends Component {
         });
     }
 
+    handleTermChange(id, value) {
+        const terms = this.state.terms;
+        this.setState({
+            terms: terms.set(id, value),
+        });
+    }
+
     handleAddTerm(event) {
         this.addEmptyTerm();
     }
 
-    handleRemoveTerm(index) {
+    handleRemoveTerm(id) {
         const terms = this.state.terms;
         this.setState({
-            terms: [...terms.slice(0, index), ...terms.slice(index + 1)],
+            terms: terms.delete(id),
         });
     }
 
     addEmptyTerm() {
-        const term = this.createEmptyTerm();
+        const terms = this.state.terms;
+        const termId = this.state.nextTermId;
         this.setState({
-            terms: [...this.state.terms, term],
+            terms: terms.set(termId, ''),
+            nextTermId: termId + 1,
         });
     }
 
-    createEmptyTerm() {
-        const index = this.state.terms.length;
-        return (
-            <SearchTerm key={index} index={index} onAddTerm={this.handleAddTerm} onRemoveTerm={this.handleRemoveTerm}/>
-        );
-    }
-
     render() {
         return (
             <div className="sentiment-analysis">
                 <form onSubmit={this.handleSubmit}>
                     <label>Search Terms</label>
-                    <SearchTermsInput terms={this.state.terms} onAddTerm={this.handleAddTerm}/>
+                    <SearchTermsInput terms={this.state.terms}
+                                      onTermChange={this.handleTermChange}
+                                      onAddTerm={this.handleAddTerm}
+                                      onRemoveTerm={this.handleRemoveTerm}/>
                     <input type="submit" value="Submit"/>
                 </form>
             </div>