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