Skip to content

Commit

Permalink
Merge pull request #170 from stephin007/NEW-UI
Browse files Browse the repository at this point in the history
STAGING DEPLOYMENT 16/06/2021
  • Loading branch information
stephin007 authored Jun 16, 2021
2 parents cc31aef + f1e93cd commit d490a6d
Show file tree
Hide file tree
Showing 9 changed files with 2,019 additions and 1,888 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,15 @@
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"chart.js": "^3.3.2",
"date-fns": "^2.21.1",
"mapbox-gl": "^2.3.0",
"react": "^16.14.0",
"react-chartjs-2": "^3.0.3",
"react-dom": "^16.14.0",
"react-map-gl": "^6.1.15",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"style-components": "^0.1.0",
"styled-components": "^5.3.0",
"web-vitals": "^1.0.1"
},
Expand Down
31 changes: 14 additions & 17 deletions public/index.html
Original file line number Diff line number Diff line change
@@ -1,20 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>CoWIN Vaccination Tracker</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>CoWIN Vaccination Tracker</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
101 changes: 48 additions & 53 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,58 +1,53 @@
import React from "react";
import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

import { ThemeProvider } from "styled-components";
import { useDarkMode } from "./components/useDarkMode";
import { lightTheme, darkTheme } from "./components/themes";
import { GlobalStyles } from "./components/globalStyles";

import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";

import Home from "./components/Home/Home";
import Header from "./components/Header/Header";
import About from "./components/About/About";
import Intro from "./components/Intro/Intro";

import CovidInfoMain from "./components/CovidInfo/CovidInfoMain";
import React from 'react';
import './App.css';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { ThemeProvider } from 'styled-components';
import { useDarkMode } from './components/useDarkMode';
import { lightTheme, darkTheme } from './components/themes';
import { GlobalStyles } from './components/globalStyles';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Home from './components/Home/Home';
import Header from './components/Header/Header';
import About from './components/About/About';
import Intro from './components/Intro/Intro';
import CovidInfoMain from './components/CovidInfo/CovidInfoMain';

const App = () => {
const [theme, toggleTheme] = useDarkMode();
const themeMode = theme === "light" ? lightTheme : darkTheme;
const appliedTheme = createMuiTheme({
palette: {
type: theme === "light" ? "light" : "dark",
},
});

return (
<ThemeProvider theme={themeMode}>
<MuiThemeProvider theme={appliedTheme}>
<>
<GlobalStyles />
<Router>
<div className="app">
<Header theme={theme} toggleTheme={toggleTheme} />
<Switch>
<Route exact={true} path="/">
<Intro />
</Route>
<Route path="/vaccines" exact={true}>
<Home />
</Route>
<Route path="/covidinfo" exact={true}>
<CovidInfoMain />
</Route>
<Route path="/about" exact={true}>
<About />
</Route>
</Switch>
</div>
</Router>
</>
</MuiThemeProvider>
</ThemeProvider>
);
const [theme, toggleTheme] = useDarkMode();
const themeMode = theme === 'light' ? lightTheme : darkTheme;
const appliedTheme = createMuiTheme({
palette: {
type: theme === 'light' ? 'light' : 'dark',
},
});
return (
<ThemeProvider theme={themeMode}>
<MuiThemeProvider theme={appliedTheme}>
<>
<GlobalStyles />
<Router>
<div className="app">
<Header theme={theme} toggleTheme={toggleTheme} />
<Switch>
<Route exact={true} path="/">
<Intro />
</Route>
<Route path="/vaccines" exact={true}>
<Home />
</Route>
<Route path="/covidinfo" exact={true}>
<CovidInfoMain />
</Route>
<Route path="/about" exact={true}>
<About />
</Route>
</Switch>
</div>
</Router>
</>
</MuiThemeProvider>
</ThemeProvider>
);
};

export default App;
13 changes: 7 additions & 6 deletions src/components/About/About.css
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,10 @@ body {
background-color: #004d4d;
display: flex;
align-items: center;
padding: 10px;
width: 10px;
height: 10px;
justify-content: center;
padding: 5px;
width: auto;
height: 30px;
margin-left: 10px;
border-radius: 5px;
}
Expand Down Expand Up @@ -145,9 +146,9 @@ body {
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
width: 20px;
height: 20px;
padding: 10px;
width: 40px;
height: 40px;
border-radius: 50%;
color: whitesmoke;
}
Expand Down
6 changes: 5 additions & 1 deletion src/components/About/About.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const About = () => {
<div className="about_section_main_heading">
<h4>
App to checkout the latest COVID19 Vaccination Slots Across
India🎨.
India💉.
</h4>
</div>
<br />
Expand All @@ -60,6 +60,10 @@ const About = () => {
using postal codes
</li>
<li> Details about free and paid vaccines is also available</li>
<li>
You can now graphically visualize the whole world's COVID19
Situation.
</li>
<li>
Fully open sourced information made on the latest technology
stack
Expand Down
17 changes: 6 additions & 11 deletions src/components/CovidInfo/CovidWorld.js/CovidWorld.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,8 @@ import {
} from "@material-ui/core";

import "./CovidWorld.css";
import {
WorldPaperInformation,
ContinentPaperInformation,
} from "./CovidWorldContents";

import { WorldChart, ContinentChart } from "./CovidWorldContents";

const CovidWorld = ({ value, index }) => {
const [allWorldData, setAllWorldData] = useState([]);
Expand All @@ -20,8 +18,6 @@ const CovidWorld = ({ value, index }) => {
const [loading, setLoading] = useState(true);
// TODOs
// 1. make a select field to filter out the slection
// - get whole world (done)
// - get Data by continents (done)
// - get Data by specific continent
// - get Data by countries
// - get Data by country
Expand Down Expand Up @@ -116,7 +112,6 @@ const CovidWorld = ({ value, index }) => {
paperAnswer: allWorldData.todayRecovered,
},
];

const getAllWorldCovidData = async () => {
await fetch(`https://disease.sh/v3/covid-19/all`)
.then((response) => response.json())
Expand All @@ -125,7 +120,6 @@ const CovidWorld = ({ value, index }) => {
setLoading(false);
});
};

const getCovidDataByContinent = async () => {
await fetch(`https://disease.sh/v3/covid-19/continents`)
.then((response) => response.json())
Expand All @@ -140,6 +134,7 @@ const CovidWorld = ({ value, index }) => {
getAllWorldCovidData();
getCovidDataByContinent();
}, []);

return (
<>
{value === index && (
Expand Down Expand Up @@ -176,16 +171,16 @@ const CovidWorld = ({ value, index }) => {
<div className="world_head">
{selectOptions === "Get COVID19 World Information" && (
<>
<WorldPaperInformation
<WorldChart
allWorldData={allWorldData}
WorldPaperContents={WorldPaperContents}
loading={loading}
/>
</>
)}

{selectOptions === "Get COVID19 Data by continents" && (
<>
<ContinentPaperInformation
<ContinentChart
dataByContinent={dataByContinent}
loading={loading}
/>
Expand Down
Loading

0 comments on commit d490a6d

Please sign in to comment.