Fixes #2345.

Changelog Entry

(TBD)

Description

[email protected] finally support partitioned Redux hooks in their #1309! 🎉 It was just released the day before yesterday!

Thanks for @corinagum on the BIG push of moving from class components to functional components. So we can make this push today. 💪🏻

We are also moving away from HOC and use hooks intensively. This will reduce code complexity and highly improve readability.

Now it is super easy to build a new UI component without too much reading into Web Chat code, thanks to the React hooks pattern.

For example, if you want to build a button that would open microphone.

import { useStartDictate } from 'botframework-webchat-component';

const StartRecordingButton = () => {
  const startDictate = useStartDictate();

  return <button onClick={startDictate}>Turn on microphone</button;
}

And put this <StartRecordingButton> inside any part of Web Chat, it will automatically wired up.

Also, the propTypes on the component is very clean now. No more unnecessary-but-required-by-ESLint props from the context or store.

Specific Changes

• Added hook for every functionality
  • Every use* hook is small and we are able to shuffle the physical location of the actual function if we want to, without breaking the user
    • We currently have things not located accurately, they are in React context and Redux store. Some appears on both of them (e.g. language).
  • Redux hooks requires us to make smaller hook and composite them into a bigger one
• Update all components that use connectToWebChat() into useSelector(WebChatReduxContext) and useContext(WebChatContext)
• Add deprecation notes to all connect* HOC functions

• Revisit every component and hook to make sure the exposed surface as lean-and-mean as possible
• Update samples (at least one of them) to show off the ability to use hooks
  • samples/09.customization-reaction-buttons
  • samples/10.b.customization-password-input
  • samples/13.customization-speech-ui
  • samples/21.customization-plain-ui
• Document some fundamental differences between connect* and use*
  • For useComponent (e.g. useMicrophoneButton), we no longer expose language
• Consider a dedicated namespace inside our package for the hooks
  • For example, import { useActivities } from 'botframework-webchat-component/lib/hooks, and not exposing it at the root level
• Test under IE11
• (Optional) Might be a good idea to understand more about the performance gain
• (Optional) Experiment on how to add a new UI component to Web Chat in the new world
  • Sample 10.b.customization-password-input and 21.customization-plain-ui are two great ways to explore the world of hooks
• Testing Added