Many of MobileFrontend's Views take an api parameter and invoke api requests during the render process.
This means View's have side effects and are essentially asynchronous smart components. Converting these components to be dumb components has benefits:
- will lead to them being more reusable. For instance, a list of topics can source data from different API's e.g. talk sections, categories, or even links.
- they will be more efficient
- code becomes more readable - no need to track different states of any given view
- will help us adopt composition patterns
- encourages separation of app lifecycle code from rendering code
- view code becomes more about how components look rather than behave
How the PromisedView will help
The common pattern of many of components is as follows:
- append View to code
- View requests data from an API
- View updates itself
- simplify tests - view tests will no longer need to stub api Requests making tests easier to write! Hurrah!
We will replace this pattern with:
- append View to code with a placeholder View
- creator of View fetches data from api
- when api resolves the placeholder View is replaced with a component created from the data
This will remove all fetch logic from View's and move it upwards to a factory function (in our case this will be inside routes in the OverlayManager.
Suggested reading
[1] https://coderwall.com/p/znkw-q/smart-vs-dumb-components-when-to-use-which
[2] https://alligator.io/react/smart-dumb-components/
Acceptance criteria
- New component exists
- New component has 100% code coverage
- Check component is being used by LanguageOverlay and thus useful.