Add useSuggestedActions

packages/component/src/SendBox/SuggestedAction.js

@@ -1,11 +1,13 @@
 import { css } from 'glamor';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useCallback } from 'react';
 
 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',
@@ -29,13 +31,20 @@ const connectSuggestedAction = (...selectors) =>
     ...selectors
   );
 
-const SuggestedAction = ({ buttonText, click, image }) => {
+const SuggestedAction = ({ buttonText, 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' && setSuggestedActions([]);
+  }, [displayText, performCardAction, setSuggestedActions, text, type, value]);
 
   return (
     <div className={classNames(suggestedActionStyleSet + '', SUGGESTED_ACTION_CSS + '')}>
-      <button disabled={disabled} onClick={click} type="button">
+      <button disabled={disabled} onClick={handleClick} type="button">
         {image && <img src={image} />}
         <nobr>{buttonText}</nobr>
       </button>
@@ -44,15 +53,22 @@ const SuggestedAction = ({ buttonText, click, image }) => {
 };
 
 SuggestedAction.defaultProps = {
-  image: ''
+  displayText: '',
+  image: '',
+  text: '',
+  type: '',
+  value: undefined
 };
 
 SuggestedAction.propTypes = {
   buttonText: PropTypes.string.isRequired,
-  click: PropTypes.func.isRequired,
-  image: PropTypes.string
+  displayText: PropTypes.string,
+  image: PropTypes.string,
+  text: PropTypes.string,
+  type: PropTypes.string,
+  value: PropTypes.any
 };
 
-export default connectSuggestedAction()(SuggestedAction);
+export default SuggestedAction;
 
 export { connectSuggestedAction };

packages/component/src/SendBox/SuggestedActions.js

@@ -9,6 +9,7 @@ import connectToWebChat from '../connectToWebChat';
 import SuggestedAction from './SuggestedAction';
 import useStyleOptions from '../hooks/useStyleOptions';
 import useStyleSet from '../hooks/useStyleSet';
+import useSuggestedActions from '../hooks/useSuggestedActions';
 
 function suggestedActionText({ displayText, title, type, value }) {
   if (type === 'messageBack') {
@@ -31,9 +32,10 @@ const connectSuggestedActions = (...selectors) =>
     ...selectors
   );
 
-const SuggestedActions = ({ className, suggestedActions = [] }) => {
+const SuggestedActions = ({ className }) => {
   const [{ suggestedActions: suggestedActionsStyleSet }] = useStyleSet();
   const [{ suggestedActionsStyleSet: suggestedActionsStyleSetForReactFilm }] = useStyleOptions();
+  const [suggestedActions] = useSuggestedActions();
 
   return (
     !!suggestedActions.length && (
@@ -64,19 +66,9 @@ SuggestedActions.defaultProps = {
 };
 
 SuggestedActions.propTypes = {
-  className: PropTypes.string,
-  suggestedActions: PropTypes.arrayOf(
-    PropTypes.shape({
-      displayText: PropTypes.string,
-      image: PropTypes.string,
-      text: PropTypes.string,
-      title: PropTypes.string,
-      type: PropTypes.string.isRequired,
-      value: PropTypes.any
-    })
-  ).isRequired
+  className: PropTypes.string
 };
 
-export default connectSuggestedActions()(SuggestedActions);
+export default SuggestedActions;
 
 export { connectSuggestedActions };

packages/component/src/hooks/index.js

@@ -17,6 +17,7 @@ import useSendMessageBack from './useSendMessageBack';
 import useSendPostBack from './useSendPostBack';
 import useStyleOptions from './useStyleOptions';
 import useStyleSet from './useStyleSet';
+import useSuggestedActions from './useSuggestedActions';
 
 import { useSendBoxDictationStarted } from '../BasicSendBox';
 
@@ -40,5 +41,6 @@ export {
   useSendMessageBack,
   useSendPostBack,
   useStyleOptions,
-  useStyleSet
+  useStyleSet,
+  useSuggestedActions
 };

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();
+    }
+  ];
+}

samples/21.customization-plain-ui/src/SuggestedActions.js

@@ -1,21 +1,26 @@
-import { connectToWebChat } from 'botframework-webchat-component';
+import { hooks } from 'botframework-webchat-component';
 import React from 'react';
 
 import CardActionButton from './CardActionButton';
 
+const { useSuggestedActions } = hooks;
+
 // Web Chat cleaned up the suggestedActions for us.
 // If the last activity is from the bot and contains "suggestedActions", Web Chat will send it to us thru "suggestedActions".
-const SuggestedActions = ({ suggestedActions }) =>
-  !!suggestedActions.length && (
-    <ul>
-      {suggestedActions.map((cardAction, index) => (
-        <li key={index}>
-          <CardActionButton cardAction={cardAction} />
-        </li>
-      ))}
-    </ul>
+const SuggestedActions = () => {
+  const [suggestedActions] = useSuggestedActions();
+
+  return (
+    !!suggestedActions.length && (
+      <ul>
+        {suggestedActions.map((cardAction, index) => (
+          <li key={index}>
+            <CardActionButton cardAction={cardAction} />
+          </li>
+        ))}
+      </ul>
+    )
   );
+};
 
-export default connectToWebChat(({ suggestedActions }) => ({
-  suggestedActions
-}))(SuggestedActions);
+export default SuggestedActions;