openreplay/frontend/app/components/BugFinder/Attributes/Attributes.js
2021-05-01 15:12:01 +05:30

71 lines
2.1 KiB
JavaScript

import React from 'react';
import { connect } from 'react-redux';
import { countries } from 'App/constants';
import { KEYS } from 'Types/filter/customFilter';
import { addAttribute } from 'Duck/filters';
import AttributeItem from './AttributeItem';
import ListHeader from '../ListHeader';
import logger from 'App/logger';
const DEFAULT = null;
const DEFAULT_OPTION = { text: 'Any', value: DEFAULT };
const toOptions = (values, mapper) => (values ? values
.map(({value}) => ({
text: mapper ? mapper[ value ] : value,
value,
}))
.toJS() : [ DEFAULT_OPTION ]);
const countryOptions = Object.keys(countries).map(i => ({ text: countries[i], value: i }));
@connect(state => ({
filters: state.getIn([ 'filters', 'appliedFilter', 'filters' ]),
filterValues: state.get('filterValues'),
filterOptions: state.getIn([ 'filters', 'filterOptions' ]),
}), {
addAttribute,
})
class Attributes extends React.PureComponent {
getOptions = filter => {
const { filterValues, filterOptions } = this.props;
if (filter.key === KEYS.USER_COUNTRY) {
logger.log('Filters: country')
return countryOptions;
}
if (filter.key === KEYS.METADATA) {
logger.log('Filters: metadata ' + filter.key)
const options = filterValues.get(filter.key);
return options && options.size ? toOptions(options) : [];
}
logger.log('Filters: general filters ' + filter.key)
const options = filterOptions.get(filter.key)
return options && options.size ? toOptions(options.filter(i => !!i)) : []
}
render() {
const { filters } = this.props;
return (
<>
{ filters.size > 0 &&
<div>
<div className="py-1"><ListHeader title="Filters" /></div>
{
filters.map((filter, index) => (
<AttributeItem
key={index}
index={ index }
filter={ filter }
options={ this.getOptions(filter) }
/>
))
}
</div>
}
</>
);
}
}
export default Attributes;