92 lines
3.2 KiB
JavaScript
92 lines
3.2 KiB
JavaScript
|
|
import Search from './Search'
|
|
import { useEffect, useState } from 'react';
|
|
import { categories, work_from_home, employment_types } from '../consts';
|
|
import propTypes from 'prop-types';
|
|
import Selector from './Selector';
|
|
const Filter = (props) => {
|
|
useEffect(() => {
|
|
console.log(props.searchQuery)
|
|
}, [props.searchQuery]);
|
|
|
|
|
|
const handle_checked_change = (e) => {
|
|
const { name, value, checked } = e.target;
|
|
props.setSearchQuery(prevState => {
|
|
const newArray = checked
|
|
? [...(prevState[name] || []), value]
|
|
: (prevState[name] || []).filter(item => item !== value);
|
|
return { ...prevState, [name]: newArray };
|
|
});
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
// idea - make the page whole page grayed out and only the filter is visible
|
|
<div className={`z-10 bg-dimWhite collapsible px-3 sm:px-4 ${!props.isOpen ? '' : 'expanded border-4'}`}>
|
|
<div className='grid grid-cols-2 sm:grid-cols-3 mb-2'>
|
|
<div className='hidden sm:block'></div>
|
|
<p className='mx-auto mt-3 text-center font-poppins font-semibold text-xl text-gray-600'>Filtry</p>
|
|
|
|
<button className='rounded-xl mt-4 ph-6 w-32 bg-slate-400 hover:bg-slate-600 duration-100 ' onClick={props.clearSearchQuery}>
|
|
<span className='p-2 text-sm font-bold text-center font-poppins text-white'>Wyczyść filtry</span>
|
|
</button>
|
|
</div>
|
|
|
|
<Search label='Wyszukaj ogłoszenie'
|
|
placeholder='Wpisz nazwę stanowiska...'
|
|
name='name'
|
|
setSearchQuery={props.setSearchQuery}
|
|
_type='text'
|
|
value={props.searchQuery.name || ''}/>
|
|
<Search label='Lokalizacja'
|
|
placeholder='Wpisz lokalizację...'
|
|
name='localization'
|
|
_type='text'
|
|
setSearchQuery={props.setSearchQuery}
|
|
value={props.searchQuery.localization || ''} />
|
|
<Search label='Min. wynagrodzenie'
|
|
placeholder='Wpisz kwotę minimalną...'
|
|
name='min_salary'
|
|
_type='text'
|
|
setSearchQuery={props.setSearchQuery}
|
|
value={props.searchQuery.min_salary || '' } />
|
|
<Search label='Max. wynagrodzenie'
|
|
placeholder='Wpisz kwotę maksymalną...'
|
|
name='max_salary'
|
|
setSearchQuery={props.setSearchQuery}
|
|
_type='text'
|
|
value={props.searchQuery.max_salary || ''}/>
|
|
<Selector value_to_map_from={categories} name='Kategorie' inputname='categories' onChange={handle_checked_change} state={props.searchQuery || {} }/>
|
|
<Selector value_to_map_from={work_from_home} s name='Praca zdalna' inputname='work_from_home' state={props.searchQuery || {}} onChange={handle_checked_change}/>
|
|
<Selector value_to_map_from={employment_types} name='Typ kontraktu' inputname='employment' state={props.searchQuery || {}} onChange={handle_checked_change} />
|
|
|
|
<button className='bg-gray-600 text-white py-1 sm:py-3 px-12 col-span-2 mx-auto rounded-md font-semibold text-xl hover:bg-gray-500 duration-150 my-3 sm:my-5 sm:min-h-full'
|
|
onClick={props.onClick}
|
|
>
|
|
Filtruj
|
|
</button>
|
|
</div>
|
|
)
|
|
};
|
|
|
|
Filter.propTypes = {
|
|
isOpen: propTypes.bool,
|
|
searchQuery: propTypes.object,
|
|
setSearchQuery: propTypes.func,
|
|
categories: propTypes.array,
|
|
clearSearchQuery: propTypes.func,
|
|
onClick: propTypes.func
|
|
};
|
|
|
|
Filter.defaultProps = {
|
|
searchQuery: {
|
|
categories: [],
|
|
work_from_home: [],
|
|
employment: []
|
|
}
|
|
};
|
|
|
|
export default Filter;
|