diff --git a/package.json b/package.json index c80cffe..ae9b22a 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "start": "bunx --bun vite", "build": "vite build", "typecheck": "tsc -p ./tsconfig.json --noEmit", - "lint-fix": "biome check . --apply", + "lint-fix": "biome check . --write", "check": "biome ci .", "test": "bun test", "css-build": "sass sass/mystyles.scss src/mystyles.css" diff --git a/src/Main.tsx b/src/Main.tsx index 406db4c..9689105 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -1,5 +1,11 @@ import { osmAuth } from "osm-auth"; -import React, { Suspense, useEffect, useMemo, useState } from "react"; +import React, { + Suspense, + useCallback, + useEffect, + useMemo, + useState, +} from "react"; import { AppContext } from "~/appContext"; import CustomModal from "~/components/modal"; import WebGLMissingInfo from "~/components/webGLMissingInfo"; @@ -52,7 +58,7 @@ function Main() { const [osmUsername, setOsmUsername] = useState(""); const [openChangesetId, setOpenChangesetId] = useState(""); - const handleLogIn = () => { + const handleLogIn = useCallback(() => { auth.authenticate(() => { updateOsmUsernameState(auth, setOsmUsername); if (modalState.type === ModalType.NeedToLogin) { @@ -66,7 +72,7 @@ function Main() { window.location.hash, ); }); - }; + }, [auth, modalState.type]); useEffect(() => { if ( @@ -79,12 +85,15 @@ function Main() { } }, [handleLogIn]); - const handleLogOut = () => { + const handleLogOut = useCallback(() => { auth.logout(); setOsmUsername(""); - }; + }, [auth]); - const authState: AuthState = { auth, osmUsername }; + const authState: AuthState = useMemo( + () => ({ auth, osmUsername }), + [osmUsername, auth], + ); const appContext = useMemo( () => ({ diff --git a/src/components/map.tsx b/src/components/map.tsx index 5a71ac0..c81b629 100644 --- a/src/components/map.tsx +++ b/src/components/map.tsx @@ -6,7 +6,13 @@ import maplibregl, { type MapMouseEvent, } from "maplibre-gl"; import "maplibre-gl/dist/maplibre-gl.css"; -import React, { type FC, useEffect, useRef, useState } from "react"; +import React, { + type FC, + useCallback, + useEffect, + useRef, + useState, +} from "react"; import { useTranslation } from "react-i18next"; import { useAppContext } from "~/appContext"; import { fetchCountriesData, fetchNodeDataFromBackend } from "~/backend"; @@ -182,18 +188,21 @@ const MapView: FC = ({ openChangesetId, setOpenChangesetId }) => { fetchData().catch(console.error); }, [language, setCountriesDataLanguage, setCountriesData]); - function addMaplibreGeocoder(map: maplibregl.Map) { - if (maplibreGeocoderRef.current !== null) { - map.removeControl(maplibreGeocoderRef.current); - } - const newMaplibreGeocoder = new MaplibreGeocoder(nominatimGeocoder, { - maplibregl, - placeholder: t("sidebar.find_location"), - }); - newMaplibreGeocoder.setLanguage(language); - map.addControl(newMaplibreGeocoder); - maplibreGeocoderRef.current = newMaplibreGeocoder; - } + const addMaplibreGeocoder = useCallback( + (map: maplibregl.Map) => { + if (maplibreGeocoderRef.current !== null) { + map.removeControl(maplibreGeocoderRef.current); + } + const newMaplibreGeocoder = new MaplibreGeocoder(nominatimGeocoder, { + maplibregl, + placeholder: t("sidebar.find_location"), + }); + newMaplibreGeocoder.setLanguage(language); + map.addControl(newMaplibreGeocoder); + maplibreGeocoderRef.current = newMaplibreGeocoder; + }, + [t, language], + ); useEffect(() => { if (mapContainer.current === null) return;