[Wait for 4.6] Move to Redux hooks

[compulim]

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

[coveralls]

Coverage increased (+1.6%) to 66.761% when pulling e5bcbf7 on compulim:feat-redux-hooks into 563863a on microsoft:master.

[tdurnford]

I'm really excited to start using these new hooks!!! Great stuff!

[corinagum]

ping!

[compulim]

Working on now. 😀

Good that I have commented on what areas I need to work on. 👍🏻

[compulim]

We need more samples. 21.customization-plain-ui is a great way to show off the simplicity of React Hooks!

[compulim]

Spent a lot of time revisiting every single hook. There were stupidity but all are fixed now.

Should write down my rationale and thoughts on what to hook and how, in HOOKS.md.

Despite this is huge. I love this work. And I believe devs who are new to component customization will love how we design the solution.

[compulim]

Couldn't believe I refactored 150 files in a single commit and I only have 2 build-time errors. No runtime errors. 💪🏻

[compulim]

Finally, a well-defined (and hopefully well-thought) Web Chat API. 💪🏻

For starter, please read HOOKS.md first. All hooks defined are in some ways used by Web Chat UI. 1P = 3P.