Restructure withToastProvider HOC for testability

[fyliu]

Dependency

• 536

Overview

We need to use the same code that can implement Toasts consistently through out the app.

Detail

• withToastProvider has been a blocker to testing components that use the Toast context, for example #670 and similar code that were merged without tests.
• See if it can be restructured in a way that allows testing components that consume Toast context.

Action Items

• [ ] Look through our Toast context code
• [ ] Try to implement the test in #670
• [ ] Read the blog in Resources and the accompanying code and see if we can follow the structure to get our test to run
• [ ] Make sure #670 can be tested with the changes

Resources/Instructions

• https://blog.devmountain.com/accessing-reacts-context-api-through-a-higher-order-component/#:~:text= Accessing React's Context API Through a Higher,Consumer Component. Next, let’s make a... More
• https://github.com/Olafaloofian/Using-ContextAPI-HOC

[KPHowley]

@fyliu - I would love to see @seenaiype and our UI/UX teams thought on toast's in general before adding this to the backlog- They are been working on an new style guide / Audit so I'm going to add #536 and #972 as blockers on this.

[Biuwa]

From John:

'From the comments, it looks like Kevin Howley was hoping that the style guide would include a new wireframe for how toasts look, so made this issue dependent upon the design system effort at the time. Toasts are the little messages that show up and then disappear after a few seconds that you see on some of the screens. I agree that they look sort of crude, and, if I recall correctly, the different toast appear in various different locations on the screen - so they probably could look better. Issue #973 is just about changing the way the code for toasts is written to reduce duplication of code and make the code to implement each different toast simpler - it sort of falls under the heading of "code cleanup"'