├── .env.example ├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── favicon-16x16.png ├── favicon-32x32.png ├── manifest.json └── index.html ├── src ├── images │ └── noData.png ├── setupTests.js ├── __tests__ │ ├── __snapshots__ │ │ ├── home.js.snap │ │ ├── about.js.snap │ │ ├── header.js.snap │ │ ├── intro.js.snap │ │ └── covidInfoMain.js.snap │ ├── home.js │ ├── about.js │ ├── intro.js │ ├── covidInfoMain.js │ └── header.js ├── components │ ├── themes.js │ ├── index.js │ ├── CovidInfo │ │ ├── CovidIndia │ │ │ └── CovidIndia.js │ │ ├── CovidInfoMain.js │ │ └── CovidWorld │ │ │ ├── CovidWorld.css │ │ │ ├── CovidWorld.js │ │ │ └── CovidWorldContents.js │ ├── Header │ │ ├── HeaderStyles.js │ │ ├── Header.css │ │ └── Header.js │ ├── VaccineData │ │ ├── VaccineDataMain.js │ │ ├── Map │ │ │ └── index.js │ │ └── SingleVaccineData │ │ │ ├── VaccineDataSingle.js │ │ │ └── VaccineDataSingle.css │ ├── useDarkMode.js │ ├── Intro │ │ ├── Intro.js │ │ └── Intro.css │ ├── Error.js │ ├── globalStyles.js │ ├── NullState.js │ ├── Home │ │ ├── Home.css │ │ └── Home.js │ └── About │ │ ├── About.js │ │ └── About.css ├── index.js ├── App.css ├── index.css └── App.js ├── .gitignore ├── .github ├── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.md ├── PULL_REQUEST_TEMPLATE.md ├── workflows │ ├── conflicts.yml │ └── codeql-analysis.yml └── CONTRIBUTING.md ├── LICENSE ├── package.json ├── README.md ├── CONTRIBUTING.md └── CODE_OF_CONDUCT.md /.env.example: -------------------------------------------------------------------------------- 1 | REACT_APP_MAPBOX_ACCESS_TOKEN= 2 | 3 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stephin007/Cowin-Vaccine-Availablity-Checker/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stephin007/Cowin-Vaccine-Availablity-Checker/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stephin007/Cowin-Vaccine-Availablity-Checker/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/images/noData.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stephin007/Cowin-Vaccine-Availablity-Checker/HEAD/src/images/noData.png -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stephin007/Cowin-Vaccine-Availablity-Checker/HEAD/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stephin007/Cowin-Vaccine-Availablity-Checker/HEAD/public/favicon-32x32.png -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | import Enzyme from 'enzyme'; 2 | import Adapter from 'enzyme-adapter-react-16'; 3 | 4 | Enzyme.configure({ adapter: new Adapter() }); 5 | -------------------------------------------------------------------------------- /src/__tests__/__snapshots__/home.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`renders home component renders correctly 1`] = `ShallowWrapper {}`; 4 | -------------------------------------------------------------------------------- /src/__tests__/__snapshots__/about.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`render about component render about properly 1`] = `ShallowWrapper {}`; 4 | -------------------------------------------------------------------------------- /src/__tests__/__snapshots__/header.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Rendering Header Component renders correctly 1`] = `ShallowWrapper {}`; 4 | -------------------------------------------------------------------------------- /src/__tests__/__snapshots__/intro.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`renders intro component renders intro correctly 1`] = `ShallowWrapper {}`; 4 | -------------------------------------------------------------------------------- /src/__tests__/__snapshots__/covidInfoMain.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`check tab value change functionality check handle tab change 1`] = `ShallowWrapper {}`; 4 | 5 | exports[`render covidInfoMain render covidinfo correctly 1`] = `ShallowWrapper {}`; 6 | -------------------------------------------------------------------------------- /src/components/themes.js: -------------------------------------------------------------------------------- 1 | export const lightTheme = { 2 | body: "#FAFAFA", 3 | text: "#000", 4 | btnColor: "#363537", 5 | invert: 0, 6 | }; 7 | 8 | export const darkTheme = { 9 | body: "#363537", 10 | text: "#FAFAFA", 11 | btnColor: "#FAFAFA", 12 | invert: 1, 13 | }; 14 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as Home } from "./Home/Home"; 2 | export { default as Header } from "./Header/Header"; 3 | export { default as About } from "./About/About"; 4 | export { default as Intro } from "./Intro/Intro"; 5 | export { default as CovidInfoMain } from "./CovidInfo/CovidInfoMain"; 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "mapbox-gl/dist/mapbox-gl.css"; 4 | import "./index.css"; 5 | import App from "./App"; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById("root") 12 | ); 13 | -------------------------------------------------------------------------------- /src/components/CovidInfo/CovidIndia/CovidIndia.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const CovidIndia = ({ value, index }) => { 4 | return ( 5 | <> 6 | {value === index && ( 7 |

Content Coming Soon...

8 | )} 9 | 10 | ); 11 | }; 12 | 13 | export default CovidIndia; 14 | -------------------------------------------------------------------------------- /src/components/Header/HeaderStyles.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Button = styled.button` 4 | background: transparent; 5 | border-radius: 3px; 6 | border: 2px solid ${({ theme }) => theme.btnColor}; 7 | color: ${({ theme }) => theme.btnColor}; 8 | margin: 0 1em; 9 | padding: 0.25em 1em; 10 | `; 11 | -------------------------------------------------------------------------------- /src/components/VaccineData/VaccineDataMain.js: -------------------------------------------------------------------------------- 1 | import VaccineDataSingle from "./SingleVaccineData/VaccineDataSingle"; 2 | 3 | const VaccineDataMain = ({ vaccineData }) => { 4 | return ( 5 | <> 6 | {vaccineData?.map((vaccine) => { 7 | return ; 8 | })} 9 | 10 | ); 11 | }; 12 | 13 | export default VaccineDataMain; 14 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | html { 2 | overflow: scroll; 3 | } 4 | ::-webkit-scrollbar { 5 | width: 0px; 6 | background: transparent; /* make scrollbar transparent */ 7 | } 8 | 9 | /* Hide scrollbar for Chrome, Safari and Opera */ 10 | .scrollbar-hidden::-webkit-scrollbar { 11 | display: none; 12 | } 13 | 14 | /* Hide scrollbar for IE, Edge add Firefox */ 15 | .scrollbar-hidden { 16 | -ms-overflow-style: none; 17 | scrollbar-width: none; /* Firefox */ 18 | } 19 | -------------------------------------------------------------------------------- /src/__tests__/home.js: -------------------------------------------------------------------------------- 1 | import { shallow } from 'enzyme'; 2 | import React from 'react'; 3 | import Home from '../components/Home/Home'; 4 | 5 | describe('renders home component', () => { 6 | let wrapper = shallow(); 7 | 8 | it('renders correctly', () => { 9 | expect(wrapper).toMatchSnapshot(); 10 | }); 11 | 12 | it('renders intro text', () => { 13 | expect(wrapper.find('.home__intro').text()).toEqual('Vaccine Availablity'); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /src/__tests__/about.js: -------------------------------------------------------------------------------- 1 | import { shallow } from 'enzyme'; 2 | import React from 'react'; 3 | import About from '../components/About/About'; 4 | 5 | describe('render about component', () => { 6 | const wrapper = shallow(); 7 | 8 | it('render about properly', () => { 9 | expect(wrapper).toMatchSnapshot(); 10 | }); 11 | 12 | it('render head properly', () => { 13 | expect(wrapper.find('.about-head').text()).toEqual('About the App'); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /src/__tests__/intro.js: -------------------------------------------------------------------------------- 1 | import { shallow } from 'enzyme'; 2 | import React from 'react'; 3 | import Intro from '../components/Intro/Intro'; 4 | 5 | describe('renders intro component', () => { 6 | const wrapper = shallow(); 7 | 8 | it('renders intro correctly', () => { 9 | expect(wrapper).toMatchSnapshot(); 10 | }); 11 | 12 | it('renders home text', () => { 13 | expect(wrapper.find('.intro__homeText').text()).toEqual('Vaccine Availability'); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | #IDE Files 9 | .idea 10 | .vscode 11 | 12 | # testing 13 | /coverage 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | .env.local 21 | .env.development.local 22 | .env.test.local 23 | .env.production.local 24 | .env 25 | 26 | npm-debug.log* 27 | yarn-debug.log* 28 | yarn-error.log* 29 | 30 | .env 31 | 32 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 8 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 9 | sans-serif; 10 | -webkit-font-smoothing: antialiased; 11 | -moz-osx-font-smoothing: grayscale; 12 | } 13 | 14 | .marker { 15 | height: 100px; 16 | width: 100px; 17 | background: black; 18 | display: grid; 19 | color: white; 20 | place-items: center; 21 | font-weight: bold; 22 | } 23 | -------------------------------------------------------------------------------- /src/components/Header/Header.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Fira+Mono:wght@500&display=swap"); 2 | 3 | .header { 4 | background-color: #d6e4f0 !important; 5 | } 6 | 7 | .headerDark { 8 | background-color: #1f1f1f !important; 9 | color: whitesmoke !important; 10 | } 11 | 12 | .header__ham { 13 | color: #363537 !important; 14 | } 15 | 16 | .header__hamDark { 17 | color: white !important; 18 | } 19 | 20 | .MuiButtonBase-root { 21 | font-weight: 600 !important; 22 | } 23 | 24 | a { 25 | text-decoration: none; 26 | } 27 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | CoWIN Vaccination Tracker 12 | 13 | 14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: "" 5 | labels: "" 6 | assignees: "" 7 | --- 8 | 9 | **Is your feature request related to a problem? Please describe.** 10 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 11 | 12 | **Describe the solution you'd like** 13 | A clear and concise description of what you want to happen. 14 | 15 | **Describe alternatives you've considered** 16 | A clear and concise description of any alternative solutions or features you've considered. 17 | 18 | **Additional context** 19 | Add any other context or screenshots about the feature request here. 20 | -------------------------------------------------------------------------------- /src/components/useDarkMode.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | 3 | export const useDarkMode = () => { 4 | const [theme, setTheme] = useState('light'); 5 | const [componentMounted, setComponentMounted] = useState(false); 6 | 7 | const setMode = mode => { 8 | window.localStorage.setItem('theme', mode) 9 | setTheme(mode) 10 | }; 11 | 12 | const toggleTheme = () => { 13 | if (theme === 'light') { 14 | setMode('dark'); 15 | } else { 16 | setMode('light'); 17 | } 18 | }; 19 | 20 | useEffect(() => { 21 | const localTheme = window.localStorage.getItem('theme'); 22 | if (localTheme) { 23 | setTheme(localTheme); 24 | } else { 25 | setMode('light'); 26 | } 27 | setComponentMounted(true); 28 | }, []); 29 | 30 | return [theme, toggleTheme, componentMounted] 31 | }; -------------------------------------------------------------------------------- /src/components/Intro/Intro.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import "./Intro.css"; 4 | 5 | const Intro = () => { 6 | return ( 7 |
8 |
9 |
10 | 15 | 16 | 20 |

Vaccine Availability

21 | 22 |
23 |
24 |
25 | ); 26 | }; 27 | 28 | export default Intro; 29 | -------------------------------------------------------------------------------- /src/components/Error.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import image from '../images/noData.png'; 3 | import styled from 'styled-components'; 4 | 5 | const Error = () => { 6 | return ( 7 |
8 | 9 | Error img 14 | 15 | 16 | No results found for the entered State, Pin code or Date, Please Try 17 | Again 18 | 19 |
20 | ); 21 | }; 22 | 23 | export default Error; 24 | 25 | const ImageContainer = styled.div` 26 | width: 100%; 27 | text-align: center; 28 | height: 300px; 29 | `; 30 | 31 | const ErrorMessage = styled.div` 32 | width: 100%; 33 | text-align: center; 34 | padding: 10px; 35 | font-weight: bold; 36 | `; 37 | -------------------------------------------------------------------------------- /src/__tests__/covidInfoMain.js: -------------------------------------------------------------------------------- 1 | import { shallow } from 'enzyme'; 2 | import React from 'react'; 3 | import CovidInfo from '../components/CovidInfo/CovidInfoMain'; 4 | 5 | describe('render covidInfoMain', () => { 6 | const wrapper = shallow(); 7 | it('render covidinfo correctly', () => { 8 | expect(wrapper).toMatchSnapshot(); 9 | }); 10 | it('renders section title', () => { 11 | expect(wrapper.find('[data-testId="covidinfo-header"]').text()).toEqual('World Covid 19 Information'); 12 | }); 13 | }); 14 | 15 | describe('check tab value change functionality', () => { 16 | const wrapper = shallow(); 17 | it('check handle tab change', () => { 18 | const event = { 19 | target: { value: 'success' }, 20 | }; 21 | const handleTabChange = wrapper.find('[data-testId="covidinfo-tabValue"]'); 22 | handleTabChange.simulate('change', event); 23 | expect(wrapper).toMatchSnapshot(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/components/globalStyles.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from "styled-components"; 2 | 3 | export const GlobalStyles = createGlobalStyle` 4 | body { 5 | background: ${({ theme }) => theme.body}; 6 | color: ${({ theme }) => theme.text}; 7 | transition: all 0.25s linear; 8 | } 9 | 10 | p { 11 | color: ${({ theme }) => theme.text}; 12 | } 13 | 14 | h3 a { 15 | color: ${({ theme }) => theme.text}; 16 | } 17 | 18 | h4 { 19 | color: ${({ theme }) => theme.text}; 20 | } 21 | 22 | h1 { 23 | color: ${({ theme }) => theme.text}; 24 | } 25 | 26 | .about_section_main_heading h4{ 27 | color: ${({ theme }) => theme.text}; 28 | } 29 | 30 | .intro__homeText { 31 | border: 3px solid ${({ theme }) => theme.text}; 32 | color: ${({ theme }) => theme.text}; 33 | } 34 | 35 | .header__leftImg { 36 | filter: invert(${({ theme }) => theme.invert}); 37 | } 38 | 39 | .logo__img { 40 | filter: invert(${({ theme }) => theme.invert}); 41 | } 42 | `; 43 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: "" 5 | labels: "" 6 | assignees: "" 7 | --- 8 | 9 | **Describe the bug** 10 | A clear and concise description of what the bug is. 11 | 12 | **To Reproduce** 13 | Steps to reproduce the behavior: 14 | 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | 28 | - OS: [e.g. iOS] 29 | - Browser [e.g. chrome, safari] 30 | - Version [e.g. 22] 31 | 32 | **Smartphone (please complete the following information):** 33 | 34 | - Device: [e.g. iPhone6] 35 | - OS: [e.g. iOS8.1] 36 | - Browser [e.g. stock browser, safari] 37 | - Version [e.g. 22] 38 | 39 | **Additional context** 40 | Add any other context about the problem here. 41 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | > 🚨 Please review the [guidelines for contributing](../CONTRIBUTING.md) to this repository. 2 | 3 | ### Please check if the PR fulfills these requirements 4 | 5 | - [ ] Make sure you are requesting to **NEW-UI**. Don't request other protected Branches like **staging/master** 6 | - [ ] Make sure no conflicts are present in the code, if so please resolve it(_Tip: Always fetch upstream_) 7 | - [ ] Your Commit messages should make sense. 8 | - [ ] Don't push your package.lock.json as this project uses yarn.lock already. 9 | - [ ] Check your code additions will fail neither code linting checks nor unit test. 10 | 11 | ### Describe your changes 12 | 13 | - **What kind of change does this PR introduce?** (Bug fix, feature, docs update, ...) 14 | 15 | - **What is the current behavior?** (You can also link to an open issue here) 16 | 17 | - **What is the new behavior (if this is a feature change)?** 18 | 19 | - **Does this PR introduce a breaking change?** (i.e changes that may require users to update/refactor existing istances of the application) 20 | 21 | - **Other Information**: 22 | 23 | ❤️ Thank you! 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Stephin Reji 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/components/Intro/Intro.css: -------------------------------------------------------------------------------- 1 | .intro__homeRes > img { 2 | width: 550px; 3 | } 4 | 5 | .intro__home { 6 | display: flex; 7 | align-items: center; 8 | flex-direction: column; 9 | justify-content: center; 10 | margin-right: 40px; 11 | } 12 | 13 | .intro__homeRes { 14 | margin-top: 60px; 15 | } 16 | 17 | .intro__homeText { 18 | border: 3px solid black; 19 | padding: 10px 55px 10px 50px; 20 | margin-top: -25px; 21 | 22 | font-weight: 400; 23 | text-align: center; 24 | } 25 | 26 | .intro__homeText:hover { 27 | border: 3px solid black; 28 | color: white; 29 | padding: 10px 55px 10px 50px; 30 | margin-top: -25px; 31 | transition: 0.5s; 32 | background-color: black; 33 | font-weight: 400; 34 | text-align: center; 35 | } 36 | 37 | @media screen and (max-width: 800px) { 38 | .intro__homeRes > img { 39 | width: 300px; 40 | } 41 | .intro__home { 42 | display: flex; 43 | align-items: center; 44 | flex-direction: column; 45 | justify-content: center; 46 | } 47 | 48 | .intro__homeRes { 49 | display: flex; 50 | flex-direction: column; 51 | margin-left: 40px; 52 | margin-top: 110; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/components/VaccineData/Map/index.js: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Button } from "@material-ui/core"; 3 | import { CloseSharp, LocationOn } from "@material-ui/icons"; 4 | import ReactMapGL, { Marker } from "react-map-gl"; 5 | 6 | export const Map = ({ lat, lng, close }) => { 7 | const [viewport, setViewport] = React.useState({ 8 | latitude: lat, 9 | longitude: lng, 10 | zoom: 15, 11 | }); 12 | 13 | return ( 14 |
15 | setViewport(viewport)} 21 | > 22 | 23 | 24 | 25 | 36 | 37 |
38 | ); 39 | }; 40 | -------------------------------------------------------------------------------- /.github/workflows/conflicts.yml: -------------------------------------------------------------------------------- 1 | name: "Merge Conflict Watcher" 2 | on: 3 | pull_request: 4 | types: [opened, synchronize, edited] 5 | branches: 6 | - NEW-UI 7 | - master 8 | - staging 9 | pull_request_review_comment: 10 | types: [created, deleted] 11 | jobs: 12 | triage: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - uses: mschilde/auto-label-merge-conflicts@master 16 | with: 17 | CONFLICT_LABEL_NAME: "merge-conflicts" 18 | GITHUB_TOKEN: ${{ secrets.MERGE_CONFLCTS_TOKEN }} 19 | MAX_RETRIES: 5 20 | WAIT_MS: 5000 21 | create_comment: 22 | needs: triage 23 | runs-on: ubuntu-latest 24 | steps: 25 | - uses: actions/checkout@v2 26 | - uses: actions-ecosystem/action-create-comment@v1 27 | if: contains(github.event.pull_request.labels.*.name, 'merge-conflicts') 28 | with: 29 | github_token: ${{ secrets.GITHUB_TOKEN }} 30 | body: | 31 | Hello, @${{ github.actor }}! Your pull request has merge conflicts with the base branch. You can resolve those conflicts by following the instructions [here.](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/resolving-a-merge-conflict-using-the-command-line) 32 | -------------------------------------------------------------------------------- /src/__tests__/header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import { Header } from '../components/Header/Header'; 4 | 5 | describe('Rendering Header Component', () => { 6 | let header = shallow(
); 7 | 8 | it('renders correctly', () => { 9 | expect(header).toMatchSnapshot(); 10 | }); 11 | 12 | it('renders AppBar Component', () => { 13 | expect(header.find('[data-testId="header-appbar"]').exists()).toEqual(true); 14 | }); 15 | 16 | it('renders toolbar component', () => { 17 | expect(header.find('[data-testId="header-toolbar"]').exists()).toEqual(true); 18 | }); 19 | it('renders typography component', () => { 20 | expect(header.find('[data-testId="header-typography"]').exists()).toEqual(true); 21 | }); 22 | it('renders toggle button component', () => { 23 | expect(header.find('[data-testId="header-toggleTheme"]').exists()).toEqual(true); 24 | }); 25 | }); 26 | 27 | describe('toggle Theme', () => { 28 | let toggleTheme = jest.fn(); 29 | let header = shallow(
); 30 | beforeEach(() => { 31 | header.find('[data-testId="header-toggleTheme"]').simulate('click'); 32 | }); 33 | 34 | it('button click event', () => { 35 | expect(header.find('[data-testId="header-toggleTheme"]').props().onClick).toHaveBeenCalled(); 36 | }); 37 | }); 38 | -------------------------------------------------------------------------------- /src/components/NullState.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Error from "./Error"; 3 | 4 | const NullState = ({ 5 | toSearchValue, 6 | vaccineData, 7 | districtCode, 8 | VaccineDataMain, 9 | pin, 10 | pinCodeSearch, 11 | }) => { 12 | console.log(pinCodeSearch); 13 | if ( 14 | toSearchValue === "Find By District" || 15 | toSearchValue === "Find By District & Date(Slots for next 7 days)" 16 | ) { 17 | if (districtCode === "PLEASE SELECT A STATE FIRST") { 18 | return
; 19 | } else if (vaccineData.length > 0) { 20 | return ( 21 |
22 | 23 |
24 | ); 25 | } else if (pinCodeSearch) { 26 | return ( 27 |
28 | 29 |
30 | ); 31 | } else { 32 | return
; 33 | } 34 | } else if ( 35 | toSearchValue === "Find By PinCode & Date" || 36 | toSearchValue === "Find By Pincode & Date(Slots for next 7 days)" 37 | ) { 38 | if (vaccineData.length > 0) { 39 | return ( 40 |
41 | 42 |
43 | ); 44 | } else if (pin.length <= 6 && !pinCodeSearch && vaccineData.length === 0) { 45 | return
; 46 | } else { 47 | return ( 48 |
49 | 50 |
51 | ); 52 | } 53 | } else { 54 | return
; 55 | } 56 | }; 57 | 58 | export default NullState; 59 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cowin", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@date-io/date-fns": "1.3.13", 7 | "@material-ui/core": "^4.11.4", 8 | "@material-ui/icons": "^4.11.2", 9 | "@material-ui/pickers": "^3.3.10", 10 | "@testing-library/jest-dom": "^5.11.4", 11 | "@testing-library/react": "^11.1.0", 12 | "@testing-library/user-event": "^12.1.10", 13 | "chart.js": "^3.3.2", 14 | "date-fns": "^2.21.1", 15 | "mapbox-gl": "^2.3.0", 16 | "react": "^16.14.0", 17 | "react-chartjs-2": "^3.0.3", 18 | "react-dom": "^16.14.0", 19 | "react-map-gl": "^6.1.15", 20 | "react-router-dom": "^5.2.0", 21 | "react-scripts": "4.0.3", 22 | "styled-components": "^5.3.0", 23 | "web-vitals": "^1.0.1" 24 | }, 25 | "scripts": { 26 | "start": "react-scripts start", 27 | "build": "react-scripts build", 28 | "test": "react-scripts test", 29 | "eject": "react-scripts eject", 30 | "test:snap": "npm run test -- -u", 31 | "test:cover": "npm test -- --coverage" 32 | }, 33 | "eslintConfig": { 34 | "extends": [ 35 | "react-app", 36 | "react-app/jest" 37 | ] 38 | }, 39 | "browserslist": { 40 | "production": [ 41 | ">0.2%", 42 | "not dead", 43 | "not op_mini all" 44 | ], 45 | "development": [ 46 | "last 1 chrome version", 47 | "last 1 firefox version", 48 | "last 1 safari version" 49 | ] 50 | }, 51 | "devDependencies": { 52 | "enzyme": "^3.11.0", 53 | "enzyme-adapter-react-16": "^1.15.6", 54 | "enzyme-to-json": "^3.6.2", 55 | "react-test-renderer": "^17.0.2" 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/components/CovidInfo/CovidInfoMain.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { CssBaseline, Container, Tabs, Tab, AppBar } from "@material-ui/core"; 3 | import { makeStyles } from "@material-ui/core/styles"; 4 | 5 | import CovidWorld from "./CovidWorld/CovidWorld"; 6 | // import CovidIndia from './CovidIndia/CovidIndia'; 7 | 8 | const useStyles = makeStyles((theme) => ({ 9 | appbar: { 10 | background: "#16222f", 11 | marginTop: "10px", 12 | borderRadius: "5px", 13 | }, 14 | section_title: { 15 | textAlign: "center", 16 | textTransform: "uppercase", 17 | fontFamily: "Nunito", 18 | marginTop: "10px", 19 | }, 20 | })); 21 | 22 | const CovidInfo = () => { 23 | const classes = useStyles(); 24 | const [tabValue, setTabValue] = useState(0); 25 | 26 | const handleTabChange = (value) => { 27 | setTabValue(value); 28 | }; 29 | 30 | return ( 31 | <> 32 | 33 | 34 | 35 | handleTabChange(val)} 39 | data-testId="covidinfo-tabValue" 40 | > 41 | 42 | {/* Dear developer, dont uncomment the below code, only do when you are working on the covidIndia component */} 43 | {/* */} 44 | 45 | 46 | {/* */} 47 | 48 | 49 | 50 | ); 51 | }; 52 | 53 | export default CovidInfo; 54 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./App.css"; 3 | import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; 4 | import { ThemeProvider } from "styled-components"; 5 | import { useDarkMode } from "./components/useDarkMode"; 6 | import { lightTheme, darkTheme } from "./components/themes"; 7 | import { GlobalStyles } from "./components/globalStyles"; 8 | import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles"; 9 | import { Home, Header, About, Intro, CovidInfoMain } from "./components"; 10 | 11 | const App = () => { 12 | const [theme, toggleTheme] = useDarkMode(); 13 | const themeMode = theme === "light" ? lightTheme : darkTheme; 14 | const appliedTheme = createMuiTheme({ 15 | palette: { 16 | type: theme === "light" ? "light" : "dark", 17 | }, 18 | }); 19 | return ( 20 | 21 | 22 | <> 23 | 24 | 25 |
26 |
27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
42 | 43 | 44 | 45 | 46 | ); 47 | }; 48 | 49 | export default App; 50 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CoWIN Vaccination Slots Checking App. 2 | [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fstephin007%2FCowin-Vaccine-Availablity-Checker.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fstephin007%2FCowin-Vaccine-Availablity-Checker?ref=badge_shield) [![CodeQL](https://github.com/stephin007/Cowin-Vaccine-Availablity-Checker/actions/workflows/codeql-analysis.yml/badge.svg?branch=NEW-UI)](https://github.com/stephin007/Cowin-Vaccine-Availablity-Checker/actions/workflows/codeql-analysis.yml) 3 | 4 | 5 | CoWIN Vaccination Slots Checking App is a user-friendly website 6 | that allow users to find vaccine in nearby available Center. 7 | 8 | ## Features 9 | 10 | - Easy to use 11 | - Ability to search for vaccines based on both pincode and state-disctrict combination 12 | - Installable: can be installed as a native app on any mobile device. [Learn More](https://medium.com/progressivewebapps/how-to-install-a-pwa-to-your-device-68a8d37fadc1) 13 | 14 | ## Technologies Used 15 | 16 | CoWIN Vaccination Slots Checking App uses a number of open source projects : 17 | 18 | - [ReactJS](https://reactjs.org) 19 | - [MaterialUI](https://material-ui.com/) 20 | - [StyledComponents](https://www.styled-components.com/) 21 | 22 | ## Releases(ChangeLog for Each Branch Coming Soon) 23 | 24 | - [Production](https://cowinvaccinetracker.forcommunity.tech/) 25 | - [Staging](https://cowin-vaccine-availablity-checker.vercel.app/) 26 | - [New Features Demo](https://cowinvaccinetracker.stephinreji.me/) 27 | 28 | ## Contribution 29 | 30 | Please see our [Contribution Guidelines](./CONTRIBUTING.md). 31 | 32 | --- 33 | 34 | > _DON'T JUST CLONE, PLEASE LEAVE A STAR 🌟, MOTIVATES US TO ADD MORE FEATURES TO THE PROJECT_ 35 | 36 | --- 37 | 38 | 39 | ## License 40 | [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fstephin007%2FCowin-Vaccine-Availablity-Checker.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fstephin007%2FCowin-Vaccine-Availablity-Checker?ref=badge_large) 41 | -------------------------------------------------------------------------------- /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ NEW-UI, master, staging ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ NEW-UI ] 20 | schedule: 21 | - cron: '45 23 * * 4' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | permissions: 28 | actions: read 29 | contents: read 30 | security-events: write 31 | 32 | strategy: 33 | fail-fast: false 34 | matrix: 35 | language: [ 'javascript' ] 36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ] 37 | # Learn more: 38 | # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed 39 | 40 | steps: 41 | - name: Checkout repository 42 | uses: actions/checkout@v2 43 | 44 | # Initializes the CodeQL tools for scanning. 45 | - name: Initialize CodeQL 46 | uses: github/codeql-action/init@v1 47 | with: 48 | languages: ${{ matrix.language }} 49 | # If you wish to specify custom queries, you can do so here or in a config file. 50 | # By default, queries listed here will override any specified in a config file. 51 | # Prefix the list here with "+" to use these queries and those in the config file. 52 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 53 | 54 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 55 | # If this step fails, then you should remove it and run the build manually (see below) 56 | - name: Autobuild 57 | uses: github/codeql-action/autobuild@v1 58 | 59 | # ℹ️ Command-line programs to run using the OS shell. 60 | # 📚 https://git.io/JvXDl 61 | 62 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 63 | # and modify them (or add more) to build your code if your project 64 | # uses a compiled language 65 | 66 | #- run: | 67 | # make bootstrap 68 | # make release 69 | 70 | - name: Perform CodeQL Analysis 71 | uses: github/codeql-action/analyze@v1 72 | -------------------------------------------------------------------------------- /src/components/Home/Home.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap"); 2 | 3 | .home__intro > h2 { 4 | margin-top: 50px; 5 | padding: 10px; 6 | text-transform: uppercase; 7 | font-weight: bold; 8 | text-align: center; 9 | font-family: "Nunito", sans-serif; 10 | font-size: 35px; 11 | } 12 | 13 | .home_selectionHeader { 14 | display: flex; 15 | justify-content: center; 16 | flex-direction: column; 17 | align-items: stretch; 18 | margin-top: 15px; 19 | } 20 | 21 | .home_selectionHeader h4 { 22 | margin-bottom: 10px; 23 | font-family: "Nunito", sans-serif !important; 24 | } 25 | 26 | .home_selectedHeaders { 27 | display: flex; 28 | justify-content: space-between; 29 | } 30 | 31 | .home_selectedHeaders .form-control { 32 | min-width: 300px !important; 33 | margin-top: 15px; 34 | } 35 | 36 | .districtDateInput { 37 | margin-top: 37px !important; 38 | } 39 | 40 | .empty_error { 41 | margin-top: 10px; 42 | border-radius: 5px; 43 | background-color: #5f235f; 44 | color: whitesmoke; 45 | padding: 10px 10px; 46 | font-family: "Nunito", sans-serif !important; 47 | } 48 | 49 | .home_selectedPin { 50 | display: flex; 51 | justify-content: space-between; 52 | align-items: center; 53 | margin-top: 10px; 54 | } 55 | 56 | .home_selectedPin .home_selectedpincontainer .textField { 57 | width: 500px; 58 | } 59 | 60 | .home_selectedPin .input { 61 | width: 330px; 62 | margin-bottom: -10px; 63 | } 64 | 65 | @media screen and (max-width: 1024px) { 66 | .home { 67 | display: flex; 68 | flex-direction: column; 69 | justify-content: center; 70 | align-items: stretch; 71 | } 72 | .home__intro > h2 { 73 | margin-top: 20px; 74 | font-size: 25px; 75 | } 76 | 77 | .home_selectedHeaders { 78 | display: flex; 79 | flex-direction: column; 80 | } 81 | 82 | .districtDateInput { 83 | margin-top: 20px !important; 84 | } 85 | 86 | .home_selectedHeaders .form-control { 87 | min-width: 270px !important; 88 | margin-top: 15px; 89 | } 90 | 91 | .home_selectedPin .home_selectedpincontainer .textField { 92 | width: 300px; 93 | } 94 | 95 | .home_selectedPin .input { 96 | width: 300px; 97 | } 98 | } 99 | 100 | @media screen and (max-width: 700px) { 101 | .home_selectedPin .home_selectedpincontainer .textField { 102 | width: 250px; 103 | } 104 | 105 | .home_selectedPin .input { 106 | width: 200px; 107 | } 108 | } 109 | 110 | @media screen and (max-width: 600px) { 111 | .home { 112 | display: flex; 113 | flex-direction: column; 114 | justify-content: center; 115 | align-items: stretch; 116 | } 117 | .home__intro > h2 { 118 | margin-top: 20px; 119 | font-size: 25px; 120 | } 121 | 122 | .home_selectedHeaders { 123 | display: flex; 124 | flex-direction: column; 125 | } 126 | 127 | .home_selectedHeaders .form-control { 128 | min-width: 40px !important; 129 | margin-top: 15px; 130 | } 131 | 132 | .home_selectedPin { 133 | display: flex; 134 | flex-direction: column; 135 | align-items: stretch; 136 | margin-top: 10px; 137 | } 138 | 139 | .home_selectedPin .home_selectedpincontainer .textField { 140 | width: 370px; 141 | } 142 | 143 | .home_selectedPin .input { 144 | margin-top: 15px; 145 | width: 410px; 146 | } 147 | } 148 | 149 | @media screen and (max-width: 400px) { 150 | .home { 151 | max-width: 100%; 152 | } 153 | 154 | .home_selectedPin .home_selectedpincontainer .textField { 155 | width: 280px; 156 | } 157 | 158 | .home_selectedPin .input { 159 | width: 320px; 160 | } 161 | 162 | .MuiButtonBase-root { 163 | font-size: 15px !important; 164 | } 165 | } 166 | -------------------------------------------------------------------------------- /src/components/CovidInfo/CovidWorld/CovidWorld.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap"); 2 | 3 | .world_wrapper { 4 | height: 100vh; 5 | width: 100%; 6 | display: flex; 7 | flex-direction: column; 8 | margin-top: 15px; 9 | } 10 | 11 | .world_wrapper .select_options { 12 | display: flex; 13 | flex-direction: column; 14 | } 15 | 16 | /* WORLD CARD CSS STARTS */ 17 | .world_head { 18 | display: flex; 19 | flex-wrap: wrap; 20 | justify-content: space-between; 21 | height: 25vh; 22 | width: 100%; 23 | margin-top: 10px; 24 | font-family: monospace; 25 | } 26 | /* WORLD CARD CSS ENDS */ 27 | 28 | /* WorldChart CSS STARTS */ 29 | .world_head .world_head__WorldChart { 30 | width: 100%; 31 | display: flex; 32 | overflow: auto; 33 | } 34 | 35 | .world_head .world_head__WorldChart .world_head__WorldChart_doughnut { 36 | margin-top: 2rem; 37 | } 38 | /* WorldChart CSS ENDS */ 39 | 40 | /* CONTINENTS CARD CSS STARTS */ 41 | .continents_head { 42 | display: flex; 43 | flex-wrap: wrap; 44 | justify-content: space-between; 45 | height: 122vh; 46 | width: 100%; 47 | margin-top: -30px; 48 | font-family: monospace; 49 | } 50 | 51 | .count .count_heading { 52 | font-size: 20px; 53 | color: cadetblue; 54 | display: flex; 55 | justify-content: space-around; 56 | font-weight: 700; 57 | text-transform: uppercase; 58 | } 59 | 60 | /* CONTINENTS CARD CSS ENDS */ 61 | 62 | /* SINGLE CONTINENT CARD CSS STARTS */ 63 | 64 | .single_continent_head { 65 | width: 100%; 66 | margin-top: -10px; 67 | } 68 | 69 | .continent_select_options { 70 | display: flex; 71 | width: 100%; 72 | flex-direction: column; 73 | } 74 | 75 | /* SINGLE CONTINENT CARD CSS ENDS */ 76 | 77 | /* SINGLE COUNTRY CSS STARTS */ 78 | 79 | .single_country_head { 80 | display: flex; 81 | flex-direction: column; 82 | width: 100%; 83 | font-family: "Nunito", monospace !important; 84 | } 85 | 86 | .single_country_dropdowns { 87 | display: flex; 88 | width: 100%; 89 | flex-direction: row; 90 | justify-content: space-between; 91 | } 92 | 93 | .single_select_option { 94 | min-width: 49% !important; 95 | } 96 | 97 | .single_country_card { 98 | display: flex; 99 | height: 100; 100 | } 101 | 102 | .country_flag_left { 103 | height: 100%; 104 | border-radius: 5px; 105 | } 106 | 107 | .country_card_right { 108 | margin-left: 10px; 109 | height: 100%; 110 | width: 100%; 111 | } 112 | 113 | .country_title { 114 | padding: 10px; 115 | text-transform: uppercase; 116 | } 117 | 118 | .country_data { 119 | display: flex; 120 | flex-direction: column; 121 | padding: 5px; 122 | } 123 | 124 | .country_data_value { 125 | display: flex; 126 | align-items: center; 127 | justify-content: space-between; 128 | } 129 | 130 | .country_data_value h4 { 131 | font-size: 25px; 132 | } 133 | 134 | .country_data_value p { 135 | font-size: 20px; 136 | } 137 | 138 | /* SINGLE COUNTRY CSS ENDS */ 139 | 140 | @media screen and (max-width: 850px) { 141 | .single_country_dropdowns { 142 | display: flex; 143 | width: 100%; 144 | flex-direction: column; 145 | } 146 | } 147 | @media screen and (max-width: 750px) { 148 | .world_head_paper h3 { 149 | font-size: 13px; 150 | } 151 | 152 | .world_head_paper .count { 153 | font-size: 20px; 154 | } 155 | 156 | .single_country_card { 157 | flex-direction: column; 158 | } 159 | 160 | .country_flag_left { 161 | width: 100%; 162 | height: 100%; 163 | } 164 | 165 | .country_card_right { 166 | height: 100%; 167 | width: 100%; 168 | margin: 10px 0 10px 0; 169 | } 170 | } 171 | 172 | @media screen and (max-width: 550px) { 173 | .world_head { 174 | flex-direction: column; 175 | flex-wrap: nowrap; 176 | } 177 | 178 | .world_head_paper { 179 | width: 100%; 180 | height: 50%; 181 | margin-top: 10px; 182 | } 183 | 184 | .world_head_paper h3 { 185 | font-size: 20px; 186 | } 187 | 188 | .world_head_paper .count { 189 | font-size: 15px; 190 | } 191 | 192 | .continents_head { 193 | height: 125vh; 194 | } 195 | 196 | .count .count_heading { 197 | font-size: 29px; 198 | } 199 | } 200 | 201 | @media screen and (max-width: 420px) { 202 | .continents_head { 203 | height: 115vh; 204 | } 205 | } 206 | 207 | @media screen and (max-width: 360px) { 208 | .continents_head { 209 | height: 145vh; 210 | } 211 | } 212 | -------------------------------------------------------------------------------- /src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | import Paper from "@material-ui/core/Paper"; 4 | import Badge from "@material-ui/core/Badge"; 5 | import HealingIcon from "@material-ui/icons/Healing"; 6 | import VerifiedUserRoundedIcon from "@material-ui/icons/VerifiedUserRounded"; 7 | 8 | import "./VaccineDataSingle.css"; 9 | import { Map } from "../Map"; 10 | import { Button } from "@material-ui/core"; 11 | import { MapSharp } from "@material-ui/icons"; 12 | 13 | const useStyles = makeStyles((theme) => ({ 14 | paperMainDiv: { 15 | width: "100%", 16 | }, 17 | })); 18 | const VaccineDataSingle = (vaccine) => { 19 | const classes = useStyles(); 20 | const [showMap, setShowMap] = useState(false); 21 | 22 | return ( 23 |
24 | 29 |
30 |
31 |

32 | {vaccine?.name}{" "} 33 | 34 |

35 |
36 |
37 |
38 |
39 |

Vaccine Name

40 | {vaccine.vaccine === "COVISHIELD" ? ( 41 |

42 | {vaccine?.vaccine} 43 |

44 | ) : ( 45 |

46 | {vaccine?.vaccine} 47 |

48 | )} 49 |
50 | 51 |
52 |

address

53 |

54 | {vaccine?.block_name}, {vaccine?.district_name},{" "} 55 | {vaccine?.state_name} 56 |

57 | 65 |
66 |
67 |

pincode

68 |

{vaccine?.pincode}

69 |
70 |
71 |
Opening Time: {vaccine.from}
72 |
Closing Time: {vaccine.to}
73 |
74 |
75 |
76 |
77 |
78 | 82 |
Available Capacity
{" "} 83 | 84 | 85 |
86 |
87 |

88 | Date: 89 | {vaccine?.date} 90 |

91 |
92 |
93 |
94 |
95 |

Minimum Age

96 |
97 |
98 |

{vaccine?.min_age_limit} years

99 |
100 |
101 |
102 |
103 |

Minimum Fare(₹)

104 |
105 |
106 | {vaccine.fee_type === "Free" ? ( 107 |

{vaccine?.fee_type}

108 | ) : ( 109 |

{vaccine?.fee_type}

110 | )} 111 |
112 |
113 |
114 |

Slots Available

115 |

{vaccine?.slots?.join(",")}

116 |
117 |
118 | {vaccine.lat && vaccine.long && showMap && ( 119 | { 123 | setShowMap(false); 124 | }} 125 | /> 126 | )} 127 | 128 |
129 | ); 130 | }; 131 | 132 | export default VaccineDataSingle; 133 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribution Guide 2 | 3 |
4 | Issues 5 |
    6 |
  • 7 | Make sure that there are no duplicate issues by first checking the 8 | Issues 12 | tab and that the issue that you've selected hasn't already been assigned or 13 | being worked on. 14 |
    • 15 |
  • 16 | The title should follow the following pattern: 17 | [TYPE] <short-description>, where TYPE is one 18 | of feat | fix | docs | 19 | build | ci/cd 20 |
    • 21 |
  • 22 | Explain, in detail, what the issue is about and if it's a bug, add steps to 23 | reproduce it. 24 |
    • 25 |
26 |
27 | 28 |
29 | Branching 30 |
    31 |
  • 32 | When creating branches, please use the following pattern: 33 | type/issue-{issue-number} (f.eg.: feat/issue-12, 34 | fix/issue-87) 35 |
    • 36 |
37 |
38 | 39 |
40 | Project Setup 41 |
    42 |
  • 43 | Fork this repo and then clone the forked repo 44 | (https://github.com/<your-username>/Cowin-Vaccine-Availablity-Checker.git) 45 |
    • 46 |
  • 47 | Run either yarn or npm install inside the root 48 | directory to install all the required dependencies(Please make sure to 49 | remove duplicate/redundant lockfiles) 50 |
    • 51 |
  • 52 | Scripts 53 |
      54 |
    • 55 | start: Run the app in the development mode. Open 56 | http://localhost:3000 to view it in the browser. The page will reload 57 | if you make edits. You will also see any lint errors in the console. 58 |
      • 59 |
    • 60 | build: Builds the app for production to the 61 | build folder. It correctly bundles React in production 62 | mode and optimizes the build for the best performance. The build is 63 | minified and the filenames include the hashes. Your app is ready to be 64 | deployed! See the section about 65 | deployment 68 | for more information. 69 |
      • 70 |
    • 71 | eject:
      Note: this is a one-way operation. Once you eject, you 73 | can’t go back!
      If you aren’t satisfied with the build tool and configuration 75 | choices, you can `eject` at any time. This command will remove the 76 | single build dependency from your project. Instead, it will copy all 77 | the configuration files and the transitive dependencies (webpack, 78 | Babel, ESLint, etc) right into your project so you have full control 79 | over them. All of the commands except `eject` will still work, but 80 | they will point to the copied scripts so you can tweak them. At this 81 | point you’re on your own. You don’t have to ever use `eject`. The 82 | curated feature set is suitable for small and middle deployments, and 83 | you shouldn’t feel obligated to use this feature. However we 84 | understand that this tool wouldn’t be useful if you couldn’t customize 85 | it when you are ready for it. 86 |
      • 87 |
    • test: Run tests using Jest
      • 88 |
    89 |
    • 90 |
91 |
92 | 93 |
94 | Environment Variables 95 |
    96 |
  • 97 | REACT_APP_MAPBOX_ACCESS_TOKEN: TO add this token , Make sure you dont delete the .env.example but make a copy and paste the it the root directory and rename it to .env and paste your token which you will get as you follow the below steps. 98 |
      99 |
    • 100 | Create a MapBox account by navigating to 101 | this link 102 | image 106 |
      • 107 |
    • 108 | After creating and verifying the account, go to 109 | https://accoung.mapbox.com 110 | and copy the access token 111 | Screenshot from 2021-05-28 13-03-08 115 |
      • 116 |
    117 |
    • 118 |
119 |
120 | -------------------------------------------------------------------------------- /src/components/CovidInfo/CovidWorld/CovidWorld.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { 3 | FormControl, 4 | Select, 5 | InputLabel, 6 | MenuItem, 7 | FormHelperText, 8 | } from "@material-ui/core"; 9 | 10 | import "./CovidWorld.css"; 11 | 12 | import { 13 | WorldChart, 14 | SingleContinentChartInformation, 15 | SingleCountryInformation, 16 | } from "./CovidWorldContents"; 17 | 18 | const CovidWorld = ({ value, index }) => { 19 | const [allWorldData, setAllWorldData] = useState([]); 20 | const [continentsData, setContinentsData] = useState({}); 21 | const [countryNames, setCountryNames] = useState([]); 22 | const [countryData, setCountryData] = useState({}); 23 | const [selectOptions, setSelectOptions] = useState(""); 24 | const [loading, setLoading] = useState(true); 25 | // TODOs 26 | // 1. make a select field to filter out the slection 27 | // - get whole world (done) 28 | // - get Data by specific continent (done) 29 | // - get Data by country (done) 30 | 31 | const SelectOptions = [ 32 | "Get COVID19 World Information", 33 | "Get COVID19 Data by a specific Continent", 34 | "Get COVID19 Data by country", 35 | ]; 36 | 37 | const getAllWorldCovidData = async () => { 38 | await fetch(`https://disease.sh/v3/covid-19/all`) 39 | .then((response) => response.json()) 40 | .then((data) => { 41 | setAllWorldData(data); 42 | setLoading(false); 43 | }); 44 | }; 45 | 46 | const getCovidDataOfSingleContinent = async (continentValue) => { 47 | await fetch( 48 | `https://disease.sh/v3/covid-19/continents/${continentValue}?strict=true` 49 | ) 50 | .then((response) => response.json()) 51 | .then((data) => { 52 | setLoading(false); 53 | setContinentsData(data); 54 | setCountryNames(data.countries); 55 | }); 56 | }; 57 | 58 | const getCovidDataOfSingleCountry = async (countryValue) => { 59 | await fetch( 60 | `https://disease.sh/v3/covid-19/countries/${countryValue}?yesterday=yesterday&strict=true` 61 | ) 62 | .then((response) => response.json()) 63 | .then((data) => { 64 | setLoading(false); 65 | setCountryData(data); 66 | console.log(data); 67 | }); 68 | }; 69 | 70 | useEffect(() => { 71 | getAllWorldCovidData(); 72 | }, []); 73 | 74 | return ( 75 | <> 76 | {value === index && ( 77 | <> 78 |
79 |
80 | 81 | 82 | Search... 83 | 84 | 102 | 103 | {selectOptions === "" ? "Please Select a value" : " "} 104 | 105 | 106 |
107 |
108 | {selectOptions === "Get COVID19 World Information" && ( 109 | <> 110 | 111 | 112 | )} 113 | {selectOptions === "Get COVID19 Data by a specific Continent" && ( 114 | <> 115 | 122 | 123 | )} 124 | {selectOptions === "Get COVID19 Data by country" && ( 125 | <> 126 | 135 | 136 | )} 137 |
138 |
139 | 140 | )} 141 | 142 | ); 143 | }; 144 | 145 | export default CovidWorld; 146 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribution Guide 2 | 3 |
4 | Issues 5 |
    6 |
  • 7 | Make sure that there are no duplicate issues by first checking the 8 | Issues 12 | tab and that the issue that you've selected hasn't already been assigned or 13 | being worked on. 14 |
    • 15 |
  • 16 | The title should follow the following pattern: 17 | [TYPE] <short-description>, where TYPE is one 18 | of feat | fix | docs | 19 | build | ci/cd 20 |
    • 21 |
  • 22 | Explain, in detail, what the issue is about and if it's a bug, add steps to 23 | reproduce it. 24 |
    • 25 |
26 |
27 | 28 |
29 | Branching 30 |
    31 |
  • 32 | When creating branches, please use the following pattern: 33 | type/issue-{issue-number} (f.eg.: feat/issue-12, 34 | fix/issue-87) 35 |
    • 36 |
37 |
38 | 39 |
40 | Project Setup 41 |
    42 |
  • 43 | Fork this repo and then clone the forked repo 44 | (https://github.com/<your-username>/Cowin-Vaccine-Availablity-Checker.git) 45 |
    • 46 |
  • 47 | Run either yarn or npm install inside the root 48 | directory to install all the required dependencies(Please make sure to 49 | remove duplicate/redundant lockfiles) 50 |
    • 51 |
  • 52 | Scripts 53 |
      54 |
    • 55 | start: Run the app in the development mode. Open 56 | http://localhost:3000 to view it in the browser. The page will reload 57 | if you make edits. You will also see any lint errors in the console. 58 |
      • 59 |
    • 60 | build: Builds the app for production to the 61 | build folder. It correctly bundles React in production 62 | mode and optimizes the build for the best performance. The build is 63 | minified and the filenames include the hashes. Your app is ready to be 64 | deployed! See the section about 65 | deployment 68 | for more information. 69 |
      • 70 |
    • 71 | eject:
      Note: this is a one-way operation. Once you eject, you 73 | can’t go back!
      If you aren’t satisfied with the build tool and configuration 75 | choices, you can `eject` at any time. This command will remove the 76 | single build dependency from your project. Instead, it will copy all 77 | the configuration files and the transitive dependencies (webpack, 78 | Babel, ESLint, etc) right into your project so you have full control 79 | over them. All of the commands except `eject` will still work, but 80 | they will point to the copied scripts so you can tweak them. At this 81 | point you’re on your own. You don’t have to ever use `eject`. The 82 | curated feature set is suitable for small and middle deployments, and 83 | you shouldn’t feel obligated to use this feature. However we 84 | understand that this tool wouldn’t be useful if you couldn’t customize 85 | it when you are ready for it. 86 |
      • 87 |
    • test: 88 |
        89 |
      1. Start:- Run npm test from root of the project.
        2. 90 |
      2. Update Snapshots:- To Update all failing snapshots run npm run test:snap from root of the project.
        3. 91 |
      3. Test Coverage:- To get the test coverage run npm run test:cover from root of the project.
        4. 92 |
      93 |
      • 94 |
    95 |
    • 96 |
97 |
98 | 99 |
100 | Environment Variables 101 |
    102 |
  • 103 | REACT_APP_MAPBOX_ACCESS_TOKEN: TO add this token , Make sure you dont delete the .env.example but make a copy and paste the it the root directory and rename it to .env and paste your token which you will get as you follow the below steps. 104 |
      105 |
    • 106 | Create a MapBox account by navigating to 107 | this link 108 | image 112 |
      • 113 |
    • 114 | After creating and verifying the account, go to 115 | https://accoung.mapbox.com 116 | and copy the access token 117 | Screenshot from 2021-05-28 13-03-08 121 |
      • 122 |
    123 |
    • 124 |
125 |
126 | -------------------------------------------------------------------------------- /src/components/About/About.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { CircularProgress } from "@material-ui/core"; 3 | 4 | import "./About.css"; 5 | 6 | const About = () => { 7 | const [contributors, setContributors] = useState([]); 8 | const [contributorCount, setContributorCount] = useState(0); 9 | const [loading, setLoading] = useState(true); 10 | 11 | const getContributors = async () => { 12 | fetch( 13 | "https://api.github.com/repos/stephin007/Cowin-Vaccine-Availablity-Checker/contributors" 14 | ) 15 | .then((response) => response.json()) 16 | .then((data) => { 17 | setContributors(data); 18 | setContributorCount(data.length); 19 | setLoading(false); 20 | }); 21 | }; 22 | 23 | useEffect(() => { 24 | getContributors(); 25 | }, []); 26 | 27 | return ( 28 | <> 29 |
30 |
31 |

About the App

32 |
33 |
34 |
35 |
36 |
37 |
38 |

39 | App to checkout the latest COVID19 Vaccination Slots Across 40 | India💉. 41 |

42 |
43 |
44 |
45 |

Details about the vaccine that you will find here

46 |
    47 |
  • Name of the Vaccine
    • 48 |
  • Whether paid or free
    • 49 |
50 |

Highlight features of the app

51 |
    52 |
  • No more OTP!
    • 53 |
  • 54 | You can check for slots before hand and book your slot on the 55 | Aarogya Setu App accordingly 56 |
    • 57 |
  • 58 | You can check for slots across all districts of India, even 59 | using postal codes 60 |
    • 61 |
  • Details about free and paid vaccines is also available
    • 62 |
  • 63 | You can now graphically visualize the whole world's COVID19 64 | Situation. 65 |
    • 66 |
  • 67 | Fully open sourced information made on the latest technology 68 | stack 69 |
    • 70 |
  • We also have a feature of Map*
    • 71 |
72 |

73 | *This feature is in Beta Version, proper coordinates may not be 74 | available. Also this feature is only available in the desktop 75 | version 76 |

77 |

What’s Next?

78 |
    79 |
  • 80 | Notification feature to give you real time alerts when slots 81 | are available 82 |
    • 83 |
84 |
85 |
86 |
87 |
88 |

89 | CONTRIBUTORS {contributorCount} 90 |

91 |
92 | {!loading ? ( 93 | contributors.map((contributor) => { 94 | const { contributions, avatar_url, login, type, html_url } = 95 | contributor; 96 | return ( 97 |
98 |
99 |
100 | contributor avatar 101 |
102 |
103 | {login} 104 |
105 |

No of Contributions :

106 | {contributions} 107 |
108 |
109 | {login === "stephin007" || login === "Justinnn07" ? ( 110 |

Maintainer

111 | ) : ( 112 |

{type}

113 | )} 114 |
115 |
116 |
117 |
118 | ); 119 | }) 120 | ) : ( 121 | <> 122 |
133 | 134 |
135 | 136 | )} 137 |
138 |
139 |
140 | 141 | ); 142 | }; 143 | 144 | export default About; 145 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | - Demonstrating empathy and kindness toward other people 21 | - Being respectful of differing opinions, viewpoints, and experiences 22 | - Giving and gracefully accepting constructive feedback 23 | - Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | - Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | - The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | - Trolling, insulting or derogatory comments, and personal or political attacks 33 | - Public or private harassment 34 | - Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | - Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | . 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /src/components/Header/Header.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { makeStyles, useTheme } from '@material-ui/core/styles'; 3 | import AppBar from '@material-ui/core/AppBar'; 4 | import Toolbar from '@material-ui/core/Toolbar'; 5 | import Typography from '@material-ui/core/Typography'; 6 | import IconButton from '@material-ui/core/IconButton'; 7 | import MenuIcon from '@material-ui/icons/Menu'; 8 | import MenuItem from '@material-ui/core/MenuItem'; 9 | import Menu from '@material-ui/core/Menu'; 10 | import useMediaQuery from '@material-ui/core/useMediaQuery'; 11 | import './Header.css'; 12 | import { Link } from 'react-router-dom'; 13 | import Brightness7Icon from '@material-ui/icons/Brightness7'; 14 | import Brightness2Icon from '@material-ui/icons/Brightness2'; 15 | 16 | const useStyles = makeStyles((theme) => ({ 17 | root: { 18 | flexGrow: 1, 19 | }, 20 | menuButton: { 21 | marginRight: theme.spacing(2), 22 | }, 23 | title: { 24 | [theme.breakpoints.down('xs')]: { 25 | flexGrow: 1, 26 | }, 27 | }, 28 | headerOptions: { 29 | display: 'flex', 30 | flex: 1, 31 | justifyContent: 'flex-end', 32 | }, 33 | })); 34 | 35 | export const Header = (props) => { 36 | const classes = useStyles(); 37 | const [anchorEl, setAnchorEl] = useState(null); 38 | const open = Boolean(anchorEl); 39 | const theme = useTheme(); 40 | const isMobile = useMediaQuery(theme.breakpoints.down('xs')); 41 | 42 | const handleMenu = (event) => { 43 | setAnchorEl(event.currentTarget); 44 | }; 45 | 46 | return ( 47 |
48 | 49 | 50 | 56 | 57 | 63 | 64 | 65 | 66 | {isMobile ? ( 67 | <> 68 | 75 | 76 | 77 | setAnchorEl(null)} 91 | > 92 | {props.theme === 'light' ? ( 93 | <> 94 | 95 | About 96 | 97 | 98 | COVID19 Information 99 | 100 | 101 | ) : ( 102 | <> 103 | 111 | About 112 | 113 | 121 | COVID19 Information 122 | 123 | 124 | )} 125 | 131 | {props.theme === 'light' ? ( 132 | Contribute 133 | ) : ( 134 | Contribute 135 | )} 136 | {' '} 137 | 138 | {props.theme === 'light' ? ( 139 | 140 | ) : ( 141 | 142 | )} 143 | 144 | 145 | 146 | ) : ( 147 |
148 | {props.theme === 'light' ? ( 149 | <> 150 | 158 | About 159 | 160 | 168 | COVID19 Information 169 | 170 | 171 | ) : ( 172 | <> 173 | 181 | About 182 | 183 | 191 | COVID19 Information 192 | 193 | 194 | )} 195 | 196 | {props.theme === 'light' ? ( 197 | Contribute 198 | ) : ( 199 | Contribute 200 | )} 201 | 202 | 203 | {' '} 204 | {props.theme === 'light' ? ( 205 | 206 | ) : ( 207 | 208 | )} 209 | 210 |
211 | )} 212 | 213 | 214 |
215 | ); 216 | }; 217 | 218 | export default Header; 219 | -------------------------------------------------------------------------------- /src/components/About/About.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Fira+Code&display=swap"); 2 | 3 | body { 4 | background-color: #f9fafb; 5 | } 6 | 7 | .about-container { 8 | max-width: 1100px; 9 | margin: auto; 10 | margin-top: 10px; 11 | overflow: hidden; 12 | padding: 0 2rem; 13 | font-family: "Fira Code", "monospace"; 14 | } 15 | 16 | .about-head { 17 | display: flex; 18 | justify-content: space-between; 19 | align-items: center; 20 | margin-bottom: 10px; 21 | } 22 | 23 | .about-head p { 24 | font-weight: bold; 25 | font-size: large; 26 | } 27 | 28 | .about_section { 29 | max-width: 100%; 30 | display: flex; 31 | } 32 | 33 | .about_section_left { 34 | max-width: 60%; 35 | max-height: 100vh; 36 | display: flex; 37 | flex-direction: column; 38 | } 39 | 40 | .about_section_main_heading h4 { 41 | color: #333333; 42 | text-transform: capitalize; 43 | font-size: 20px; 44 | } 45 | 46 | .about_section_subheadings h3 { 47 | text-transform: uppercase; 48 | margin-bottom: 10px; 49 | margin-top: 10px; 50 | } 51 | 52 | .about_section_subheadings p { 53 | text-transform: capitalize; 54 | font-weight: 300; 55 | margin-bottom: 10px; 56 | margin-top: 10px; 57 | } 58 | 59 | .about_section_right { 60 | max-width: 30%; 61 | } 62 | 63 | .about_section_right .contributor_text { 64 | background-color: teal; 65 | border-radius: 10px; 66 | padding: 10px; 67 | width: 410px; 68 | } 69 | 70 | .about_section_right .contributor_text h3 { 71 | color: whitesmoke; 72 | margin: 10px 130px; 73 | display: flex; 74 | justify-content: center; 75 | align-items: center; 76 | } 77 | 78 | .about_section_right .contributor_text h3 span { 79 | background-color: #004d4d; 80 | display: flex; 81 | align-items: center; 82 | justify-content: center; 83 | padding: 5px; 84 | width: auto; 85 | height: 30px; 86 | margin-left: 10px; 87 | border-radius: 5px; 88 | } 89 | 90 | .contributors_block { 91 | margin-top: 10px; 92 | margin-bottom: 5px; 93 | background-color: #fff; 94 | border-radius: 5px; 95 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 96 | width: 410px; 97 | padding: 10px; 98 | } 99 | 100 | .contributors_block .contributor_individual { 101 | display: flex; 102 | } 103 | 104 | .contributors_block .contributor_individual .contributor_image { 105 | max-width: 10%; 106 | } 107 | 108 | .contributors_block .contributor_individual .contributor_image img { 109 | width: 70px; 110 | border-radius: 50%; 111 | } 112 | 113 | .contributors_block .contributor_individual .contributor_detail { 114 | max-width: 90%; 115 | margin-left: 50px; 116 | } 117 | 118 | .contributors_block .contributor_individual .contributor_detail a { 119 | text-decoration: underline; 120 | font-size: 20px; 121 | } 122 | 123 | .contributors_block 124 | .contributor_individual 125 | .contributor_detail 126 | .contribution_count { 127 | margin-top: 5px; 128 | width: 300px; 129 | display: flex; 130 | align-items: center; 131 | justify-content: space-between; 132 | } 133 | 134 | .contributors_block 135 | .contributor_individual 136 | .contributor_detail 137 | .contribution_count 138 | p { 139 | color: #333333; 140 | } 141 | 142 | .contributors_block 143 | .contributor_individual 144 | .contributor_detail 145 | .contribution_count 146 | strong { 147 | background-color: teal; 148 | display: flex; 149 | align-items: center; 150 | justify-content: center; 151 | padding: 10px; 152 | width: 40px; 153 | height: 40px; 154 | border-radius: 50%; 155 | color: whitesmoke; 156 | } 157 | 158 | .contributors_block 159 | .contributor_individual 160 | .contributor_detail 161 | .contributor_type 162 | p { 163 | text-transform: capitalize; 164 | font-size: 15px; 165 | font-weight: 500; 166 | color: blueviolet; 167 | } 168 | 169 | @media screen and (max-width: 1200px) { 170 | .about_section { 171 | flex-direction: column; 172 | } 173 | 174 | .about_section_left { 175 | max-width: 100%; 176 | max-height: 100vh; 177 | margin-bottom: 30px; 178 | } 179 | 180 | .about_section_main_heading h4 { 181 | font-size: 15px; 182 | } 183 | 184 | .about_section_subheadings li { 185 | font-size: 15px; 186 | margin-left: -25px; 187 | } 188 | 189 | .about_section_right { 190 | max-width: 100%; 191 | } 192 | 193 | .about_section_right .contributor_text { 194 | width: 100%; 195 | margin-top: 50px; 196 | } 197 | 198 | .about_section_right .contributor_text h3 { 199 | margin: 10px 200px; 200 | } 201 | 202 | .contributors_block { 203 | width: 100%; 204 | } 205 | 206 | .contributors_block .contributor_individual { 207 | display: flex; 208 | align-items: center; 209 | justify-content: space-evenly; 210 | } 211 | 212 | .contributors_block .contributor_individual .contributor_image { 213 | max-width: 10%; 214 | display: flex; 215 | align-items: center; 216 | justify-content: center; 217 | } 218 | 219 | .contributors_block .contributor_individual .contributor_image img { 220 | width: 75px; 221 | border-radius: 10px; 222 | margin-left: 25px; 223 | } 224 | 225 | .contributors_block .contributor_individual .contributor_detail a { 226 | font-size: 20px; 227 | } 228 | 229 | .contributors_block 230 | .contributor_individual 231 | .contributor_detail 232 | .contribution_count { 233 | margin-top: 5px; 234 | width: 250px; 235 | display: flex; 236 | align-items: center; 237 | justify-content: space-between; 238 | } 239 | 240 | .about-container { 241 | width: 550px; 242 | } 243 | 244 | .about-head h1 { 245 | font-weight: bold; 246 | font-size: 20px; 247 | } 248 | 249 | h4 { 250 | font-size: 15px; 251 | } 252 | } 253 | 254 | @media screen and (max-width: 700px) { 255 | .about_section_left { 256 | margin-bottom: 70px; 257 | } 258 | 259 | .about_section_main_heading h4 { 260 | font-size: 15px; 261 | } 262 | 263 | .about_section_subheadings h3 { 264 | font-size: 15px; 265 | } 266 | 267 | .about_section_subheadings p { 268 | font-size: 15px; 269 | } 270 | 271 | .about_section_subheadings li { 272 | font-size: 15px; 273 | margin-left: -25px; 274 | } 275 | 276 | .about_section_right { 277 | margin-left: -10px; 278 | } 279 | 280 | .about_section_right .contributor_text h3 { 281 | margin: 10px 100px; 282 | } 283 | 284 | .contributors_block .contributor_individual .contributor_image img { 285 | width: 75px; 286 | border-radius: 10px; 287 | margin-left: 35px; 288 | } 289 | 290 | .contributors_block .contributor_individual .contributor_detail a { 291 | font-size: 18px; 292 | } 293 | 294 | .about-container { 295 | width: 350px; 296 | } 297 | 298 | .about-head p { 299 | font-weight: bold; 300 | font-size: 13px; 301 | } 302 | 303 | .about-head h1 { 304 | font-weight: bold; 305 | font-size: 10px; 306 | } 307 | 308 | h4 { 309 | font-size: 10px; 310 | } 311 | } 312 | 313 | @media screen and (max-width: 500px) { 314 | .about_section_left { 315 | margin-bottom: -10px; 316 | } 317 | 318 | .about_section_main_heading h4 { 319 | font-size: 15px; 320 | } 321 | 322 | .about_section_subheadings h3 { 323 | font-size: 12px; 324 | } 325 | 326 | .about_section_subheadings p { 327 | font-size: 10px; 328 | } 329 | 330 | .about_section_subheadings li { 331 | font-size: 10px; 332 | margin-left: -25px; 333 | } 334 | 335 | .about_section_right { 336 | margin-left: -10px; 337 | } 338 | 339 | .about_section_right .contributor_text h3 { 340 | margin: 10px 60px; 341 | } 342 | 343 | .contributors_block .contributor_individual .contributor_detail a { 344 | font-size: 15px; 345 | } 346 | 347 | .contributors_block .contributor_individual .contributor_image { 348 | max-width: 10%; 349 | display: flex; 350 | align-items: center; 351 | justify-content: center; 352 | } 353 | 354 | .contributors_block .contributor_individual .contributor_image img { 355 | width: 45px; 356 | margin-right: -10px; 357 | border-radius: 50%; 358 | } 359 | 360 | .contributors_block .contributor_individual .contributor_detail a { 361 | font-size: 15px; 362 | } 363 | 364 | .contributors_block 365 | .contributor_individual 366 | .contributor_detail 367 | .contribution_count { 368 | margin-top: 5px; 369 | width: 200px; 370 | display: flex; 371 | align-items: center; 372 | justify-content: flex-start; 373 | } 374 | 375 | .contributors_block 376 | .contributor_individual 377 | .contributor_detail 378 | .contribution_count 379 | p { 380 | font-size: 10px; 381 | margin-right: 20px; 382 | } 383 | 384 | .contributors_block 385 | .contributor_individual 386 | .contributor_detail 387 | .contribution_count 388 | strong { 389 | padding: 5px; 390 | width: 20px; 391 | height: 20px; 392 | border-radius: 50%; 393 | color: whitesmoke; 394 | } 395 | 396 | .contributors_block 397 | .contributor_individual 398 | .contributor_detail 399 | .contributor_type 400 | p { 401 | text-transform: capitalize; 402 | font-size: 15px; 403 | font-weight: 500; 404 | color: blueviolet; 405 | } 406 | 407 | .about-container { 408 | width: 250px; 409 | display: flex; 410 | flex-direction: column; 411 | } 412 | 413 | .about-head p { 414 | font-size: 10px; 415 | } 416 | 417 | .about-head h1 { 418 | font-weight: bold; 419 | font-size: 10px; 420 | } 421 | 422 | h4 { 423 | font-size: 10px; 424 | } 425 | } 426 | 427 | @media screen and (max-width: 360px) { 428 | .about_section_left { 429 | margin-bottom: 150px; 430 | } 431 | 432 | .about_section_left { 433 | margin-bottom: -10px; 434 | } 435 | 436 | .about_section_main_heading h4 { 437 | font-size: 15px; 438 | } 439 | 440 | .about_section_subheadings h3 { 441 | font-size: 12px; 442 | } 443 | 444 | .about_section_subheadings p { 445 | font-size: 10px; 446 | } 447 | 448 | .about_section_subheadings li { 449 | font-size: 10px; 450 | margin-left: -25px; 451 | } 452 | 453 | .about_section_right { 454 | margin-left: -10px; 455 | } 456 | } 457 | -------------------------------------------------------------------------------- /src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Raleway&family=Roboto&family=Ubuntu&display=swap"); 2 | @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap"); 3 | /* font-family: 'Raleway', sans-serif; 4 | font-family: 'Roboto', sans-serif; 5 | font-family: 'Ubuntu', sans-serif; */ 6 | 7 | .wrapper { 8 | background-color: #333333; 9 | } 10 | 11 | .wrapper-w-map { 12 | display: grid; 13 | grid-template-columns: 1fr 1fr; 14 | grid-template-rows: 1fr 1fr; 15 | grid-template-areas: 16 | "left right" 17 | "map map"; 18 | } 19 | 20 | .wrapper-wo-map { 21 | height: 32vh; 22 | display: flex; 23 | } 24 | 25 | .map-container { 26 | grid-area: map; 27 | padding: 0; 28 | margin: 0; 29 | } 30 | 31 | .wrapper > * { 32 | padding: 20px; 33 | } 34 | 35 | .wrapper-w-map .paper-left { 36 | grid-area: left; 37 | } 38 | 39 | .paper-left h1 { 40 | /* color: white; */ 41 | text-align: center; 42 | color: black; 43 | text-transform: uppercase; 44 | font-family: "Ubuntu", sans-serif; 45 | font-size: 18px; 46 | letter-spacing: 1px; 47 | } 48 | .paper-left_vaccine_head { 49 | display: flex; 50 | justify-content: space-between; 51 | align-items: center; 52 | } 53 | 54 | .paper-left_vaccine_head h3 { 55 | text-transform: uppercase; 56 | font-weight: bold; 57 | color: #275efe; 58 | font-family: "Fira Code", monospace; 59 | letter-spacing: 2px; 60 | } 61 | .paper-left_vaccine_head p { 62 | text-transform: uppercase; 63 | font-weight: bold; 64 | color: black; 65 | /* background-color: lightblue; */ 66 | box-shadow: inset 0 0 35px 5px rgba(0, 0, 0, 0.25), 67 | inset 0 2px 1px 1px rgba(255, 255, 255, 0.9), 68 | inset 0 -2px 1px 0 rgba(0, 0, 0, 0.25); 69 | font-family: monospace; 70 | background-color: #fff; 71 | border: 1px solid; 72 | padding: 10px; 73 | border-radius: 7px; 74 | text-align: center; 75 | } 76 | 77 | .paper-left .paper-left_content { 78 | display: flex; 79 | justify-content: space-between; 80 | align-items: center; 81 | margin-top: 10px; 82 | } 83 | 84 | .paper-left .paper-left_content h3 { 85 | /* color: #BB86FC; */ 86 | color: #212121; 87 | font-weight: bold; 88 | text-transform: capitalize; 89 | } 90 | 91 | .paper-left .paper-left_content p { 92 | /* color: #F48FB1; */ 93 | color: red; 94 | text-align: center; 95 | /* color: black; */ 96 | margin-top: 5px; 97 | text-transform: capitalize; 98 | font-family: "Raleway", sans-serif; 99 | font-size: 16px; 100 | letter-spacing: 1px; 101 | } 102 | 103 | .paper-left .paper-left_time { 104 | display: flex; 105 | justify-content: space-evenly; 106 | margin-top: 5px; 107 | } 108 | .paper-left .paper-left_time .time:hover { 109 | color: #002060; 110 | } 111 | .paper-left .paper-left_time .time { 112 | padding: 10px; 113 | border-radius: 7px; 114 | font-weight: bold; 115 | } 116 | 117 | .paper-left .paper-left_time .open-time { 118 | /* background-color: rgb(20, 209, 20); 119 | -moz-box-shadow: inset 0 0 10px green; 120 | -webkit-box-shadow: inset 0 0 10px green; 121 | box-shadow: inset 0 0 10px green; */ 122 | background-color: white; 123 | color: black; 124 | border: 1px solid; 125 | box-shadow: inset 2px 0px 10px 2px white, inset 0px 0px 4px 0px black; 126 | font-family: "Raleway", sans-serif; 127 | } 128 | 129 | .paper-left .paper-left_time .close-time { 130 | /* background-color: rgb(231, 31, 125); 131 | background-color: white; */ 132 | color: black; 133 | background-color: white; 134 | box-shadow: inset 2px 0px 10px 2px white, inset 0px 0px 4px 0px black; 135 | border: 1px solid; 136 | font-family: "Raleway", sans-serif; 137 | } 138 | 139 | .wrapper-w-map .paper-right { 140 | grid-area: right; 141 | } 142 | 143 | .paper-right_Badges { 144 | display: flex; 145 | justify-content: space-between; 146 | } 147 | 148 | .paper-right_Badges h5 { 149 | margin-right: 10px; 150 | /* color: rgb(241, 11, 11); */ 151 | color: #275efe; 152 | font-family: "Roboto", sans-serif; 153 | font-size: 20px; 154 | } 155 | 156 | .paper-right_Badges .healing_icon { 157 | color: white; 158 | } 159 | 160 | .paper-right_Badges p { 161 | color: #275efe; 162 | font-size: 15px; 163 | } 164 | 165 | .paper-right_Badges p span { 166 | color: rgb(255, 255, 255); 167 | color: black; 168 | font-family: monospace; 169 | font-size: 20px; 170 | } 171 | 172 | .paper-right_age { 173 | display: flex; 174 | justify-content: space-between; 175 | align-items: center; 176 | margin-top: 10px; 177 | } 178 | 179 | .paper-right_age .age_text h3 { 180 | color: rgb(10, 192, 107); 181 | color: black; 182 | font-family: "Raleway", sans-serif; 183 | font-size: 17px; 184 | } 185 | 186 | .paper-right_age .age_content p { 187 | margin-bottom: 5px; 188 | font-size: 19px; 189 | font-weight: 600; 190 | color: red; 191 | } 192 | 193 | .paper-right_age .age_content { 194 | height: 25px; 195 | width: 75px; 196 | padding: 5px; 197 | border-radius: 3px; 198 | display: flex; 199 | justify-content: center; 200 | align-items: center; 201 | } 202 | 203 | .paper-right_slots h3 { 204 | text-align: center; 205 | font-weight: 700; 206 | color: #275efe; 207 | margin: 5px; 208 | } 209 | 210 | .paper-right_slots p { 211 | color: rgb(100, 4, 4); 212 | color: #374957; 213 | font-size: 17px; 214 | text-align: center; 215 | } 216 | 217 | /*Media Queries*/ 218 | @media screen and (max-width: 1496px) { 219 | .wrapper { 220 | height: 37vh; 221 | } 222 | } 223 | @media screen and (max-width: 1024px) { 224 | .wrapper { 225 | height: 37vh; 226 | width: 100%; 227 | } 228 | 229 | .map_button { 230 | display: none !important; 231 | } 232 | } 233 | @media screen and (max-width: 916px) { 234 | .paper-left .paper-left_content p { 235 | font-size: 15px; 236 | } 237 | .paper-left .paper-left_time .open-time { 238 | font-size: 15px; 239 | } 240 | .paper-left .paper-left_time .close-time { 241 | font-size: 15px; 242 | } 243 | } 244 | @media screen and (max-width: 890px) { 245 | .paper-left h1 { 246 | font-size: 16px; 247 | } 248 | .paper-left .paper-left_time .open-time { 249 | font-size: 13px; 250 | } 251 | .paper-left .paper-left_time .close-time { 252 | font-size: 13px; 253 | } 254 | .MuiSvgIcon-root { 255 | font-size: 1.18rem; 256 | } 257 | } 258 | 259 | @media screen and (max-width: 812px) { 260 | .wrapper { 261 | height: 40vh; 262 | } 263 | .paper-left .paper-left_content p { 264 | font-size: 12px; 265 | } 266 | .paper-left .paper-left_time { 267 | margin-top: 20px; 268 | } 269 | .paper-left h1 { 270 | font-size: 14px; 271 | } 272 | .paper-right_Badges h5 { 273 | font-size: 16px; 274 | } 275 | .paper-right_slots p { 276 | font-size: 15px; 277 | } 278 | .paper-left .paper-left_time .open-time { 279 | font-size: 11px; 280 | } 281 | .paper-left .paper-left_time .close-time { 282 | font-size: 11px; 283 | } 284 | } 285 | @media screen and (max-width: 722px) { 286 | .wrapper { 287 | height: 42vh; 288 | } 289 | 290 | .paper-left .paper-left_time .open-time { 291 | font-size: 10px; 292 | } 293 | .paper-left .paper-left_time .close-time { 294 | font-size: 10px; 295 | } 296 | .paper-left .paper-left_content p { 297 | font-size: 11px; 298 | } 299 | .paper-right_Badges p { 300 | font-size: 12px; 301 | } 302 | .paper-left .paper-left_time { 303 | margin-top: 30px; 304 | } 305 | } 306 | @media screen and (max-width: 690px) { 307 | .wrapper { 308 | height: 47vh; 309 | } 310 | .paper-left_vaccine_head h3 { 311 | font-size: 15px; 312 | } 313 | .paper-right_Badges h5 { 314 | font-size: 14px; 315 | } 316 | .paper-right_Badges p { 317 | font-size: 10px; 318 | } 319 | .paper-left .paper-left_content h3 { 320 | font-size: 13px; 321 | } 322 | .paper-left .paper-left_time .open-time { 323 | font-size: 10px; 324 | } 325 | .paper-left .paper-left_time .close-time { 326 | font-size: 10px; 327 | } 328 | .paper-left .paper-left_content p { 329 | font-size: 11px; 330 | } 331 | .paper-right_Badges p { 332 | font-size: 12px; 333 | } 334 | } 335 | @media screen and (max-width: 646px) { 336 | .wrapper { 337 | height: 108vh; 338 | flex-direction: column; 339 | } 340 | 341 | .paper-left { 342 | width: 90%; 343 | } 344 | 345 | .paper-left_vaccine_head { 346 | flex-direction: column; 347 | } 348 | 349 | .paper-left_vaccine_head h3 { 350 | font-size: 15px; 351 | margin-bottom: 10px; 352 | } 353 | .paper-left .paper-left_content h3 { 354 | font-size: 15px; 355 | } 356 | .paper-left_vaccine_head p { 357 | padding: 5px; 358 | font-size: 15px; 359 | border-radius: 7px; 360 | text-align: center; 361 | } 362 | .paper-left .paper-left_content p { 363 | font-size: 15px; 364 | } 365 | .paper-left p { 366 | width: 100%; 367 | } 368 | .paper-left .paper-left_time { 369 | margin-top: 20px; 370 | } 371 | .paper-left .paper-left_content { 372 | display: flex; 373 | flex-direction: column; 374 | } 375 | 376 | .paper-left .paper-left_time { 377 | display: flex; 378 | flex-direction: column; 379 | text-align: center; 380 | letter-spacing: 2px; 381 | } 382 | 383 | .paper-left .paper-left_time .time { 384 | margin-top: 5px; 385 | } 386 | 387 | .paper-right { 388 | width: 90%; 389 | } 390 | 391 | .paper-right_Badges h5 { 392 | margin-top: 5px; 393 | margin-right: 3px; 394 | font-weight: bold; 395 | font-size: 11px; 396 | } 397 | 398 | .paper-right_Badges .healing_icon { 399 | font-size: 20px; 400 | } 401 | 402 | .paper-right_Badges p { 403 | margin-top: 5px; 404 | font-size: 15px; 405 | } 406 | 407 | .paper-right_Badges p span { 408 | font-size: 15px; 409 | } 410 | 411 | .paper-right_age { 412 | margin-top: 3px; 413 | } 414 | 415 | .paper-right_age .age_text h3 { 416 | font-size: 13px; 417 | } 418 | 419 | .paper-right_age .age_content { 420 | height: 15px; 421 | width: 65px; 422 | padding: 3px; 423 | border-radius: 3px; 424 | } 425 | 426 | .paper-right_age .age_content p { 427 | margin-bottom: 1px; 428 | font-size: 13px; 429 | } 430 | 431 | .paper-right_slots h3 { 432 | text-align: center; 433 | font-weight: 700; 434 | margin: 3px; 435 | } 436 | 437 | .paper-right_slots p { 438 | font-size: 15px; 439 | text-align: center; 440 | } 441 | } 442 | 443 | @media screen and (max-width: 500px) { 444 | .wrapper { 445 | height: auto; 446 | } 447 | } 448 | -------------------------------------------------------------------------------- /src/components/CovidInfo/CovidWorld/CovidWorldContents.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { 3 | CircularProgress, 4 | FormControl, 5 | Select, 6 | InputLabel, 7 | MenuItem, 8 | FormHelperText, 9 | Container, 10 | makeStyles, 11 | Paper, 12 | } from "@material-ui/core"; 13 | 14 | import { Line, Doughnut } from "react-chartjs-2"; 15 | import "./CovidWorld.css"; 16 | 17 | const useStyles = makeStyles({ 18 | progress: { 19 | textAlign: "center", 20 | position: "absolute", 21 | left: "50%", 22 | top: "50%", 23 | transform: "translate(-50%, -50%)", 24 | }, 25 | chart: { 26 | marginTop: "2rem", 27 | }, 28 | }); 29 | 30 | const continentNames = [ 31 | "North America", 32 | "South America", 33 | "Europe", 34 | "Africa", 35 | "Asia", 36 | "Australia-Oceania", 37 | ]; 38 | export const WorldChart = ({ allWorldData, loading }) => { 39 | const classes = useStyles(); 40 | const initialData = { 41 | labels: [ 42 | "Active per one million", 43 | "Affected Countries", 44 | "critical per million", 45 | "deaths Per OneMillion", 46 | "one Case Per People", 47 | "one Death Per People", 48 | "one Test Per People", 49 | "today's Deaths", 50 | ], 51 | datasets: [ 52 | { 53 | label: "DataSet #1", 54 | fill: true, 55 | data: [ 56 | allWorldData.activePerOneMillion, 57 | allWorldData.affectedCountries, 58 | allWorldData.criticalPerOneMillion, 59 | allWorldData.deathsPerOneMillion, 60 | allWorldData.oneCasePerPeople, 61 | allWorldData.oneDeathPerPeople, 62 | allWorldData.oneTestPerPeople, 63 | allWorldData.todayDeaths, 64 | ], 65 | backgroundColor: [ 66 | "rgba(153, 102, 255, 0.2)", 67 | "rgba(255, 99, 132, 0.2)", 68 | "rgba(54, 162, 235, 0.2)", 69 | "rgba(255, 206, 86, 0.2)", 70 | "rgba(75, 192, 192, 0.2)", 71 | "rgba(255, 159, 64, 0.2)", 72 | ], 73 | borderColor: [ 74 | "rgba(153, 102, 255, 1)", 75 | "rgba(255, 99, 132, 1)", 76 | "rgba(54, 162, 235, 1)", 77 | "rgba(255, 206, 86, 1)", 78 | "rgba(75, 192, 192, 1)", 79 | "rgba(255, 159, 64, 1)", 80 | ], 81 | borderWidth: 1, 82 | }, 83 | ], 84 | }; 85 | const additionalData1 = { 86 | labels: [ 87 | "Active Cases per million", 88 | "critical", 89 | "recovered Per One Million", 90 | "tests Per One Million", 91 | "today's Cases", 92 | "today's Recoveries", 93 | ], 94 | datasets: [ 95 | { 96 | label: "DataSet #2", 97 | fill: true, 98 | data: [ 99 | allWorldData.casesPerOneMillion, 100 | allWorldData.critical, 101 | allWorldData.recoveredPerOneMillion, 102 | allWorldData.testsPerOneMillion, 103 | allWorldData.todayCases, 104 | allWorldData.todayRecovered, 105 | ], 106 | backgroundColor: [ 107 | "rgba(255, 159, 64, 0.2)", 108 | "rgba(255, 206, 86, 0.2)", 109 | "rgba(255, 99, 132, 0.2)", 110 | "rgba(54, 162, 235, 0.2)", 111 | "rgba(75, 192, 192, 0.2)", 112 | "rgba(153, 102, 255, 0.2)", 113 | ], 114 | borderColor: [ 115 | "rgba(255, 159, 64, 1)", 116 | "rgba(255, 206, 86, 1)", 117 | "rgba(255, 99, 132, 1)", 118 | "rgba(54, 162, 235, 1)", 119 | "rgba(75, 192, 192, 1)", 120 | "rgba(153, 102, 255, 1)", 121 | ], 122 | borderWidth: 1, 123 | }, 124 | ], 125 | }; 126 | const additionalData2 = { 127 | labels: [ 128 | "Total Active Cases", 129 | "Total Cases", 130 | "deaths", 131 | "population", 132 | "recovered", 133 | "tests", 134 | ], 135 | datasets: [ 136 | { 137 | label: "DataSet #3", 138 | fill: true, 139 | data: [ 140 | allWorldData.active, 141 | allWorldData.cases, 142 | allWorldData.deaths, 143 | allWorldData.population, 144 | allWorldData.recovered, 145 | allWorldData.tests, 146 | ], 147 | backgroundColor: [ 148 | "rgba(54, 162, 235, 0.2)", 149 | "rgba(255, 99, 132, 0.2)", 150 | "rgba(255, 206, 86, 0.2)", 151 | "rgba(75, 192, 192, 0.2)", 152 | "rgba(153, 102, 255, 0.2)", 153 | "rgba(255, 159, 64, 0.2)", 154 | ], 155 | borderColor: [ 156 | "rgba(54, 162, 235, 1)", 157 | "rgba(255, 99, 132, 1)", 158 | "rgba(255, 206, 86, 1)", 159 | "rgba(75, 192, 192, 1)", 160 | "rgba(153, 102, 255, 1)", 161 | "rgba(255, 159, 64, 1)", 162 | ], 163 | borderWidth: 1, 164 | }, 165 | ], 166 | }; 167 | 168 | return ( 169 | 170 | {!loading ? ( 171 | <> 172 |

Swipe left to see more details...

173 |
174 | 178 | 182 | 186 |
187 | 188 | ) : ( 189 |
190 | 191 |
192 | )} 193 | 194 | ); 195 | }; 196 | 197 | export const SingleContinentChartInformation = ({ 198 | loading, 199 | getCovidDataOfSingleContinent, 200 | continentsData, 201 | }) => { 202 | const [continentValue, setContinentValue] = useState(""); 203 | const classes = useStyles(); 204 | const continentData = { 205 | labels: [ 206 | "Active", 207 | "Cases", 208 | "Critical", 209 | "Recovered", 210 | "Tests", 211 | "Today's Cases", 212 | "Today's Deaths", 213 | "Today's Recoveries", 214 | ], 215 | datasets: [ 216 | { 217 | fill: true, 218 | data: [ 219 | continentsData.active, 220 | continentsData.cases, 221 | continentsData.critical, 222 | continentsData.recovered, 223 | continentsData.tests, 224 | continentsData.todayCases, 225 | continentsData.todayDeaths, 226 | continentsData.todayRecovered, 227 | ], 228 | backgroundColor: [ 229 | "rgba(255, 159, 64, 0.2)", 230 | "rgba(255, 206, 86, 0.2)", 231 | "rgba(255, 99, 132, 0.2)", 232 | "rgba(54, 162, 235, 0.2)", 233 | "rgba(75, 192, 192, 0.2)", 234 | "rgba(153, 102, 255, 0.2)", 235 | ], 236 | borderColor: [ 237 | "rgba(255, 159, 64, 1)", 238 | "rgba(255, 206, 86, 1)", 239 | "rgba(255, 99, 132, 1)", 240 | "rgba(54, 162, 235, 1)", 241 | "rgba(75, 192, 192, 1)", 242 | "rgba(153, 102, 255, 1)", 243 | ], 244 | borderWidth: 1, 245 | }, 246 | ], 247 | }; 248 | return ( 249 | <> 250 | {!loading ? ( 251 | <> 252 |
253 |
254 | 255 | 256 | Select a Continent 257 | 258 | 277 | 278 | {continentValue === "" ? "Please Select a value" : " "} 279 | 280 | 281 |
282 | {continentValue !== "" && ( 283 | 293 | )} 294 |
295 |
296 | 297 | ) : ( 298 | <> 299 |
300 | 301 |
302 | 303 | )} 304 | 305 | ); 306 | }; 307 | 308 | export const SingleCountryInformation = ({ 309 | loading, 310 | countryNames, 311 | getCovidDataOfSingleContinent, 312 | getCovidDataOfSingleCountry, 313 | countryData, 314 | }) => { 315 | const classes = useStyles(); 316 | const [continentValueforCountry, setContinentValueforCountry] = useState(""); 317 | const [valueOfCountry, setValueOfCountry] = useState(""); 318 | 319 | return ( 320 | <> 321 | {!loading ? ( 322 | <> 323 |
324 |
325 | 326 | 327 | Select a Continent 328 | 329 | 348 | 349 | {continentValueforCountry === "" 350 | ? "Please Select a continent" 351 | : " "} 352 | 353 | 354 | 355 | 356 | Select a Country 357 | 358 | 383 | 384 | {valueOfCountry === "" ? "Please Select a country" : " "} 385 | 386 | 387 |
388 |
389 | {countryData.countryInfo && ( 390 | <> 391 | Country Flag 396 | 397 |
398 |

{countryData.country}

399 |
400 |
401 |
402 |
403 |

Total Active Cases

404 |

{countryData.active}

405 |
406 |
407 |

Total Cases

408 |

{countryData.cases}

409 |
410 |
411 |

Total Recovered

412 |

{countryData.recovered}

413 |
414 |
415 | 416 | 417 | )} 418 |
419 |
420 | 421 | ) : ( 422 | <> 423 |
424 | 425 |
426 | 427 | )} 428 | 429 | ); 430 | }; 431 | -------------------------------------------------------------------------------- /src/components/Home/Home.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import PropTypes from "prop-types"; 3 | import { 4 | FormControl, 5 | MenuItem, 6 | Select, 7 | InputLabel, 8 | TextField, 9 | Container, 10 | CircularProgress, 11 | useScrollTrigger, 12 | Fab, 13 | Zoom, 14 | } from "@material-ui/core"; 15 | import { 16 | KeyboardDatePicker, 17 | MuiPickersUtilsProvider, 18 | } from "@material-ui/pickers"; 19 | import "date-fns"; 20 | import DateFnsUtils from "@date-io/date-fns"; 21 | import { Search, KeyboardArrowUp } from "@material-ui/icons"; 22 | import { 23 | makeStyles, 24 | createMuiTheme, 25 | ThemeProvider, 26 | } from "@material-ui/core/styles"; 27 | 28 | import "./Home.css"; 29 | import NullState from "../NullState"; 30 | import VaccineDataMain from "../VaccineData/VaccineDataMain"; 31 | 32 | // Scroll to Top Fucntion(START) 33 | const useStyles = makeStyles((theme) => ({ 34 | root: { 35 | position: "fixed", 36 | bottom: theme.spacing(2), 37 | right: theme.spacing(2), 38 | }, 39 | })); 40 | 41 | const theme = createMuiTheme({ 42 | palette: { 43 | primary: { 44 | main: "#fdb82f", 45 | }, 46 | }, 47 | }); 48 | 49 | const ScrollTop = (props) => { 50 | const { children, window } = props; 51 | const classes = useStyles(); 52 | const trigger = useScrollTrigger({ 53 | target: window ? window() : undefined, 54 | disableHysteresis: true, 55 | threshold: 100, 56 | }); 57 | 58 | const handleClick = (event) => { 59 | const anchor = (event.target.ownerDocument || document).querySelector( 60 | "#back-to-top-anchor" 61 | ); 62 | 63 | if (anchor) { 64 | anchor.scrollIntoView({ behavior: "smooth", block: "center" }); 65 | } 66 | }; 67 | 68 | return ( 69 | 70 |
71 | {children} 72 |
73 | 74 | ); 75 | }; 76 | 77 | ScrollTop.propTypes = { 78 | children: PropTypes.element.isRequired, 79 | window: PropTypes.func, 80 | }; 81 | // Scroll to Top Function(END) 82 | 83 | const Home = (props) => { 84 | const [state, setState] = useState([]); 85 | const [loading, setLoading] = useState(false); 86 | const [stateCode, setStateCode] = useState("States"); 87 | const [districts, setDistricts] = useState([]); 88 | const [districtCode, setDistrictCode] = useState( 89 | "PLEASE SELECT A STATE FIRST" 90 | ); 91 | const [pin, setPin] = useState(""); 92 | const [formattedDate, setFormattedDate] = useState(""); 93 | const [selectedDate, setSelectedDate] = useState(new Date()); 94 | const [vaccineData, setVaccineData] = useState([]); 95 | const [pinCodeSearch, setPinCodeSearch] = useState(false); 96 | const [toSearchValue, setToSearchValue] = useState(""); 97 | const [toSearch] = useState([ 98 | "Find By District", 99 | "Find By PinCode & Date", 100 | "Find By Pincode & Date(Slots for next 7 days)", 101 | "Find By District & Date(Slots for next 7 days)", 102 | ]); 103 | 104 | const GetFormattedDate = () => { 105 | var month = selectedDate.getMonth() + 1; 106 | var day = selectedDate.getDate(); 107 | var year = selectedDate.getFullYear(); 108 | 109 | var finalDate = day + "-" + month + "-" + year; 110 | 111 | setFormattedDate(finalDate); 112 | }; 113 | 114 | useEffect(() => { 115 | fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states") 116 | .then((res) => res.json()) 117 | .then((data) => { 118 | setState(data.states); 119 | }); 120 | GetFormattedDate(); 121 | // eslint-disable-next-line 122 | }, [selectedDate, formattedDate]); 123 | 124 | const handleDateChange = (date) => { 125 | setSelectedDate(date); 126 | setVaccineData([]); 127 | setDistrictCode(""); 128 | }; 129 | 130 | const onStateChange = async (e) => { 131 | const stateCode = e.target.value; 132 | setDistricts([]); 133 | setVaccineData([]); 134 | setPinCodeSearch(false); 135 | 136 | const url = 137 | stateCode === "States" 138 | ? null 139 | : `https://cdn-api.co-vin.in/api/v2/admin/location/districts/${stateCode}`; 140 | setLoading(true); 141 | await fetch(url) 142 | .then((res) => res.json()) 143 | .then((data) => { 144 | setLoading(false); 145 | setStateCode(stateCode); 146 | setDistricts(data.districts); 147 | }); 148 | }; 149 | 150 | const findByDistrict = async (e) => { 151 | const districtCode = e.target.value; 152 | 153 | const url = 154 | districtCode === "PLEASE SELECT A STATE FIRST" 155 | ? null 156 | : `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/findByDistrict?district_id=${districtCode}&date=${formattedDate}`; 157 | setLoading(true); 158 | await fetch(url) 159 | .then((res) => res.json()) 160 | .then((data) => { 161 | setLoading(false); 162 | setDistrictCode(districtCode); 163 | setVaccineData(data.sessions); 164 | setPinCodeSearch(true); 165 | }); 166 | }; 167 | 168 | const fetchDataUsingCalendarByPin = async () => { 169 | if (pin.length !== 6) { 170 | alert("A Pincode must be of 6 digits"); 171 | } else { 172 | setLoading(true); 173 | await fetch( 174 | `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/calendarByPin?pincode=${pin}&date=${formattedDate}` 175 | ) 176 | .then((res) => res.json()) 177 | .then((data) => { 178 | const pincodeData = data?.centers?.map((res) => ({ 179 | name: res?.name, 180 | vaccine: res?.sessions?.slice(0, 1).map((res) => res?.vaccine), 181 | block_name: res?.block_name, 182 | district_name: res?.district_name, 183 | state_name: res?.state_name, 184 | pincode: res?.pincode, 185 | from: res?.from, 186 | to: res?.to, 187 | available_capacity: res?.sessions 188 | ?.slice(0, 1) 189 | .map((res) => res?.available_capacity), 190 | date: res?.sessions?.slice(0, 1).map((res) => res?.date), 191 | min_age_limit: res?.sessions 192 | ?.slice(0, 1) 193 | .map((res) => res?.min_age_limit), 194 | fee_type: res?.fee_type, 195 | slots: res?.sessions?.slice(0, 1).map((res) => res.slots), 196 | })); 197 | setLoading(false); 198 | setVaccineData(pincodeData); 199 | setPinCodeSearch(true); 200 | }); 201 | } 202 | }; 203 | 204 | const fetchDataUsingByPin = async () => { 205 | if (pin.length !== 6) { 206 | alert("A Pincode must be of 6 digits"); 207 | } else { 208 | setLoading(true); 209 | await fetch( 210 | `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/findByPin?pincode=${pin}&date=${formattedDate}` 211 | ) 212 | .then((res) => res.json()) 213 | .then((data) => { 214 | setLoading(false); 215 | console.log(data); 216 | setVaccineData(data.sessions); 217 | setPinCodeSearch(true); 218 | }); 219 | } 220 | }; 221 | 222 | return ( 223 | <> 224 | 225 |
226 |
227 |

Vaccine Availablity

228 |
229 |
230 |
231 |

Select a method to search for slots

232 | 233 | 234 | Search Criteria 235 | 236 | 258 | 259 |
260 | 261 | {toSearchValue === "" && ( 262 |

Please Select an Option

263 | )} 264 | 265 | {toSearchValue === "Find By District" ? ( 266 |
267 | 268 | 280 | 281 | 282 | {districts?.length !== 0 ? ( 283 | <> 284 | 295 | 296 | ) : ( 297 | <> 298 | 305 | 306 | )} 307 | 308 | 309 | 317 | 318 |
319 | ) : null} 320 | 321 | {toSearchValue === 322 | "Find By District & Date(Slots for next 7 days)" ? ( 323 |
324 | 325 | 337 | 338 | 339 | {districts?.length !== 0 ? ( 340 | <> 341 | 352 | 353 | ) : ( 354 | <> 355 | 362 | 363 | )} 364 | 365 | 366 | 374 | 375 |
376 | ) : null} 377 | 378 | {toSearchValue === "Find By Pincode & Date(Slots for next 7 days)" ? ( 379 |
380 |
381 | { 390 | setPinCodeSearch(false); 391 | setPin(e.target.value); 392 | }} 393 | /> 394 | 409 |
410 | 411 | 419 | 420 |
421 | ) : null} 422 | 423 | {toSearchValue === "Find By PinCode & Date" ? ( 424 |
425 |
426 | { 435 | setPinCodeSearch(false); 436 | setPin(e.target.value); 437 | }} 438 | /> 439 | 454 |
455 | 456 | 464 | 465 |
466 | ) : null} 467 | 468 | {loading === true ? ( 469 |
476 | 477 |
478 | ) : ( 479 | 480 | )} 481 | 489 |
490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | ); 500 | }; 501 | 502 | export default Home; 503 | --------------------------------------------------------------------------------