React.js

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as CommentActions from '../actions/CommentActions';
import Interact from '../wrappers/Interact';
import CommentView from './CommentView';
import CommentEdit from './CommentEdit';
import CommentNameEdit from './CommentNameEdit';
import CommentDelete from './CommentDelete';
const VIEW = 'VIEW';
const EDIT = 'EDIT';
const DELETE = 'DELETE';
const EDIT_NAME = 'EDIT_NAME';

class Comment extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      interactable: null
    };
  }

  savePosition(width,height,data_x,data_y) {
    let item = this.props.comment;
    item.width = width;
    item.height = height;
    item.data_x = data_x;
    item.data_y = data_y;
    this.props.dispatch(CommentActions.fetchEditComment(this.props.comment.id, item));
  }

  cancel() {
    this.props.actions.destroyCurrentComment();
    this.props.actions.changeCurrentCommentState(VIEW);
  }

  view() {
    this.props.actions.changeCurrentCommentState(VIEW);
  }

  save(text, name) {
    let item = this.props.comment;
    item.text = text;
    item.author = name;
    this.props.dispatch(CommentActions.fetchEditComment(this.props.comment.id, item));
    this.props.actions.changeCurrentCommentState(VIEW);
  }

  render() {
    const { comment, actions, dispatch, state } = this.props;

    let style = {
      height: comment.height,
      width: comment.width,
      position: 'absolute',
      top: comment.top,
      left: comment.left,
      transform: "translate(" + comment.data_x + "px," + comment.data_y + "px)",
      boxShadow: '0 0 0 99999px rgba(0, 0, 0, .6)',
      minHeight: '40px',
      minWidth: '40px',
    };

    let template;
    switch (state.currentCommentState) {
      case VIEW:
        template = (
          <CommentView comment={comment}
                       actions={actions}
                       isApprovePage={false}
                       dispatch={dispatch}/>
        );
        break
       case EDIT:
         template = (
           <CommentEdit save={::this.save}
                        cancel={::this.view}
                        text={comment.text}
                        comment={comment}
                        actions={actions}/>
         );
         break
       case EDIT_NAME:
         template = (
           <CommentNameEdit save={::this.save}
                            cancel={::this.view}
                            text={comment.text}
                            comment={comment}
                            actions={actions}/>
         );
         break
       case DELETE:
         template = (
           <CommentDelete cancel={::this.view}
                          comment={comment}
                          actions={actions}
                          dispatch={dispatch}/>
         );
         break
       default:
         template = (
           <CommentView comment={comment}
                        actions={actions}
                        dispatch={dispatch} />
         );
    }

    return (
      <div className="cycles-resize"
           style={style}
           ref='comment'
           data-x={comment.data_x}
           data-y={comment.data_y}>
        <div className="cycles-dot"
             style={{cursor: 'all-scroll'}}>
          <span>{comment.counter}</span>
        </div>
        <div className="cycles-scaling-dot"></div>
        {template}
      </div>
    );
  }
}

function mapState(state) {
  return {
    comment: state.currentComment,
    state: state.currentCommentState
  };
}

function mapDispatch(dispatch) {
  return {
    actions: bindActionCreators({ ...CommentActions }, dispatch),
    dispatch: dispatch
  };
}

export default connect(mapState, mapDispatch)(Comment);