function InstanceFilter()

in console-ui/src/pages/ServiceManagement/ServiceDetail/InstanceFilter.js [25:126]
90 lines of code
6 McCabe index (conditional complexity)

function InstanceFilter(props) {
  const [key, setKey] = useState('');
  const [value, setValue] = useState('');
  const [keyState, setKeyState] = useState('');
  const [valueState, setValueState] = useState('');
  const [filters, setFilters] = useState(new Map());
  const { locale = {} } = props;

  const addFilter = () => {
    updateInput();

    if (key && value) {
      const newFilters = new Map(Array.from(filters)).set(key, value);

      setFilters(newFilters);
      setKeyState('');
      setValueState('');

      clearInput();
    }
  };

  const removeFilter = key => {
    const newFilters = new Map(Array.from(filters));
    newFilters.delete(key);

    setFilters(newFilters);
  };

  const clearFilters = () => {
    setFilters(new Map());
  };

  const clearInput = () => {
    setKey('');
    setValue('');
  };

  const updateInput = () => {
    if (!key) {
      setKeyState('error');
    } else {
      setKeyState('');
    }

    if (!value) {
      setValueState('error');
    } else {
      setValueState('');
    }
  };

  useEffect(() => {
    props.setFilters(filters);
  }, [filters]);

  return (
    <Card contentHeight="auto" className="inner-card">
      <Form inline size="small">
        <FormItem label={locale.title}>
          <FormItem>
            <Input
              placeholder={'key'}
              value={key}
              trim
              onChange={key => setKey(key)}
              onPressEnter={addFilter}
              state={keyState}
            />
          </FormItem>
          <FormItem>
            <Input
              placeholder={'value'}
              value={value}
              trim
              onChange={value => setValue(value)}
              onPressEnter={addFilter}
              state={valueState}
            />
          </FormItem>
          <FormItem label="">
            <Button type="primary" onClick={addFilter} style={{ marginRight: 10 }}>
              {locale.addFilter}
            </Button>
            {filters.size > 0 ? (
              <Button type="primary" onClick={clearFilters}>
                {locale.clear}
              </Button>
            ) : (
              ''
            )}
          </FormItem>
        </FormItem>
      </Form>
      <TagGroup>
        {Array.from(filters).map(filter => {
          return (
            <CloseableTag size="medium" key={filter[0]} onClose={() => removeFilter(filter[0])}>
              {`${filter[0]} : ${filter[1]}`}
            </CloseableTag>
          );
        })}