Fixing activityMiddleware in user-highlighting sample (#3671)

* Fixing activityMiddleware in user-highlighting sample * update PR# Co-authored-by: Corina <[email protected]>
microsoft · Jan 21, 2021 · 0987a5d · 0987a5d
1 parent dee37db
commit 0987a5d
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -93,6 +93,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Samples
 
 -  Fixes [#3473](https://github.com/microsoft/BotFramework-WebChat/issues/3473). Fix samples using activityMiddleware (from 4.10.0 breaking changes), by [@corinagum](https://github.com/corinagum) in PR [#3601](https://github.com/microsoft/BotFramework-WebChat/pull/3601)
+- Fixes [#3434](https://github.com/microsoft/BotFramework-WebChat/issues/3434). Dispatched event, postBack, or messageBack + activityMiddleware causes fatal error, by [@amal-khalaf](https://github.com/amal-khalaf) in PR [#3671](https://github.com/microsoft/BotFramework-WebChat/pull/3671)
 
 ## [4.11.0] - 2020-11-04
 

diff --git a/samples/05.custom-components/c.user-highlighting/README.md b/samples/05.custom-components/c.user-highlighting/README.md
@@ -51,15 +51,15 @@ Next, create the `activityMiddleware` which will be passed into the bot. We will
 <!-- prettier-ignore-start -->
 ```js
 const activityMiddleware = () => next => (...setupArgs) => {
-   const [card] = setupArgs;
-
-   return (...renderArgs) => (
-     <div
-       className={card.activity.from.role === 'user' ? 'highlightedActivity--user' : 'highlightedActivity--bot'}
-     >
-       {next(card)(...renderArgs)}
-     </div>
-   );
+  const render = next(...setupArgs);
+  
+  if(render) {
+    return  (...renderArgs) => {
+      const element = render(...renderArgs);
+      const [card] = setupArgs;
+      return element && <div className={card.activity.from.role === 'user' ? 'highlightedActivity--user' : 'highlightedActivity--bot'}>{element}</div>;
+      };
+    }
 };
 ```
 <!-- prettier-ignore-end -->

diff --git a/samples/05.custom-components/c.user-highlighting/index.html b/samples/05.custom-components/c.user-highlighting/index.html
@@ -60,15 +60,17 @@
         const { token } = await res.json();
         const { ReactWebChat } = window.WebChat;
         const activityMiddleware = () => next => (...setupArgs) => {
-          const [card] = setupArgs;
+          const render = next(...setupArgs);
+
+          if(render) {
+            return  (...renderArgs) => {
+            const element = render(...renderArgs);
+            const [card] = setupArgs;
 
-          return (...renderArgs) => (
-            <div
-              className={card.activity.from.role === 'user' ? 'highlightedActivity--user' : 'highlightedActivity--bot'}
-            >
-              {next(card)(...renderArgs)}
-            </div>
-          );
+            return element && <div className={card.activity.from.role === 'user' ? 'highlightedActivity--user' : 'highlightedActivity--bot'}>{element}</div>;
+            };
+          }
+
         };
 
         window.ReactDOM.render(