map permission commit

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+- [PR-60](https://github.com/itk-dev/aapodwalk/pull/60)
+  - Make it possible to reevaluate ip-tracking consent and therefore permission to Open Street Map
+  - Move `MapConsentBanner` component to be able to display on other pages that frontpage
+  - Make `App.jsx`responsible for resetting localstorage map permission on change
+  - Create buttons to toggle permission banner in `RoutePage.jsx` and in `Point.jsx`
 - [PR-59](https://github.com/itk-dev/aapodwalk/pull/59)
   - Rename `ErrorComponent.jsx` to `MessageComponent.jsx`
   - Rename `ErrorContext.jsx` to `MessageContext.jsx`

src/App.jsx

@@ -15,6 +15,7 @@ import SeeOnMap from "./components/SeeOnMap";
 import MessageContext from "./context/MessageContext";
 import { Link } from "react-router-dom";
 import NavigationHelp from "./components/NavigationHelp";
+import MapConsentBanner from "./components/MapConsentBanner";
 
 function App() {
   const [selectedRoute, setSelectedRoute] = useState(null);
@@ -83,6 +84,14 @@ function App() {
     }
   }, []);
 
+  useEffect(() => {
+    if (openStreetMapConsent === null) {
+      localStorage.removeItem("data-consent");
+    } else {
+      localStorage.setItem("data-consent", openStreetMapConsent);
+    }
+  }, [openStreetMapConsent]);
+
   return (
     <div className="App flex flex-col h-full pt-24 min-h-screen dark:text-white w-screen pl-3 pr-3 pb-3 text-zinc-800 bg-zinc-100 dark:bg-zinc-800 overflow-hidden">
       <LatLongContext.Provider value={contextLatLong}>
@@ -149,6 +158,7 @@ function App() {
                     <FrontPage />
                   </Route>
                 </Switch>
+                <MapConsentBanner />
               </MessageContext.Provider>
             </main>
           </RouteContext.Provider>

src/components/FrontPage.jsx

@@ -31,7 +31,6 @@ function FrontPage() {
         <TagFilterList />
         <RouteList />
       </SelectedTagContext.Provider>
-      <MapConsentBanner />
     </div>
   );
 }

src/components/MapConsentBanner.jsx

@@ -6,7 +6,6 @@ function MapConsentBanner() {
   const { setOpenStreetMapConsent, openStreetMapConsent } = useContext(PermissionContext);
 
   function updateConsent(consent) {
-    localStorage.setItem("data-consent", consent);
     setOpenStreetMapConsent(consent);
   }
 

src/components/map/MapWrapper.jsx

@@ -12,7 +12,7 @@ function MapWrapper({ mapData, additionalClass = "", focusable, withIndex }) {
 
   return (
     <>
-      {focusOnMap && (
+      {focusOnMap && focusable && (
         <FocusTrap>
           <div className="map-container absolute left-0 top-0 right-0 h-full">
             <CloseButton
@@ -24,6 +24,11 @@ function MapWrapper({ mapData, additionalClass = "", focusable, withIndex }) {
           </div>
         </FocusTrap>
       )}
+      {focusOnMap && !focusable && (
+        <div className="map-container absolute left-0 top-0 right-0 h-full">
+          <MapComponent focusOnMap={focusOnMap} withIndex={withIndex} mapData={mapData} additionalClass="z-40" />
+        </div>
+      )}
       {!focusOnMap && (
         <button type="button" onClick={() => setFocusOnMap(true)}>
           {!focusOnMap && focusable && (

src/components/points/Point.jsx

@@ -10,10 +10,12 @@ import OrderComponent from "./OrderComponent";
 import PointOverlay from "./PointOverlay";
 import LatLongContext from "../../context/latitude-longitude-context";
 import { useScrollToLocation } from "../hooks/UseScrollIntoView";
+import PermissionContext from "../../context/permission-context";
 
 function Point({ point, order }) {
   const { latitude, longitude, name, image, id, subtitles, proximityToUnlock = 100 } = point;
   const { nextUnlockablePointId, listOfUnlocked } = useContext(RouteContext);
+  const { openStreetMapConsent, setOpenStreetMapConsent } = useContext(PermissionContext);
   const { lat, long } = useContext(LatLongContext);
   const [unlocked, setUnlocked] = useState(false);
   const [playThis, setPlayThis] = useState(false);
@@ -84,13 +86,25 @@ function Point({ point, order }) {
       )}
       {isNextPointToUnlock() && (
         <>
-          <Link
-            to={`/see-on-map/${latitude}/${longitude}`}
-            className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col cursor-pointer text-emerald-400 dark:text-emerald-600"
-          >
-            <FontAwesomeIcon className="h-9" icon={faMapLocationDot} />
-            <span className="sr-only">Se punkt {name} på kort</span>
-          </Link>
+          {openStreetMapConsent && (
+            <Link
+              to={`/see-on-map/${latitude}/${longitude}`}
+              className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col cursor-pointer text-emerald-400 dark:text-emerald-600"
+            >
+              <FontAwesomeIcon className="h-9" icon={faMapLocationDot} />
+              <span className="sr-only">Se punkt {name} på kort</span>
+            </Link>
+          )}
+          {!openStreetMapConsent && (
+            <button
+              type="button"
+              onClick={() => setOpenStreetMapConsent(null)}
+              className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 cursor-pointer text-emerald-400 dark:text-emerald-600"
+            >
+              <FontAwesomeIcon className="h-9" icon={faMapLocationDot} />
+              <span className="sr-only">Tag stilling til tilladelser i forhold til kortet igen</span>
+            </button>
+          )}
           <DistanceComponent
             data={point}
             classes="absolute top-1/2 right-5 transform -translate-x-1/2 -translate-y-1/2 text-xl"

src/components/routes/RoutePage.jsx

@@ -1,16 +1,19 @@
 import { React, useEffect, useState, useContext } from "react";
 import { Link, useParams } from "react-router-dom";
-import { faPlayCircle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import useFetch from "../../util/useFetch";
+import PermissionContext from "../../context/permission-context";
 import RouteContext from "../../context/RouteContext";
+import useFetch from "../../util/useFetch";
 import MapWrapper from "../map/MapWrapper";
 import TagList from "../tags/TagList";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlayCircle } from "@fortawesome/free-solid-svg-icons";
 
 function RoutePage() {
   const { id } = useParams();
+  const { openStreetMapConsent, setOpenStreetMapConsent } = useContext(PermissionContext);
   const { selectedRoute, setSelectedRoute, setListOfUnlocked } = useContext(RouteContext);
   const [dataFetched, setDataFetched] = useState(false);
+  const [focusOnText, setFocusOnText] = useState(false);
   function isRouteAlreadySet() {
     return selectedRoute === null && dataFetched;
   }
@@ -35,7 +38,14 @@ function RoutePage() {
 
   if (selectedRoute === null) return null;
 
+  function resetPermission() {
+    setFocusOnText(false);
+    setOpenStreetMapConsent(null);
+  }
+
   const { title, tags, points, totalDuration, distance, description } = selectedRoute;
+  const consentText =
+    "Du har ikke givet samtykke, derfor kan vi ikke vise et kort her. Vil du ændre det, kan du trykke her.";
 
   return (
     <>
@@ -46,7 +56,19 @@ function RoutePage() {
           <h1 className="text-4xl font-extrabold z-50 relative word-break">{title}</h1>
         </div>
         <div className="flex flex-col items-end">
-          <div className="w-3/5 mb-10 text-end">Tryk på kortet for at undersøge ruten</div>
+          {openStreetMapConsent && <div className="w-3/5 mb-10 text-end">Tryk på kortet for at undersøge ruten</div>}
+
+          {!openStreetMapConsent && !focusOnText && (
+            <button type="button" onClick={() => setFocusOnText(true)} className="opacity-35 mb-10 text-center">
+              {consentText}
+            </button>
+          )}
+          {!openStreetMapConsent && focusOnText && (
+            <button type="button" onClick={() => resetPermission()} className="mb-10 text-center">
+              {consentText}
+            </button>
+          )}
+
           <div className="bg-emerald-400 w-full dark:bg-emerald-800 mb-3 rounded-md p-3 flex z-50 relative">
             <div>
               <div className="font-bold">Distance</div>