fixed test reports, pwa, updated deps

ohcnetwork · Jun 20, 2020 · 5d5e4b7 · 5d5e4b7
1 parent 71ec012
commit 5d5e4b7
Show file tree

Hide file tree

Showing 18 changed files with 610 additions and 304 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,21 +1,23 @@
 {
-  "name": "kerala_map",
+  "name": "kerala-dashboard",
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@react-hook/window-size": "^2.0.5",
+    "@react-hook/window-size": "^3.0.6",
     "axios": "^0.19.2",
     "d3": "^5.16.0",
-    "d3-geo": "^1.12.0",
+    "d3-geo": "^1.12.1",
     "d3-svg-legend": "^2.25.6",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "recharts": "^1.8.5",
+    "register-service-worker": "^1.7.1",
     "topojson": "^3.0.2"
   },
   "scripts": {
     "build": "poi --prod",
-    "dev": "poi --serve"
+    "dev": "poi --serve",
+    "start": "serve -s build"
   },
   "browserslist": {
     "production": [
@@ -30,13 +32,13 @@
     ]
   },
   "devDependencies": {
+    "@poi/plugin-pwa": "^12.0.3",
+    "autoprefixer": "^9.8.1",
+    "cssnano": "^4.1.10",
     "poi": "^12.8.0",
     "react-hot-loader": "^4.12.21",
     "tailwindcss": "^1.4.6",
-    "autoprefixer": "^9.7.6",
-    "cssnano": "^4.1.10",
-    "tailwindcss-spinner": "^1.0.0",
     "tailwindcss-border-gradients": "^2.0.3",
     "tailwindcss-gradients": "^3.0.0"
   }
-}
+}
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,16 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="https://cdn.coronasafe.network/care-manifest/images/icons/icon-192x192.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Kerala COVID-19 Dashboard" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="https://cdn.coronasafe.network/care-manifest/images/icons/icon-192x192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

diff --git a/public/manifest.json b/public/manifest.json
@@ -1 +1,57 @@
-{"name":"Kerala COVID-19 Tracker","short_name":"Kerala COVID-19 Tracker","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{
+	"short_name": "Kerala COVID-19 Dashboard",
+	"name": "Kerala COVID-19 Dashboard",
+	"icons": [
+	  {
+		"src": "https://cdn.coronasafe.network/care-manifest/images/icons/icon-72x72.png",
+		"sizes": "72x72",
+		"type": "image/png"
+	  },
+	  {
+		"src": "https://cdn.coronasafe.network/care-manifest/images/icons/icon-96x96.png",
+		"sizes": "96x96",
+		"type": "image/png"
+	  },
+	  {
+		"src": "https://cdn.coronasafe.network/care-manifest/images/icons/icon-128x128.png",
+		"sizes": "128x128",
+		"type": "image/png"
+	  },
+	  {
+		"src": "https://cdn.coronasafe.network/care-manifest/images/icons/icon-144x144.png",
+		"sizes": "144x144",
+		"type": "image/png"
+	  },
+	  {
+		"src": "https://cdn.coronasafe.network/care-manifest/images/icons/icon-152x152.png",
+		"sizes": "152x152",
+		"type": "image/png"
+	  },
+	  {
+		"src": "https://cdn.coronasafe.network/care-manifest/images/icons/icon-192x192.png",
+		"sizes": "192x192",
+		"type": "image/png"
+	  },
+	  {
+		"src": "https://cdn.coronasafe.network/care-manifest/images/icons/icon-384x384.png",
+		"sizes": "384x384",
+		"type": "image/png"
+	  },
+	  {
+		"src": "https://cdn.coronasafe.network/care-manifest/images/icons/icon-512x512.png",
+		"sizes": "512x512",
+		"type": "image/png"
+	  }
+	],
+	"related_applications": [
+	  {
+		"platform": "play",
+		"url": "https://play.google.com/store/apps/details?id=kerala.superhero.app"
+	  }
+	],
+	"splash_pages": null,
+	"start_url": ".",
+	"display": "standalone",
+	"theme_color": "#000000",
+	"background_color": "#ffffff"
+  }
diff --git a/src/App.js b/src/App.js
@@ -60,22 +60,7 @@ function App() {
         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,
-          },
-        };
+        let tr = response.data.reports[response.data.reports.length - 1];
         response = await axios.get(
           "https://keralastats.coronasafe.live/hotspots.json"
         );
@@ -103,16 +88,23 @@ function App() {
   }, [fetched]);
 
   return (
-    <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>}
+    <div className="flex justify-center min-w-full min-h-screen overflow-hidden antialiased bg-fiord-900">
+      {!fetched && (
+        <div className="flex items-center">
+          <div className="lds-ripple">
+            <div></div>
+            <div></div>
+          </div>
+        </div>
+      )}
       {fetched && (
-        <div className="flex-1 flex-col p-5 font-inter min-h-screen min-w-full text-primary">
+        <div className="flex-col flex-1 min-w-full min-h-screen p-5 font-inter 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">
+            <div className="flex-none mb-2 avg:pr-2 avg:mr-auto avg:mb-0">
+              <p className="text-lg font-extrabold leading-none tracking-wider text-center sm:text-xl md:text-2xl lg:text-3xl avg:text-5xl avg:text-left">
                 KERALA COVID-19 DASHBOARD
               </p>
-              <div className="pt-1 sm:pt-0 leading-tight text-mobile sm:text-sm text-center avg:text-left">
+              <div className="pt-1 leading-tight text-center sm:pt-0 text-mobile sm:text-sm avg:text-left">
                 <div>
                   <p className="inline font-semibold">Last Updated: </p>
                   {lastupdated}
@@ -133,7 +125,7 @@ function App() {
               <Counter data={summary} />
             </div>
           </div>
-          <div className="flex flex-col avg:flex-row mt-4">
+          <div className="flex flex-col mt-4 avg:flex-row">
             <div className="flex flex-col pl-0 avg:pl-2 avg:w-1/3">
               <Map
                 districts={latest}
@@ -142,21 +134,21 @@ function App() {
                 zones={zones}
               />
             </div>
-            <div className="flex flex-col order-last avg:order-first pr-0 avg:pr-2 avg:w-2/3">
+            <div className="flex flex-col order-last pr-0 avg:order-first avg:pr-2 avg:w-2/3">
               <Charts data={chartData} />
               <Table districts={latest} summary={summary} zones={zones} />
             </div>
           </div>
-          <div className="flex flex-col avg:flex-row mt-4">
+          <div className="flex flex-col mt-4 avg:flex-row">
             <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">
+            <div className="flex flex-col mt-4 avg:flex-row avg:w-7/12 avg:pl-2 avg:mt-0">
+              <div className="flex flex-col mb-4 avg:flex-row avg:w-3/5 avg:mr-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">
+                <div className="flex flex-col min-w-full space-y-4">
                   <Testing testReport={testReport} />
                   <Links />
                 </div>

diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/components/testing.js b/src/components/testing.js
@@ -3,26 +3,17 @@ import React from "react";
 function Testing({ testReport }) {
   const lang = {
     total: "Total samples tested",
+    today: "Samples tested today",
     positive: "Total positive samples tested",
-    negative: "Total negative samples tested",
-    pending: "Pending samples to be tested",
+    today_positive: "Samples tested positive today",
   };
 
   return (
-    <div className="flex flex-1 min-w-full flex-col rounded-lg avg2:mb-0 space-y-2 bg-fiord-800 p-4">
-      {Object.keys(testReport.summary).map((k) => (
+    <div className="flex flex-col flex-1 min-w-full p-4 space-y-2 rounded-lg avg2:mb-0 bg-fiord-800">
+      {Object.keys(lang).map((k) => (
         <div className="flex flex-col">
           <div className="flex">{lang[k]}</div>
-          <div className="flex text-3xl font-semibold">
-            <div className="flex leading-none"> {testReport.summary[k]}</div>
-            <div className="flex text-mobile">
-              {testReport.delta[k] > 0
-                ? "+" + testReport.delta[k]
-                : testReport.delta[k] != 0
-                ? testReport.delta[k]
-                : "-"}
-            </div>
-          </div>
+          <div className="flex text-3xl font-semibold leading-none">{testReport[k]}</div>
         </div>
       ))}
     </div>

diff --git a/src/index.js b/src/index.js
@@ -2,7 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import "./styles/global.css";
 import App from "./App";
-import * as serviceWorker from "./serviceWorker";
+import { register } from 'register-service-worker'
 
 ReactDOM.render(
   <React.StrictMode>
@@ -11,7 +11,26 @@ ReactDOM.render(
   document.getElementById("root")
 );
 
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+register(process.env.PUBLIC_URL + 'service-worker.js', {
+  ready(registration) {
+    console.log('Service worker is active.')
+  },
+  registered(registration) {
+    console.log('Service worker has been registered.')
+  },
+  cached(registration) {
+    console.log('Content has been cached for offline use.')
+  },
+  updatefound(registration) {
+    console.log('New content is downloading.')
+  },
+  updated(registration) {
+    console.log('New content is available; please refresh.')
+  },
+  offline() {
+    console.log('No internet connection found. App is running in offline mode.')
+  },
+  error(error) {
+    console.error('Error during service worker registration:', error)
+  }
+})