scraper-react/src/components/CreateScrapeRequest/CreateScrapeRequest.js

import React, { useState } from 'react';
import Select from 'react-select'
import { prices, beds, types, lifeStyles } from '../../constants/filters';
import './CreateScrapeRequest.scss'
import PropTypes from 'prop-types';
import { states } from '../../constants/states'
import Autocomplete from 'react-autocomplete';
import { useTranslation } from 'react-i18next';

export function matchStateToTerm(state, value) {
    return (
        state.label.toLowerCase().indexOf(value.toLowerCase()) !== -1
    )
}
const CreateScrapeRequest = ({ handleRequest }) => {

    const [requestObject, setRequestObject] = useState({ location: '' })
    const { t } = useTranslation();


    const handleChangePriceType = async selectedOption => {
        setRequestObject(s => ({ ...s, price: selectedOption.value }))
    };
    const handleChangeBedType = async selectedOption => {
        setRequestObject(s => ({ ...s, beds: selectedOption.value }))
    };
    const handleChangeFilterType = async selectedOption => {
        setRequestObject(s => ({ ...s, type: selectedOption.value }))
    };

    const handleChangeLifeStyleType = async selectedOption => {
        setRequestObject(s => ({ ...s, lifestyle: selectedOption.value }))
    };

    console.log("requestObject", requestObject)
    return (
        <div className="card card-primary">
            <form >
                <div className="card-body">
                    <div className="row">
                        {/* <div className="col-md-3">
                            <div className="form-group">
                                <input type="text" className="form-control input-field cursor-pointer" value={requestObject.location} placeholder={t('createScrapeRequest.LocationPlaceholder')} onChange={e => setRequestObject(s => ({ ...s, location: e.target.value }))} />
                            </div>
                        </div> */}
                        <div className="col-md-3">
                            <div className="form-group">
                                <Autocomplete
                                    menuStyle={{
                                        padding: ".375rem .75rem",
                                        fontSize: '1rem',
                                        fontWeight: '400',
                                        lineHeight: 1.5,
                                        color: "#495057",
                                        backgroundColor: '#fff',
                                        backgroundClip: "padding-box",
                                        border: "1px solid #ced4da",
                                        borderRadius: ".25rem",
                                        boxShadow: "inset 0 0 0 transparent",
                                        transition: " border-color .15s ease-in-out,box-shadow .15s ease-in-out",
                                        background: 'rgba(255, 255, 255, 0.9)',
                                        position: 'fixed',
                                        overflow: 'auto',
                                        maxHeight: '50%',
                                        zIndex: 2001
                                    }}
                                    renderInput={(props) => <input {...props} type="text" className="form-control input-field cursor-pointer" placeholder={t('createScrapeRequest.LocationPlaceholder')} />}
                                    getItemValue={(item) => item.label}
                                    items={states.map(s => ({ label: s }))}
                                    renderItem={(item, isHighlighted) =>
                                        <div style={{ background: isHighlighted ? 'lightgray' : 'white', }}>
                                            {item.label}
                                        </div>
                                    }
                                    shouldItemRender={matchStateToTerm}
                                    value={requestObject.location}
                                    onChange={(e, val) => setRequestObject(s => ({ ...s, location: val }))}
                                    onSelect={(val) => setRequestObject(s => ({ ...s, location: val }))}
                                />
                            </div>
                        </div>
                        <div className="col-md-2">
                            <div className="form-group">
                                <Select options={prices}  onChange={handleChangePriceType} placeholder={t('createScrapeRequest.PricePlaceholder')} />
                            </div>
                        </div>
                        <div className="col-md-2">
                            <div className="form-group">
                                <Select   className="cursor-pointer" options={beds}  onChange={handleChangeBedType} placeholder={t('createScrapeRequest.BedsPlaceholder')}/>
                            </div>
                        </div>
                        <div className="col-md-2">
                            <Select  className="cursor-pointer"  options={types} onChange={handleChangeFilterType} placeholder={t('createScrapeRequest.TypePlaceholder')}  />
                        </div>
                        <div className="col-md-2">
                            <Select  className="cursor-pointer"  options={lifeStyles} onChange={handleChangeLifeStyleType} placeholder={t('createScrapeRequest.LifestylePlaceholder')}/>
                        </div>
                        <div className="col-md-1">
                            <button type="button" onClick={() => { handleRequest(requestObject); setRequestObject({ location: '' }) }} className="btn btn-outline-primary cursor-pointer">Request</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    );
};

CreateScrapeRequest.propTypes = {
    handleRequest: PropTypes.func
};

export default CreateScrapeRequest;