Add filter clearing logic
parent
b9dfc254f4
commit
c150ad2c34
|
@ -149,9 +149,14 @@
|
|||
border-color: #000d00;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
span {
|
||||
display: inline-block;
|
||||
min-height: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.map-wrapper {
|
||||
position: absolute;
|
||||
display: block;
|
||||
|
|
|
@ -7,13 +7,14 @@ import SuperBlock from './Super-Block.jsx';
|
|||
import FullStack from './Full-Stack.jsx';
|
||||
import CodingPrep from './Coding-Prep.jsx';
|
||||
|
||||
const clearIcon = (<i className='fa fa-times' />);
|
||||
const searchIcon = (<i className='fa fa-search' />);
|
||||
const clearIcon = <i className='fa fa-times' />;
|
||||
const searchIcon = <i className='fa fa-search' />;
|
||||
export default class ShowMap extends PureComponent {
|
||||
static displayName = 'Map';
|
||||
static propTypes = {
|
||||
superBlocks: PropTypes.array,
|
||||
clearFilter: PropTypes.func,
|
||||
filter: PropTypes.string,
|
||||
superBlocks: PropTypes.array,
|
||||
updateFilter: PropTypes.func
|
||||
};
|
||||
|
||||
|
@ -31,8 +32,10 @@ export default class ShowMap extends PureComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { superBlocks, updateFilter, filter } = this.props;
|
||||
const inputIcon = filter ? clearIcon : searchIcon;
|
||||
const { superBlocks, updateFilter, clearFilter, filter } = this.props;
|
||||
const inputIcon = !filter ?
|
||||
searchIcon :
|
||||
<span onClick={ clearFilter }>{ clearIcon }</span>;
|
||||
const inputClass = classnames({
|
||||
'map-filter': true,
|
||||
filled: !!filter
|
||||
|
|
|
@ -6,9 +6,14 @@ import { createSelector } from 'reselect';
|
|||
|
||||
import Map from './Map.jsx';
|
||||
import contain from '../../../utils/professor-x';
|
||||
import { fetchChallenges, updateFilter } from '../redux/actions';
|
||||
import {
|
||||
clearFilter,
|
||||
fetchChallenges,
|
||||
updateFilter
|
||||
} from '../redux/actions';
|
||||
|
||||
const bindableActions = {
|
||||
clearFilter,
|
||||
fetchChallenges,
|
||||
updateFilter
|
||||
};
|
||||
|
@ -59,6 +64,7 @@ const fetchOptions = {
|
|||
export class ShowMap extends PureComponent {
|
||||
static displayName = 'ShowMap';
|
||||
static propTypes = {
|
||||
clearFilter: PropTypes.func,
|
||||
filter: PropTypes.string,
|
||||
superBlocks: PropTypes.array,
|
||||
updateFilter: PropTypes.func
|
||||
|
|
|
@ -13,3 +13,5 @@ export const updateFilter = createAction(
|
|||
types.updateFilter,
|
||||
e => e.target.value
|
||||
);
|
||||
|
||||
export const clearFilter = createAction(types.clearFilter);
|
||||
|
|
|
@ -16,6 +16,10 @@ export default handleActions(
|
|||
[types.updateFilter]: (state, { payload = ''}) => ({
|
||||
...state,
|
||||
filter: payload
|
||||
}),
|
||||
[types.clearFilter]: (state) => ({
|
||||
...state,
|
||||
filter: ''
|
||||
})
|
||||
},
|
||||
initialState
|
||||
|
|
|
@ -3,5 +3,6 @@ import createTypes from '../../../utils/create-types';
|
|||
export default createTypes([
|
||||
'fetchChallenges',
|
||||
'fetchChallengesCompleted',
|
||||
'updateFilter'
|
||||
'updateFilter',
|
||||
'clearFilter'
|
||||
], 'map');
|
||||
|
|
Loading…
Reference in New Issue