MessageComponent.tsx

@observer
export class MessageComponent extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            editValue: this.props.message.content,
        };

        this.handleEditButton = this.handleEditButton.bind(this);
        this.handleTrash = this.handleTrash.bind(this);
        this.cancelEdit = this.cancelEdit.bind(this);
    }

    componentDidUpdate(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any): void {
        if(prevProps.message.content !== this.props.message.content){
            this.setState({editValue: this.props.message.content})
        }
    }

    handleEditButton() {
        this.setState({editValue: this.props.message.content});
        UIStore.store.messageIdEditControl = this.props.messageId;
    }

    enterHandle(e: any) {
        if (e.key === "Enter" && !e.shiftKey) {
            e.preventDefault();
            if (this.state.editValue.trim().length > 0) {
                this.setState({editValue: ""});
                UIStore.store.messageIdEditControl = null;
                IO.edit(this.props.messageId, this.state.editValue);
            }
        }
        if(e.key === "ArrowUp"){
            ChatStore.editNextMessage({messageId: this.props.messageId});
        }
    }

    handleTrash() {
        console.log(this.props.messageId);
        IO.delete(this.props.messageId);
    }

    cancelEdit(){
        UIStore.store.messageIdEditControl = null;
    }

    render() {
        return (
            <div className={
                "message "
                + (this.props.startGroup ? "group-start " : "")
                + (this.props.fromMe ? "from-me " : "from-them ")
            }>
          
                {
                    this.props.fromMe && UIStore.store.messageIdEditControl !== this.props.messageId ?
                        <div className={"message--options-container"}>
                            <span onClick={this.handleEditButton} className={"message--option"}><FontAwesomeIcon
                                icon={faPencilAlt}/></span>
                            <span onClick={this.handleTrash} className={"message--option"}><FontAwesomeIcon
                                icon={faTrashAlt}/></span>
                        </div>
                        : null
                }
                <div className={"message--content-container"}>
                    {
                        UIStore.store.messageIdEditControl !== this.props.messageId ?
                            <span className={"message--content"}>{this.props.message.content}</span>
                            :
                            <React.Fragment>
                                  <textarea autoFocus={true} onKeyDown={e => this.enterHandle(e)} placeholder={"Say something..."}
                                            className={"message--content--edit-input"} value={this.state.editValue}
                                            onChange={(e) => this.setState({editValue: e.target.value})}/>
                                            <span onClick={this.cancelEdit} className={"message--content-edit-cancel"}>cancel</span>
                            </React.Fragment>

                    }
                </div>

      
            </div>
        );
    }
}