message: refactor: convert Filter to functional component
diff: -import React, { Component } from 'react';
  +import React, { Component, useState } from 'react';
  import PropTypes from 'prop-types';
  import Select from 'react-select';
  import Item from './List/Item';
  import SRT from './SRT';
  -export default class Filter extends Component {
  - constructor(props) {
  - super(props);
  - this.state = {
  - active: 0, // Make All the default active
  - options: []
  - };
  - this.changeHandler = this.changeHandler.bind(this);
  - }
  +export default function Filter({ items, filterHandler }) {
  + const [active, updateActiveValue] = useState(0);
  - changeHandler(arg) {
  - const { filterHandler } = this.props;
  - const filterVal = (arg.value === 'all') ? false : arg.value;
  - this.setState({
  - active: filterVal,
  - });
  - filterHandler(filterVal);
  - }
  -
  - render() {
  - const { items } = this.props;
  const getCount = (type) => items.filter(item => item.type === type).length;
  - const options = [
  +
  + const selectOptions = [
  {
  value: 'all',
  label: `All (${items.length})`,
  @@ -45,14 +28,20 @@ export default class Filter extends Component {
  label: `Hardware (${getCount('hardware')})`,
  }
  ];
  +
  + const changeHandler = (arg) => {
  + const filterVal = (arg.value === 'all') ? false : arg.value;
  + updateActiveValue(filterVal);
  + filterHandler(filterVal);
  + }
  +
  return (
  <label>
  <SRT>Filter Graveyard List</SRT>
  - <Select defaultValue={options[0]} options={options} onChange={this.changeHandler} disabled={true} />
  + <Select defaultValue={selectOptions[0]} options={selectOptions} onChange={changeHandler} disabled={true} />
  </label>
  );
  }
  -}
  Filter.propTypes = {
  filterHandler: PropTypes.func.isRequired,
  