Convert SearchTerm and SearchTermsInput into functional components

diff --git a/service-website/src/components/SearchTerm.js b/service-website/src/components/SearchTerm.js
index 04a4f67810c1b606f68df196154feca837b2619f..537e6632b05e48482514aa45a2f9dd5d1384feaf 100644 (file)
--- 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 a81bf787210647f964c550cae1b6686f1a9fe4a3..be072dbe4025238e9968506f9746c8bca357e851 100644 (file)
--- 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,