Today we'll fetch and display remote data, add a theme switcher, and handle currency conversion.
Add a button that switches the theme of the app. We can do this by toggling the CSS class
theme--dark on the root (
html) element in a
useEffect hook. (This is one of many ways to do theming)
Tip: You can use
document.documentElement.classListto access the list of CSS classes on the root element. You can then call
.removeto modify the list.
We'll be using a REST API that returns static data: https://my-json-server.typicode.com/dabbott/dashboard-json-server
We can access an individual article or info object by its id, e.g.
Start by fetching and displaying the first info resource. You should use
useFetchis generic, you may want to specialize it at the callsite for better type checking, e.g.
When the resource is loading, display a loading state (e.g. the string
"Loading..."). You may also want to show an error message in the case where it fails to load.
Next, fetch all articles using
Now that we can fetch the current price of BTC (via
/info), we can properly convert between USD and BTC. Validate the number at a basic level (validating a number perfectly is fairly tricky - it's OK if you don't handle every edge case).
Putting it all together, we should be able to fetch data for our entire initial screen.