@@ -9,17 +9,27 @@ import DistanceComponent from "./DistanceComponent";
9
9
import OrderComponent from "./OrderComponent" ;
10
10
import PointOverlay from "./PointOverlay" ;
11
11
import LatLongContext from "../../context/latitude-longitude-context" ;
12
- import { useScrollToLocation } from "../hooks/UseScrollIntoView" ;
13
12
import PermissionContext from "../../context/permission-context" ;
14
13
15
14
function Point ( { point, order } ) {
16
15
const { latitude, longitude, name, image, id, subtitles, proximityToUnlock = 100 } = point ;
17
16
const { nextUnlockablePointId, listOfUnlocked } = useContext ( RouteContext ) ;
18
17
const { openStreetMapConsent, setOpenStreetMapConsent } = useContext ( PermissionContext ) ;
19
18
const { lat, long } = useContext ( LatLongContext ) ;
19
+ const [ hasScrolled , setHasScrolled ] = useState ( false ) ;
20
20
const [ unlocked , setUnlocked ] = useState ( false ) ;
21
21
const [ playThis , setPlayThis ] = useState ( false ) ;
22
22
23
+ useEffect ( ( ) => {
24
+ if ( ! hasScrolled && nextUnlockablePointId === id ) {
25
+ const elementToScrollTo = document . getElementById ( id ) ;
26
+ if ( elementToScrollTo ) {
27
+ elementToScrollTo . scrollIntoView ( { behavior : "smooth" } ) ;
28
+ setHasScrolled ( true ) ;
29
+ }
30
+ }
31
+ } , [ nextUnlockablePointId ] ) ;
32
+
23
33
useEffect ( ( ) => {
24
34
if ( listOfUnlocked ) {
25
35
// The point is not locked if the id is in the list of unlocked.
@@ -42,8 +52,6 @@ function Point({ point, order }) {
42
52
return ( ! unlocked && nextUnlockablePointId !== id ) || ! ( lat && long ) ;
43
53
}
44
54
45
- useScrollToLocation ( nextUnlockablePointId === id , id ) ;
46
-
47
55
function getAriaLabelForButton ( ) {
48
56
if ( isNextPointToUnlock ) {
49
57
return `Dette punkt er det næste på ruten der skal åbnes. Det bliver åbnet ved at indenfor ${ proximityToUnlock } meter af punktet` ;
0 commit comments