Handle Opt-Out. Scroll messaging window to bottom.

src/components/IncomingMessageList/ConversationPreviewModal.jsx

@@ -1,10 +1,12 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import gql from 'graphql-tag'
 import { StyleSheet, css } from 'aphrodite'
 import Dialog from 'material-ui/Dialog'
 import FlatButton from 'material-ui/FlatButton'
-import Divider from 'material-ui/Divider'
 
+import loadData from '../../containers//hoc/load-data'
+import wrapMutations from '../../containers/hoc/wrap-mutations'
 import MessageResponse from './MessageResponse';
 
 const styles = StyleSheet.create({
@@ -16,25 +18,35 @@ const styles = StyleSheet.create({
   }
 })
 
-const MessageList = (props) => {
-  return  (
-    <div>
-      {props.messages.map((message, index) => {
-        const isFromContact = message.isFromContact
-        const messageStyle = {
-          marginLeft: isFromContact ? undefined : '60px',
-          marginRight: isFromContact ? '60px' : undefined,
-          backgroundColor: isFromContact ? '#AAAAAA' : 'rgb(33, 150, 243)',
-        }
+class MessageList extends Component {
+  componentDidMount() {
+    this.refs.messageWindow.scrollTo(0, this.refs.messageWindow.scrollHeight)
+  }
+
+  componentDidUpdate() {
+    this.refs.messageWindow.scrollTo(0, this.refs.messageWindow.scrollHeight)
+  }
 
-        return (
-          <p key={index} className={css(styles.conversationRow)} style={messageStyle}>
-            {message.text}
-          </p>
-        )
-      })}
-    </div>
-  )
+  render() {
+    return  (
+      <div ref="messageWindow" style={{maxHeight: '300px', overflowY: 'scroll'}}>
+        {this.props.messages.map((message, index) => {
+          const isFromContact = message.isFromContact
+          const messageStyle = {
+            marginLeft: isFromContact ? undefined : '60px',
+            marginRight: isFromContact ? '60px' : undefined,
+            backgroundColor: isFromContact ? '#AAAAAA' : 'rgb(33, 150, 243)',
+          }
+
+          return (
+            <p key={index} className={css(styles.conversationRow)} style={messageStyle}>
+              {message.text}
+            </p>
+          )
+        })}
+      </div>
+    )
+  }
 }
 
 MessageList.propTypes = {
@@ -60,7 +72,6 @@ class ConversationPreviewBody extends Component {
     return (
       <div>
         <MessageList messages={this.state.messages} />
-        <Divider />
         <MessageResponse conversation={this.props.conversation} messagesChanged={this.messagesChanged} />
       </div>
     )
@@ -71,35 +82,97 @@ ConversationPreviewBody.propTypes = {
   conversation: PropTypes.object
 }
 
-const ConversationPreviewModal = (props) => {
-  const { conversation } = props,
-        isOpen = conversation !== undefined
-
-  const actions = [
-    <FlatButton
-      label="Close"
-      primary={true}
-      onClick={props.onRequestClose}
-    />
-  ]
-
-  return (
-    <Dialog
-      title='Messages'
-      open={isOpen}
-      actions={actions}
-      modal={false}
-      autoScrollBodyContent
-      onRequestClose={props.onRequestClose}
-    >
-      {isOpen && <ConversationPreviewBody {...props} />}
-    </Dialog>
-  )
+class ConversationPreviewModal extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      optOutError: ''
+    }
+  }
+
+  handleClickOptOut = async () => {
+    const { contact } = this.props.conversation
+    const optOut = {
+      cell: contact.cell,
+      assignmentId: contact.assignmentId
+    }
+    try {
+      const response = await this.props.mutations.createOptOut(optOut, campaignContactId)
+      if (response.errors) {
+        const errorText = response.errors.join('\n')
+        throw new Error(errorText)
+      }
+    } catch (error) {
+      this.setState({ optOutError: error.message })
+    }
+  }
+
+  render() {
+    const { conversation } = this.props,
+          isOpen = conversation !== undefined
+
+    const primaryActions = [
+      <FlatButton
+        label="Opt-Out"
+        secondary={true}
+        onClick={this.handleClickOptOut}
+      />,
+      <FlatButton
+        label="Close"
+        primary={true}
+        onClick={this.props.onRequestClose}
+      />
+    ]
+
+    return (
+      <Dialog
+        title='Messages'
+        open={isOpen}
+        actions={primaryActions}
+        modal={false}
+        onRequestClose={this.props.onRequestClose}
+      >
+        <div>
+          {isOpen && <ConversationPreviewBody {...this.props} />}
+          <Dialog
+            title='Error Opting Out'
+            open={!!this.state.optOutError}
+            modal={false}
+          >
+            <p>{this.state.optOutError}</p>
+          </Dialog>
+        </div>
+      </Dialog>
+    )
+  }
 }
 
 ConversationPreviewModal.propTypes = {
   conversation: PropTypes.object,
   onRequestClose: PropTypes.func
 }
 
-export default ConversationPreviewModal
+const mapMutationsToProps = () => ({
+  createOptOut: (optOut, campaignContactId) => ({
+    mutation: gql`
+      mutation createOptOut($optOut: OptOutInput!, $campaignContactId: String!) {
+        createOptOut(optOut: $optOut, campaignContactId: $campaignContactId) {
+          id
+          optOut {
+            id
+            createdAt
+          }
+        }
+      }
+    `,
+    variables: {
+      optOut,
+      campaignContactId
+    }
+  })
+})
+
+export default loadData(wrapMutations(ConversationPreviewModal), {
+  mapMutationsToProps
+})

src/components/IncomingMessageList/MessageResponse.jsx

@@ -137,23 +137,6 @@ MessageResponse.propTypes = {
 }
 
 const mapMutationsToProps = () => ({
-  createOptOut: (optOut, campaignContactId) => ({
-    mutation: gql`
-      mutation createOptOut($optOut: OptOutInput!, $campaignContactId: String!) {
-        createOptOut(optOut: $optOut, campaignContactId: $campaignContactId) {
-          id
-          optOut {
-            id
-            createdAt
-          }
-        }
-      }
-    `,
-    variables: {
-      optOut,
-      campaignContactId
-    }
-  }),
   sendMessage: (message, campaignContactId) => ({
     mutation: gql`
       mutation sendMessage($message: MessageInput!, $campaignContactId: String!) {