Delete action

app/containers/message/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Text, Alert } from 'react-native';
 import { emojify } from 'react-emojione';
 import Markdown from 'react-native-easy-markdown';
 import ActionSheet from 'react-native-actionsheet';
@@ -8,6 +8,7 @@ import ActionSheet from 'react-native-actionsheet';
 import Card from './Card';
 import User from './User';
 import Avatar from '../Avatar';
+import RocketChat from '../../lib/rocketchat';
 
 const title = 'Message actions';
 const options = ['Cancel', 'Reply', 'Edit', 'Permalink', 'Copy', 'Quote', 'Star Message', 'Delete'];
@@ -25,6 +26,10 @@ const styles = StyleSheet.create({
 		paddingBottom: 6,
 		flexDirection: 'row',
 		transform: [{ scaleY: -1 }]
+	},
+	textInfo: {
+		fontStyle: 'italic',
+		color: '#a0a0a0'
 	}
 });
 
@@ -41,6 +46,10 @@ export default class Message extends React.PureComponent {
 		this.showActions = this.showActions.bind(this);
 	}
 
+	isDeleted() {
+		return !this.props.item.msg;
+	}
+
 	attachments() {
 		return this.props.item.attachments.length ? (
 			<Card
@@ -53,8 +62,46 @@ export default class Message extends React.PureComponent {
 		this.ActionSheet.show();
 	}
 
-	handleActionPress = (i) => {
+	handleDelete() {
-		console.log(i);
+		Alert.alert(
+			'Are you sure?',
+			'You will not be able to recover this message!',
+			[
+				{
+					text: 'Cancel',
+					style: 'cancel'
+				},
+				{
+					text: 'Yes, delete it!',
+					style: 'destructive',
+					onPress: () => this.deleteMessage(this.props.item)
+				}
+			],
+			{ cancelable: false }
+		);
+	}
+
+	handleActionPress = (actionIndex) => {
+		if (actionIndex === 7) {
+			this.handleDelete();
+		} else {
+			console.log(actionIndex, this.props.item);
+		}
+	}
+
+	deleteMessage = message => RocketChat.deleteMessage(message);
+
+	renderMessageContent() {
+		if (this.isDeleted()) {
+			return <Text style={styles.textInfo}>Message removed</Text>;
+		}
+
+		const msg = emojify(this.props.item.msg, { output: 'unicode' });
+		return (
+			<Markdown>
+				{msg}
+			</Markdown>
+		);
 	}
 
 	render() {
@@ -65,11 +112,13 @@ export default class Message extends React.PureComponent {
 			extraStyle.opacity = 0.3;
 		}
 
-		const msg = emojify(item.msg, { output: 'unicode' });
 		const username = item.alias || item.u.username;
 
 		return (
-			<TouchableOpacity onLongPress={() => this.showActions()}>
+			<TouchableOpacity
+				onLongPress={() => this.showActions()}
+				disabled={this.isDeleted()}
+			>
 				<View style={[styles.message, extraStyle]}>
 					<Avatar
 						style={{ marginRight: 10 }}
@@ -85,9 +134,7 @@ export default class Message extends React.PureComponent {
 							Message_TimeFormat={this.props.Message_TimeFormat}
 						/>
 						{this.attachments()}
-						<Markdown>
+						{this.renderMessageContent(item)}
-							{msg}
-						</Markdown>
 					</View>
 					<ActionSheet
 						ref={o => this.ActionSheet = o}

app/lib/rocketchat.js

@@ -454,6 +454,9 @@ const RocketChat = {
 		Meteor.disconnect();
 		AsyncStorage.removeItem(TOKEN_KEY);
 		AsyncStorage.removeItem(`${ TOKEN_KEY }-${ server }`);
+	},
+	deleteMessage(message) {
+		return call('deleteMessage', { _id: message._id });
 	}
 };