Add ability to copy messages and comments (#1266)

* Add ability to copy messages and comments.

Signed-off-by: Thomas Hobohm <public@thomashobohm.com>

* Show action sheet even when messages aren't removable.

Signed-off-by: Thomas Hobohm <public@thomashobohm.com>

Author: undercase

App/Containers/Comments.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { Dispatch } from 'redux'
 import { connect } from 'react-redux'
-import { View, ScrollView, ViewStyle } from 'react-native'
+import { View, ScrollView, ViewStyle, Clipboard } from 'react-native'
 import { NavigationActions, SafeAreaView } from 'react-navigation'
 import Textile, { IComment } from '@textile/react-native-sdk'
 import ActionSheet from 'react-native-actionsheet'
@@ -38,7 +38,11 @@ interface DispatchProps {
 interface ComponentState {
   submitting: boolean
   // The current selected block (message/photo). For use in the block action sheet
-  selectedBlockId?: string
+  selected?: {
+    blockId: string
+    canRemove: boolean
+    text: string
+  }
 }
 
 type Props = StateProps & DispatchProps
@@ -112,7 +116,13 @@ class Comments extends Component<Props, ComponentState> {
 
   render() {
     // Block action sheet
-    const blockActionSheetOptions = ['Remove', 'Cancel']
+    const blockActionSheetOptions = [
+      ...(this.state.selected && this.state.selected.canRemove
+        ? ['Remove']
+        : []),
+      'Copy',
+      'Cancel'
+    ]
     const blockCancelButtonIndex = blockActionSheetOptions.indexOf('Cancel')
     const commentCardProps = this.props.comments
       .slice()
@@ -127,9 +137,8 @@ class Comments extends Component<Props, ComponentState> {
           comment: comment.body,
           date: Textile.util.timestampToDate(comment.date),
           isCaption: false,
-          onLongPress: canRemove
-            ? () => this.showBlockActionSheet(comment.id)
-            : undefined
+          onLongPress: () =>
+            this.showBlockActionSheet(comment.id, canRemove, comment.body)
         }
         return props
       })
@@ -169,18 +178,33 @@ class Comments extends Component<Props, ComponentState> {
     )
   }
 
-  showBlockActionSheet = (blockId: string) => {
+  showBlockActionSheet = (
+    blockId: string,
+    canRemove: boolean,
+    text: string
+  ) => {
     this.setState({
-      selectedBlockId: blockId
+      selected: {
+        blockId,
+        canRemove,
+        text
+      }
     })
     this.blockActionSheet.show()
   }
 
   handleBlockActionSheetResponse = (index: number) => {
     const actions = [
-      () =>
-        this.state.selectedBlockId &&
-        this.props.remove(this.state.selectedBlockId)
+      ...(this.state.selected && this.state.selected.canRemove
+        ? [
+            () => {
+              if (this.state.selected) {
+                this.props.remove(this.state.selected.blockId)
+              }
+            }
+          ]
+        : []),
+      () => this.state.selected && Clipboard.setString(this.state.selected.text)
     ]
     if (index < actions.length) {
       actions[index]()

App/screens/group/group.tsx

@@ -7,7 +7,8 @@ import {
   ListRenderItemInfo,
   Dimensions,
   TouchableWithoutFeedback,
-  View
+  View,
+  Clipboard
 } from 'react-native'
 import { NavigationScreenProps, SafeAreaView } from 'react-navigation'
 import uuid from 'uuid/v4'
@@ -84,7 +85,12 @@ interface State {
   showInviteContactModal: boolean
   showRenameGroupModal: boolean
   // The current selected block (message/photo). For use in the block action sheet
-  selectedBlockId?: string
+  selected?: {
+    blockId: string
+    isCopyable: boolean
+    canRemove: boolean
+    text?: string
+  }
 }
 
 class Group extends React.PureComponent<Props, State> {
@@ -157,7 +163,15 @@ class Group extends React.PureComponent<Props, State> {
     ]
     const threadCancelButtonIndex = threadActionSheetOptions.indexOf('Cancel')
     // Block action sheet
-    const blockActionSheetOptions = ['Remove', 'Cancel']
+    const blockActionSheetOptions = [
+      ...(this.state.selected && this.state.selected.canRemove
+        ? ['Remove']
+        : []),
+      ...(this.state.selected && this.state.selected.isCopyable
+        ? ['Copy']
+        : []),
+      'Cancel'
+    ]
     const blockCancelButtonIndex = blockActionSheetOptions.indexOf('Cancel')
     return (
       <SafeAreaView style={{ flex: 1, flexGrow: 1 }}>
@@ -265,9 +279,13 @@ class Group extends React.PureComponent<Props, State> {
               id: comment.id,
               username: comment.user.name || '?',
               body: comment.body,
-              onLongPress: canRemoveComment
-                ? () => this.showBlockActionSheet(comment.id)
-                : undefined
+              onLongPress: () =>
+                this.showBlockActionSheet(
+                  comment.id,
+                  canRemoveComment,
+                  true,
+                  comment.body
+                )
             }
           }
         )
@@ -312,7 +330,7 @@ class Group extends React.PureComponent<Props, State> {
             pinchHeight={pinchHeight}
             onLongPress={
               canRemove
-                ? () => this.showBlockActionSheet(item.block)
+                ? () => this.showBlockActionSheet(item.block, true, false)
                 : undefined
             }
           />
@@ -341,8 +359,14 @@ class Group extends React.PureComponent<Props, State> {
         const avatar = isSameUser ? undefined : user.avatar
         return (
           <TouchableWithoutFeedback
-            disabled={!canRemove}
-            onLongPress={() => this.showBlockActionSheet(item.block)}
+            onLongPress={() =>
+              this.showBlockActionSheet(
+                item.block,
+                canRemove,
+                true,
+                item.value.body
+              )
+            }
           >
             <View>
               <Message
@@ -399,9 +423,19 @@ class Group extends React.PureComponent<Props, State> {
     this.threadActionSheet.show()
   }
 
-  showBlockActionSheet = (blockId: string) => {
+  showBlockActionSheet = (
+    blockId: string,
+    canRemove: boolean,
+    isCopyable: boolean,
+    text?: string
+  ) => {
     this.setState({
-      selectedBlockId: blockId
+      selected: {
+        blockId,
+        canRemove,
+        isCopyable,
+        text
+      }
     })
     this.blockActionSheet.show()
   }
@@ -421,9 +455,25 @@ class Group extends React.PureComponent<Props, State> {
 
   handleBlockActionSheetResponse = (index: number) => {
     const actions = [
-      () =>
-        this.state.selectedBlockId &&
-        this.props.remove(this.state.selectedBlockId)
+      ...(this.state.selected && this.state.selected.canRemove
+        ? [
+            () =>
+              this.state.selected &&
+              this.props.remove(this.state.selected.blockId)
+          ]
+        : []),
+      ...(this.state.selected && this.state.selected.isCopyable
+        ? [
+            () => {
+              if (
+                this.state.selected &&
+                this.state.selected.text !== undefined
+              ) {
+                Clipboard.setString(this.state.selected.text)
+              }
+            }
+          ]
+        : [])
     ]
     if (index < actions.length) {
       actions[index]()