[Architecture] Move suggested actions to React context

[compulim]

Changelog Entry

Description

One issue we know for long... "our React context object is too big, one tiny change in the context object means everyone subscribing to it will need to change." This kind of problem plague React context, Redux and is everywhere inside/outside of Web Chat.

For the last few years, when we build features, we are building smaller context object than using the uber one. Now we are looking into how to make our legacy context objects update less frequent.

We will try a few approaches, currently 2 approaches we are trying:

• Atom-sized context object... one context one value, nothing else
• Context will always be stable object... and we use other ways to communicate changes

p.s. we also shop around and thought about Redux reselect approach... and in React sense, it will be HOC + memo(). But preliminary thinking tell us it doesn't sound it will improve perf better than the other 2 approaches.

Design

Specific Changes

• Added new react-context package
  • createBitContext for quickly creating a context with a single state
  • useStableStateHook for recreating a useState-hook via a stable factory function
• Moved suggestedActions reducer to React context
  • Moved clearSuggestedActionsOnPostActivity saga to React context
• Moved sendBoxAttachments and sendBoxValue reducer to React context
  • Migrated useSendBoxAttachments and useSendBoxValue hooks
• Added new setRawState and <ReduxActionSinkComposer> to facilitate replication

• [x] I have added tests and executed them locally
• [x] I have updated CHANGELOG.md
• [x] I have updated documentation

Review Checklist

This section is for contributors to review your work.

• [x] ~Accessibility reviewed (tab order, content readability, alt text, color contrast)~
• [x] ~Browser and platform compatibilities reviewed~
• [x] ~CSS styles reviewed (minimal rules, no z-index)~
• [x] ~Documents reviewed (docs, samples, live demo)~
• [x] ~Internationalization reviewed (strings, unit formatting)~
• [x] package.json and package-lock.json reviewed
• [x] ~Security reviewed (no data URIs, check for nonce leak)~
• [x] Tests reviewed (coverage, legitimacy)