Cleanup code. Name variables properly.

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
+}

src/App.js

@@ -5,21 +5,19 @@ import AccessibleNavigationAnnouncer from "./components/AccessibleNavigationAnno
 
 const Layout = lazy(() => import("./containers/Layout"));
 
-function PublicRoute({ component: Component, ...rest }) {
+const PublicRoute = ({ component: Component, ...rest }) => {
   return <Route {...rest} render={(props) => <Component {...props} />} />;
-}
+};
 
-function App() {
+const App = () => {
   return (
-    <>
-      <Router>
-        <AccessibleNavigationAnnouncer />
-        <Switch>
-          <PublicRoute path="/" component={Layout} />
-        </Switch>
-      </Router>
-    </>
+    <Router>
+      <AccessibleNavigationAnnouncer />
+      <Switch>
+        <PublicRoute path="/" component={Layout} />
+      </Switch>
+    </Router>
   );
-}
+};
 
 export default App;

src/components/AccessibleNavigationAnnouncer.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 
-function AccessibleNavigationAnnouncer() {
+const AccessibleNavigationAnnouncer = () => {
   const [message, setMessage] = useState("");
   const location = useLocation();
 
@@ -26,6 +26,6 @@ function AccessibleNavigationAnnouncer() {
       {message}
     </span>
   );
-}
+};
 
 export default AccessibleNavigationAnnouncer;

src/components/Cards/CapacityCard.js

@@ -1,7 +1,7 @@
 import { Card } from "@windmill/react-ui";
 import React from "react";
 
-export function CapacityCard({ data }) {
+const CapacityCard = ({ data }) => {
   const showBedInfo = (bedData, category) => (
     <div className="grid row-span-2 grid-cols-9 mt-2 h-12">
       <div className="col-span-1 pl-3 pt-3 dark:text-gray-200 text-sm font-medium">
@@ -113,4 +113,6 @@ export function CapacityCard({ data }) {
       </div>
     </Card>
   );
-}
+};
+
+export default CapacityCard;

src/components/Cards/InfoCard.js

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import React from "react";
 import { animated, config, useSpring } from "react-spring";
 
-export function InfoCard({ title, value, delta = null, small = false }) {
+const InfoCard = ({ title, value, delta = null, small = false }) => {
   const { _value, _delta } = useSpring({
     from: { _value: 0, _delta: 0 },
     to: {
@@ -18,28 +18,28 @@ export function InfoCard({ title, value, delta = null, small = false }) {
       <CardBody className="flex flex-col">
         <div>
           <p
-            className={clsx(
-              small ? "mb-1 text-xs" : "mb-2 text-sm",
-              "dark:text-gray-400 text-gray-600 font-medium"
-            )}
+            className={clsx("dark:text-gray-400 text-gray-600 font-medium", {
+              "mb-1 text-xs": small,
+              "mb-2 text-sm": !small,
+            })}
           >
             {title}
           </p>
           <div className="flex">
             <animated.p
               className={clsx(
-                small ? "text-base" : "text-lg",
-                "dark:text-gray-200 text-gray-700 font-semibold"
+                "dark:text-gray-200 text-gray-700 font-semibold",
+                { "text-base": small, "text-lg": !small }
               )}
             >
               {_value.interpolate((x) => Math.round(x))}
             </animated.p>
             {delta !== null && (
               <animated.span
-                className={clsx(
-                  small ? "text-xs" : "text-sm",
-                  "ml-2 dark:text-gray-400 text-gray-600"
-                )}
+                className={clsx("ml-2 dark:text-gray-400 text-gray-600", {
+                  "text-xs": small,
+                  "text-sm": !small,
+                })}
               >
                 {_delta.interpolate((y) => {
                   const x = Math.round(y);
@@ -52,4 +52,6 @@ export function InfoCard({ title, value, delta = null, small = false }) {
       </CardBody>
     </Card>
   );
-}
+};
+
+export default InfoCard;

src/components/Cards/OxygenCard.js

@@ -1,8 +1,9 @@
 import { Card } from "@windmill/react-ui";
 import React from "react";
 import { OXYGEN_TYPES } from "../../utils/constants";
+import clsx from "clsx";
 
-export function OxygenCard({ data }) {
+const OxygenCard = ({ data }) => {
   const getSVG = (parameter) => {
     if (parameter === "Quantity") {
       return (
@@ -94,9 +95,12 @@ export function OxygenCard({ data }) {
           >
             <div className="flex flex-row justify-center">
               <div
-                className={`text-gray-800 dark:text-gray-200 text-lg font-semibold ${
-                  data.is_low[idx] ? "text-red-500 dark:text-red-500" : ""
-                }`}
+                className={clsx(
+                  "dark:text-gray-200 text-gray-800 text-lg font-semibold",
+                  {
+                    "text-red-500 dark:text-red-500": data.is_low[idx],
+                  }
+                )}
               >
                 {val}
               </div>
@@ -183,4 +187,6 @@ export function OxygenCard({ data }) {
       </div>
     </Card>
   );
-}
+};
+
+export default OxygenCard;

src/components/Chart/RadialCard.js

@@ -3,7 +3,7 @@ import React from "react";
 import { ChevronsDown, ChevronsUp } from "react-feather";
 import { animated, config, useSpring } from "react-spring";
 
-function RadialCard({ label, count, current, previous, col = "" }) {
+const RadialCard = ({ label, count, current, previous, col = "" }) => {
   const current_used = Math.round((current.used / current.total) * 100);
   const previous_used = Math.round((previous.used / previous.total) * 100);
   const diff = current_used - previous_used;
@@ -88,6 +88,6 @@ function RadialCard({ label, count, current, previous, col = "" }) {
       </div>
     </Card>
   );
-}
+};
 
 export default RadialCard;

src/components/Chart/TimeseriesBarChart.js

@@ -13,7 +13,7 @@ import {
 
 import { SectionTitle } from "../Typography/Title";
 
-function TimeseriesBarChart({ name, data, dataKeys, colors }) {
+const TimeseriesBarChart = ({ name, data, dataKeys, colors }) => {
   const { mode } = useContext(WindmillContext);
 
   return (
@@ -66,6 +66,6 @@ function TimeseriesBarChart({ name, data, dataKeys, colors }) {
       </Card>
     </div>
   );
-}
+};
 
 export default TimeseriesBarChart;

src/components/Chart/TimeseriesLineChart.js

@@ -13,7 +13,7 @@ import {
 
 import { SectionTitle } from "../Typography/Title";
 
-function TimeseriesLineChart({ name, data, dataKeys, colors }) {
+const TimeseriesLineChart = ({ name, data, dataKeys, colors }) => {
   const { mode } = useContext(WindmillContext);
 
   return (
@@ -72,6 +72,6 @@ function TimeseriesLineChart({ name, data, dataKeys, colors }) {
       </Card>
     </div>
   );
-}
+};
 
 export default TimeseriesLineChart;

src/components/DistrictDashboard/Capacity.js

@@ -1,6 +1,5 @@
 import { Button, Input } from "@windmill/react-ui";
 import Pagination from "../Pagination";
-import clsx from "clsx";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import fuzzysort from "fuzzysort";
@@ -24,10 +23,10 @@ import {
   getNDateBefore,
   processFacilities,
 } from "../../utils/utils";
-import { CapacityCard } from "../Cards/CapacityCard";
+import CapacityCard from "../Cards/CapacityCard";
 import RadialCard from "../Chart/RadialCard";
-import { Pill } from "../Pill/Pill";
-import { ValuePill } from "../Pill/ValuePill";
+import Pill from "../Pill/Pill";
+import ValuePill from "../Pill/ValuePill";
 import ThemedSuspense from "../ThemedSuspense";
 import { SectionTitle } from "../Typography/Title";
 
@@ -84,7 +83,7 @@ const initialFacilitiesTrivia = {
   oxygen: 0,
 };
 
-function Capacity({ filterDistrict, filterFacilityTypes, date }) {
+const Capacity = ({ filterDistrict, filterFacilityTypes, date }) => {
   const [forecast, setForecast] = useState(false);
   const { data } = useSWR(
     ["Capacity", date, filterDistrict.id],
@@ -336,6 +335,6 @@ function Capacity({ filterDistrict, filterFacilityTypes, date }) {
       </animated.div>
     )
   );
-}
+};
 
 export default Capacity;

src/components/DistrictDashboard/CapacityForecast.js

@@ -26,16 +26,16 @@ import {
   processFacilities,
 } from "../../utils/utils";
 import NoData from "../NoData";
-import { Pill } from "../Pill/Pill";
+import Pill from "../Pill/Pill";
 
 const arima = wrap(new Worker("../../utils/arima.worker", { type: "module" }));
 
-function CapacityForecast({
+const CapacityForecast = ({
   filterDistrict,
   filterFacilityTypes,
   date,
   setForecast,
-}) {
+}) => {
   const [timespan, setTimespan] = useState({ past: 14, forecast: 14 });
   const { data } = useSWR(
     ["CapacityForecast", date, filterDistrict.id, timespan.past],
@@ -209,9 +209,9 @@ function CapacityForecast({
   ) : (
     <NoData />
   );
-}
+};
 
-function SingleCapacityForecast({ title, past, forecasted }) {
+const SingleCapacityForecast = ({ title, past, forecasted }) => {
   const { mode } = useContext(WindmillContext);
   const { a, mx, mn, fa, fmx, fmn } = useSpring({
     from: { a: 0, mx: 0, mn: 0 },
@@ -360,6 +360,6 @@ function SingleCapacityForecast({ title, past, forecasted }) {
       </div>
     </div>
   );
-}
+};
 
 export default CapacityForecast;

src/components/DistrictDashboard/CapacityTimeseries.js

@@ -15,7 +15,7 @@ import TimeseriesBarChart from "../Chart/TimeseriesBarChart";
 import TimeseriesLineChart from "../Chart/TimeseriesLineChart";
 import NoData from "../NoData";
 
-function CapacityTimeseries({ filterDistrict, filterFacilityTypes, dates }) {
+const CapacityTimeseries = ({ filterDistrict, filterFacilityTypes, dates }) => {
   const { data } = useSWR(
     ["CapacityTimeseries", dates, filterDistrict.id],
     (url, dates, district) =>
@@ -136,6 +136,6 @@ function CapacityTimeseries({ filterDistrict, filterFacilityTypes, dates }) {
       )}
     </div>
   );
-}
+};
 
 export default CapacityTimeseries;

src/components/DistrictDashboard/DistrictMap.js

@@ -17,7 +17,7 @@ import { SectionTitle } from "../Typography/Title";
 const GMap = lazy(() => import("../DistrictDashboard/GMap"));
 dayjs.extend(relativeTime);
 
-function DistrictMap({ filterDistrict, filterFacilityTypes, date }) {
+const DistrictMap = ({ filterDistrict, filterFacilityTypes, date }) => {
   const { data } = useSWR(
     ["Capacity", date, filterDistrict.id],
     (url, date, district) =>
@@ -54,6 +54,6 @@ function DistrictMap({ filterDistrict, filterFacilityTypes, date }) {
       </Suspense>
     </animated.div>
   ));
-}
+};
 
 export default DistrictMap;

src/components/DistrictDashboard/FacilityTable.js

@@ -14,13 +14,13 @@ import fuzzysort from "fuzzysort";
 import React, { useEffect, useState } from "react";
 import { CSVLink } from "react-csv";
 
-function FacilityTable({
+const FacilityTable = ({
   columns = [],
   data,
   className,
   exported = null,
   title = "Facilities",
-}) {
+}) => {
   const resultsPerPage = 25;
   const [filteredData, setFilteredData] = useState(data);
   const [page, setPage] = useState(1);
@@ -122,6 +122,6 @@ function FacilityTable({
       </TableContainer>
     </div>
   );
-}
+};
 
 export default FacilityTable;

src/components/DistrictDashboard/Filter.js

@@ -19,7 +19,7 @@ import {
   GOVT_FACILITY_TYPES,
 } from "../../utils/constants";
 
-function Filter({
+const Filter = ({
   timeseries,
   setTimeseries,
   date,
@@ -31,7 +31,7 @@ function Filter({
   filterFacilityTypes,
   setFilterFacilityTypes,
   content,
-}) {
+}) => {
   const [facilityTypesFilterOptions, setFacilityTypesFilterOptions] =
     useState(FACILITY_TYPES);
   const [_filterFacilityTypes, _setFilterFacilityTypes] =
@@ -45,8 +45,8 @@ function Filter({
   return (
     <div
       className={clsx(
-        floating ? " mt-10 flex-shrink-0 " : "mb-8 rounded-lg",
-        "flex flex-col items-center justify-between px-1 py-1 dark:bg-gray-800 bg-white shadow-md sm:px-4 sm:py-2 md:flex-row"
+        "flex flex-col items-center justify-between px-1 py-1 dark:bg-gray-800 bg-white shadow-md sm:px-4 sm:py-2 md:flex-row",
+        { "mt-10 flex-shrink-0": floating, "mb-8 rounded-lg": !floating }
       )}
     >
       <p className="inline-flex dark:text-gray-400">Filters</p>
@@ -203,6 +203,6 @@ function Filter({
       </div>
     </div>
   );
-}
+};
 
 export default Filter;