@situm/react-native 3.7.6 → 3.8.0

package/src/wayfinding/components/MapView.tsx

@@ -20,7 +20,11 @@ import type {
   WebViewMessageEvent,
 } from "react-native-webview/lib/WebViewTypes";
 
-import SitumPlugin from "../../sdk";
+import SitumPlugin, {
+  type Error,
+  type LocationStatus,
+  LocationStatusName,
+} from "../../sdk";
 import useSitum from "../hooks";
 import {
   type MapViewDirectionsOptions,
@@ -157,6 +161,8 @@ const MapView = React.forwardRef<MapViewRef, MapViewProps>(
       useState<OnDirectionsRequestInterceptor>();
 
     // Local states
+    const [locationStatus, setLocationStatus] = useState<LocationStatusName>();
+    const [locationError, setLocationError] = useState<string>();
     const [mapLoaded, setMapLoaded] = useState<boolean>(false);
     const [buildingIdentifier, setBuildingIdentifier] = useState<string>(
       configuration.buildingIdentifier
@@ -164,10 +170,8 @@ const MapView = React.forwardRef<MapViewRef, MapViewProps>(
     const {
       init,
       location,
-      locationStatus,
       directions,
       navigation,
-
       calculateRoute,
       startNavigation,
       stopNavigation,
@@ -266,6 +270,22 @@ const MapView = React.forwardRef<MapViewRef, MapViewProps>(
       );
     }, []);
 
+    const _onMapIsReady = () => {
+      if (locationStatus) {
+        sendMessageToViewer(
+          webViewRef.current,
+          ViewerMapper.locationStatus(locationStatus)
+        );
+      }
+      if (locationError) {
+        // Right now, status and errors share message on the viewer:
+        sendMessageToViewer(
+          webViewRef.current,
+          ViewerMapper.locationError(locationError)
+        );
+      }
+    };
+
     /**
      * API exported to the outside world from the MapViewer
      *
@@ -351,6 +371,24 @@ const MapView = React.forwardRef<MapViewRef, MapViewProps>(
       ]
     );
 
+    useEffect(() => {
+      SitumPlugin.onLocationStatus((status: LocationStatus) => {
+        // TODO: implement status & error adapter on native SDKs.
+        let finalStatus = status.statusName as string;
+        if (Platform.OS === "ios" && finalStatus === "CALCULATING") {
+          finalStatus = "STARTING";
+        }
+        if (finalStatus in LocationStatusName) {
+          setLocationStatus(finalStatus as LocationStatusName);
+        }
+      });
+      SitumPlugin.onLocationError((e: Error) => {
+        setLocationError(e.code);
+      });
+
+      return () => {};
+    }, []);
+
     useEffect(() => {
       if (!error) return;
 
@@ -363,27 +401,55 @@ const MapView = React.forwardRef<MapViewRef, MapViewProps>(
 
     // Updated SDK location
     useEffect(() => {
-      if (!webViewRef.current || !location) return;
+      if (!webViewRef.current || !location || !mapLoaded) return;
 
       sendMessageToViewer(webViewRef.current, ViewerMapper.location(location));
-    }, [location]);
+    }, [location, mapLoaded]);
+
+    // locationStatus
+    useEffect(() => {
+      if (!webViewRef.current || !locationStatus || !mapLoaded) return;
+
+      sendMessageToViewer(
+        webViewRef.current,
+        ViewerMapper.locationStatus(locationStatus)
+      );
+      // Callbacks used in `useEffect` won't be invoked if the value of locationStatus
+      // is set but hasn't changed. Set locationStatus to null always to avoid missing
+      // repeated messages.
+      setLocationStatus(null);
+    }, [locationStatus, mapLoaded]);
+
+    // locationError
+    useEffect(() => {
+      if (!webViewRef.current || !locationError || !mapLoaded) return;
+
+      sendMessageToViewer(
+        webViewRef.current,
+        ViewerMapper.locationError(locationError)
+      );
+      // Callbacks used in `useEffect` won't be invoked if the value of locationStatus
+      // is set but hasn't changed. Set locationStatus to null always to avoid missing
+      // repeated messages.
+      setLocationError(null);
+    }, [locationError, mapLoaded]);
 
     // Updated SDK navigation
     useEffect(() => {
-      if (!webViewRef.current || !navigation) return;
+      if (!webViewRef.current || !navigation || !mapLoaded) return;
 
       sendMessageToViewer(
         webViewRef.current,
         ViewerMapper.navigation(navigation)
       );
-    }, [navigation]);
+    }, [navigation, mapLoaded]);
 
     // Updated SDK route
     useEffect(() => {
-      if (!webViewRef.current || !directions) return;
+      if (!webViewRef.current || !directions || !mapLoaded) return;
 
       sendMessageToViewer(webViewRef.current, ViewerMapper.route(directions));
-    }, [directions]);
+    }, [directions, mapLoaded]);
 
     // Update language
     useEffect(() => {
@@ -411,23 +477,14 @@ const MapView = React.forwardRef<MapViewRef, MapViewProps>(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [mapLoaded]);
 
-    //locationStatus
-    useEffect(() => {
-      if (!webViewRef.current || !locationStatus || !mapLoaded) return;
-
-      sendMessageToViewer(
-        webViewRef.current,
-        ViewerMapper.locationStatus(locationStatus)
-      );
-    }, [locationStatus, mapLoaded]);
-
     const handleRequestFromViewer = (event: WebViewMessageEvent) => {
       const eventParsed = JSON.parse(event.nativeEvent.data);
       switch (eventParsed.type) {
         case "app.map_is_ready":
           init();
-          onLoad && onLoad("");
           setMapLoaded(true);
+          _onMapIsReady();
+          onLoad && onLoad("");
           break;
         case "directions.requested":
           calculateRoute(eventParsed.payload, _onDirectionsRequestInterceptor);

package/src/wayfinding/hooks/index.ts

@@ -8,11 +8,9 @@ import {
   ErrorCode,
   ErrorType,
   type Location,
-  type LocationStatus,
   type NavigationProgress,
 } from "../../sdk/types";
 import {
-  LocationStatusName,
   NavigationStatus,
   NavigationUpdateType,
 } from "../../sdk/types/constants";
@@ -26,7 +24,6 @@ import {
   setDirections,
   setError,
   setLocation,
-  setLocationStatus,
   setNavigation,
   UseSitumContext,
 } from "../store/index";
@@ -69,18 +66,15 @@ export const useSitumInternal = () => {
       );
     });
 
-    SitumPlugin.onLocationStatus((status: LocationStatus) => {
-      if (status.statusName in LocationStatusName) {
-        console.debug(
-          `Situm > hook > Positioning state updated ${status.statusName}`
-        );
-        dispatch(setLocationStatus(status.statusName as LocationStatusName));
-      }
-    });
-
-    SitumPlugin.onLocationError((err: Error) => {
-      console.error(`Situm > hook > Error while positioning: ${err}}`);
-    });
+    // TODO: not working, using local state at MapView.tsx.
+    // SitumPlugin.onLocationStatus((status: LocationStatus) => {
+    //   if (status.statusName in LocationStatusName) {
+    //     console.debug(
+    //       `Situm > hook > Positioning state updated ${status.statusName}`
+    //     );
+    //     dispatch(setLocationStatus(status.statusName as LocationStatusName));
+    //   }
+    // });
 
     SitumPlugin.onLocationStopped(() => {
       console.debug("Situm > hook > Stopped positioning");

package/src/wayfinding/store/index.tsx

@@ -23,6 +23,7 @@ export interface State {
   sdkInitialized: boolean;
   user?: User;
   location?: Location;
+  locationStatus?: LocationStatusName;
   buildings: Building[] | null;
   currentBuilding: Building;
   pois: Poi[];
@@ -37,7 +38,8 @@ export const initialState: State = {
   webViewRef: undefined,
   sdkInitialized: false,
   user: undefined,
-  location: { status: LocationStatusName.STOPPED },
+  location: null,
+  locationStatus: null,
   buildings: null,
   currentBuilding: undefined,
   pois: [],
@@ -67,8 +69,8 @@ const store = createStore<State>({
     setLocation: (state: State, payload: State["location"]) => {
       return { ...state, location: payload };
     },
-    setLocationStatus: (state: State, payload: LocationStatusName) => {
-      return { ...state, location: { ...state.location, status: payload } };
+    setLocationStatus: (state: State, payload: State["locationStatus"]) => {
+      return { ...state, locationStatus: payload };
     },
     resetLocation: (state: State) => {
       return {
@@ -123,7 +125,7 @@ export const selectLocation = (state: State) => {
 };
 
 export const selectLocationStatus = (state: State) => {
-  return state.location?.status;
+  return state.locationStatus;
 };
 
 export const selectBuildings = (state: State) => {

package/src/wayfinding/utils/mapper.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { AccessibilityMode } from "../../sdk";
+import { AccessibilityMode, LocationStatusName } from "../../sdk";
 import type {
   Directions,
   DirectionsRequest,
@@ -128,12 +128,14 @@ const ViewerMapper = {
         accuracy: location.accuracy,
         hasBearing: location.hasBearing,
       }),
-      status: location.status,
     });
   },
-  locationStatus: (locationStatus: Location["status"]) => {
+  locationStatus: (locationStatus: LocationStatusName) => {
     return mapperWrapper("location.update_status", { status: locationStatus });
   },
+  locationError: (errorCode: string) => {
+    return mapperWrapper("location.update_status", { status: errorCode });
+  },
   // Directions
   route: (directions: Directions) => {
     return mapperWrapper("directions.update", directions);