short-d/short

import React, { Component } from 'react';
import './ErrorModal.scss';
 
import { IErr } from '../../../entity/Err';
import { Icon, IconID } from '../../ui/Icon';
import { Modal } from '../../ui/Modal';
import { Store, Unsubscribe } from 'redux';
import { IAppState } from '../../../state/reducers';
import { clearError } from '../../../state/actions';
 
interface IProps {
  store: Store<IAppState>;
}
 
interface IState {
  error?: IErr;
}
 
export class ErrorModal extends Component<IProps, IState> {
  private modalRef = React.createRef<Modal>();
  private unsubscribeStateChange: Unsubscribe | undefined;
 
  constructor(props: IProps) {
    super(props);
 
    this.state = {
      error: props.store.getState().err
    };
  }
 
  componentDidMount(): void {
    this.subscribeErrorChange();
  }
 
  private subscribeErrorChange() {
    this.unsubscribeStateChange = this.props.store.subscribe(() => {
      const { err } = this.props.store.getState();
      this.setState({ error: err });
      if (err) {
        this.showError();
      }
    });
  }
 
  componentWillUnmount(): void {
    if (this.unsubscribeStateChange) {
      this.unsubscribeStateChange();
    }
  }
 
  render() {
    const { error } = this.state;
 
    return (
      <Modal
        canClose={true}
        onModalClose={this.handleModalClose}
        ref={this.modalRef}
      >
        <div className={'error-modal-content'}>
Similar blocks of code found in 2 locations. Consider refactoring.
          <div className={'close-icon'}>
            <Icon iconID={IconID.Close} onClick={this.handleCloseClick} />
          </div>
          <div className={'title'}>{error?.name}</div>
          <div className={'description'}>{error?.description}</div>
        </div>
      </Modal>
    );
  }
 
  private handleModalClose = () => {
    this.props.store.dispatch(clearError());
  };
 
  private handleCloseClick = () => {
    this.modalRef.current!.close();
  };
 
  private showError = () => {
    this.modalRef.current!.open();
  };
}