+import PropTypes from 'prop-types';
+import React from 'react';
+import { Form } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+const TechFilter = ({ filter, setFilter }) => {
+ const { t } = useTranslation();
+
+ const handleChange = React.useCallback(e => {
+ if (e.target.name.startsWith('ruleset.')) {
+ const r = e.target.name.substring(8);
+ setFilter({
+ ...filter,
+ ruleset: {
+ ...filter.ruleset || {},
+ [r]: e.target.checked ? '1' : '0',
+ },
+ });
+ }
+ }, [filter]);
+
+ return <div className="tech-filter">
+ <div>{t('techniques.rulesetFilterHeading')}</div>
+ <div className="ruleset-box">
+ {['competitive', 'owg', 'mg', 'nl'].map(r =>
+ <Form.Check
+ checked={!!(filter && filter.ruleset && filter.ruleset[r] === '1')}
+ key={r}
+ id={`tech.filter.ruleset.${r}`}
+ name={`ruleset.${r}`}
+ label={t(`techniques.rulesetCodes.${r}`)}
+ onChange={handleChange}
+ title={t(`techniques.rulesetDescriptions.${r}`)}
+ type="checkbox"
+ />
+ )}
+ </div>
+ </div>;
+};
+
+TechFilter.propTypes = {
+ filter: PropTypes.shape({
+ ruleset: PropTypes.shape({
+ }),
+ }),
+ setFilter: PropTypes.func,
+};
+
+export default TechFilter;