Skip to content

Instantly share code, notes, and snippets.

@jbis9051
Created April 18, 2020 22:43
Show Gist options
  • Save jbis9051/8e9b6dfda95f544e47a80019672e5fe8 to your computer and use it in GitHub Desktop.
Save jbis9051/8e9b6dfda95f544e47a80019672e5fe8 to your computer and use it in GitHub Desktop.
@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>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment