service-website/src/components/SearchTermsInput.js

   1 import React from "react";
   2 import PropTypes from "prop-types";
   3 import SearchTerm from "./SearchTerm";
   4
   5 const SearchTermsInput = ({
   6                               terms,
   7                               onTermChange,
   8                               onAddTerm,
   9                               onRemoveTerm,
  10                           }) => {
  11     const handleAddTerm = (event) => {
  12         event.preventDefault();
  13         onAddTerm(event);
  14     };
  15
  16     const handleRemoveTerm = (id) => {
  17         onRemoveTerm(id);
  18     };
  19
  20     const handleTermChange = (id, value) => {
  21         onTermChange(id, value);
  22     };
  23
  24     const createSearchTerms = () => {
  25         const searchTerms = [];
  26         for (const entry of terms.entries()) {
  27             const id = entry[0];
  28             const value = entry[1];
  29             const searchTerm = (
  30                 <SearchTerm key={id}
  31                             index={id}
  32                             value={value}
  33                             onTermChange={handleTermChange}
  34                             onAddTerm={handleAddTerm}
  35                             onRemoveTerm={handleRemoveTerm}/>
  36             );
  37             searchTerms.push(searchTerm);
  38         }
  39         return searchTerms;
  40     };
  41
  42     return (
  43         <div className="search-terms-input">
  44             {createSearchTerms()}
  45             <button onClick={handleAddTerm}>Add term</button>
  46         </div>
  47     );
  48 };
  49
  50 SearchTermsInput.propTypes = {
  51     terms: PropTypes.object.isRequired,
  52     onTermChange: PropTypes.func.isRequired,
  53     onAddTerm: PropTypes.func.isRequired,
  54     onRemoveTerm: PropTypes.func.isRequired,
  55 };
  56
  57 export default SearchTermsInput;