Merge pull request #377 from selankon/feature/fix_locate_view

Feature/fix locate view

Author: selankon

package-lock.json

@@ -45,7 +45,6 @@
         "@trivago/prettier-plugin-sort-imports": "^3.3.0",
         "@types/jest": "^29.2.4",
         "@types/leaflet": "^1.9.0",
-        "@types/leaflet.gridlayer.googlemutant": "^0.4.6",
         "@typescript-eslint/eslint-plugin": "^5.46.0",
         "@typescript-eslint/parser": "^5.46.0",
         "babel-jest": "^29.5.0",
@@ -87,11 +86,11 @@
         "compressorjs": "^1.1.1",
         "history": "^5.3.0",
         "leaflet": "^1.9.3",
-        "leaflet.gridlayer.googlemutant": "^0.13.5",
         "preact": "^10.11.0",
         "preact-i18nline": "^2.0.0",
         "preact-router": "^4.1.0",
         "react-hook-form": "^7.36.1",
+        "react-leaflet": "^4.2.1",
         "react-redux": "^8.0.4",
         "react-router-redux": "^4.0.8",
         "react-use": "^17.4.0",

package.json

@@ -1,19 +1,8 @@
-import * as constants from "./src/locateConstants";
-import epics from "./src/locateEpics";
 import { LocateMenu } from "./src/locateMenu";
 import Locate from "./src/locatePage";
-import { reducer } from "./src/locateReducer";
-import * as selector from "./src/locateSelectors";
 
 export default {
     name: "Locate",
     page: Locate,
     menu: LocateMenu,
-    store: {
-        name: "locate",
-        epics,
-        reducer,
-        selector,
-        constants,
-    },
 } as LimePlugin;

plugins/lime-plugin-locate/index.ts

@@ -1,13 +1,17 @@
+import { DivIconOptions, IconOptions } from "leaflet";
+
+const leafletVersion = "1.9.3";
+
 function loadLeafletScript() {
     return new Promise((res, rej) => {
         if (document.getElementById("leaflet-script")) {
+            // @ts-ignore
             res();
         } else {
             const script = document.createElement("script");
             script.onload = res;
             script.onerror = rej;
-            script.src =
-                "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.0/leaflet.js";
+            script.src = `https://unpkg.com/leaflet@${leafletVersion}/dist/leaflet.js`;
             script.id = "leaflet-script";
             document.body.appendChild(script);
         }
@@ -17,13 +21,14 @@ function loadLeafletScript() {
 function loadLeafletStylesheet() {
     return new Promise((res, rej) => {
         if (document.getElementById("leaflet-style")) {
+            // @ts-ignore
             res();
         } else {
             const style = document.createElement("link");
             style.onload = res;
             style.onerror = rej;
             style.rel = "stylesheet";
-            style.href = "https://unpkg.com/leaflet@1.6.0/dist/leaflet.css";
+            style.href = `https://unpkg.com/leaflet@${leafletVersion}/dist/leaflet.css`;
             style.id = "leaflet-style";
             document.head.appendChild(style);
         }
@@ -35,26 +40,10 @@ export function loadLeafLet() {
     return loadLeafletStylesheet().then(loadLeafletScript);
 }
 
-export function loadGoogleMapsApi() {
-    return new Promise((res, rej) => {
-        if (document.getElementById("googlemaps-script")) {
-            res();
-        } else {
-            const key = "AIzaSyBS0M7H7Ltk1ipjwqi8r9_WQJOzWfav4Ok";
-            const script = document.createElement("script");
-            script.onload = res;
-            script.onerror = rej;
-            script.src = `https://maps.googleapis.com/maps/api/js?key=${key}`;
-            script.id = "googlemaps-script";
-            document.body.appendChild(script);
-        }
-    });
-}
-
-export const homeIcon = {
+export const homeIcon: IconOptions = {
     iconUrl:
         "data:image/png;base64,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",
-    iconsSize: [25, 41],
+    iconSize: [25, 41],
     iconAnchor: [13, 40],
     popupAnchor: [0, -45],
 };

…ns/lime-plugin-locate/src/assetsUtils.js …s/lime-plugin-locate/src/leafletUtils.tsplugins/lime-plugin-locate/src/assetsUtils.js renamed to plugins/lime-plugin-locate/src/leafletUtils.ts plugins/lime-plugin-locate/src/assetsUtils.js renamed to plugins/lime-plugin-locate/src/leafletUtils.ts

@@ -1,10 +1,13 @@
-export const getLocation = (api) => api.call("lime-location", "get", {});
+import api from "utils/uhttpd.service";
 
-export const getNodesandlinks = (api) =>
+export const getLocation = () => api.call("lime-location", "get", {});
+
+export const getNodesandlinks = async () =>
     api.call("lime-location", "all_nodes_and_links", {});
 
-export const changeLocation = (api, location) =>
-    api.call("lime-location", "set", {
+export const changeLocation = async (location) => {
+    return await api.call("lime-location", "set", {
         lat: location.lat.toFixed(5),
         lon: location.lon.toFixed(5),
     });
+};