service-website/src/components/SearchTermsInput.js

   1 import React from "react";
   2 import PropTypes from "prop-types";
   3 import SearchTerm from "./SearchTerm";
   4 import {Button, Icon} from "react-bulma-components/full";
   5 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
   6 import {faPlus} from '@fortawesome/free-solid-svg-icons'
   7
   8 const SearchTermsInput = ({
   9                               terms,
  10                               onTermChange,
  11                               onAddTerm,
  12                               onRemoveTerm,
  13                           }) => {
  14     const handleAddTerm = (event) => {
  15         event.preventDefault();
  16         onAddTerm(event);
  17     };
  18
  19     const handleRemoveTerm = (id) => {
  20         onRemoveTerm(id);
  21     };
  22
  23     const handleTermChange = (id, value) => {
  24         onTermChange(id, value);
  25     };
  26
  27     const createSearchTerms = () => {
  28         const searchTerms = [];
  29         for (const entry of terms.entries()) {
  30             const id = entry[0];
  31             const value = entry[1];
  32             const searchTerm = (
  33                 <SearchTerm key={id}
  34                             index={id}
  35                             value={value}
  36                             onTermChange={handleTermChange}
  37                             onAddTerm={handleAddTerm}
  38                             onRemoveTerm={handleRemoveTerm}/>
  39             );
  40             searchTerms.push(searchTerm);
  41         }
  42         return searchTerms;
  43     };
  44
  45     return (
  46         <div className="search-terms-input">
  47             <Button onClick={handleAddTerm}>
  48                 <Icon align="left">
  49                     <FontAwesomeIcon icon={faPlus}/>
  50                 </Icon>
  51                 <p>Add term</p>
  52             </Button>
  53             <br/>
  54             <br/>
  55             {createSearchTerms()}
  56             <br/>
  57         </div>
  58     );
  59 };
  60
  61 SearchTermsInput.propTypes = {
  62     terms: PropTypes.object.isRequired,
  63     onTermChange: PropTypes.func.isRequired,
  64     onAddTerm: PropTypes.func.isRequired,
  65     onRemoveTerm: PropTypes.func.isRequired,
  66 };
  67
  68 export default SearchTermsInput;