refactored some stuff

.eslintrc

@@ -1,11 +1,6 @@
 {
-  "extends": [
-    "plugin:@jarrodldavis/tailwindcss/recommended",
-    "plugin:prettier/recommended",
-    "prettier/react",
-    "prettier/standard",
-    "galex"
-  ],
+  "plugins": ["tailwindcss"],
+  "extends": ["plugin:prettier/recommended", "prettier", "galex"],
   "rules": {
     "@typescript-eslint/no-confusing-void-expression": "off",
     "@typescript-eslint/no-explicit-any": "off",

.prettierignore

@@ -0,0 +1,6 @@
+node_modules
+.next
+yarn.lock
+package-lock.json
+public
+data/*

README.md

@@ -1,4 +1,5 @@
 ## Kerala COVID-19 Dashboard
+
 A district-wise map visualization of current COVID-19 stats using data from DHS Kerala bulletins.
 
 API Repo: [Kerala Stats](https://github.com/coronasafe/kerala_stats)

components/Header.tsx

@@ -0,0 +1,45 @@
+import clsx from "clsx";
+import { Menu } from "react-feather";
+import shallow from "zustand/shallow";
+
+import { useGlobalStore } from "../lib/stores";
+
+type HeaderProps = {
+  text: string;
+  lastUpdated: string;
+  float: boolean;
+};
+
+export default function Header({ text, lastUpdated, float }: HeaderProps) {
+  const [isSidebarOpen, toggleSidebar] = useGlobalStore(
+    (state) => [state.isSidebarOpen, state.toggleSidebar],
+    shallow
+  );
+
+  return (
+    <div
+      className={clsx(
+        "flex flex-shrink-0 h-12 py-2 dark:text-green-400 text-green-500",
+        float && "fixed left-0 top-0 z-10 ml-6"
+      )}
+    >
+      <button
+        type="button"
+        className={clsx(
+          "rounded-md mr-2 focus:outline-none p-1 pointer-events-auto md:mr-6",
+          isSidebarOpen && "shadow-outline-green"
+        )}
+        onClick={toggleSidebar}
+        aria-label="Menu"
+      >
+        <Menu className="h-6 w-6" aria-hidden="true" />
+      </button>
+      <div className="block mr-1 pointer-events-none dark:text-green-400 text-green-500">
+        <span className="block text-2xl font-black leading-none">{text}</span>
+        <span className="block text-xxs leading-none">
+          Last updated on {lastUpdated}
+        </span>
+      </div>
+    </div>
+  );
+}

components/Home/HomeDistrictSection.tsx

@@ -7,7 +7,7 @@ import {
 import { scaleLinear, scaleOrdinal } from "@visx/scale";
 import { Button, Card, Label, Select } from "@windmill/react-ui";
 import Link from "next/link";
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import shallow from "zustand/shallow";
 
 import keralaDistrict from "../../data/kerala_district_simplified.json";

components/Home/HomeSummarySection.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 
 import {
   SummaryLang,

components/Home/HomeTable.tsx

@@ -6,7 +6,7 @@ import {
   TableCell,
   TableBody,
 } from "@windmill/react-ui";
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { ChevronDown, ChevronUp } from "react-feather";
 import { useTable, useSortBy } from "react-table";
 

components/Home/SubComponents/GraphCard.tsx

@@ -1,5 +1,5 @@
 import { Card } from "@windmill/react-ui";
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { ResponsiveContainer, LineChart, Line, XAxis, Tooltip } from "recharts";
 
 type GraphCardProps = {

components/Home/SubComponents/SVGMap.tsx

@@ -1,5 +1,4 @@
 import polylabel from "polylabel";
-import React from "react";
 import type { Point } from "react-simple-maps";
 import {
   ComposableMap,

components/Sidebar.tsx

@@ -1,8 +1,8 @@
 import { Backdrop, Transition, WindmillContext } from "@windmill/react-ui";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { useContext } from "react";
-import { Map, Menu, Moon, Sun, Home } from "react-feather";
+import { useContext } from "react";
+import { Map, Home } from "react-feather";
 import shallow from "zustand/shallow";
 
 import CoronaSafeLogo from "../assets/coronaSafeLogo.svg";
@@ -16,32 +16,14 @@ const routes = [
 export default function Sidebar() {
   const router = useRouter();
   const { mode, toggleMode } = useContext(WindmillContext);
-  const [isSidebarOpen, toggleSidebar, lastUpdated] = useGlobalStore(
-    (state) => [state.isSidebarOpen, state.toggleSidebar, state.lastUpdated],
+  const [isSidebarOpen, toggleSidebar] = useGlobalStore(
+    (state) => [state.isSidebarOpen, state.toggleSidebar],
     shallow
   );
 
   return (
     <>
       <aside className="flex flex-col flex-shrink-0 h-full pointer-events-none fixed w-full z-50 xl:w-auto">
-        <div className="flex flex-shrink-0 h-12 ml-6 py-2 dark:text-green-400 text-green-500">
-          <button
-            type="button"
-            className="focus:shadow-outline-green rounded-md mr-2 focus:outline-none p-1 pointer-events-auto md:mr-6"
-            onClick={toggleSidebar}
-            aria-label="Menu"
-          >
-            <Menu className="h-6 w-6" aria-hidden="true" />
-          </button>
-          <div className="hidden mr-1 pointer-events-none md:block">
-            <span className="block text-2xl font-black leading-none">
-              Kerala Dashboard
-            </span>
-            <span className="block text-xxs leading-none">
-              Last updated on {lastUpdated}
-            </span>
-          </div>
-        </div>
         <Transition
           show={isSidebarOpen}
           enter="transition ease-in-out duration-150"
@@ -51,7 +33,7 @@ export default function Sidebar() {
           leaveFrom="opacity-100"
           leaveTo="opacity-0 transform -translate-x-20"
         >
-          <nav className="dark:bg-gray-800 bg-white rounded-lg flex flex-col h-full justify-between mb-6 mx-6 py-4 pointer-events-auto dark:text-gray-200 z-40 xl:w-auto">
+          <nav className="dark:bg-gray-800 bg-white rounded-lg flex flex-col h-full justify-between my-6 mx-6 py-4 pointer-events-auto dark:text-gray-200 z-40 xl:w-auto">
             <ul className="mt-2 space-y-3">
               {routes.map((r, i) => (
                 <li key={i} className="px-2 py-2 relative">
@@ -71,6 +53,17 @@ export default function Sidebar() {
               ))}
             </ul>
             <ul className="px-6 space-y-1">
+              <ul className="flex text-sm space-x-2">
+                <li>
+                  <button
+                    type="button"
+                    onClick={toggleMode}
+                    aria-label="Toggle color mode"
+                  >
+                    {mode === "dark" ? "Use Light theme" : "Use Dark theme"}
+                  </button>
+                </li>
+              </ul>
               <ul className="flex text-sm space-x-2">
                 <li>
                   <a href="https://github.com/coronasafe/kerala-dashboard">
@@ -88,20 +81,6 @@ export default function Sidebar() {
                 <li>
                   <a href="mailto:info@coronasafe.network">Contact</a>
                 </li>
-                <li>
-                  <button
-                    type="button"
-                    className="p-1"
-                    onClick={toggleMode}
-                    aria-label="Toggle color mode"
-                  >
-                    {mode === "dark" ? (
-                      <Sun className="h-3 w-3" aria-hidden="true" />
-                    ) : (
-                      <Moon className="h-3 w-3" aria-hidden="true" />
-                    )}
-                  </button>
-                </li>
               </ul>
               <li className="flex flex-col">
                 <a

lib/stores.ts

@@ -5,10 +5,9 @@ import { combine } from "zustand/middleware";
 import { SummaryKeys, Districts, MapMode, MAPBOX } from "./constants";
 
 export const useGlobalStore = create(
-  combine({ isSidebarOpen: false, lastUpdated: "" }, (set) => ({
+  combine({ isSidebarOpen: false }, (set) => ({
     toggleSidebar: () =>
       set((state) => ({ isSidebarOpen: !state.isSidebarOpen })),
-    setLastUpdated: (updated: string) => set(() => ({ lastUpdated: updated })),
   }))
 );
 

package.json

@@ -36,7 +36,6 @@
     "zustand": "^3.2.0"
   },
   "devDependencies": {
-    "@jarrodldavis/eslint-plugin-tailwindcss": "^0.4.0",
     "@tailwindcss/typography": "^0.4.0",
     "@types/geojson": "^7946.0.7",
     "@types/mapbox-gl": "^2.1.1",
@@ -51,6 +50,8 @@
     "cssnano": "^5.0.2",
     "eslint": "^7.14.0",
     "eslint-config-galex": "^2.7.9",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-tailwindcss": "^1.5.0",
     "postcss": "^8.2.13",
     "postcss-flexbugs-fixes": "^5.0.0",
     "postcss-preset-env": "^6.7.0",

pages/404.tsx

@@ -1,5 +1,4 @@
 import Head from "next/head";
-import React from "react";
 
 export default function Custom404() {
   return (

pages/_app.tsx

@@ -3,7 +3,6 @@ import type { AppProps } from "next/app";
 import Head from "next/head";
 import Router from "next/router";
 import NProgress from "nprogress";
-import React from "react";
 
 import Sidebar from "../components/Sidebar";
 import myTheme from "../lib/theme";

pages/_document.tsx

@@ -1,6 +1,5 @@
 import type { DocumentContext } from "next/document";
 import Document, { Html, Head, Main, NextScript } from "next/document";
-import React from "react";
 
 function setInitialColorMode() {
   const userPreference =

pages/hotspots.tsx

@@ -14,12 +14,12 @@ import getConfig from "next/config";
 import Head from "next/head";
 import path from "path";
 import Pbf from "pbf";
-import React, { useContext, useEffect, useMemo, useRef } from "react";
-import shallow from "zustand/shallow";
+import { useContext, useMemo, useRef } from "react";
 
+import Header from "../components/Header";
 import { MAPBOX } from "../lib/constants";
 import { getHotspotsHistories } from "../lib/getStats";
-import { useGlobalStore, useHotspotsMapStore } from "../lib/stores";
+import { useHotspotsMapStore } from "../lib/stores";
 
 import "mapbox-gl/dist/mapbox-gl.css";
 
@@ -29,13 +29,6 @@ export default function Hotspots({
   districtPbf,
   lsgdPbf,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
-  const [setLastUpdated] = useGlobalStore(
-    (state) => [state.setLastUpdated],
-    shallow
-  );
-  useEffect(() => {
-    setLastUpdated(lastUpdated);
-  }, []);
   const [
     viewport,
     hoveredEntity,
@@ -114,6 +107,7 @@ export default function Hotspots({
       </Head>
 
       <div className="flex flex-grow min-h-screen">
+        <Header text="Hotspots" lastUpdated={lastUpdated} float />
         <Transition
           show={geoLocEntity !== null}
           enter="transition ease-in-out duration-150"

pages/index.tsx

@@ -1,14 +1,14 @@
 import type { InferGetStaticPropsType } from "next";
 import Head from "next/head";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import shallow from "zustand/shallow";
 
+import Header from "../components/Header";
 import HomeDistrictSection from "../components/Home/HomeDistrictSection";
 import HomeSummarySection from "../components/Home/HomeSummarySection";
 import HomeTable from "../components/Home/HomeTable";
 import { Districts } from "../lib/constants";
 import { getMetaProps } from "../lib/getStats";
-import { useGlobalStore } from "../lib/stores";
 
 export default function Home({
   lastUpdated,
@@ -18,21 +18,14 @@ export default function Home({
   hotspotsLatest,
   testReportHistories,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
-  const [setLastUpdated] = useGlobalStore(
-    (state) => [state.setLastUpdated],
-    shallow
-  );
-  useEffect(() => {
-    setLastUpdated(lastUpdated);
-  }, []);
-
   return (
     <>
       <Head>
         <title>Kerala Dashboard</title>
       </Head>
 
-      <div className="flex flex-col mb-6 mt-12 mx-6 overflow-hidden space-y-5">
+      <div className="flex flex-col mb-6 mx-6 overflow-hidden space-y-5">
+        <Header text="Kerala Dashboard" lastUpdated={lastUpdated} />
         <HomeSummarySection
           histories={histories}
           hotspotsSummaries={hotspotsSummaries}

tailwind.config.js

@@ -10,8 +10,8 @@ module.exports = windmill({
   theme: {
     extend: {
       boxShadow: {
-        xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
-        outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
+        xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
+        outline: "0 0 0 3px rgba(66, 153, 225, 0.5)",
       },
       fontSize: {
         xxs: ".65rem",

tsconfig.json

@@ -18,6 +18,6 @@
     "strict": false,
     "target": "esnext"
   },
-  "include": ["global.d.ts","next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["global.d.ts", "next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }