Add React Hooks for customization (part 14) (#2652)

* Update to hooks * Use CSS instead of glamor * Delete obsoleted sample * Indentation * Add entry * Revert * Apply suggestions from code review Co-Authored-By: Corina <14900841+corinagum@users.noreply.github.com> * Update samples/09.customization-reaction-buttons/index.html Co-Authored-By: Corina <14900841+corinagum@users.noreply.github.com> * Rename to twoFACode * Use latest Co-authored-by: Corina <14900841+corinagum@users.noreply.github.com>
microsoft · Dec 27, 2019 · 31c2006 · 31c2006
1 parent 84c25f2
commit 31c2006
Show file tree

Hide file tree

Showing 9 changed files with 861 additions and 890 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -119,6 +119,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
    -  PR [#2553](https://github.com/microsoft/BotFramework-WebChat/pull/2553): `useDictateInterims`, `useDictateState`, `useGrammars`, `useMarkActivityAsSpoken`, `useMicrophoneButton`, `useShouldSpeakIncomingActivity`, `useStartDictate`, `useStopDictate`, `useVoiceSelector`, `useWebSpeechPonyfill`
    -  PR [#2554](https://github.com/microsoft/BotFramework-WebChat/pull/2554): `useRenderActivity`, `useRenderAttachment`
    -  PR [#2644](https://github.com/microsoft/BotFramework-WebChat/pull/2644): Added `internal/useWebChatUIContext` for cleaner code
+   -  PR [#2652](https://github.com/microsoft/BotFramework-WebChat/pull/2652): Update samples to use hooks
 -  Bring your own Adaptive Cards package by specifying `adaptiveCardsPackage` prop, by [@compulim](https://github.com/compulim) in PR [#2543](https://github.com/microsoft/BotFramework-WebChat/pull/2543)
 -  Fixes [#2597](https://github.com/microsoft/BotFramework-WebChat/issues/2597). Modify `watch` script to `start` and add `tableflip` script for throwing `node_modules`, by [@corinagum](https://github.com/corinagum) in PR [#2598](https://github.com/microsoft/BotFramework-WebChat/pull/2598)
 -  Adds Arabic Language Support, by [@midineo](https://github.com/midineo), in PR [#2593](https://github.com/microsoft/BotFramework-WebChat/pull/2593)

diff --git a/samples/03.a.host-with-react/index.html b/samples/03.a.host-with-react/index.html
@@ -5,13 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!--
       For simplicity and code clarity, we are using Babel and React from unpkg.com.
-  -->
+    -->
     <script src="https://unpkg.com/@babel/standalone@7.7.5/babel.min.js"></script>
     <script src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
     <script src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
     <!--
-        This CDN points to the latest official release of Web Chat. If you need to test against Web Chat's latest bits, please refer to pointing to Web Chat's MyGet feed:
-        https://github.com/microsoft/BotFramework-WebChat#how-to-test-with-web-chats-latest-bits
+      This CDN points to the latest official release of Web Chat. If you need to test against Web Chat's latest bits, please refer to pointing to Web Chat's MyGet feed:
+      https://github.com/microsoft/BotFramework-WebChat#how-to-test-with-web-chats-latest-bits
     -->
     <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
     <style>

diff --git a/samples/08.customization-user-highlighting/README.md b/samples/08.customization-user-highlighting/README.md
@@ -30,143 +30,144 @@ We'll start by using the [host with React sample](../03.a.host-with-react) as ou
 
 First, let's style our new containers using glamor. The container for activities from the bot will have a solid red line on the left side of the `<div>`, and activities from the user will have a green line on the right.
 
-```diff
-+ const { css } = window.Glamor;
-
-+ const HIGHLIGHT_FROM_BOT_CSS = css({
-+   borderLeftColor: 'Red',
-+   borderLeftStyle: 'solid',
-+   borderLeftWidth: 5,
-+   marginLeft: 8
-+ });
-
-+ const HIGHLIGHT_FROM_USER_CSS = css({
-+   borderRightColor: 'Green',
-+   borderRightStyle: 'solid',
-+   borderRightWidth: 5,
-+   marginRight: 8
-+ });
+```css
+.highlightedActivity--bot {
+  border-left-color: Red;
+  border-left-style: solid;
+  border-left-width: 5px;
+  margin-left: 8px;
+}
+
+.highlightedActivity--user {
+  border-right-color: Green;
+  border-right-style: solid;
+  border-right-width: 5px;
+  margin-right: 8px;
+}
 ```
 
 Next, create the `activityMiddleware` which will be passed into the bot. We will return the content of the activity with a new wrapper that will display our new classes when the correct criterion are met.
 
 ```js
 const activityMiddleware = () => next => card => {
-  return (
-    children =>
-      <div>
-        <!-- content here -->
-      </div>
+  return children => (
+    <div>
+      <!-- content here -->
+    </div>
   );
 };
 ```
 
 Since we know we want to filter by the role value in the activity, we will use a ternary statement to differentiate between `'user'` and the bot. That check should look be: `card.activity.from.role`
 
 ```diff
-const activityMiddleware = () => next => card => {
-  return (
-    children =>
-+     <div key={() => card.activity.id} className={ card.activity.from.role === 'user' ? HIGHLIGHT_FROM_USER_CSS : HIGHLIGHT_FROM_BOT_CSS }>
+  const activityMiddleware = () => next => card => {
+    return children => (
+-     <div>
++     <div className={card.activity.from.role === 'user' ? 'highlightedActivity--user' : 'highlightedActivity--bot'}>
         <!-- content here -->
       </div>
-  );
-};
+    );
+  };
 ```
 
-`{ next(card)(children) }` indicates the middleware can pass to the next renderer. The subsequent results of those middleware calls will be what is displayed inside the `<div>`. Make sure to add this into `activityMiddleware` like so:
+`{next(card)(children)}` indicates the middleware can pass to the next renderer. The subsequent results of those middleware calls will be what is displayed inside the `<div>`. Make sure to add this into `activityMiddleware` like so:
 
 ```diff
-const activityMiddleware = () => next => card => {
-  return (
-    children =>
-      <div key={() => card.activity.id} className={ card.activity.from.role === 'user' ? HIGHLIGHT_FROM_USER_CSS : HIGHLIGHT_FROM_BOT_CSS }>
-+       { next(card)(children) }
+  const activityMiddleware = () => next => card => {
+    return children => (
+      <div className={card.activity.from.role === 'user' ? 'highlightedActivity--user' : 'highlightedActivity--bot'}>
+-       <!-- content here -->
++       {next(card)(children)}
       </div>
-  );
-};
+    );
+  };
 ```
 
 Pass `activityMiddleware` into the rendering of Web Chat, and that's it.
 
 ## Completed code
 
 ```diff
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <title>Web Chat: Custom attachment with GitHub Stargazers</title>
-
-    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
-    <script src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
-    <script src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
-    <script src="https://unpkg.com/react-redux@7.1.0/dist/react-redux.min.js"></script>
-    <script src="https://unpkg.com/glamor@2.20.40/umd/index.js"></script>
-
-    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
-    <style>
-      html, body { height: 100% }
-      body { margin: 0 }
-
-      #webchat {
-        height: 100%;
-        width: 100%;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="webchat" role="main"></div>
-    <script type="text/babel">
-      (async function () {
-        'use strict';
-
-        // In this demo, we are using Direct Line token from MockBot.
-        // To talk to your bot, you should use the token exchanged using your Direct Line secret.
-        // You should never put the Direct Line secret in the browser or client app.
-        // https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication
-
-+       const { css } = window.Glamor;
-
-+       const HIGHLIGHT_FROM_BOT_CSS = css({
-+         borderLeftColor: 'Red',
-+         borderLeftStyle: 'solid',
-+         borderLeftWidth: 5,
-+         marginLeft: 8
-+       });
-
-+       const HIGHLIGHT_FROM_USER_CSS = css({
-+         borderRightColor: 'Green',
-+         borderRightStyle: 'solid',
-+         borderRightWidth: 5,
-+         marginRight: 8
-+       });
-
-        const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
-        const { token } = await res.json();
-        const { ReactWebChat } = window.WebChat;
-+       const activityMiddleware = () => next => card => {
-+         return (
-+           children =>
-+             <div key={() => card.activity.id} className={ card.activity.from.role === 'user' ? HIGHLIGHT_FROM_USER_CSS : HIGHLIGHT_FROM_BOT_CSS }>
-+               { next(card)(children) }
-+             </div>
-+         );
-+       };
-
-        window.ReactDOM.render(
-          <ReactWebChat
-+           activityMiddleware={ activityMiddleware }
-            directLine={ window.WebChat.createDirectLine({ token }) }
-          />,
-          document.getElementById('webchat')
-        );
-
-        document.querySelector('#webchat > *').focus();
-      })().catch(err => console.error(err));
-    </script>
-  </body>
-</html>
-
+  <!DOCTYPE html>
+  <html lang="en-US">
+
+    <head>
+      <title>Web Chat: Custom attachment with GitHub Stargazers</title>
+
+      <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+      <script src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
+      <script src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
+      <script src="https://unpkg.com/react-redux@7.1.0/dist/react-redux.min.js"></script>
+      <script src="https://unpkg.com/glamor@2.20.40/umd/index.js"></script>
+
+      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
+      <style>
+        html,
+        body {
+          height: 100%
+        }
+
+        body { margin: 0 }
+
+        #webchat {
+          height: 100%;
+          width: 100%;
+        }
+
++       .highlightedActivity--bot {
++         border-left-color: Red;
++         border-left-style: solid;
++         border-left-width: 5px;
++         margin-left: 8px;
++       }
++
++       .highlightedActivity--user {
++         border-right-color: Green;
++         border-right-style: solid;
++         border-right-width: 5px;
++         margin-right: 8px;
++       }
+      </style>
+    </head>
+
+    <body>
+      <div id="webchat" role="main"></div>
+      <script type="text/babel">
+        (async function () {
+          'use strict';
+
+          // In this demo, we are using Direct Line token from MockBot.
+          // To talk to your bot, you should use the token exchanged using your Direct Line secret.
+          // You should never put the Direct Line secret in the browser or client app.
+          // https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication
+
+          const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
+          const { token } = await res.json();
+          const { ReactWebChat } = window.WebChat;
++         const activityMiddleware = () => next => card => {
++           return (
++             children =>
++               <div className={card.activity.from.role === 'user' ? 'highlightedActivity--user' : 'highlightedActivity--bot'}>
++                 {next(card)(children)}
++               </div>
++           );
++         };
+
+          window.ReactDOM.render(
+            <ReactWebChat
++             activityMiddleware={ activityMiddleware }
+              directLine={ window.WebChat.createDirectLine({ token }) }
+            />,
+            document.getElementById('webchat')
+          );
+
+          document.querySelector('#webchat > *').focus();
+        })().catch(err => console.error(err));
+      </script>
+    </body>
+
+  </html>
 ```
 
 # Further reading

diff --git a/samples/08.customization-user-highlighting/index.html b/samples/08.customization-user-highlighting/index.html
@@ -10,7 +10,6 @@
     <script src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
     <script src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
     <script src="https://unpkg.com/react-redux@7.1.0/dist/react-redux.min.js"></script>
-    <script src="https://unpkg.com/glamor@2.20.40/umd/index.js"></script>
     <!--
       This CDN points to the latest official release of Web Chat. If you need to test against Web Chat's latest bits, please refer to pointing to Web Chat's MyGet feed:
       https://github.com/microsoft/BotFramework-WebChat#how-to-test-with-web-chats-latest-bits
@@ -21,6 +20,7 @@
       body {
         height: 100%;
       }
+
       body {
         margin: 0;
       }
@@ -29,6 +29,20 @@
         height: 100%;
         width: 100%;
       }
+
+      .highlightedActivity--bot {
+        border-left-color: Red;
+        border-left-style: solid;
+        border-left-width: 5px;
+        margin-left: 8px;
+      }
+
+      .highlightedActivity--user {
+        border-right-color: Green;
+        border-right-style: solid;
+        border-right-width: 5px;
+        margin-right: 8px;
+      }
     </style>
   </head>
   <body>
@@ -42,31 +56,12 @@
         // Tokens are more secure. To learn about the differences between secrets and tokens
         // and to understand the risks associated with using secrets, visit https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication?view=azure-bot-service-4.0
 
-        const { css } = window.Glamor;
-
-        const HIGHLIGHT_FROM_BOT_CSS = css({
-          borderLeftColor: 'Red',
-          borderLeftStyle: 'solid',
-          borderLeftWidth: 5,
-          marginLeft: 8
-        });
-
-        const HIGHLIGHT_FROM_USER_CSS = css({
-          borderRightColor: 'Green',
-          borderRightStyle: 'solid',
-          borderRightWidth: 5,
-          marginRight: 8
-        });
-
         const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
         const { token } = await res.json();
         const { ReactWebChat } = window.WebChat;
         const activityMiddleware = () => next => card => {
           return children => (
-            <div
-              key={() => card.activity.id}
-              className={card.activity.from.role === 'user' ? HIGHLIGHT_FROM_USER_CSS : HIGHLIGHT_FROM_BOT_CSS}
-            >
+            <div className={card.activity.from.role === 'user' ? 'highlightedActivity--user' : 'highlightedActivity--bot'}>
               {next(card)(children)}
             </div>
           );