Lesson 4
network behaviour: magic internet money exchange and the what if machine
workbook 4 - btc what-if machine
Agenda:
... this lesson is deprecated for now ...
cd ~/code/react-course
git clone https://github.com/nikfrank/react-course-workbook-4
cd react-course-workbook-4
yarn
npm start
this is going to be our first API call!
imagine we have an api we can call for a json of { [coinName]: exchangeRateNumber,.. }
we can load from that API as a response to a user click with:
import React, { Component } from 'react';
class NetworkView extends Component {
loadExchangeRates = ()=> fetch('https://some.api/for/rates')
.then(response => response.json())
.then(rates => this.setState({ rates }) )
render(){
const { rates={} } = this.state;
return (
<div>
<button onClick={this.loadExchangeRates}>Reload</button>
<ul>
{
Object.keys(rates).map(toCoin => (
<li key={toCoin}>{toCoin} - {rates[toCoin]}</li>
) )
}
</ul>
</div>
);
}
};
export default NetworkView;the steps of this app runtime are as follows:
- component is rendered by someone else (not shown here!)
- state is initially empty, so all that is rendered is a button and an empty ul
- component sits alone and sad, waiting for user input
- user clicks the button, running the this.loadExchangeRates function
- the function is called with a React-Synthetic event, which is ignored
- that function uses the browser's fetch api to make an http request
- fetch returns a Promise, which is an object representing a future value
- that future value here will be the response of the http call
- each .then chains on a function to run once the previous Promise / then resolves
- the return value (a Promise) of the loadExchangeRates function is ignored
- eventually the http call resolves a response object (google 'browser fetch mdn')
- the Promise then triggers the first .then function, which parses the response as json
- reponse.json() is actually returning a Promise, which the next .then waits for resolving
- the second .then is triggered withe data resolved from the http call json parse
- that function calls this.setState to save the data to the Component's state
- state eventually changes, and once it does -> React reconciler triggers a render
- now
ratesis an object, so Object.keys gives us a list of strings (coinNames here) - we render the button and a
<ul>with<li>s each displaying an exchange rate
Using Promise's .then and .catch (for errors) will be very useful in writing our network layer, or when we're writing on the server.
Once you're used to it, most of the work of writing a network layer is designing the API - not so much work to call it. Designing an API is a task usually done alongside a server team, as efficiencies and obstacles can be found by thinking through the entire data flow of an application in advance of writing it. API design is another topic for another day though... we'll be using someone else's API here!
MDN has a pretty good explanation here
I also recommend this video about the js async model
It usually takes a while to get used to js's async / sync code abstraction - it can be useful to play around with setTimeout and console.log until you're comfortable with which code will run when.
now the actual lesson
git checkout step0
review connectHOC
here, we'll write the api call, hardcode -> render
then we'll attach the controlled inputs to the api call
//...
git status # we should have work from step0
git commit -am "all that work from step0"
git checkout step0-testing
# if we want to keep all that work from step0
git merge step0
explain the runtime for browser vs jsdom w enzyme
fake the api
test calling the api
test the raw component (pass hooks spies)
discuss coverage
git status # we should have work from step0-testing
git commit -am "all that work from step0-testing"
git checkout step1
# if we want to keep all that work from step0-testing
git merge step0-testing
put in a DatePicker
call the API for historical data
append result to list
componentWillReceiveProps (dep... what is new api?) -> reduce totals
render table w totals
( TDD the reducer! )
error handling on the api call -> toastr for ERRnoSuchCoin
git status # we should have work from step1
git commit -am "all that work from step1"
git checkout step2
# if we want to keep all that work from step1
git merge step1
side menu with buttons
hooks for SLC (discuss why these are hooks)
testing with fake localStorage
git status # we should have work from step2
git commit -am "all that work from step2"
git checkout step3
# if we want to keep all that work from step2
git merge step3
I've installed recharts for us (and packaged node_modules into git for convenience
we should have an already running application for price exchange bitcoin data.
What I've done to get started is make a component with a working example LineChart in it
Our exercise is to convert our trades data into line chart data to draw.
(link to recharts docs)[http://recharts.org/#/en-US/examples]
(link to crypto compare for data reference)[https://www.cryptocompare.com/api/#-api-data-histoday-]
// our trades look like
const exampleTrades = [
{
"fromCoin":"ETH",
"toCoin":"WINGS",
"fromAmount":10,
"toAmount":17110.3,
"date":1528791856000,
},
{
"fromCoin":"WINGS",
"toCoin":"ETH",
"toAmount":10,
"fromAmount":17110.3,
"date":1528791957000,
},
];
// and our line data needs to look like
const exampleLineChartData = [
{name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
{name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
{name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
{name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
{name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
{name: 'Page F', uv: 2390, pv: 3800, },
{name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
];we'll cover also how to deal with data that has gaps using the Line component's connectNull prop from the recharts api.
git status # we should have work from step3
git commit -am "all that work from step3"
git checkout step4
# if we want to keep all that work from step3
git merge step4
css layouts concept -> css grid
implement for mobile and desktop, discuss testing tools in chrome
deploy to heroku
!!! now go interview for junior react jobs !!!