function HeadersEditor()

in src/routes/Document/components/HeadersEditor.js [23:96]
67 lines of code
4 McCabe index (conditional complexity)

function HeadersEditor(props) {
  const { value: propsValue, onChange, buttonText } = props;
  const jsonObj = JSON.parse(propsValue || "[]");
  const [value, setValue] = useState(jsonObj);

  useEffect(() => {
    setValue(jsonObj);
  }, [propsValue]);

  const onChangeItem = (e, key, index) => {
    changeValue(
      value.map((item) =>
        item.index === index ? { ...item, [key]: e } : item,
      ),
    );
  };

  const onDeleteItem = (key) => {
    changeValue(value.filter((item) => item.key !== key));
  };

  const onAddItem = () => {
    changeValue([...value, { index: value.length, key: "", value: "" }]);
  };

  const changeValue = (newValue) => {
    setValue(newValue);
    onChange(JSON.stringify(newValue));
  };

  return (
    <Row gutter={16}>
      {value.map((item) => (
        <Fragment key={item.index}>
          <Col span={6}>
            <Input
              allowClear
              value={item.key}
              readOnly={false}
              onChange={(e) => onChangeItem(e.target.value, "key", item.index)}
            />
          </Col>
          <Col span={16}>
            <Input
              allowClear
              value={item.value}
              readOnly={false}
              onChange={(e) =>
                onChangeItem(e.target.value, "value", item.index)
              }
            />
          </Col>
          <Col span={2} style={{ textAlign: "center" }}>
            {!item.required && (
              <Text type="danger">
                <Icon
                  style={{ fontSize: "16px" }}
                  type="minus-circle-o"
                  onClick={() => onDeleteItem(item.key)}
                />
              </Text>
            )}
          </Col>
        </Fragment>
      ))}

      <Col span={24}>
        <Button block type="dashed" onClick={onAddItem}>
          <Icon type="plus" /> {buttonText}
        </Button>
      </Col>
    </Row>
  );
}