Typescript

src/components/map/DragOverlay.tsx

@@ -1,26 +1,38 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Box, IconButton } from "theme-ui";
+import { Node } from "konva/types/Node";
 
 import RemoveTokenIcon from "../../icons/RemoveTokenIcon";
 
-function DragOverlay({ dragging, node, onRemove }) {
+type DragOverlayProps = {
+  dragging: boolean;
+  node: Node;
+  onRemove: () => void;
+};
+
+function DragOverlay({ dragging, node, onRemove }: DragOverlayProps) {
   const [isRemoveHovered, setIsRemoveHovered] = useState(false);
-  const removeTokenRef = useRef();
+  const removeTokenRef = useRef<HTMLDivElement>(null);
 
   // Detect token hover on remove icon manually to support touch devices
   useEffect(() => {
-    const map = document.querySelector(".map");
-    const mapRect = map.getBoundingClientRect();
-
     function detectRemoveHover() {
       if (!node || !dragging || !removeTokenRef.current) {
         return;
       }
+      const map = document.querySelector(".map");
+      if (!map) {
+        return;
+      }
+      const mapRect = map.getBoundingClientRect();
       const stage = node.getStage();
       if (!stage) {
         return;
       }
       const pointerPosition = stage.getPointerPosition();
+      if (!pointerPosition) {
+        return;
+      }
       const screenSpacePointerPosition = {
         x: pointerPosition.x + mapRect.left,
         y: pointerPosition.y + mapRect.top,
@@ -41,7 +53,7 @@ function DragOverlay({ dragging, node, onRemove }) {
       }
     }
 
-    let handler;
+    let handler: NodeJS.Timeout;
     if (node && dragging) {
       handler = setInterval(detectRemoveHover, 100);
     }

src/components/map/MapControls.tsx

@@ -21,6 +21,22 @@ import FullScreenExitIcon from "../../icons/FullScreenExitIcon";
 import NoteToolIcon from "../../icons/NoteToolIcon";
 
 import useSetting from "../../hooks/useSetting";
+import { Map } from "../../types/Map";
+import { MapState } from "../../types/MapState";
+
+type MapControlsProps = {
+  onMapChange: () => void;
+  onMapReset: () => void;
+  currentMap?: Map;
+  currentMapState?: MapState;
+  selectedToolId: string;
+  onSelectedToolChange: () => void;
+  toolSettings: any;
+  onToolSettingChange: () => void;
+  onToolAction: () => void;
+  disabledControls: string[];
+  disabledSettings: string[];
+};
 
 function MapContols({
   onMapChange,
@@ -34,7 +50,7 @@ function MapContols({
   onToolAction,
   disabledControls,
   disabledSettings,
-}) {
+}: MapControlsProps) {
   const [isExpanded, setIsExpanded] = useState(true);
   const [fullScreen, setFullScreen] = useSetting("map.fullScreen");
 

src/components/map/MapEditBar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Flex, Close, IconButton } from "theme-ui";
 
 import { groupsFromIds, itemsFromGroups } from "../../helpers/group";
@@ -13,8 +13,27 @@ import { useMapData } from "../../contexts/MapDataContext";
 import { useKeyboard } from "../../contexts/KeyboardContext";
 
 import shortcuts from "../../shortcuts";
+import { Map } from "../../types/Map";
+import {
+  MapChangeEventHandler,
+  MapResetEventHandler,
+} from "../../types/Events";
 
-function MapEditBar({ currentMap, disabled, onMapChange, onMapReset, onLoad }) {
+type MapEditBarProps = {
+  currentMap?: Map;
+  disabled: boolean;
+  onMapChange: MapChangeEventHandler;
+  onMapReset: MapResetEventHandler;
+  onLoad: (loading: boolean) => void;
+};
+
+function MapEditBar({
+  currentMap,
+  disabled,
+  onMapChange,
+  onMapReset,
+  onLoad,
+}: MapEditBarProps) {
   const [hasMapState, setHasMapState] = useState(false);
 
   const { maps, mapStates, removeMaps, resetMap } = useMapData();
@@ -56,11 +75,11 @@ function MapEditBar({ currentMap, disabled, onMapChange, onMapReset, onLoad }) {
     setIsMapsRemoveModalOpen(false);
     const selectedMaps = getSelectedMaps();
     const selectedMapIds = selectedMaps.map((map) => map.id);
-    onGroupSelect();
+    onGroupSelect(undefined);
     await removeMaps(selectedMapIds);
     // Removed the map from the map screen if needed
     if (currentMap && selectedMapIds.includes(currentMap.id)) {
-      onMapChange(null, null);
+      onMapChange(undefined, undefined);
     }
     onLoad(false);
   }
@@ -84,7 +103,7 @@ function MapEditBar({ currentMap, disabled, onMapChange, onMapReset, onLoad }) {
   /**
    * Shortcuts
    */
-  function handleKeyDown(event) {
+  function handleKeyDown(event: KeyboardEvent) {
     if (disabled) {
       return;
     }
@@ -117,7 +136,7 @@ function MapEditBar({ currentMap, disabled, onMapChange, onMapReset, onLoad }) {
       <Close
         title="Clear Selection"
         aria-label="Clear Selection"
-        onClick={() => onGroupSelect()}
+        onClick={() => onGroupSelect(undefined)}
       />
       <Flex>
         <IconButton