feat(myaccount): use capacitor preference API instead of localStorage…

… for saved items (#136)

android/app/capacitor.build.gradle

@@ -18,6 +18,7 @@ dependencies {
     implementation project(':capacitor-geolocation')
     implementation project(':capacitor-keyboard')
     implementation project(':capacitor-network')
+    implementation project(':capacitor-preferences')
     implementation project(':capacitor-screen-orientation')
     implementation project(':capacitor-share')
     implementation project(':capacitor-splash-screen')

android/capacitor.settings.gradle

@@ -29,6 +29,9 @@ project(':capacitor-keyboard').projectDir = new File('../node_modules/@capacitor
 include ':capacitor-network'
 project(':capacitor-network').projectDir = new File('../node_modules/@capacitor/network/android')
 
+include ':capacitor-preferences'
+project(':capacitor-preferences').projectDir = new File('../node_modules/@capacitor/preferences/android')
+
 include ':capacitor-screen-orientation'
 project(':capacitor-screen-orientation').projectDir = new File('../node_modules/@capacitor/screen-orientation/android')
 

ios/App/Podfile

@@ -20,6 +20,7 @@ def capacitor_pods
   pod 'CapacitorGeolocation', :path => '../../node_modules/@capacitor/geolocation'
   pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard'
   pod 'CapacitorNetwork', :path => '../../node_modules/@capacitor/network'
+  pod 'CapacitorPreferences', :path => '../../node_modules/@capacitor/preferences'
   pod 'CapacitorScreenOrientation', :path => '../../node_modules/@capacitor/screen-orientation'
   pod 'CapacitorShare', :path => '../../node_modules/@capacitor/share'
   pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'

ios/App/PrivacyInfo.xcprivacy

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>NSPrivacyAccessedAPITypes</key>
+    <array>
+      <!-- Add this dict entry to the array if the PrivacyInfo file already exists -->
+      <dict>
+        <key>NSPrivacyAccessedAPIType</key>
+        <string>NSPrivacyAccessedAPICategoryFileTimestamp</string>
+        <key>NSPrivacyAccessedAPITypeReasons</key>
+        <array>
+          <string>C617.1</string>
+        </array>
+      </dict>
+      <!-- Add this dict entry to the array if the PrivacyInfo file already exists -->
+      <dict>
+        <key>NSPrivacyAccessedAPIType</key>
+        <string>NSPrivacyAccessedAPICategoryUserDefaults</string>
+        <key>NSPrivacyAccessedAPITypeReasons</key>
+        <array>
+          <string>CA92.1</string>
+        </array>
+      </dict>
+    </array>
+  </dict>
+</plist>

package.json

@@ -41,6 +41,7 @@
     "@capacitor/ios": "^6.0.0",
     "@capacitor/keyboard": "^6.0.0",
     "@capacitor/network": "^6.0.0",
+    "@capacitor/preferences": "^6.0.3",
     "@capacitor/screen-orientation": "^6.0.0",
     "@capacitor/share": "^6.0.0",
     "@capacitor/splash-screen": "^6.0.0",

src/js/index.js

@@ -28,6 +28,7 @@ import { SafeArea, SafeAreaController } from "@aashu-dubey/capacitor-statusbar-s
 import { TextZoom } from "@capacitor/text-zoom";
 import { Device } from "@capacitor/device";
 import { App } from "@capacitor/app";
+import { Preferences } from "@capacitor/preferences";
 
 // import CSS
 import "@maplibre/maplibre-gl-compare/dist/maplibre-gl-compare.css";
@@ -42,6 +43,35 @@ defineCustomElements(window);
  * Fonction définissant l'application
  */
 function app() {
+  // REMOVEME : rétrocompatibilité des itinéraires / PR / PR comparer : migration du localStorage vers Preferences
+  if (localStorage.getItem("savedRoutes")) {
+    Preferences.set({
+      key: "savedRoutes",
+      value: localStorage.getItem("savedRoutes"),
+    }).then( () => {
+      localStorage.removeItem("savedRoutes");
+    });
+  }
+
+  if (localStorage.getItem("savedLandmarks")) {
+    Preferences.set({
+      key: "savedLandmarks",
+      value: localStorage.getItem("savedLandmarks"),
+    }).then( () => {
+      localStorage.removeItem("savedLandmarks");
+    });
+  }
+
+  if (localStorage.getItem("savedCompareLandmarks")) {
+    Preferences.set({
+      key: "savedCompareLandmarks",
+      value: localStorage.getItem("savedCompareLandmarks"),
+    }).then( () => {
+      localStorage.removeItem("savedCompareLandmarks");
+    });
+  }
+  // END REMOVEME
+
   // Ecouteur sur le chargement total des contrôles
   window.addEventListener("controlsloaded", async () => {
     SplashScreen.hide();

src/js/my-account/my-account.js

@@ -18,6 +18,7 @@ import { Toast } from "@capacitor/toast";
 import { Filesystem, Directory, Encoding } from "@capacitor/filesystem";
 import { FilePicker } from "@capawesome/capacitor-file-picker";
 import { App } from "@capacitor/app";
+import { Preferences } from "@capacitor/preferences";
 import maplibregl from "maplibre-gl";
 import Sortable from "sortablejs";
 import { kml, gpx } from "@tmcw/togeojson";
@@ -87,28 +88,32 @@ class MyAccount {
     this.lastCompareLandmarkId = 0;
 
     // récupération des itinéraires enregistrés en local
-    if (!localStorage.getItem("savedRoutes")) {
-      localStorage.setItem("savedRoutes", "[]");
-    } else {
-      var localRoutes = JSON.parse(localStorage.getItem("savedRoutes"));
-      this.routes = this.routes.concat(localRoutes.filter( route => !route.type));
-    }
+    Preferences.get( { key: "savedRoutes"} ).then( (resp) => {
+      if (resp.value) {
+        var localRoutes = JSON.parse(resp.value);
+        console.log(localRoutes);
+        this.routes = this.routes.concat(localRoutes.filter( route => !route.type));
+        this.#updateSources();
+      }
+    });
 
     // récupération des points de repère enregistrés en local
-    if (!localStorage.getItem("savedLandmarks")) {
-      localStorage.setItem("savedLandmarks", "[]");
-    } else {
-      var localLandmarks = JSON.parse(localStorage.getItem("savedLandmarks"));
-      this.landmarks = this.landmarks.concat(localLandmarks);
-    }
+    Preferences.get( { key: "savedLandmarks"} ).then( (resp) => {
+      if (resp.value) {
+        var localLandmarks = JSON.parse(resp.value);
+        this.landmarks = this.landmarks.concat(localLandmarks);
+        this.#updateSources();
+      }
+    });
 
     // récupération des points de repère comparer enregistrés en local
-    if (!localStorage.getItem("savedCompareLandmarks")) {
-      localStorage.setItem("savedCompareLandmarks", "[]");
-    } else {
-      var localCompareLandmarks = JSON.parse(localStorage.getItem("savedCompareLandmarks"));
-      this.compareLandmarks = this.compareLandmarks.concat(localCompareLandmarks);
-    }
+    Preferences.get( { key: "savedCompareLandmarks"} ).then( (resp) => {
+      if (resp.value) {
+        var localCompareLandmarks = JSON.parse(resp.value);
+        this.compareLandmarks = this.compareLandmarks.concat(localCompareLandmarks);
+        this.#updateSources();
+      }
+    });
 
     this.map.loadImage(LandmarkIconSaved).then((image) => {
       this.map.addImage("landmark-icon-saved", image.data);
@@ -485,7 +490,10 @@ class MyAccount {
       this.routes.unshift(drawRouteSaveOptions);
     }
     this.__updateAccountRoutesContainerDOMElement(this.routes);
-    localStorage.setItem("savedRoutes", JSON.stringify(this.routes));
+    Preferences.set({
+      key: "savedRoutes",
+      value: JSON.stringify(this.routes),
+    });
     this.#updateSources();
     let coordinates = [];
     drawRouteSaveOptions.data.steps.forEach((step) => {
@@ -528,7 +536,10 @@ class MyAccount {
       this.landmarks.unshift(newlandmark);
     }
     this.__updateAccountLandmarksContainerDOMElement(this.landmarks);
-    localStorage.setItem("savedLandmarks", JSON.stringify(this.landmarks));
+    Preferences.set({
+      key: "savedLandmarks",
+      value: JSON.stringify(this.landmarks),
+    });
     this.#updateSources();
   }
 
@@ -551,7 +562,10 @@ class MyAccount {
       this.compareLandmarks.unshift(newlandmark);
     }
     this.__updateAccountCompareLandmarksContainerDOMElement(this.compareLandmarks);
-    localStorage.setItem("savedCompareLandmarks", JSON.stringify(this.compareLandmarks));
+    Preferences.set({
+      key: "savedCompareLandmarks",
+      value: JSON.stringify(this.compareLandmarks),
+    });
     this.#updateSources();
   }
 
@@ -566,7 +580,10 @@ class MyAccount {
       }
       this.routes.splice(i, 1);
       this.__updateAccountRoutesContainerDOMElement(this.routes);
-      localStorage.setItem("savedRoutes", JSON.stringify(this.routes));
+      Preferences.set({
+        key: "savedRoutes",
+        value: JSON.stringify(this.routes),
+      });
       this.#updateSources();
       break;
     }
@@ -583,7 +600,10 @@ class MyAccount {
       }
       this.landmarks.splice(i, 1);
       this.__updateAccountLandmarksContainerDOMElement(this.landmarks);
-      localStorage.setItem("savedLandmarks", JSON.stringify(this.landmarks));
+      Preferences.set({
+        key: "savedLandmarks",
+        value: JSON.stringify(this.landmarks),
+      });
       this.#updateSources();
       break;
     }
@@ -600,7 +620,10 @@ class MyAccount {
       }
       this.compareLandmarks.splice(i, 1);
       this.__updateAccountCompareLandmarksContainerDOMElement(this.compareLandmarks);
-      localStorage.setItem("savedCompareLandmarks", JSON.stringify(this.compareLandmarks));
+      Preferences.set({
+        key: "savedCompareLandmarks",
+        value: JSON.stringify(this.compareLandmarks),
+      });
       this.#updateSources();
       break;
     }