From 3a1b4be06c1f4de4ff4851d2c40b27c6060ca8d0 Mon Sep 17 00:00:00 2001
From: Michael Winsauer <e1429715@student.tuwien.ac.at>
Date: Sat, 19 Jan 2019 02:22:20 +0100
Subject: [PATCH] Convert SearchTerm and SearchTermsInput into functional
components
---
service-website/src/components/SearchTerm.js | 51 +++++++-------
.../src/components/SearchTermsInput.js | 66 ++++++++-----------
2 files changed, 52 insertions(+), 65 deletions(-)
diff --git a/service-website/src/components/SearchTerm.js b/service-website/src/components/SearchTerm.js
index 04a4f67..537e663 100644
--- a/service-website/src/components/SearchTerm.js
+++ b/service-website/src/components/SearchTerm.js
@@ -1,39 +1,34 @@
-import React, {Component} from "react";
+import React from "react";
import PropTypes from "prop-types";
-class SearchTerm extends Component {
- constructor(props, context) {
- super(props, context);
- this.handleChange = this.handleChange.bind(this);
- this.handleAddTerm = this.handleAddTerm.bind(this);
- this.handleRemoveTerm = this.handleRemoveTerm.bind(this);
- }
-
- handleChange(event) {
+const SearchTerm = ({
+ index,
+ value,
+ onTermChange,
+ onAddTerm,
+ onRemoveTerm,
+ }) => {
+ const handleChange = (event) => {
const target = event.target;
const value = target.value;
- const id = this.props.index;
- this.props.onTermChange(id, value);
- }
+ onTermChange(index, value);
+ };
- handleAddTerm(event) {
+ const handleAddTerm = (event) => {
- }
+ };
- handleRemoveTerm(event) {
- const index = this.props.index;
- this.props.onRemoveTerm(index);
- }
+ const handleRemoveTerm = (event) => {
+ onRemoveTerm(index);
+ };
- render() {
- return (
- <div key={this.props.index} className="search-term">
- <input type="text" onChange={this.handleChange}/>
- <button onClick={this.handleRemoveTerm}>Remove</button>
- </div>
- );
- }
-}
+ return (
+ <div key={index} className="search-term">
+ <input type="text" onChange={handleChange}/>
+ <button onClick={handleRemoveTerm}>Remove</button>
+ </div>
+ );
+};
SearchTerm.propTypes = {
index: PropTypes.number.isRequired,
diff --git a/service-website/src/components/SearchTermsInput.js b/service-website/src/components/SearchTermsInput.js
index a81bf78..be072db 100644
--- a/service-website/src/components/SearchTermsInput.js
+++ b/service-website/src/components/SearchTermsInput.js
@@ -1,59 +1,51 @@
-import React, {Component} from "react";
+import React 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.handleRemoveTerm = this.handleRemoveTerm.bind(this);
- this.createSearchTerms = this.createSearchTerms.bind(this);
- }
-
- handleAddTerm(event) {
+const SearchTermsInput = ({
+ terms,
+ onTermChange,
+ onAddTerm,
+ onRemoveTerm,
+ }) => {
+ const handleAddTerm = (event) => {
event.preventDefault();
- this.props.onAddTerm(event);
- }
+ onAddTerm(event);
+ };
- handleRemoveTerm(id) {
- this.props.onRemoveTerm(id);
- }
+ const handleRemoveTerm = (id) => {
+ onRemoveTerm(id);
+ };
- handleTermChange(id, value) {
- this.props.onTermChange(id, value);
- }
+ const handleTermChange = (id, value) => {
+ onTermChange(id, value);
+ };
- createSearchTerms() {
- const terms = this.props.terms;
+ const createSearchTerms = () => {
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}/>
+ onTermChange={handleTermChange}
+ onAddTerm={handleAddTerm}
+ onRemoveTerm={handleRemoveTerm}/>
);
searchTerms.push(searchTerm);
}
return searchTerms;
- }
-
- render() {
- const searchTerms = this.createSearchTerms();
- return (
- <div className="search-terms-input">
- {searchTerms}
- <button onClick={this.handleAddTerm}>Add term</button>
- </div>
- );
- }
-}
+ };
+
+ return (
+ <div className="search-terms-input">
+ {createSearchTerms()}
+ <button onClick={handleAddTerm}>Add term</button>
+ </div>
+ );
+};
SearchTermsInput.propTypes = {
terms: PropTypes.object.isRequired,
--
2.43.0