import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faSearch } from '@fortawesome/free-solid-svg-icons'; import DatePicker from 'react-datepicker'; import '../css/SearchBar.css'; import 'react-datepicker/dist/react-datepicker.css'; export default function SearchBar({ onSubmit }) { const [lastViewDate, setStartDate] = useState(null); const [searchInput, setSearchInput] = useState(''); const inputUpdated = (e) => { const { value } = e.target; setSearchInput(value); }; const clearSearch = () => { setSearchInput(''); onSubmit('', lastViewDate); }; const clearDate = () => { setStartDate(null); onSubmit(searchInput, null); }; return ( <div className="search-form"> <form onSubmit={(e) => { e.preventDefault(); }}> <span className="search-input-container"> <FontAwesomeIcon className="search-icon" icon={faSearch} /> <input className="form-control" id="searchbarform" name="search" onInput={inputUpdated} placeholder="Search for a file..." type="input" value={searchInput} /> {searchInput.length > 0 && ( <button type="button" className="clear-btn clear-search" onClick={clearSearch}>X</button> )} </span> <span> <DatePicker selected={lastViewDate} onChange={(date) => { setStartDate(date); onSubmit(searchInput, date);}} placeholderText="Last viewed after..." closeOnScroll /> {lastViewDate && ( <button type="button" className="clear-btn clear-date" onClick={clearDate}>X</button> )} </span> <button type="submit" style={{ display: 'none' }} onClick={() => onSubmit(searchInput, lastViewDate)}>Search</button> </form> </div> ); } SearchBar.propTypes = { onSubmit: PropTypes.func.isRequired, };