🚨 STAGING DEPLOYMENT🚨 (#177)

* 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 🔨 * added staging to the workflow 🔥 * changed the token name 🔨 * 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>
stephin007 · Jun 30, 2021 · 7599842 · 7599842
1 parent 724311b
commit 7599842
Show file tree

Hide file tree

Showing 4 changed files with 302 additions and 21 deletions.
diff --git a/.github/workflows/conflicts.yml 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
@@ -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
@@ -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" && (
+                <>
+                  <SingleCountryInformation
+                    loading={loading}
+                    countryNames={countryNames}
+                    getCovidDataOfSingleContinent={
+                      getCovidDataOfSingleContinent
+                    }
+                    getCovidDataOfSingleCountry={getCovidDataOfSingleCountry}
+                    countryData={countryData}
+                  />
+                </>
+              )}
             </div>
           </div>
         </>