3 - render global cases

[edwmurph]

a good approach here would be to start by just implementing just the top section so we can make sure you have the right foundation for dynamically fetching + rendering the data

• would recommend using axios-hooks to fetch the data from the free mathdroid covid API in react components
• also use bootstrap for as much of the styling as possible, if you need to apply any custom styles, i highly recommend trying styled-components
• it doesn't have to look exactly like the screenshot

[aabdullin]

@edwmurph how would you divide this top section into react components?

[edwmurph]

good question! for now i'd recommend just making a component for the cards: that component will just need to take in the number/count to display and the tag (e.g. confirmed, recovered or deaths)

and then the rest for this task can just be all defined in src/pages/index.js. it'd also be good to keep in mind for later that there is some other good potential for another shared component for the global data and country-specific data but you dont have to worry about that until you implement that part:

[aabdullin]

@edwmurph how it should be structured (in good practices for gatsby)? do you have an example to share or comments on: https://github.com/aabdullin/covid-19-tracker/tree/render_global_classes/src

[edwmurph]

the file structure you setup in that linked branch looks good to me to start with and then we can discuss further in your PR

[aabdullin]

@edwmurph how would you recommend to render data in UI with axios-hooks for gatsby project - to get from confirmed.value? (do you have an example to share or repository?). Spent 1.5 hours - couldn't figure out https://github.com/aabdullin/covid-19-tracker/blob/render_global_classes/src/components/ConfirmedCard.js

[edwmurph]

looks like you almost got it. i think the url you're using is off a bit and so is the return signature of the axios-hooks call. something like this should work

import useAxios from 'axios-hooks'

const App = () => {
  const [{ data, loading, error }] = useAxios('https://covid19.mathdro.id/api')

  if (loading) return <p>Loading...</p>
  if (error) return <p>Error!</p>

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  )
}

[aabdullin]

Hi Ed @edwmurph

Is it better to use bootstrap or material UI to create this container/tag? https://material-ui.com/components/container/

[edwmurph]

i would highly recommend bootstrap for this over material ui. bootstrap is a lot more lightweight than material ui and has everything you need:

https://getbootstrap.com/docs/4.0/components/badge/#contextual-variations https://getbootstrap.com/docs/4.0/utilities/flex/

and then for any custom styles you need to add i'd recommend using styled-components

[edwmurph]

also if it helps you could split this task up into 2 PRs but up to you:

1. just show raw data
2. style/format data to look like example

[aabdullin]

hi Ed (@edwmurph ). do you think this is the right way to reuse component and pass parameters with props Code: https://github.com/aabdullin/covid-19-tracker/commit/d0ca6eb9fb9d16a263fdaf31bc40310e8d2aa5ac

I've noticed it was working first 10 minutes, then (without changing any code) it started throwing this error (do you know what is the reason?):

Is it because JSON.stringify stored as a variable?

[edwmurph]

ya i think that Cards shared component is a good way to do it for now at least. when you implement the country specific cards that will need to change a bit but you can address that when you get there

and the error you're seeing states that data is undefined which makes sense because the first time the component is rendered will be before the data has been fetched. so i think a good way to avoid that error would be to move the if (loading) and if (error) checks above the lines that stringify the data