Add useSuggestedActions

microsoft · Nov 21, 2019 · a201dbf · a201dbf
1 parent 96460e2
commit a201dbf
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -42,12 +42,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
    -  PR [#2541](https://github.com/microsoft/BotFramework-WebChat/pull/2541): `useStyleOptions`, `useStyleSet`
    -  PR [#2542](https://github.com/microsoft/BotFramework-WebChat/pull/2542): `useLanguage`, `useLocalize`, `useLocalizeDate`
    -  PR [#2543](https://github.com/microsoft/BotFramework-WebChat/pull/2543): `useAdaptiveCardsHostConfig`, `useAdaptiveCardsPackage`, `useRenderMarkdownAsHTML`
--  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)
    -  PR [#2544](https://github.com/microsoft/BotFramework-WebChat/pull/2544): `useAvatarForBot`, `useAvatarForUser`
    -  PR [#2547](https://github.com/microsoft/BotFramework-WebChat/pull/2547): `useEmitTypingIndicator`, `usePeformCardAction`, `usePostActivity`, `useSendEvent`, `useSendFiles`, `useSendMessage`, `useSendMessageBack`, `useSendPostBack`
    -  PR [#2548](https://github.com/microsoft/BotFramework-WebChat/pull/2548): `useDisabled`
+   -  PR [#2549](https://github.com/microsoft/BotFramework-WebChat/pull/2549): `useSuggestedActions`
    -  PR [#2551](https://github.com/microsoft/BotFramework-WebChat/pull/2551): `useLastTypingAt`, `useSendTypingIndicator`, `useTypingIndicator`
    -  PR [#2552](https://github.com/microsoft/BotFramework-WebChat/pull/2552): `useFocusSendBox`, `useScrollToEnd`, `useSendBoxValue`, `useSubmitSendBox`, `useTextBoxSubmit`, `useTextBoxValue`
+-  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)
 
 ### Fixed

diff --git a/__tests__/hooks/useSuggestedActions.js b/__tests__/hooks/useSuggestedActions.js
@@ -0,0 +1,70 @@
+import { timeouts } from '../constants.json';
+
+import suggestedActionsShown from '../setup/conditions/suggestedActionsShown';
+import uiConnected from '../setup/conditions/uiConnected';
+
+// selenium-webdriver API doc:
+// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
+
+jest.setTimeout(timeouts.test);
+
+test('getter should get suggested actions', async () => {
+  const { driver, pageObjects } = await setupWebDriver();
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+
+  await pageObjects.sendMessageViaSendBox('suggested-actions');
+  await driver.wait(suggestedActionsShown(), timeouts.directLine);
+
+  await expect(pageObjects.runHook('useSuggestedActions', [], result => result[0])).resolves.toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "image": "https://tdurnford.github.io/BotFramework-Offline-MockBot/assets/square-icon.png",
+              "title": "IM back as string",
+              "type": "imBack",
+              "value": "postback imback-string",
+            },
+            Object {
+              "image": "https://tdurnford.github.io/BotFramework-Offline-MockBot/assets/square-icon-red.png",
+              "title": "Post back as string",
+              "type": "postBack",
+              "value": "postback postback-string",
+            },
+            Object {
+              "image": "https://tdurnford.github.io/BotFramework-Offline-MockBot/assets/square-icon-green.png",
+              "text": "Some text",
+              "title": "Post back as JSON",
+              "type": "postBack",
+              "value": Object {
+                "hello": "World!",
+              },
+            },
+            Object {
+              "displayText": "say Hello World!",
+              "image": "https://tdurnford.github.io/BotFramework-Offline-MockBot/assets/square-icon-purple.png",
+              "text": "Some text",
+              "title": "Message back as JSON with display text",
+              "type": "messageBack",
+              "value": Object {
+                "hello": "World!",
+              },
+            },
+            Object {
+              "image": "https://tdurnford.github.io/BotFramework-Offline-MockBot/assets/square-icon-purple.png",
+              "title": "Message back as JSON without display text",
+              "type": "messageBack",
+              "value": Object {
+                "hello": "World!",
+              },
+            },
+            Object {
+              "displayText": "Aloha",
+              "image": "https://tdurnford.github.io/BotFramework-Offline-MockBot/assets/square-icon-purple.png",
+              "text": "echo Hello",
+              "title": "Message back as string with display text",
+              "type": "messageBack",
+              "value": null,
+            },
+          ]
+        `);
+});
diff --git a/packages/component/src/SendBox/SuggestedAction.js b/packages/component/src/SendBox/SuggestedAction.js
@@ -7,6 +7,7 @@ import connectToWebChat from '../connectToWebChat';
 import useDisabled from '../hooks/useDisabled';
 import usePerformCardAction from '../hooks/usePerformCardAction';
 import useStyleSet from '../hooks/useStyleSet';
+import useSuggestedActions from '../hooks/useSuggestedActions';
 
 const SUGGESTED_ACTION_CSS = css({
   display: 'inline-block',
@@ -33,24 +34,26 @@ const connectSuggestedAction = (...selectors) =>
 const SuggestedAction = ({
   'aria-hidden': ariaHidden,
   buttonText,
-  clearSuggestedActions,
   displayText,
   image,
   text,
   type,
   value
 }) => {
+  const [_, setSuggestedActions] = useSuggestedActions();
   const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet();
   const [disabled] = useDisabled();
   const performCardAction = usePerformCardAction();
 
   const handleClick = useCallback(() => {
     performCardAction({ displayText, text, type, value });
-    type === 'openUrl' && clearSuggestedActions();
+    type === 'openUrl' && setSuggestedActions([]);
+  }, [displayText, performCardAction, setSuggestedActions, text, type, value]);
 
-    // TODO: Use the following line when setSuggestedActions hook is merged
-    // type === 'openUrl' && setSuggestedActions([]);
-  }, [clearSuggestedActions, displayText, performCardAction, text, type, value]);
+  const handleClick = useCallback(() => {
+    performCardAction({ displayText, text, type, value });
+    type === 'openUrl' && setSuggestedActions([]);
+  }, [displayText, performCardAction, setSuggestedActions, text, type, value]);
 
   return (
     <div aria-hidden={ariaHidden} className={classNames(suggestedActionStyleSet + '', SUGGESTED_ACTION_CSS + '')}>
@@ -74,14 +77,13 @@ SuggestedAction.defaultProps = {
 SuggestedAction.propTypes = {
   'aria-hidden': PropTypes.bool,
   buttonText: PropTypes.string.isRequired,
-  clearSuggestedActions: PropTypes.func.isRequired,
   displayText: PropTypes.string,
   image: PropTypes.string,
   text: PropTypes.string,
   type: PropTypes.string,
   value: PropTypes.any
 };
 
-export default connectSuggestedAction(({ clearSuggestedActions }) => ({ clearSuggestedActions }))(SuggestedAction);
+export default SuggestedAction;
 
 export { connectSuggestedAction };
diff --git a/packages/component/src/hooks/index.js b/packages/component/src/hooks/index.js
@@ -23,6 +23,7 @@ import useSendTypingIndicator from './useSendTypingIndicator';
 import useStyleOptions from './useStyleOptions';
 import useStyleSet from './useStyleSet';
 import useSubmitSendBox from './useSubmitSendBox';
+import useSuggestedActions from './useSuggestedActions';
 
 import { useSendBoxDictationStarted } from '../BasicSendBox';
 import { useTextBoxSubmit } from '../SendBox/TextBox';
@@ -55,6 +56,7 @@ export {
   useStyleOptions,
   useStyleSet,
   useSubmitSendBox,
+  useSuggestedActions,
   useTextBoxSubmit,
   useTypingIndicatorVisible
 };
diff --git a/packages/component/src/hooks/useSuggestedActions.js b/packages/component/src/hooks/useSuggestedActions.js
@@ -0,0 +1,20 @@
+import { useContext } from 'react';
+
+import { useSelector } from '../WebChatReduxContext';
+import WebChatUIContext from '../WebChatUIContext';
+
+export default function useSuggestedActions() {
+  const value = useSelector(({ suggestedActions }) => suggestedActions);
+  const { clearSuggestedActions } = useContext(WebChatUIContext);
+
+  return [
+    value,
+    value => {
+      if (value && value.length) {
+        throw new Error('SuggestedActions cannot be set to values other than empty.');
+      }
+
+      clearSuggestedActions();
+    }
+  ];
+}