test reports, hotspots

src/App.js

@@ -1,11 +1,15 @@
-import React, { useState, useEffect } from "react";
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+import { hot } from "react-hot-loader";
+import Charts from "./components/charts";
+import Counter from "./components/counter";
+import Hotspots from "./components/hotspots";
+import Links from "./components/links";
 import Map from "./components/map";
 import Table from "./components/table";
-import Counter from "./components/counter";
-import Charts from "./components/charts";
-import axios from "axios";
+import Testing from "./components/testing";
+import Zones from "./components/zones";
 import { lang } from "./constants";
-import { hot } from "react-hot-loader";
 
 function App() {
   const [history, setHistory] = useState([]);
@@ -15,6 +19,7 @@ function App() {
   const [summary, setSummary] = useState({});
   const [zones, setZones] = useState({});
   const [hotspots, setHotspots] = useState({});
+  const [testReport, setTestReport] = useState({});
   const [fetched, setFetched] = useState(false);
   const [chartData, setChartData] = useState([]);
 
@@ -52,6 +57,25 @@ function App() {
           "https://keralastats.coronasafe.live/zones.json"
         );
         let zones = response.data.districts;
+        response = await axios.get(
+          "https://keralastats.coronasafe.live/testreports.json"
+        );
+        let _tr = response.data.reports[response.data.reports.length - 1];
+        let _trOld = response.data.reports[response.data.reports.length - 2];
+        let tr = {
+          summary: {
+            total: _tr.total,
+            positive: _tr.positive,
+            negative: _tr.negative,
+            pending: _tr.pending,
+          },
+          delta: {
+            total: _tr.today,
+            positive: _tr.today_positive,
+            negative: _tr.negative - _trOld.negative,
+            pending: _tr.pending - _trOld.pending,
+          },
+        };
         response = await axios.get(
           "https://keralastats.coronasafe.live/hotspots.json"
         );
@@ -64,6 +88,7 @@ function App() {
           }),
           {}
         );
+        setTestReport(tr);
         setHotspots(hpts);
         setChartData(tmp);
         setMaxActive(mx);
@@ -78,10 +103,10 @@ function App() {
   }, [fetched]);
 
   return (
-    <div className="flex bg-fiord-900 min-h-screen min-w-full justify-center">
+    <div className="flex bg-fiord-900 min-h-screen min-w-full justify-center antialiased overflow-hidden">
       {!fetched && <div className="spinner min-h-screen min-w-full"></div>}
       {fetched && (
-        <div className="flex-1 flex-col p-5 font-inter text-primary overflow-hidden antialiased">
+        <div className="flex-1 flex-col p-5 font-inter min-h-screen min-w-full text-primary">
           <div className="flex flex-col avg:flex-row">
             <div className="flex-none avg:pr-2 avg:mr-auto mb-2 avg:mb-0">
               <p className="leading-none font-extrabold tracking-wider text-lg sm:text-xl md:text-2xl lg:text-3xl avg:text-5xl text-center avg:text-left">
@@ -122,7 +147,22 @@ function App() {
               <Table districts={latest} summary={summary} zones={zones} />
             </div>
           </div>
-          <div className="flex flex-col avg:flex-row mt-4"></div>
+          <div className="flex flex-col avg:flex-row mt-4">
+            <div className="flex flex-col avg:w-5/12 avg:pr-2">
+              <Hotspots hotspots={hotspots} />
+            </div>
+            <div className="flex flex-col avg:flex-row avg:w-7/12 avg:pl-2 mt-4 avg:mt-0">
+              <div className="flex flex-col avg:flex-row avg:w-3/5 avg:mr-4 mb-4 avg:mb-0">
+                <Zones zones={zones} />
+              </div>
+              <div className="flex flex-col avg:flex-row avg:w-2/5 avg:mb-0">
+                <div className="flex flex-col space-y-4 min-w-full">
+                  <Testing testReport={testReport} />
+                  <Links />
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       )}
     </div>