added constants files

src/App.js

@@ -4,7 +4,7 @@ import Table from "./components/table";
 import Counter from "./components/counter";
 import Charts from "./components/charts";
 import axios from "axios";
-import lang from "./components/lang";
+import { lang } from "./constants";
 import { hot } from "react-hot-loader";
 
 function App() {
@@ -52,8 +52,19 @@ function App() {
           "https://keralastats.coronasafe.live/zones.json"
         );
         let zones = response.data.districts;
-        let hotspots = {};
-        Object.keys(dist.summary);
+        response = await axios.get(
+          "https://keralastats.coronasafe.live/hotspots.json"
+        );
+        let k1 = "district";
+        let k2 = "lsgd";
+        let hpts = response.data.hotspots.reduce(
+          (a, b) => ({
+            ...a,
+            [b[k1]]: a[b[k1]] ? a[b[k1]].concat(b[k2]) : [b[k2]],
+          }),
+          {}
+        );
+        setHotspots(hpts);
         setChartData(tmp);
         setMaxActive(mx);
         setHistory(hist);

src/components/chart.js

@@ -8,7 +8,7 @@ import {
   Legend,
   ResponsiveContainer,
 } from "recharts";
-import lang from "./lang";
+import { lang } from "../constants";
 
 function Chart({ data, dataKey, stroke }) {
   const CustomizedXAxisTick = ({ x, y, payload }) => {

src/components/counter.js

@@ -1,21 +1,14 @@
 import React from "react";
-import lang from "./lang";
+import { lang, statColor } from "../constants";
 
 function Counter({ data }) {
-  const topBox = {
-    confirmed: "bg-red-500",
-    active: "bg-yellow-500",
-    recovered: "bg-green-500",
-    deceased: "bg-gray-500",
-  };
-
   return (
     <div className="flex flex-row justify-start p-2 rounded-lg bg-fiord-800 max-w-none overflow-hidden">
-      {Object.keys(topBox).map((header) => {
+      {Object.keys(statColor).map((header) => {
         return (
           <div
             key={header}
-            className={`${topBox[header]} flex-auto avg:flex-shrink-0 max-w-none mx-1 p-1 avg:px-2 rounded-lg text-gray-900`}
+            className={`${statColor[header]} flex-auto avg:flex-shrink-0 max-w-none mx-1 p-1 avg:px-2 rounded-lg text-gray-900`}
           >
             <div>
               <p className="font-medium uppercase text-mobile xs:text-base">

src/components/map.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback, useRef } from "react";
 import * as d3 from "d3";
 import { legendColor } from "d3-svg-legend";
 import * as topojson from "topojson";
-import lang from "./lang";
+import { lang, zoneColor } from "../constants";
 import { useWindowWidth } from "@react-hook/window-size/throttled";
 
 function Map({ districts, summary, maxActive, zones }) {
@@ -13,12 +13,6 @@ function Map({ districts, summary, maxActive, zones }) {
   const [legendPos, setLegendPos] = useState(0);
   const width = useWindowWidth(450, { fps: 30, leading: true, wait: 0 });
   const map = useRef(null);
-  const color = {
-    containment: "text-blue-600",
-    red: "text-red-600",
-    orange: "text-orange-600",
-    green: "text-green-600",
-  };
 
   useEffect(() => {
     if (renderData) {
@@ -214,7 +208,7 @@ function Map({ districts, summary, maxActive, zones }) {
             <p>Zone</p>
             <div
               className={`font-medium capitalize ${
-                color[zones[district.name]]
+                zoneColor[zones[district.name]]
               }`}
             >
               {zones[district.name]}

src/components/table.js

@@ -1,18 +1,12 @@
 import React, { useState, useEffect } from "react";
-import lang from "./lang";
+import { lang, zoneColor } from "../constants";
 
 function Table({ districts, summary, zones }) {
   const [data, setData] = useState([]);
   const [sortData, setSortData] = useState({
     sortColumn: "confirmed",
     isAscending: false,
   });
-  const color = {
-    containment: "text-blue-600",
-    red: "text-red-600",
-    orange: "text-orange-600",
-    green: "text-green-600",
-  };
 
   useEffect(() => {
     if (Object.keys(districts.summary).length > 0) {
@@ -103,7 +97,7 @@ function Table({ districts, summary, zones }) {
                       className={
                         header !== "district"
                           ? "text-center"
-                          : color[zones[district[header]]]
+                          : zoneColor[zones[district[header]]]
                       }
                       key={index}
                     >

src/constants.js

@@ -0,0 +1,27 @@
+const lang = {
+  district: "District",
+  confirmed: "Confirmed",
+  active: "Active",
+  recovered: "Recovered",
+  deceased: "Deaths",
+  total_obs: "Under Observation",
+  hospital_obs: "Hospital Isolation",
+  home_obs: "Home Isolation",
+  hospital_today: "Hospitalized Today",
+};
+
+const zoneColor = {
+  containment: "text-blue-600",
+  red: "text-red-600",
+  orange: "text-orange-600",
+  green: "text-green-600",
+};
+
+const statColor = {
+  confirmed: "bg-red-500",
+  active: "bg-yellow-500",
+  recovered: "bg-green-500",
+  deceased: "bg-gray-500",
+};
+
+export { lang, zoneColor, statColor };