Merge pull request #14 from Temtem-Interactive-Map/develop

0.1.3

package.json

@@ -1,7 +1,7 @@
 {
   "name": "temzone",
   "description": "The Temtem Interactive Map Desktop App",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "author": "Temtem Interactive Map",
   "license": "MIT",
   "main": "app/background.js",

renderer/components/Accordion/index.jsx

@@ -13,7 +13,7 @@ import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { getMarkers, logout } from "services";
 import useSWR from "swr";
-import { SIDEBAR, TEMTEM as TEMTEM_SELECT, markerIconPath } from "utils";
+import { SIDEBAR, TEMTEM_LIST, markerIconPath } from "utils";
 
 export function Accordion() {
   // Navigation
@@ -28,7 +28,7 @@ export function Accordion() {
     isLoading: isLocked,
   } = useAccordion();
   const [sidebarOption, setSidebarOption] = useState(SIDEBAR[0]);
-  const [selectOption, setSelectOption] = useState(TEMTEM_SELECT[0]);
+  const [selectOption, setSelectOption] = useState(TEMTEM_LIST[0]);
 
   const { data, isLoading, isValidating, error } = useSWR(
     "markers",
@@ -125,7 +125,7 @@ export function Accordion() {
               disabled={isLocked}
               onChange={(event) => setSelectOption(event.target.value)}
             >
-              {TEMTEM_SELECT.map((option, i) => (
+              {TEMTEM_LIST.map((option, i) => (
                 <option key={i} className="text-md">
                   {option}
                 </option>

renderer/components/Marker/index.jsx

@@ -117,13 +117,15 @@ export function Marker({ handleMarkerUpdate, marker, children }) {
   const { handleSubmit } = useFormContext();
 
   // State
+  const { disableMap, enableMap } = useMap();
   const { updateMarker, isLoading, setLoading } = useAccordion();
 
   const handleMarkerUpdateSubmit = useCallback(
     (data) => {
       const x = data.coordinate_horizontal;
       const y = data.coordinate_vertical;
 
+      disableMap();
       setLoading(true);
       handleMarkerUpdate(data, { x, y })
         .then(() => {
@@ -132,9 +134,19 @@ export function Marker({ handleMarkerUpdate, marker, children }) {
           updateMarker(marker);
         })
         .catch((error) => toast.warn(error.message))
-        .finally(() => setLoading(false));
+        .finally(() => {
+          enableMap();
+          setLoading(false);
+        });
     },
-    [setLoading, handleMarkerUpdate, marker, updateMarker]
+    [
+      setLoading,
+      handleMarkerUpdate,
+      marker,
+      updateMarker,
+      disableMap,
+      enableMap,
+    ]
   );
 
   return (

renderer/hooks/Map/index.js

@@ -136,7 +136,11 @@ export function useMap() {
     (markerRef, onClick) => {
       const marker = markers.current.get(markerRef.id);
 
-      marker.on("click", () => onClick(markerRef));
+      marker.on("click", () => {
+        if (marker.dragging.enabled()) {
+          onClick(markerRef);
+        }
+      });
     },
     [markers]
   );
@@ -171,6 +175,18 @@ export function useMap() {
     [map, markers]
   );
 
+  const disableMap = useCallback(() => {
+    markers.current.forEach((marker) => {
+      marker.dragging.disable();
+    });
+  }, [markers]);
+
+  const enableMap = useCallback(() => {
+    markers.current.forEach((marker) => {
+      marker.dragging.enable();
+    });
+  }, [markers]);
+
   return {
     addMarker,
     removeMarker,
@@ -182,5 +198,7 @@ export function useMap() {
     subscribeMarkerClick,
     subscribeMarkerDrag,
     subscribeMarkerDragStart,
+    disableMap,
+    enableMap,
   };
 }

renderer/utils/index.js

@@ -38,7 +38,7 @@ export const SIDEBAR = Object.freeze([
   },
 ]);
 
-export const TEMTEM = Object.freeze([
+export const TEMTEM_LIST = Object.freeze([
   "0b1",
   "Adoroboros",
   "Akranox",