From 918ebf53df338e80dd54366d17df41c346c0fa20 Mon Sep 17 00:00:00 2001
From: Michael Winsauer <e1429715@student.tuwien.ac.at>
Date: Sat, 19 Jan 2019 01:49:39 +0100
Subject: [PATCH] Store terms in map instead of object array
---
service-website/src/components/SearchTerm.js | 10 ++---
.../src/components/SearchTermsInput.js | 39 ++++++++++++++++---
.../src/components/SentimentAnalysis.js | 36 ++++++++++-------
3 files changed, 59 insertions(+), 26 deletions(-)
diff --git a/service-website/src/components/SearchTerm.js b/service-website/src/components/SearchTerm.js
index d683fc6..04a4f67 100644
--- 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 f28868a..a81bf78 100644
--- 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 6568460..4a7c71b 100644
--- 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>
--
2.47.3