microsoft#2794: Fix change-locale sample

corinagum · Jan 5, 2020 · 1f25798 · 1f25798
1 parent c2f6233
commit 1f25798
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 12 deletions.
diff --git a/samples/02.branding-styling-and-customization/g.change-locale/README.md b/samples/02.branding-styling-and-customization/g.change-locale/README.md
@@ -140,7 +140,7 @@ Here is the finished `index.html`:
    </head>
    <body>
       <div id="webchat" role="main"></div>
-      <script>
+      <script type="text/babel">
          (async function() {
             const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
             const { token } = await res.json();

diff --git a/samples/02.branding-styling-and-customization/g.change-locale/index.html b/samples/02.branding-styling-and-customization/g.change-locale/index.html
@@ -1,19 +1,17 @@
 <!DOCTYPE html>
 <html lang="en-US">
   <head>
-    <title>Web Chat: Integrate with React</title>
-    <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.
-    -->
+    <title>Web Chat: Change locale</title>
+
     <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
     -->
-    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
+    <!-- <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script> -->
+    <script src="/packages/bundle/dist/webchat.js"></script>
     <style>
       html,
       body {
@@ -42,12 +40,43 @@
 
         const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
         const { token } = await res.json();
-        const { ReactWebChat } = window.WebChat;
 
-        window.ReactDOM.render(
-          <ReactWebChat directLine={window.WebChat.createDirectLine({ token })} />,
-          document.getElementById('webchat')
-        );
+        const { useMemo, useState } = window.React;
+        const { createDirectLine, createStore, ReactWebChat } = window.WebChat;
+
+        const App = () => {
+          const [locale, setLocale] = useState(navigator.language);
+          const directLine = useMemo(() => createDirectLine({ token }), []);
+          const store = useMemo(
+            () =>
+              createStore({}, () => next => action => {
+                if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
+                  const {
+                    activity: {
+                      from: { role },
+                      text,
+                      type
+                    }
+                  } = action.payload;
+
+                  if (
+                    role === 'bot' &&
+                    type === 'message' &&
+                    (text === 'en-US' || text === 'ja-JP' || text === 'zh-HK')
+                  ) {
+                    setLocale(text);
+                  }
+                }
+
+                return next(action);
+              }),
+            []
+          );
+
+          return <ReactWebChat directLine={directLine} locale={locale} store={store} />;
+        };
+
+        window.ReactDOM.render(<App />, document.getElementById('webchat'));
 
         document.querySelector('#webchat > *').focus();
       })().catch(err => console.error(err));