From 75998429616272b6a8a6a866e5e5794bfcf91dcb Mon Sep 17 00:00:00 2001 From: Stephin Reji Date: Wed, 30 Jun 2021 20:17:38 +0530 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A8=20STAGING=20DEPLOYMENT=F0=9F=9A=A8?= =?UTF-8?q?=20=20(#177)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Added Scroll to top fucntionality * added firacode font CDN * Added 3rd option in the World Covid Info. (#171) * Added single continent info(WIP) * Added continent options * Added 3rd option and added horizontal scroll(WIP) * removed width css and added text to tell user to swipe to see more data * removed width css and added text to tell user to swipe to see more data * added text to p tags * fixed css for the continent Dropdown * removed unwanted css * removed whole continents data/graph * added check for continent chart * added conflicts workflow (#173) * added conflicts workflow :hammer: * added staging to the workflow :fire: * changed the token name :hammer: * Added the 3rd option for showing per country covid data (#175) * Added single continent info(WIP) * Added continent options * Added 3rd option and added horizontal scroll(WIP) * removed width css and added text to tell user to swipe to see more data * removed width css and added text to tell user to swipe to see more data * added text to p tags * fixed css for the continent Dropdown * removed unwanted css * removed whole continents data/graph * added check for continent chart * uncommented the third option * updated chart content for continent view and removed dataset label * Added country dropdown for each continent * Added country flag for dataReception check * fixed img tag for vercel deployment error fix * added the correct jmespath for th destrcutured flag * added check for empty object for flags * made continent and country single select responsive * Added country card for information * Added country card for information * fixed css * Added check for the country right card to be only shown when actual data is fetched * finalised country card Co-authored-by: Justin Varghese <69856008+Justinnn07@users.noreply.github.com> --- .github/workflows/conflicts.yml | 31 ++++ .../CovidInfo/CovidWorld.js/CovidWorld.css | 85 +++++++++ .../CovidInfo/CovidWorld.js/CovidWorld.js | 36 +++- .../CovidWorld.js/CovidWorldContents.js | 171 ++++++++++++++++-- 4 files changed, 302 insertions(+), 21 deletions(-) create mode 100644 .github/workflows/conflicts.yml diff --git a/.github/workflows/conflicts.yml b/.github/workflows/conflicts.yml new file mode 100644 index 0000000..493b894 --- /dev/null +++ b/.github/workflows/conflicts.yml @@ -0,0 +1,31 @@ +name: "Merge Conflict Watcher" +on: + pull_request: + types: [opened, synchronize, edited] + branches: + - NEW-UI + - master + - staging + pull_request_review_comment: + types: [created, deleted] +jobs: + triage: + runs-on: ubuntu-latest + steps: + - uses: mschilde/auto-label-merge-conflicts@master + with: + CONFLICT_LABEL_NAME: "merge-conflicts" + GITHUB_TOKEN: ${{ secrets.MERGE_CONFLCTS_TOKEN }} + MAX_RETRIES: 5 + WAIT_MS: 5000 + create_comment: + needs: triage + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - uses: actions-ecosystem/action-create-comment@v1 + if: contains(github.event.pull_request.labels.*.name, 'merge-conflicts') + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + body: | + 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) diff --git a/src/components/CovidInfo/CovidWorld.js/CovidWorld.css b/src/components/CovidInfo/CovidWorld.js/CovidWorld.css index ff31916..9bb816f 100644 --- a/src/components/CovidInfo/CovidWorld.js/CovidWorld.css +++ b/src/components/CovidInfo/CovidWorld.js/CovidWorld.css @@ -74,6 +74,76 @@ /* SINGLE CONTINENT CARD CSS ENDS */ +/* SINGLE COUNTRY CSS STARTS */ + +.single_country_head { + display: flex; + flex-direction: column; + width: 100%; + font-family: "Nunito", monospace !important; +} + +.single_country_dropdowns { + display: flex; + width: 100%; + flex-direction: row; + justify-content: space-between; +} + +.single_select_option { + min-width: 49% !important; +} + +.single_country_card { + display: flex; + height: 100; +} + +.country_flag_left { + height: 100%; + border-radius: 5px; +} + +.country_card_right { + margin-left: 10px; + height: 100%; + width: 100%; +} + +.country_title { + padding: 10px; + text-transform: uppercase; +} + +.country_data { + display: flex; + flex-direction: column; + padding: 5px; +} + +.country_data_value { + display: flex; + align-items: center; + justify-content: space-between; +} + +.country_data_value h4 { + font-size: 25px; +} + +.country_data_value p { + font-size: 20px; +} + +/* SINGLE COUNTRY CSS ENDS */ + +@media screen and (max-width: 850px) { + .single_country_dropdowns { + display: flex; + width: 100%; + flex-direction: column; + } +} @media screen and (max-width: 750px) { .world_head_paper h3 { font-size: 13px; @@ -82,6 +152,21 @@ .world_head_paper .count { font-size: 20px; } + + .single_country_card { + flex-direction: column; + } + + .country_flag_left { + width: 100%; + height: 100%; + } + + .country_card_right { + height: 100%; + width: 100%; + margin: 10px 0 10px 0; + } } @media screen and (max-width: 550px) { diff --git a/src/components/CovidInfo/CovidWorld.js/CovidWorld.js b/src/components/CovidInfo/CovidWorld.js/CovidWorld.js index e4c84a6..c729645 100644 --- a/src/components/CovidInfo/CovidWorld.js/CovidWorld.js +++ b/src/components/CovidInfo/CovidWorld.js/CovidWorld.js @@ -12,26 +12,26 @@ import "./CovidWorld.css"; import { WorldChart, SingleContinentChartInformation, + SingleCountryInformation, } from "./CovidWorldContents"; const CovidWorld = ({ value, index }) => { const [allWorldData, setAllWorldData] = useState([]); const [continentsData, setContinentsData] = useState({}); + const [countryNames, setCountryNames] = useState([]); + const [countryData, setCountryData] = useState({}); const [selectOptions, setSelectOptions] = useState(""); const [loading, setLoading] = useState(true); // TODOs // 1. make a select field to filter out the slection // - get whole world (done) - // - get Data by continents (removed as 2 and 3 are the same) // - get Data by specific continent (done) - // - get Data by countries - // - get Data by country + // - get Data by country (WIP) const SelectOptions = [ "Get COVID19 World Information", "Get COVID19 Data by a specific Continent", - // "Get COVID19 Data by countries", - // "Get COVID19 Data by country", + "Get COVID19 Data by country", ]; const getAllWorldCovidData = async () => { @@ -51,6 +51,19 @@ const CovidWorld = ({ value, index }) => { .then((data) => { setLoading(false); setContinentsData(data); + setCountryNames(data.countries); + }); + }; + + const getCovidDataOfSingleCountry = async (countryValue) => { + await fetch( + `https://disease.sh/v3/covid-19/countries/${countryValue}?yesterday=yesterday&strict=true` + ) + .then((response) => response.json()) + .then((data) => { + setLoading(false); + setCountryData(data); + console.log(data); }); }; @@ -108,6 +121,19 @@ const CovidWorld = ({ value, index }) => { /> )} + {selectOptions === "Get COVID19 Data by country" && ( + <> + + + )} diff --git a/src/components/CovidInfo/CovidWorld.js/CovidWorldContents.js b/src/components/CovidInfo/CovidWorld.js/CovidWorldContents.js index e802456..7bb2d73 100644 --- a/src/components/CovidInfo/CovidWorld.js/CovidWorldContents.js +++ b/src/components/CovidInfo/CovidWorld.js/CovidWorldContents.js @@ -8,6 +8,7 @@ import { FormHelperText, Container, makeStyles, + Paper, } from "@material-ui/core"; import { Line, Doughnut } from "react-chartjs-2"; @@ -26,6 +27,14 @@ const useStyles = makeStyles({ }, }); +const continentNames = [ + "North America", + "South America", + "Europe", + "Africa", + "Asia", + "Australia-Oceania", +]; export const WorldChart = ({ allWorldData, loading }) => { const classes = useStyles(); const initialData = { @@ -190,35 +199,30 @@ export const SingleContinentChartInformation = ({ getCovidDataOfSingleContinent, continentsData, }) => { - const [continentNames] = useState([ - "North America", - "South America", - "Europe", - "Africa", - "Asia", - "Australia-Oceania", - ]); const [continentValue, setContinentValue] = useState(""); const classes = useStyles(); const continentData = { labels: [ - "Active Cases per million", + "Active", + "Cases", "Critical", - "Recovered Per One Million", - "Tests Per One Million", + "Recovered", + "Tests", "Today's Cases", + "Today's Deaths", "Today's Recoveries", ], datasets: [ { - label: "Continent Covid19 data", fill: true, data: [ - continentsData.casesPerOneMillion, + continentsData.active, + continentsData.cases, continentsData.critical, - continentsData.recoveredPerOneMillion, - continentsData.testsPerOneMillion, + continentsData.recovered, + continentsData.tests, continentsData.todayCases, + continentsData.todayDeaths, continentsData.todayRecovered, ], backgroundColor: [ @@ -275,7 +279,142 @@ export const SingleContinentChartInformation = ({
- {continentValue !== "" && } + {continentValue !== "" && ( + + )} + + + + ) : ( + <> +
+ +
+ + )} + + ); +}; + +export const SingleCountryInformation = ({ + loading, + countryNames, + getCovidDataOfSingleContinent, + getCovidDataOfSingleCountry, + countryData, +}) => { + const classes = useStyles(); + const [continentValueforCountry, setContinentValueforCountry] = useState(""); + const [valueOfCountry, setValueOfCountry] = useState(""); + + return ( + <> + {!loading ? ( + <> +
+
+ + + Select a Continent + + + + {continentValueforCountry === "" + ? "Please Select a continent" + : " "} + + + + + Select a Country + + + + {valueOfCountry === "" ? "Please Select a country" : " "} + + +
+
+ {countryData.countryInfo && ( + <> + Country Flag + +
+

{countryData.country}

+
+
+
+
+

Total Active Cases

+

{countryData.active}

+
+
+

Total Cases

+

{countryData.cases}

+
+
+

Total Recovered

+

{countryData.recovered}

+
+
+ + + )}