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
stephin007 · Jun 22, 2021 · 213a957 · 213a957
1 parent 271947c
commit 213a957
Show file tree

Hide file tree

Showing 4 changed files with 188 additions and 214 deletions.
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,18 @@
+html {
+  overflow: scroll;
+}
+::-webkit-scrollbar {
+  width: 0px;
+  background: transparent; /* make scrollbar transparent */
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.scrollbar-hidden::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge add Firefox */
+.scrollbar-hidden {
+  -ms-overflow-style: none;
+  scrollbar-width: none; /* Firefox */
+}
diff --git a/src/components/CovidInfo/CovidWorld.js/CovidWorld.css b/src/components/CovidInfo/CovidWorld.js/CovidWorld.css
@@ -23,34 +23,19 @@
   margin-top: 10px;
   font-family: monospace;
 }
+/* WORLD CARD CSS ENDS */
 
-.world_head_paper {
+/* WorldChart CSS STARTS */
+.world_head .world_head__WorldChart {
+  width: 100%;
   display: flex;
-  flex-direction: column;
-  text-transform: capitalize;
-  width: 32%;
-  height: 50%;
-  margin-top: 10px;
-}
-
-.world_head_paper h3 {
-  text-align: center;
+  overflow: auto;
 }
 
-.world_head_paper .paper_title {
-  background-color: #00917c;
-  color: whitesmoke;
-  padding: 5px;
+.world_head .world_head__WorldChart .world_head__WorldChart_doughnut {
+  margin-top: 2rem;
 }
-
-.world_head_paper .count {
-  padding: 5px;
-  text-align: center;
-  font-size: 25px;
-  font-weight: 400;
-}
-
-/* WORLD CARD CSS ENDS */
+/* WorldChart CSS ENDS */
 
 /* CONTINENTS CARD CSS STARTS */
 .continents_head {
@@ -72,6 +57,23 @@
   text-transform: uppercase;
 }
 
+/* CONTINENTS CARD CSS ENDS */
+
+/* SINGLE CONTINENT CARD CSS STARTS */
+
+.single_continent_head {
+  width: 100%;
+  margin-top: -10px;
+}
+
+.continent_select_options {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}
+
+/* SINGLE CONTINENT CARD CSS ENDS */
+
 @media screen and (max-width: 750px) {
   .world_head_paper h3 {
     font-size: 13px;

diff --git a/src/components/CovidInfo/CovidWorld.js/CovidWorld.js b/src/components/CovidInfo/CovidWorld.js/CovidWorld.js
@@ -9,109 +9,31 @@ import {
 
 import "./CovidWorld.css";
 
-import { WorldChart, ContinentChart } from "./CovidWorldContents";
+import {
+  WorldChart,
+  SingleContinentChartInformation,
+} from "./CovidWorldContents";
 
 const CovidWorld = ({ value, index }) => {
   const [allWorldData, setAllWorldData] = useState([]);
-  const [dataByContinent, setDataByContinent] = useState([]);
+  const [continentsData, setContinentsData] = useState({});
   const [selectOptions, setSelectOptions] = useState("");
   const [loading, setLoading] = useState(true);
   // TODOs
   // 1. make a select field to filter out the slection
-  //    - get Data by specific continent
+  //    - 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
 
   const SelectOptions = [
     "Get COVID19 World Information",
-    "Get COVID19 Data by continents",
-    // "Get COVID19 Data by specific continent",
+    "Get COVID19 Data by a specific Continent",
     // "Get COVID19 Data by countries",
     // "Get COVID19 Data by country",
   ];
 
-  const WorldPaperContents = [
-    {
-      paperTitle: "Total Active Cases",
-      paperAnswer: allWorldData.active,
-    },
-    {
-      paperTitle: "Active per one million",
-      paperAnswer: allWorldData.activePerOneMillion,
-    },
-    {
-      paperTitle: "Affected Countries",
-      paperAnswer: allWorldData.affectedCountries,
-    },
-    {
-      paperTitle: "Total Cases",
-      paperAnswer: allWorldData.cases,
-    },
-    {
-      paperTitle: "Active Cases per million",
-      paperAnswer: allWorldData.casesPerOneMillion,
-    },
-    {
-      paperTitle: "critical",
-      paperAnswer: allWorldData.critical,
-    },
-    {
-      paperTitle: "critical per million",
-      paperAnswer: allWorldData.criticalPerOneMillion,
-    },
-    {
-      paperTitle: "deaths",
-      paperAnswer: allWorldData.deaths,
-    },
-    {
-      paperTitle: "deaths Per OneMillion",
-      paperAnswer: allWorldData.deathsPerOneMillion,
-    },
-    {
-      paperTitle: "one Case Per People",
-      paperAnswer: allWorldData.oneCasePerPeople,
-    },
-    {
-      paperTitle: "one Death Per People",
-      paperAnswer: allWorldData.oneDeathPerPeople,
-    },
-    {
-      paperTitle: "one Test Per People",
-      paperAnswer: allWorldData.oneTestPerPeople,
-    },
-    {
-      paperTitle: "population",
-      paperAnswer: allWorldData.population,
-    },
-    {
-      paperTitle: "recovered",
-      paperAnswer: allWorldData.recovered,
-    },
-    {
-      paperTitle: "recovered Per One Million",
-      paperAnswer: allWorldData.recoveredPerOneMillion,
-    },
-    {
-      paperTitle: "tests",
-      paperAnswer: allWorldData.tests,
-    },
-    {
-      paperTitle: "tests Per One Million",
-      paperAnswer: allWorldData.testsPerOneMillion,
-    },
-    {
-      paperTitle: "today's Cases",
-      paperAnswer: allWorldData.todayCases,
-    },
-    {
-      paperTitle: "today's Deaths",
-      paperAnswer: allWorldData.todayDeaths,
-    },
-    {
-      paperTitle: "today's Recoveries",
-      paperAnswer: allWorldData.todayRecovered,
-    },
-  ];
   const getAllWorldCovidData = async () => {
     await fetch(`https://disease.sh/v3/covid-19/all`)
       .then((response) => response.json())
@@ -120,19 +42,20 @@ const CovidWorld = ({ value, index }) => {
         setLoading(false);
       });
   };
-  const getCovidDataByContinent = async () => {
-    await fetch(`https://disease.sh/v3/covid-19/continents`)
+
+  const getCovidDataOfSingleContinent = async (continentValue) => {
+    await fetch(
+      `https://disease.sh/v3/covid-19/continents/${continentValue}?strict=true`
+    )
       .then((response) => response.json())
       .then((data) => {
-        setDataByContinent(data);
         setLoading(false);
-        console.log(data);
+        setContinentsData(data);
       });
   };
 
   useEffect(() => {
     getAllWorldCovidData();
-    getCovidDataByContinent();
   }, []);
 
   return (
@@ -171,18 +94,17 @@ const CovidWorld = ({ value, index }) => {
             <div className="world_head">
               {selectOptions === "Get COVID19 World Information" && (
                 <>
-                  <WorldChart
-                    allWorldData={allWorldData}
-                    WorldPaperContents={WorldPaperContents}
-                    loading={loading}
-                  />
+                  <WorldChart allWorldData={allWorldData} loading={loading} />
                 </>
               )}
-              {selectOptions === "Get COVID19 Data by continents" && (
+              {selectOptions === "Get COVID19 Data by a specific Continent" && (
                 <>
-                  <ContinentChart
-                    dataByContinent={dataByContinent}
+                  <SingleContinentChartInformation
                     loading={loading}
+                    getCovidDataOfSingleContinent={
+                      getCovidDataOfSingleContinent
+                    }
+                    continentsData={continentsData}
                   />
                 </>
               )}