Update dependencies

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16.14.0-alpine3.14 AS base
+FROM node:20-alpine3.19 AS base
 RUN apk --no-cache add alpine-sdk python3 postgresql-dev findutils
 WORKDIR /app
 COPY package.json package-lock.json ./

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "license": "AGPL-3.0-only",
   "engines": {
-    "node": "16"
+    "node": "20"
   },
   "private": true,
   "browserslist": [
@@ -12,16 +12,16 @@
   "dependencies": {
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "@mui/icons-material": "5.5.0",
-    "@mui/material": "5.5.0",
+    "@mui/icons-material": "^5.15.17",
+    "@mui/material": "^5.15.17",
     "@redux-devtools/extension": "^3.2.2",
-    "clsx": "^1.1.1",
+    "clsx": "^2.1.1",
     "express": "^4.17.1",
-    "maplibre-gl": "^2.1.7",
-    "notistack": "1.0.6-next.3",
+    "maplibre-gl": "^4.2.0",
+    "notistack": "^3.0.1",
     "pg": "^8.7.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-redux": "^7.2.5",
     "redux": "^4.1.0",
     "redux-saga": "^1.1.3"
@@ -31,7 +31,7 @@
     "watch:client": "BABEL_ENV=server NODE_ENV=development webpack serve --color --config webpack.dev.babel.js",
     "watch:client:parcel": "parcel ./src/client/index.html --port 8081",
     "watch:typecheck": "tsc --noEmit --watch --preserveWatchOutput --pretty",
-    "watch": "concurrently -k -n server,client,typecheck 'npm run watch:server' 'npm run watch:client' 'npm run watch:typecheck'",
+    "watch": "concurrently -k -n server,client,typecheck -c magenta,green,blue 'npm run watch:server' 'npm run watch:client' 'npm run watch:typecheck'",
     "watch:parcel": "concurrently -k -n server,client,typecheck 'npm run watch:server' 'npm run watch:client:parcel' 'npm run watch:typecheck'",
     "lint": "tsc --noEmit && eslint \"src/**/*.{js,ts,tsx}\" --max-warnings=0 && prettier --check \"src/**/*.{js,ts,tsx}\"",
     "typecheck": "tsc --noEmit --pretty",
@@ -53,41 +53,40 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
     "@types/express": "^4.17.13",
     "@types/geojson": "^7946.0.8",
-    "@types/jest": "^27.0.2",
+    "@types/jest": "^29.5.12",
     "@types/mapbox__point-geometry": "^0.1.2",
-    "@types/node": "^16.11.7",
+    "@types/node": "^20.12.11",
     "@types/parcel-bundler": "^1.12.4",
     "@types/pg": "^8.6.1",
-    "@types/react": "^17.0.24",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-redux": "^7.1.18",
     "@types/webpack": "^5.28.0",
     "@types/webpack-env": "^1.16.2",
-    "@typescript-eslint/eslint-plugin": "^5.14.0",
-    "@typescript-eslint/parser": "^5.14.0",
-    "babel-loader": "^8.2.2",
-    "concurrently": "^7.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
+    "babel-loader": "^9.1.3",
+    "concurrently": "^8.2.2",
     "eslint": "^8.10.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.26.0",
     "html-webpack-plugin": "^5.3.2",
-    "jest": "^27.2.1",
-    "nodemon": "^2.0.12",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "parcel": "^2.4.0",
-    "prettier": "^2.4.1",
-    "react-refresh": "^0.11.0",
-    "rimraf": "^3.0.2",
-    "source-map-loader": "^3.0.0",
+    "prettier": "^3.2.5",
+    "react-refresh": "^0.14.2",
+    "rimraf": "^5.0.6",
+    "source-map-loader": "^5.0.0",
     "terser-webpack-plugin": "^5.2.4",
-    "ts-jest": "^27.0.5",
-    "ts-node": "^10.2.1",
-    "ts-node-dev": "^1.1.8",
-    "typescript": "^4.4.3",
+    "ts-jest": "^29.1.2",
+    "ts-node-dev": "^2.0.0",
+    "typescript": "^5.4.5",
     "webpack": "^5.53.0",
     "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4",
     "webpack-merge": "^5.8.0",
     "webpack-node-externals": "^3.0.0"
   },

src/client/App.tsx

@@ -1,4 +1,4 @@
-import React, { VFC, useEffect, useState } from 'react'
+import React, { FC, useEffect, useState } from 'react'
 import { Provider } from 'react-redux'
 import { SnackbarProvider } from 'notistack'
 import { styled } from '@mui/material/styles'
@@ -20,7 +20,7 @@ const Container = styled('div')({
   height: '100vh',
 })
 
-const App: VFC = () => {
+const App: FC = () => {
   const [config, setConfig] = useState<ClientConfig>()
   useEffect(() => {
     const loadConfig = async (): Promise<void> => {
@@ -40,7 +40,7 @@ const App: VFC = () => {
   )
 }
 
-const WrappedApp: VFC = () => (
+const WrappedApp: FC = () => (
   <Provider store={store}>
     <StyledEngineProvider injectFirst>
       <SnackbarProvider>

src/client/Appbar/Appbar.tsx

@@ -1,12 +1,12 @@
-import React, { VFC, useState } from 'react'
+import React, { FC, useState } from 'react'
 import MuiAppBar from '@mui/material/AppBar'
 import IconButton from '@mui/material/IconButton'
 import Toolbar from '@mui/material/Toolbar'
 import Typography from '@mui/material/Typography'
 import SettingsIcon from '@mui/icons-material/Settings'
 import TopDrawer from '../InformationPanel/TopDrawer'
 
-const AppBar: VFC = () => {
+const AppBar: FC = () => {
   const [open, setOpen] = useState(false)
   return (
     <MuiAppBar position="static">

src/client/InformationPanel/BottomDrawer.tsx

@@ -1,4 +1,4 @@
-import React, { VFC, useState, useEffect } from 'react'
+import React, { FC, useState, useEffect } from 'react'
 import { useSelector } from 'react-redux'
 import clsx from 'clsx'
 import Button from '@mui/material/Button'
@@ -67,7 +67,7 @@ const DrawerButton = styled(Button)(({ theme: { palette, spacing } }) => ({
   },
 }))
 
-const BottomDrawer: VFC = () => {
+const BottomDrawer: FC = () => {
   const waypoints = useSelector(waypointsSelector)
   const items = Math.min(
     waypoints.filter(hasProperty('type', 'destination')).length,

src/client/InformationPanel/InformationPanel.tsx

@@ -1,4 +1,4 @@
-import React, { VFC } from 'react'
+import React, { FC } from 'react'
 import MuiPaper from '@mui/material/Paper'
 import { styled } from '@mui/material/styles'
 import RouteList from './RouteList'
@@ -12,7 +12,7 @@ const Paper = styled(MuiPaper)(({ theme: { spacing } }) => ({
   zIndex: 10,
 }))
 
-const InformationPanel: VFC = () => (
+const InformationPanel: FC = () => (
   <Paper elevation={3} sx={{ display: { xs: 'none', md: 'block' } }}>
     <RouteList />
     <SettingsAccordion />

src/client/InformationPanel/RouteList.tsx

@@ -1,4 +1,4 @@
-import React, { VFC, ReactElement } from 'react'
+import React, { FC, ReactElement } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import List from '@mui/material/List'
 import { styled } from '@mui/material/styles'
@@ -20,7 +20,7 @@ type RouteListProps = {
   onClick?: () => void
 }
 
-const RouteList: VFC<RouteListProps> = ({ onClick }) => {
+const RouteList: FC<RouteListProps> = ({ onClick }) => {
   const dispatch = useDispatch()
   const routes = useSelector(routesSelector)
   const waypoints = useSelector(waypointsSelector)

src/client/InformationPanel/RouteSegment.tsx

@@ -1,4 +1,4 @@
-import React, { VFC } from 'react'
+import React, { FC } from 'react'
 import MuiAvatar from '@mui/material/Avatar'
 import IconButton from '@mui/material/IconButton'
 import ListItem from '@mui/material/ListItem'
@@ -17,13 +17,13 @@ const Avatar = styled(MuiAvatar)(({ theme: { palette } }) => ({
   fontWeight: 'bold',
 }))
 
-const Point: VFC<{ text: string }> = ({ text }) => (
+const Point: FC<{ text: string }> = ({ text }) => (
   <ListItemAvatar>
     <Avatar>{text}</Avatar>
   </ListItemAvatar>
 )
 
-const Delete: VFC<{ onClick: () => void }> = ({ onClick }) => (
+const Delete: FC<{ onClick: () => void }> = ({ onClick }) => (
   <ListItemSecondaryAction>
     <IconButton onClick={onClick}>
       <DeleteIcon />
@@ -67,7 +67,7 @@ type RouteSegmentProps = (SegmentProps | TotalsProps) & {
   onClick?: () => void
 }
 
-const RouteSegment: VFC<RouteSegmentProps> = (props) => {
+const RouteSegment: FC<RouteSegmentProps> = (props) => {
   const { length, duration, fuel, found, onClick } = props
   const durationStr = duration ? formatDuration(duration) : ''
   const fuelStr = fuel ? `, ${round(fuel, 1)} l` : ''

src/client/InformationPanel/SettingField.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, VFC } from 'react'
+import React, { ChangeEvent, FC } from 'react'
 import CancelIcon from '@mui/icons-material/Cancel'
 import MuiIconButton from '@mui/material/IconButton'
 import InputAdornment from '@mui/material/InputAdornment'
@@ -14,7 +14,7 @@ type ClearButtonProps = {
   onClick: () => void
 }
 
-const ClearButton: VFC<ClearButtonProps> = ({ disabled, onClick }) => (
+const ClearButton: FC<ClearButtonProps> = ({ disabled, onClick }) => (
   <InputAdornment position="start">
     <IconButton disabled={disabled} onClick={onClick}>
       <CancelIcon />
@@ -33,7 +33,7 @@ type SettingFieldProps = {
   onChange: (value?: number) => void
 }
 
-const SettingField: VFC<SettingFieldProps> = ({
+const SettingField: FC<SettingFieldProps> = ({
   id,
   label,
   onChange,

src/client/InformationPanel/SettingsAccordion.tsx

@@ -1,4 +1,4 @@
-import React, { VFC } from 'react'
+import React, { FC } from 'react'
 import MuiAccordion from '@mui/material/Accordion'
 import MuiAccordionSummary from '@mui/material/AccordionSummary'
 import AccordionDetails from '@mui/material/AccordionDetails'
@@ -25,7 +25,7 @@ const AccordionSummary = styled(MuiAccordionSummary)({
   },
 })
 
-const SettingsAccordion: VFC = () => (
+const SettingsAccordion: FC = () => (
   <Accordion>
     <AccordionSummary expandIcon={<SettingsIcon />}>Asetukset</AccordionSummary>
     <AccordionDetails>

src/client/InformationPanel/SettingsContainer.tsx

@@ -1,4 +1,4 @@
-import React, { VFC } from 'react'
+import React, { FC } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { styled } from '@mui/material/styles'
 import SettingField from './SettingField'
@@ -12,7 +12,7 @@ const Container = styled('div')({
   justifyContent: 'space-between',
 })
 
-const SettingsContainer: VFC = () => {
+const SettingsContainer: FC = () => {
   const dispatch = useDispatch()
   const { depth, height, speed, consumption } = useSelector(settingsSelector)
   const updateSetting =

src/client/InformationPanel/TopDrawer.tsx

@@ -1,4 +1,4 @@
-import React, { VFC } from 'react'
+import React, { FC } from 'react'
 import MuiDrawer from '@mui/material/Drawer'
 import IconButton from '@mui/material/IconButton'
 import { styled } from '@mui/material/styles'
@@ -20,7 +20,7 @@ type TopDrawerProps = {
   onClose: () => void
 }
 
-const TopDrawer: VFC<TopDrawerProps> = ({ open, onClose }) => (
+const TopDrawer: FC<TopDrawerProps> = ({ open, onClose }) => (
   <Drawer
     anchor="top"
     open={open}

src/client/Map/ContextMenu.tsx

@@ -1,4 +1,4 @@
-import React, { VFC } from 'react'
+import React, { FC } from 'react'
 import Menu from '@mui/material/Menu'
 import MenuItem from '@mui/material/MenuItem'
 import { LngLat, MenuState } from '../../common/types'
@@ -14,7 +14,7 @@ type ContextMenuProps = MenuState & {
   point: LngLat
 }
 
-const ContextMenu: VFC<ContextMenuProps> = ({
+const ContextMenu: FC<ContextMenuProps> = ({
   open,
   top,
   left,

src/client/Map/Map.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, VFC, useRef } from 'react'
+import React, { ReactNode, FC, useRef } from 'react'
 import { styled } from '@mui/material/styles'
 import { MapProps, useMaplibreMap } from '../Mapbox/map'
 import { MapContextProvider } from './map-context'
@@ -7,7 +7,7 @@ const Container = styled('div')({
   flex: 1,
 })
 
-const Map: VFC<MapProps & { children: ReactNode }> = ({
+const Map: FC<MapProps & { children: ReactNode }> = ({
   children,
   ...mapProps
 }) => {

src/client/Map/MapContainer.tsx

@@ -1,4 +1,4 @@
-import React, { VFC, useCallback, useEffect, useRef, useState } from 'react'
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import Layer from './Layer'
 import Marker from './Marker'
@@ -49,7 +49,7 @@ const sqDistance = (p1: Point, p2: Point): number => {
   return dx * dx + dy * dy
 }
 
-const MapContainer: VFC<{ mapserverUrl: string }> = ({ mapserverUrl }) => {
+const MapContainer: FC<{ mapserverUrl: string }> = ({ mapserverUrl }) => {
   const dispatch = useDispatch()
   const [lastClick, setLastClick] = useState({ lng: 0, lat: 0 })
   const [menu, setMenu] = useState(closedMenu)

src/client/Map/Marker.tsx

@@ -1,6 +1,6 @@
 import React, {
   MouseEvent,
-  VFC,
+  FC,
   useCallback,
   useEffect,
   useMemo,
@@ -72,7 +72,7 @@ type MarkerProps = {
   onContextMenu: (waypoint: Waypoint, lngLat: LngLat, point: Point) => void
 }
 
-const Marker: VFC<MarkerProps> = (props) => {
+const Marker: FC<MarkerProps> = (props) => {
   const propsRef = useRef(props)
   propsRef.current = props
   const { waypoint, onContextMenu } = props

src/client/Map/TouchMarker.tsx

@@ -1,4 +1,4 @@
-import React, { VFC, useState } from 'react'
+import React, { FC, useState } from 'react'
 import CircularProgress from '@mui/material/CircularProgress'
 import { styled } from '@mui/material/styles'
 import { TouchMarkerState } from '../../common/types'
@@ -17,7 +17,7 @@ type TouchMarkerProps = TouchMarkerState & {
   duration: number
 }
 
-const TouchMarker: VFC<TouchMarkerProps> = ({
+const TouchMarker: FC<TouchMarkerProps> = ({
   direction,
   duration,
   top,

src/client/Mapbox/source.ts

@@ -91,7 +91,9 @@ export const useSource = <S extends SourceId>(
   useEffect(() => {
     addSource(map, source)
     return () => {
-      removeSource(map, source.id)
+      setTimeout(() => {
+        removeSource(map, source.id)
+      }, 0)
     }
   }, [])
   useEffect(() => {