Merge pull request #21 from itk-dev/feature/update-destination-on-unlock

added updatedestination on unlock + accuracy as leeway for proximity

Author: yepzdk

src/components/points-of-interest/PointOfInterest.jsx

@@ -27,6 +27,7 @@ function PointOfInterest({
   destinationChanged,
   nextUnlockableId,
   setSource,
+  accuracy,
 }) {
   const { lat, long } = useContext(LatLongContext);
   const [proximity, setProximity] = useState(null);
@@ -50,7 +51,8 @@ function PointOfInterest({
       );
       setProximity(distance);
       if (!unlocked && id === nextUnlockableId) {
-        setUnlocked(distance < 51); // todo magic number/get from config
+        setUnlocked(distance < accuracy); // todo magic number/get from config
+        destinationChanged();
       }
     }
   }, [latitude, longitude, lat, long, geolocationAvailable]);
@@ -86,12 +88,25 @@ function PointOfInterest({
 
   return (
     <div
-      className={`relative flex items-start gap-4 p-2 rounded-lg ${unlocked ? `bg-zinc-200 dark:bg-zinc-600` : `bg-zinc-100 dark:bg-zinc-700` }`}
+      className={`relative flex items-start gap-4 p-2 rounded-lg ${
+        unlocked
+          ? `bg-zinc-200 dark:bg-zinc-600`
+          : `bg-zinc-100 dark:bg-zinc-700`
+      }`}
     >
-      <div className={`absolute -left-3 px-2 font-bold rounded-full text-sm ${unlocked ? `bg-emerald-700 text-zinc-100` : `bg-emerald-900 text-zinc-400` }`} >
+      <div
+        className={`absolute -left-3 px-2 font-bold rounded-full text-sm ${
+          unlocked
+            ? `bg-emerald-700 text-zinc-100`
+            : `bg-emerald-900 text-zinc-400`
+        }`}
+      >
         {index}
       </div>
-      <Image src={image} className={`w-24 h-24 rounded-full ${!unlocked && `opacity-40` }` } />
+      <Image
+        src={image}
+        className={`w-24 h-24 rounded-full ${!unlocked && `opacity-40`}`}
+      />
       <div className="flex flex-col">
         <h2 className="text-zinc-900 text-sm font-bold dark:text-zinc-200 my-3">
           {name}
@@ -103,7 +118,7 @@ function PointOfInterest({
               <span className="sr-only">Afstand</span>
               {/* todo this is slow and would benefit from loading screen / skeleton componenet */}
               <span className="text-md" id="distance">
-                {proximity} m
+                {proximity - accuracy} m
               </span>
             </label>
           )}

src/components/routes/RouteCarousel.jsx

@@ -1,4 +1,4 @@
-import { React, useState } from "react";
+import { React } from "react";
 import { Carousel } from "react-responsive-carousel";
 import { Link } from "react-router-dom";
 import Route from "./Route";

src/components/routes/RoutePage.jsx

@@ -30,6 +30,7 @@ function RoutePage() {
   const [nextUnlockableId, setNextUnlockableId] = useState(null);
   const [routeComplete, setRouteComplete] = useState(false);
   const [source, setSource] = useState(null);
+  const [accuracy, setAccuracy] = useState(0);
   const { userLatitude, userLongitude } = useContext(LatLongContext);
   const { geolocationAvailable } = useContext(PermissionContext);
   const audioRef = useRef();
@@ -85,6 +86,7 @@ function RoutePage() {
 
   function locationHandler(pos) {
     setTimeout(() => {
+      setAccuracy();
       setAngle(
         getAngleFromLocationToDestination(
           pos.coords.latitude,
@@ -172,6 +174,7 @@ function RoutePage() {
               destinationChanged={destinationChanged}
               nextUnlockableId={nextUnlockableId}
               setSource={setSource}
+              accuracy={accuracy}
             />
           ))}
       </div>
@@ -204,7 +207,9 @@ function RoutePage() {
               {orientation && angle && (
                 <div>
                   <div className="flex justify-between">
-                    <span className="text-sm text-bold mr-5">Retning</span>
+                    <span className="text-sm text-bold mr-5 my-auto">
+                      Retning
+                    </span>
                     <span className="w-1/2">
                       <LocationArrow
                         className="inline w-10"

src/util/helper.js

@@ -67,14 +67,14 @@ export function getRelevantDestinationPoint(pointsOfInterest) {
 }
 
 export function getIdFromApiEndpoint(endpoint) {
-  const regex = /[^\/]+$/;
+  const regex = /[^/]+$/;
   // Todo create utils file
   const idFound = endpoint ? endpoint.toString().match(regex) : null;
   return idFound[0];
 }
 
 export function getIdsFromApiEndpoints(endpoints) {
-  const regex = /[^\/]+$/;
+  const regex = /[^/]+$/;
   const result = [];
 
   endpoints.forEach((e) => {