Fix types and lints

components/Map.tsx

@@ -1,20 +1,24 @@
-import React, { useRef, useEffect, useState } from "react";
+import React, { useRef, useEffect } from "react";
 import Gradient from "javascript-color-gradient";
-import mapboxgl from "!mapbox-gl"; // eslint-disable-line import/no-webpack-loader-syntax
+import mapboxgl from "mapbox-gl";
 
 import styles from "../styles/Map.module.css";
 import cellModEdits from "../data/cellModEditCounts.json";
 import ToggleLayersControl from "./ToggleLayersControl";
 
-mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN;
+mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN ?? "";
 
 const colorGradient = new Gradient();
 colorGradient.setGradient("#888888", "#00FF00", "#FFFF00", "#FF0000");
 colorGradient.setMidpoint(300);
 
 const Map = () => {
-  const mapContainer = useRef(null);
-  const map = useRef(null);
+  const mapContainer = useRef<HTMLDivElement | null>(
+    null
+  ) as React.MutableRefObject<HTMLDivElement>;
+  const map = useRef<mapboxgl.Map | null>(
+    null
+  ) as React.MutableRefObject<mapboxgl.Map>;
 
   useEffect(() => {
     if (map.current) return; // initialize map only once
@@ -57,7 +61,10 @@ const Map = () => {
       var viewportNW = map.current.project([-180, 85.051129]);
       var cellSize = Math.pow(2, zoom + 2);
 
-      const graticule = {
+      const graticule: GeoJSON.FeatureCollection<
+        GeoJSON.Geometry,
+        GeoJSON.GeoJsonProperties
+      > = {
         type: "FeatureCollection",
         features: [],
       };
@@ -104,7 +111,10 @@ const Map = () => {
         source: "graticule",
       });
 
-      const gridLabelPoints = {
+      const gridLabelPoints: GeoJSON.FeatureCollection<
+        GeoJSON.Geometry,
+        GeoJSON.GeoJsonProperties
+      > = {
         type: "FeatureCollection",
         features: [],
       };
@@ -153,7 +163,10 @@ const Map = () => {
         "graticule"
       );
 
-      const grid = {
+      const grid: GeoJSON.FeatureCollection<
+        GeoJSON.Geometry,
+        GeoJSON.GeoJsonProperties
+      > = {
         type: "FeatureCollection",
         features: [],
       };
@@ -175,7 +188,9 @@ const Map = () => {
             x * cellSize + viewportNW.x,
             y * cellSize + viewportNW.y + cellSize,
           ]);
-          const editCount = cellModEdits[`${x - 57},${50 - y}`];
+          const editCount = (cellModEdits as Record<string, number>)[
+            `${x - 57},${50 - y}`
+          ];
           grid.features.push({
             type: "Feature",
             geometry: {
@@ -226,7 +241,7 @@ const Map = () => {
     });
 
     map.current.on("click", "grid-layer", (e) => {
-      console.log(e.features[0]);
+      console.log(e.features && e.features[0]);
     });
   });
 

components/ToggleLayersControl.tsx

@@ -1,4 +1,5 @@
-import React, { useRef, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
+import type mapboxgl from "mapbox-gl";
 
 import styles from "../styles/ToggleLayersControl.module.css";
 
@@ -19,7 +20,7 @@ const ToggleLayersControl: React.FC<Props> = ({ map }) => {
         heatmapVisible ? "visible" : "none"
       );
     }
-  }, [heatmapVisible]);
+  }, [map, heatmapVisible]);
   useEffect(() => {
     if (map.current && map.current.isStyleLoaded()) {
       map.current.setLayoutProperty(
@@ -28,7 +29,7 @@ const ToggleLayersControl: React.FC<Props> = ({ map }) => {
         gridVisible ? "visible" : "none"
       );
     }
-  }, [gridVisible]);
+  }, [map, gridVisible]);
   useEffect(() => {
     if (map.current && map.current.isStyleLoaded()) {
       map.current.setLayoutProperty(
@@ -37,7 +38,7 @@ const ToggleLayersControl: React.FC<Props> = ({ map }) => {
         labelsVisible ? "visible" : "none"
       );
     }
-  }, [labelsVisible]);
+  }, [map, labelsVisible]);
 
   return (
     <div className="mapboxgl-ctrl-top-left">
@@ -63,7 +64,6 @@ const ToggleLayersControl: React.FC<Props> = ({ map }) => {
         <button
           type="button"
           onClick={() => setLabelsVisible(!labelsVisible)}
-          className={styles["labels-toggle"]}
           className={`${styles["labels-toggle"]} ${
             !labelsVisible ? styles["toggle-off"] : ""
           }`}

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@types/javascript-color-gradient": "^1.3.0",
+    "@types/mapbox-gl": "^2.6.0",
     "javascript-color-gradient": "^1.3.2",
     "mapbox-gl": "^2.6.1",
     "next": "12.0.8",

pages/index.tsx

@@ -2,14 +2,13 @@ import type { NextPage } from "next";
 import Head from "next/head";
 import "mapbox-gl/dist/mapbox-gl.css";
 
-import styles from "../styles/Home.module.css";
 import Map from "../components/Map";
 
 const Home: NextPage = () => {
   return (
     <>
       <Head>
-        <meta charset="utf-8" />
+        <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>Modmapper</title>
         <meta name="description" content="Map of Skyrim mods" />