Updated Customize Web Chat with Reaction Buttons Sample (#2239)

tdurnford · corinagum · commit 607ba96d3381 · 2019-07-30T16:19:17.000-07:00
* Updated button handles to send messageReaction activities

* Updated CHANGLELOG.md

* Updated sample readme

* Updated sample readme
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -66,7 +66,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Samples
 
--  `*`: [Single sign-on for Microsoft Teams apps](https://microsoft.github.io/BotFramework-WebChat/19.c.single-sign-on-for-teams-apps/), by [@compulim](https://github.com/compulim) in [#2196](https://github.com/microsoft/BotFramework-WebChat/pull/2196)
+-  [Single sign-on for Microsoft Teams apps](https://microsoft.github.io/BotFramework-WebChat/19.c.single-sign-on-for-teams-apps/), by [@compulim](https://github.com/compulim) in [#2196](https://github.com/microsoft/BotFramework-WebChat/pull/2196)
+-  [Customize Web Chat with Reaction Buttons](https://microsoft.github.io/BotFramework-WebChat/09.customization-reaction-buttons/). Updated reaction handlers to send `messageReaction` activities, by [@tdurnford](https://github.com/tdurnford) in [#2239](https://github.com/microsoft/BotFramework-WebChat/pull/2239)
 
 ## [4.5.0] - 2019-07-10
 
diff --git a/samples/09.customization-reaction-buttons/README.md b/samples/09.customization-reaction-buttons/README.md
@@ -31,18 +31,8 @@ Let's start building the React Component. It will have two methods, `handleDownv
 
 ```jsx
 class ActivityWithFeedback extends React.Component {
-   handleDownvoteButton = () =>
-      this.props.postActivity({
-         type: 'message',
-         name: 'evaluate-activity',
-         value: { activityID: this.props.activityID, helpful: -1 }
-      });
-   handleUpvoteButton = () =>
-      this.props.postActivity({
-         type: 'message',
-         name: 'evaluate-activity',
-         value: { activityID: this.props.activityID, helpful: 1 }
-      });
+   handleDownvoteButton = () => this.props.postActivity({ type: 'messageReaction', reactionsAdded: [{ activityID: this.props.activityID, helpful: -1 }] })
+   handleUpvoteButton = () => this.props.postActivity({ type: 'messageReaction', reactionsAdded: [{ activityID: this.props.activityID, helpful: 1 }] })
 
    render() {
       const { props } = this;
@@ -93,8 +83,8 @@ Next, add styling via glamor and the classes that will be applied in this compon
 + });
 
 class ActivityWithFeedback extends React.Component {
-  handleDownvoteButton = () => this.props.postActivity({ type: 'message', name: 'evaluate-activity', value: { activityID: this.props.activityID, helpful: -1 } })
-  handleUpvoteButton = () => this.props.postActivity({ type: 'message', name: 'evaluate-activity', value: { activityID: this.props.activityID, helpful: 1 } })
+  handleDownvoteButton = () => this.props.postActivity({ type: 'messageReaction', reactionsAdded: [{ activityID: this.props.activityID, helpful: -1 }] })
+  handleUpvoteButton = () => this.props.postActivity({ type: 'messageReaction', reactionsAdded: [{ activityID: this.props.activityID, helpful: 1 }] })
 
   render() {
     const { props } = this;
@@ -198,8 +188,8 @@ Make sure `activityMiddleware` is passed into the the Web Chat component, and th
 +       });
 
 +       class ActivityWithFeedback extends React.Component {
-+         handleDownvoteButton = () => this.props.postActivity({ type: 'message', name: 'evaluate-activity', value: { activityID: this.props.activityID, helpful: -1 } })
-+         handleUpvoteButton = () => this.props.postActivity({ type: 'message', name: 'evaluate-activity', value: { activityID: this.props.activityID, helpful: 1 } })
++         handleDownvoteButton = () => this.props.postActivity({ type: 'messageReaction', reactionsAdded: [{ activityID: this.props.activityID, helpful: -1 }] })
++         handleUpvoteButton = () => this.props.postActivity({ type: 'messageReaction', reactionsAdded: [{ activityID: this.props.activityID, helpful: 1 }] })
 
 +         render() {
 +           const { props } = this;
diff --git a/samples/09.customization-reaction-buttons/index.html b/samples/09.customization-reaction-buttons/index.html
@@ -64,8 +64,8 @@
         });
 
         class ActivityWithFeedback extends React.Component {
-          handleDownvoteButton = () => this.props.postActivity({ type: 'message', name: 'evaluate-activity', value: { activityID: this.props.activityID, helpful: -1 } })
-          handleUpvoteButton = () => this.props.postActivity({ type: 'message', name: 'evaluate-activity', value: { activityID: this.props.activityID, helpful: 1 } })
+          handleDownvoteButton = () => this.props.postActivity({ type: 'messageReaction', reactionsAdded: [{ activityID: this.props.activityID, helpful: -1 }] })
+          handleUpvoteButton = () => this.props.postActivity({ type: 'messageReaction', reactionsAdded: [{ activityID: this.props.activityID, helpful: 1 }] })
 
           render() {
             const { props } = this;
