From 3a1b4be06c1f4de4ff4851d2c40b27c6060ca8d0 Mon Sep 17 00:00:00 2001 From: Michael Winsauer 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 ( -
- - -
- ); - } -} + return ( +
+ + +
+ ); +}; 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 = ( + onTermChange={handleTermChange} + onAddTerm={handleAddTerm} + onRemoveTerm={handleRemoveTerm}/> ); searchTerms.push(searchTerm); } return searchTerms; - } - - render() { - const searchTerms = this.createSearchTerms(); - return ( -
- {searchTerms} - -
- ); - } -} + }; + + return ( +
+ {createSearchTerms()} + +
+ ); +}; SearchTermsInput.propTypes = { terms: PropTypes.object.isRequired, -- 2.43.0