├── README.md ├── package.json ├── public └── index.html └── src ├── App.js ├── Components ├── Country.js ├── CountryCases.js ├── GlobalTotals.js ├── InProgress │ └── Gauge.js ├── News.js └── NewsColumn.js ├── State ├── InProgress │ └── use-maps.js ├── use-backend.js └── use-news-backend.js ├── background.png ├── index.js ├── layout └── HomeLayout.js ├── styles.css └── views ├── CountryView.js ├── HeadingView.js ├── HomeView.js └── Totals.js /README.md: -------------------------------------------------------------------------------- 1 | # API_update_corona_app 2 | Created with CodeSandbox 3 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "spa-with-api-corona", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "react": "16.12.0", 9 | "react-dom": "16.12.0", 10 | "react-router": "5.1.2", 11 | "react-router-dom": "5.1.2", 12 | "react-scripts": "3.0.1" 13 | }, 14 | "devDependencies": { 15 | "typescript": "3.3.3" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test --env=jsdom", 21 | "eject": "react-scripts eject" 22 | }, 23 | "browserslist": [ 24 | ">0.2%", 25 | "not dead", 26 | "not ie <= 11", 27 | "not op_mini all" 28 | ] 29 | } -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 23 | React App 24 | 25 | 26 | 27 | 30 |
31 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { HashRouter as Router, Route } from "react-router-dom"; 3 | import "./styles.css"; 4 | import HomeLayout from "./layout/HomeLayout"; 5 | import Country from "./Components/Country"; 6 | import CountryView from "./views/CountryView"; 7 | 8 | export default function App() { 9 | return ( 10 |
11 | 12 | 13 | 14 | 15 |
16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /src/Components/Country.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Country = (props) => { 4 | console.log("arrived", props); 5 | 6 | return ( 7 |
8 |

{props.location.state.country}

9 |

{props.location.state.cases}

10 |
11 | ); 12 | }; 13 | 14 | export default Country; 15 | -------------------------------------------------------------------------------- /src/Components/CountryCases.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | const CountryCases = (props) => { 5 | return ( 6 |
7 | 8 | 9 | 10 | 23 | 36 | 49 | 62 | 75 | 88 | 89 | 90 | 91 | {Object.entries(props.stats).map((stat, key) => { 92 | return ( 93 | 94 | 104 | 109 | 114 | 119 | 124 | 129 | 130 | ); 131 | })} 132 | 133 | 134 | 135 | 144 | 145 | 146 |
11 | 22 | 24 | 35 | 37 | 48 | 50 | 61 | 63 | 74 | 76 | 87 |
95 | 101 | {stat[1].country} 102 | 103 | 105 | {stat[1].cases.toLocaleString(navigator.language, { 106 | minimumFractionDigits: 0 107 | })} 108 | 110 | {stat[1].deaths.toLocaleString(navigator.language, { 111 | minimumFractionDigits: 0 112 | })} 113 | 115 | {stat[1].todayCases.toLocaleString(navigator.language, { 116 | minimumFractionDigits: 0 117 | })} 118 | 120 | {stat[1].critical.toLocaleString(navigator.language, { 121 | minimumFractionDigits: 0 122 | })} 123 | 125 | {stat[1].recovered.toLocaleString(navigator.language, { 126 | minimumFractionDigits: 0 127 | })} 128 |
136 | 141 | W3Techs 142 | 143 |
147 |
148 | ); 149 | }; 150 | 151 | export default CountryCases; 152 | -------------------------------------------------------------------------------- /src/Components/GlobalTotals.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Cases } from "../State/use-backend"; 3 | 4 | const GlobalTotal = () => { 5 | const { data } = Cases(); 6 | const stats = { ...data }; 7 | 8 | // let totalCritical = 0; 9 | let totalDeaths = 0; 10 | let totalNewCases = 0; 11 | let totalRecoveries = 0; 12 | let totalCases = 0; 13 | let totalNewDeaths = 0; 14 | 15 | Object.entries(stats).map(stat => { 16 | // totalCritical += stat[1].critical; 17 | totalDeaths += stat[1].deaths; 18 | totalNewCases += stat[1].todayCases; 19 | totalRecoveries += stat[1].recovered; 20 | totalCases += stat[1].cases; 21 | totalNewDeaths += stat[1].todayDeaths; 22 | return totalNewDeaths; 23 | }); 24 | 25 | return ( 26 |
27 |
28 | icon 33 |

34 | {totalCases.toLocaleString(navigator.language, { 35 | minimumFractionDigits: 0 36 | })} 37 |

38 |

All Global Cases

39 |
40 | {/*
41 |

42 | {totalCritical.toLocaleString(navigator.language, { 43 | minimumFractionDigits: 0 44 | })} 45 |

46 |

Total critical cases

47 |
*/} 48 |
49 | icon 54 |

55 | {totalDeaths.toLocaleString(navigator.language, { 56 | minimumFractionDigits: 0 57 | })} 58 |

59 |

Global Deceased

60 |
61 |
62 | icon 67 |

68 | {totalRecoveries.toLocaleString(navigator.language, { 69 | minimumFractionDigits: 0 70 | })} 71 |

72 |

Global Recoveries

73 |
74 |
75 | icon 80 |

81 | {totalNewCases.toLocaleString(navigator.language, { 82 | minimumFractionDigits: 0 83 | })} 84 |

85 |

Global New Cases

86 |
87 |
88 | icon 93 |

94 | {totalNewDeaths.toLocaleString(navigator.language, { 95 | minimumFractionDigits: 0 96 | })} 97 |

98 |

Global Deaths Today

99 |
100 |
101 | ); 102 | }; 103 | 104 | export default GlobalTotal; 105 | -------------------------------------------------------------------------------- /src/Components/InProgress/Gauge.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VernitaJ/API_update_corona_app/89d48c5866493a8c3a3a27a872139ca3ca00360f/src/Components/InProgress/Gauge.js -------------------------------------------------------------------------------- /src/Components/News.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NewsStories } from "../State/use-news-backend"; 3 | 4 | const News = () => { 5 | const { news } = NewsStories(); 6 | const stories = { ...news }; 7 | 8 | return ( 9 |
10 |
11 | {Object.entries(stories).map((news, key) => { 12 | return ( 13 |
14 |

{news[1].title}

15 | 21 | news article link 26 |

27 | {news[1].description} 28 |

29 | 30 |
31 | ); 32 | })} 33 |
34 |
35 | ); 36 | }; 37 | 38 | export default News; 39 | -------------------------------------------------------------------------------- /src/Components/NewsColumn.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import News from "./News"; 3 | 4 | const NewsColumn = () => { 5 | return ( 6 |
7 |

NEWS AND INFORMATION

8 |