More lint fixes...

Author: vgeorge

packages/web/src/app/components/layout.tsx

@@ -1,10 +1,8 @@
+import type { ComponentChildren } from "preact";
+
 interface LayoutProps {
-  children: any;
+  children: ComponentChildren;
+}
+export function Layout(props: LayoutProps) {
+  return <div class="layout">{props.children}</div>;
 }
-export function Layout(props: LayoutProps){
-  return (
-    <div class="layout">
-      {props.children}
-    </div>
-  )
-}

packages/web/src/app/map/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "preact/hooks";
-import MapLibreGL from "maplibre-gl";
+import MapLibreGL, { MapMouseEvent } from "maplibre-gl";
 import { AppActionTypes, AppDispatch, AppState } from "../reducer";
 
 interface MapProps {
@@ -9,7 +9,7 @@ interface MapProps {
 
 const MAP_OPTIONS = {
   center: [-74, 40.6973],
-  zoom: 8,
+  zoom: 10,
 } as {
   center: [number, number];
   zoom: number;
@@ -162,16 +162,27 @@ export function Map(props: MapProps) {
         },
       });
 
-      function onClick(e: any) {
-        const props = e.features[0].properties;
+      function onClick(e: MapMouseEvent) {
+        // @ts-expect-error - MapMouseEvent doesn't know about features
+        const features = e.features as GeoJSON.Feature[];
+
+        if (!features || features.length === 0) {
+          return;
+        }
+        const { properties } = features[0];
+
+        if (!properties) {
+          return;
+        }
+
         let tags = "";
-        const tagObject = JSON.parse(props.tags);
+        const tagObject = JSON.parse(properties.tags);
         for (const [key, value] of Object.entries(tagObject)) {
           tags = tags + "<dt>" + key + "=" + value + "</dt>";
         }
-        const html = `<dl><dt><b>action:</b> ${props.action}</dt>
-        <dt><b>id:</b> ${props.id}</dt>
-        <dt><b>user:</b> ${props.user}<dt>
+        const html = `<dl><dt><b>action:</b> ${properties.action}</dt>
+        <dt><b>id:</b> ${properties.id}</dt>
+        <dt><b>user:</b> ${properties.user}<dt>
         <br />
         ${tags}
         </dl>`;

packages/web/src/app/map/utils.ts

@@ -1,4 +1,4 @@
-interface Stats {
+export interface Stats {
   tags: Record<string, number>;
   buildings: number;
   buildingsAdded: number;

packages/web/src/app/panel.tsx

@@ -1,10 +1,11 @@
+import type { ComponentChildren } from "preact";
 import { useState } from "preact/hooks";
 
 // TODO - Fix accessibility issues in this file and remove the following
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 interface PanelProps {
-  children: any;
+  children: ComponentChildren;
 }
 export function Panel(props: PanelProps) {
   const [openPanel, setOpenPanel] = useState(false);

packages/web/src/app/reducer/index.ts

@@ -1,11 +1,13 @@
-import { AsyncActionHandlers, useReducerAsync } from "use-reducer-async";
+import { useReducerAsync } from "use-reducer-async";
+// eslint-disable-next-line no-duplicate-imports
+import type { AsyncActionHandlers } from "use-reducer-async";
 import logReducer from "./log.ts";
 import { calculateStats } from "../map/utils.ts";
 import tArea from "@turf/area";
 import tBboxPolygon from "@turf/bbox-polygon";
 import { getFgbData } from "../utils/get-fgb-data.ts";
 import { Map } from "maplibre-gl";
-import { Dispatch, Reducer } from "preact/hooks";
+import type { Dispatch, Reducer } from "preact/hooks";
 
 const availableTimestamps = [
   `2024-05-19T05:00:00Z`,

packages/web/src/app/reducer/log.ts

@@ -1,6 +1,7 @@
+import type { Reducer } from "preact/hooks";
 import { AppAction, AppState } from ".";
 
-export default function logReducer(reducer: any) {
+export default function logReducer(reducer: Reducer<AppState, AppAction>) {
   /* eslint-disable no-console */
   return (state: AppState, action: AppAction) => {
     const nextState = reducer(state, action);
@@ -13,7 +14,7 @@ export default function logReducer(reducer: any) {
       "%c%s",
       "color: green; font-weight: bold",
       "next state ",
-      nextState
+      nextState,
     );
     console.groupEnd();
 

packages/web/src/app/stats.tsx

@@ -1,7 +1,8 @@
 import { useState } from "preact/hooks";
+import type { Stats } from "./map/utils";
 
 interface StatsProps {
-  stats: any;
+  stats: Stats;
   loading: boolean;
   currentTimestamp?: string;
 }
@@ -108,8 +109,9 @@ export function Stats(props: StatsProps) {
       </article>
     );
   }
-  const sortedUsers: any[] = [];
-  const sortedTags: any[] = [];
+
+  const sortedUsers: [string, number][] = [];
+  const sortedTags: [string, number][] = [];
   Object.keys(stats.users).forEach((user) => {
     sortedUsers.push([user, stats.users[user]]);
   });

packages/web/src/app/time-navigator.tsx

@@ -1,6 +1,6 @@
 import { addHours, addDays, subDays, subHours } from "date-fns";
 import { AppActionTypes, AppDispatch, AppState } from "./reducer";
-import { ComponentChild } from "preact";
+import type { ComponentChildren } from "preact";
 
 function LoadingSkeleton() {
   return (
@@ -17,7 +17,7 @@ const TimeChangeButton = ({
 }: {
   dispatchAppState: AppDispatch;
   nextTimestamp: Date;
-  children: ComponentChild;
+  children: ComponentChildren;
 }) => (
   <button
     onClick={(e) => {