ShortText.jsx

// @flow

import * as React from 'react';
import cn from 'classnames';
import { handleErrorMessages } from '../../../utils/noty';
import { t } from '../../../utils/I18n';
import { TextField } from 'pipestyle';
import Base from '../../Base';
import { ESCAPE_KEY, DELAY_TO_CONFIRM_FIELD } from '../../constants';

import type {
  ShortTextProps as Props,
  ShortTextState as State,
  UpdateShortTextMutationProps,
  UpdateShortTextResultProps,
} from '../../models';

export default class ShortText extends React.Component<Props, State> {
  static defaultProps = {
    type: 'text',
    value: '',
  };

  state = {
    value: this.props.value,
    success: false,
  };

  componentWillUnmount() {
    this.onSave();
  }

  onChange = ({ target: { value } }: SyntheticEvent<HTMLInputElement>): void =>
    this.setState({ value });

  onKeyDown = (event: SyntheticEvent<HTMLInputElement>): void => {
    if (event.keyCode === ESCAPE_KEY) {
      this.setState({ value: this.props.value });
    }
  };

  onSave= async (): void => {
    if (this.state.value === this.props.value) return;

    const { value } = this.state;
    const { cardId, id: fieldId } = this.props;
    const variables: UpdateShortTextMutationProps = {
      variables: {
        cardId,
        fieldId,
        value,
      },
    };

    try {
      const {
        data,
        error,
        loading
      }: UpdateShortTextResultProps = await this.props.updateShortText(
        variables
      );

      if (error) {
        handleErrorMessages({ message: t('errors.500') });
        return;
      }

      if (!loading && (!data || !data.updateCardShortTextFieldValue)) {
        handleErrorMessages({ message: t('errors.404') });
        return;
      }
    } catch (e) {
      handleErrorMessages({ message: t('errors.500') });
      return;
    }
  };

  render(): React.Node {
    const { type, placeholder } = this.props;
    const { value, success } = this.state;
    const className: string = cn({ 'pp-ico-check': success });

    return (
      <Base className={className} isEmpty={!value} {...this.props}>
        <TextField
          type={type}
          placeholder={placeholder}
          value={value}
          onChange={this.onChange}
          onKeyDown={this.onKeyDown}
        />
      </Base>
    );
  }
}