Add react-hooks eslint plugin

.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   extends: [
     'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
   ],

package.json

@@ -22,6 +22,7 @@
     "pg": "^8.7.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "uuid": "^10.0.0",
     "zod": "^3.23.8",
     "zustand": "^4.5.4"
   },
@@ -60,6 +61,7 @@
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@types/react-redux": "^7.1.18",
+    "@types/uuid": "^10.0.0",
     "@types/webpack": "^5.28.0",
     "@types/webpack-env": "^1.16.2",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
@@ -70,6 +72,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.26.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "html-webpack-plugin": "^5.3.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

src/client/Map/MapContainer.tsx

@@ -85,41 +85,51 @@ const MapContainer: FC<{ mapserverUrl: string }> = ({ mapserverUrl }) => {
   )
   const closeMenu = useCallback(() => setMenu(closedMenu), [])
 
-  const onClick: MouseEventHandler = useCallback((e) => {
-    closeMenu()
-    e.preventDefault()
-  }, [])
-
-  const onContextMenu: MouseEventHandler = useCallback((e) => {
-    e.preventDefault()
-    setLastClick(toLngLat(e))
-    openMenu(e.point)
-  }, [])
+  const onClick: MouseEventHandler = useCallback(
+    (e) => {
+      closeMenu()
+      e.preventDefault()
+    },
+    [closeMenu]
+  )
 
-  const onTouchStart: TouchEventHandler = useCallback((e) => {
-    window.clearTimeout(longTouchTimer.current)
-    setTouchMarker({
-      direction: 'up',
-      top: e.point.y + 56,
-      left: e.point.x,
-    })
-    longTouchTimer.current = window.setTimeout((): void => {
+  const onContextMenu: MouseEventHandler = useCallback(
+    (e) => {
       e.preventDefault()
-      editWaypoints({
-        type: 'add',
-        point: toLngLat(e),
-        waypointType: 'destination',
+      setLastClick(toLngLat(e))
+      openMenu(e.point)
+    },
+    [openMenu]
+  )
+
+  const onTouchStart: TouchEventHandler = useCallback(
+    (e) => {
+      window.clearTimeout(longTouchTimer.current)
+      setTouchMarker({
+        direction: 'up',
+        top: e.point.y + 56,
+        left: e.point.x,
       })
-      setTouchMarker(undefined)
-    }, longTouchDuration)
-  }, [])
+      longTouchTimer.current = window.setTimeout((): void => {
+        e.preventDefault()
+        editWaypoints({
+          type: 'add',
+          point: toLngLat(e),
+          waypointType: 'destination',
+        })
+        setTouchMarker(undefined)
+      }, longTouchDuration)
+    },
+    [editWaypoints]
+  )
 
   const onTouchEnd: TouchEventHandler = useCallback((e) => {
     window.clearTimeout(longTouchTimer.current)
     e.preventDefault()
     setTouchMarker(undefined)
   }, [])
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const onRender: MapEventHandler = useCallback(
     throttle(({ target }) => {
       storeSetting('zoom', target.getZoom())
@@ -165,28 +175,31 @@ const MapContainer: FC<{ mapserverUrl: string }> = ({ mapserverUrl }) => {
         },
       }
     },
-    []
+    [editWaypoints, setSource]
   )
 
-  const handleDragWaypoint = useCallback((id: string, lngLat: LngLat): void => {
-    editWaypoints({
-      type: 'move',
-      point: lngLat,
-      id,
-    })
-  }, [])
+  const handleDragWaypoint = useCallback(
+    (id: string, lngLat: LngLat): void => {
+      editWaypoints({
+        type: 'move',
+        point: lngLat,
+        id,
+      })
+    },
+    [editWaypoints]
+  )
 
   const handleWaypointContextmenu = useCallback(
     (waypoint: Waypoint, lngLat: LngLat, point: Point): void => {
       setLastClick(lngLat)
       openMenu(point, { ...waypoint, dragged: false })
     },
-    []
+    [openMenu]
   )
 
   useEffect(() => {
     setSource(generateRouteSources(routes))
-  }, [routes])
+  }, [routes, setSource])
 
   return (
     <>

src/client/Map/Marker.tsx

@@ -80,6 +80,7 @@ const Marker: FC<MarkerProps> = (props) => {
   const { lng, lat, type, letter } = waypoint
   const [isDragged, setIsDragged] = useState(false)
   const map = useMap()
+
   const marker: MaplibreMarker = useMemo(() => {
     const element = document.createElement('div')
     return new MaplibreMarker({ element, draggable: true, anchor: 'bottom' })
@@ -96,13 +97,15 @@ const Marker: FC<MarkerProps> = (props) => {
           marker.getLngLat()
         )
       })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
+
   useEffect(() => {
     marker.addTo(map)
     return () => {
       marker.remove()
     }
-  }, [])
+  }, [map, marker])
   const onDivClick = useCallback(
     (e: MouseEvent) => {
       e.nativeEvent.stopImmediatePropagation()
@@ -111,7 +114,7 @@ const Marker: FC<MarkerProps> = (props) => {
         y: e.pageY - 64,
       })
     },
-    [onContextMenu]
+    [onContextMenu, waypoint, marker]
   )
   const onDivContextMenu = useCallback(
     (e: MouseEvent) => {
@@ -122,7 +125,7 @@ const Marker: FC<MarkerProps> = (props) => {
         y: e.pageY - 64,
       })
     },
-    [onContextMenu]
+    [onContextMenu, waypoint, marker]
   )
   const onDivMouseDown = useCallback((e: MouseEvent) => {
     if (e.button === 2) {

src/client/Mapbox/map.ts

@@ -67,6 +67,7 @@ export const useMaplibreMap = (
     return () => {
       maplibreMap.remove()
     }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
   return map
 }

src/client/Mapbox/source.ts

@@ -109,8 +109,9 @@ export const useSource = <S extends SourceId, L extends LayerId>(
       }
       removeSource(map, source.id)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
   useEffect(() => {
     setSourceData(map, source)
-  }, [source])
+  }, [map, source])
 }

src/common/util.test.ts

@@ -19,7 +19,6 @@ import {
   throttle,
   calculateOffset,
   applyOffset,
-  makeIdGenerator,
   combineSegments,
 } from './util'
 import { Route } from './types'
@@ -210,17 +209,6 @@ test('positionOffset', (): void => {
   })
 })
 
-test('makeIdGenerator', (): void => {
-  const gen1 = makeIdGenerator('gen1')
-  const gen2 = makeIdGenerator('gen2')
-  expect(gen1()).toEqual('gen1-0')
-  expect(gen1()).toEqual('gen1-1')
-  expect(gen2()).toEqual('gen2-0')
-  expect(gen2()).toEqual('gen2-1')
-  expect(gen1()).toEqual('gen1-2')
-  expect(gen2()).toEqual('gen2-2')
-})
-
 test('combineSegments', (): void => {
   const routes = [
     {

src/common/util.ts

@@ -1,4 +1,5 @@
 import { useEffect, useRef } from 'react'
+import { v4 as uuidv4 } from 'uuid'
 import geojson from 'geojson'
 import {
   Id,
@@ -262,8 +263,7 @@ export const applyOffset = (
 })
 
 export const makeIdGenerator = (prefix: string): (() => string) => {
-  let i = 0
-  return () => `${prefix}-${i++}`
+  return () => `${prefix}-${uuidv4()}`
 }
 
 export const sqDistance = (p1: Point, p2: Point): number => {