@situm/react-native 3.0.0-beta.0

package/src/wayfinding/store/index.tsx

@@ -0,0 +1,254 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { createContext, MutableRefObject, useReducer } from "react";
+//@ts-ignore
+import { Building, Poi } from "react-native-situm-plugin";
+
+import { createReducer } from "./utils";
+
+export interface Location {
+  position?: Position;
+  accuracy?: number;
+  bearing?: {
+    degrees: number;
+    degreesClockwise: number;
+  };
+  hasBearing?: boolean;
+  status: PositioningStatus;
+}
+
+export interface Position {
+  coordinate: {
+    latitude: number;
+    longitude: number;
+  };
+  cartesianCoordinate: {
+    x: number;
+    y: number;
+  };
+  isIndoor?: boolean;
+  isOutdoor?: boolean;
+  buildingIdentifier?: string;
+  floorIdentifier?: string;
+}
+
+export enum PositioningStatus {
+  STARTING = "STARTING",
+  CALCULATING = "CALCULATING",
+  // This status will always be sent to mapviewer-web, in case we recieve
+  // a location from SDK.
+  POSITIONING = "POSITIONING",
+  USER_NOT_IN_BUILDING = "USER_NOT_IN_BUILDING",
+  STOPPED = "STOPPED",
+}
+
+export interface SDKNavigation {
+  //closestPositionInRoute: any;
+  currentIndication?: any;
+  //currentStepIndex:number;
+  //distanceToEndStep: number;
+  distanceToGoal?: number;
+  //nextIndication: any;
+  points?: any;
+  routeStep?: any;
+  segments?: any;
+  route?: Directions;
+  //timeToEndStep: number;
+  //timeToGoal: number;
+  type?: NavigationUpdateType;
+  status: NavigationStatus;
+}
+
+export enum NavigationStatus {
+  START = "start",
+  STOP = "stop",
+  UPDATE = "update",
+}
+
+export enum NavigationUpdateType {
+  progress = "PROGRESS",
+  userOutsideRoute = "OUT_OF_ROUTE",
+  destinationReached = "DESTINATION_REACHED",
+}
+
+// TODO: add types
+export type Directions = any;
+
+export type NavigateToPoiType = {
+  navigationTo: number;
+  type?: string;
+};
+
+interface User {
+  email?: string;
+  apiKey?: string;
+}
+export interface SDKError {
+  code?: number;
+  message: string;
+}
+
+export interface State {
+  webViewRef: MutableRefObject<undefined>;
+  sdkInitialized: boolean;
+  user?: User;
+  location?: Location;
+  buildings: Building[];
+  currentBuilding: Building;
+  pois: Poi[];
+  directions?: Directions;
+  navigation?: SDKNavigation;
+  destinationPoiID?: number;
+  error?: SDKError;
+}
+
+export const initialState: State = {
+  webViewRef: undefined,
+  sdkInitialized: false,
+  user: undefined,
+  location: { status: PositioningStatus.STOPPED },
+  buildings: [],
+  currentBuilding: undefined,
+  pois: [],
+  directions: undefined,
+  navigation: { status: NavigationStatus.STOP },
+  destinationPoiID: undefined,
+  error: undefined,
+};
+
+export const SitumContext = createContext<
+  { state: State; dispatch: React.Dispatch<(s: State) => State> } | undefined
+>(undefined);
+
+const Reducer = createReducer<State>({
+  setWebViewRef: (state: State, payload: State["webViewRef"]) => {
+    return { ...state, webViewRef: payload };
+  },
+  setSdkInitialized: (state: State, payload: State["sdkInitialized"]) => {
+    return { ...state, sdkInitialized: payload };
+  },
+  setAuth: (state: State, payload: State["user"]) => {
+    return { ...state, user: payload };
+  },
+  setLocation: (state: State, payload: State["location"]) => {
+    return { ...state, location: payload };
+  },
+  setLocationStatus: (state: State, payload: PositioningStatus) => {
+    return { ...state, location: { ...state.location, status: payload } };
+  },
+  resetLocation: (state: State) => {
+    return {
+      ...state,
+      location: initialState.location,
+    };
+  },
+  setBuildings: (state: State, payload: State["buildings"]) => {
+    return { ...state, buildings: payload };
+  },
+  setCurrentBuilding: (state: State, payload: State["currentBuilding"]) => {
+    return { ...state, currentBuilding: payload };
+  },
+  setPois: (state: State, payload: State["pois"]) => {
+    return { ...state, pois: payload };
+  },
+  setDirections: (state: State, payload: State["directions"]) => {
+    return { ...state, directions: payload };
+  },
+  setNavigation: (state: State, payload: State["navigation"]) => {
+    return { ...state, navigation: payload };
+  },
+  setDestinationPoiID: (state: State, payload: State["destinationPoiID"]) => {
+    return { ...state, destinationPoiID: payload };
+  },
+  setError: (state: State, payload: State["error"]) => {
+    return { ...state, error: payload };
+  },
+});
+
+export const selectWebViewRef = (state: State) => {
+  return state.webViewRef;
+};
+
+export const selectIsSDKInitialized = (state: State) => {
+  return state.sdkInitialized;
+};
+
+export const selectUser = (state: State) => {
+  return state.user;
+};
+
+export const selectLocation = (state: State) => {
+  return state.location;
+};
+
+export const selectLocationStatus = (state: State) => {
+  return state.location.status;
+};
+
+export const selectBuildings = (state: State) => {
+  return state.buildings;
+};
+
+export const selectCurrentBuilding = (state: State) => {
+  return state.currentBuilding;
+};
+
+export const selectPois = (state: State) => {
+  return state.pois;
+};
+
+export const selectDirections = (state: State) => {
+  return state.directions;
+};
+
+export const selectNavigation = (state: State) => {
+  return state.navigation;
+};
+
+export const selectDestinationPoiID = (state: State) => {
+  return state.destinationPoiID;
+};
+
+export const selectError = (state: State) => {
+  return state.error;
+};
+
+export const {
+  setWebViewRef,
+  setSdkInitialized,
+  setAuth,
+  setLocation,
+  setLocationStatus,
+  resetLocation,
+  setBuildings,
+  setCurrentBuilding,
+  setPois,
+  setDirections,
+  setNavigation,
+  setDestinationPoiID,
+  setError,
+} = Reducer.actions;
+
+const SitumProvider: React.FC<
+  React.PropsWithChildren<{
+    email?: string;
+    apiKey?: string;
+  }>
+> = ({ email, apiKey, children }) => {
+  const [state, dispatch] = useReducer(Reducer.reducer, {
+    ...initialState,
+    user: { email, apiKey },
+  });
+
+  return (
+    <SitumContext.Provider
+      value={{
+        state,
+        dispatch,
+      }}
+    >
+      {children}
+    </SitumContext.Provider>
+  );
+};
+
+export default SitumProvider;

package/src/wayfinding/store/utils.ts

@@ -0,0 +1,40 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useContext } from "react";
+
+import { SitumContext, State } from "./index";
+
+export const createReducer = <T>(
+  reducers: Record<string, (state: T, payload: any) => T>
+) => {
+  // Actions
+  const actions = Object.keys(reducers).reduce((acc, r) => {
+    acc[r] = (payload: any) => (state: T) => reducers[r](state, payload);
+    return acc;
+  }, {} as Record<string, (payload?: any) => (state: T) => T>);
+
+  // Reducer
+  const reducer = (state: T, action: (state: T) => T): T => {
+    return action(state);
+  };
+  return { actions, reducer };
+};
+
+export const useSelector = (selector: (state: State) => any) => {
+  const context = useContext(SitumContext);
+
+  if (!context) {
+    throw new Error("No SitumProvider found.");
+  }
+
+  return selector(context.state);
+};
+
+export const useDispatch = () => {
+  const context = useContext(SitumContext);
+
+  if (!context) {
+    throw new Error("No SitumProvider found.");
+  }
+
+  return context.dispatch;
+};

package/src/wayfinding/styles/colors.tsx

@@ -0,0 +1,6 @@
+const blueSitum = "#283380";
+const white = "#FFF";
+const black = "#000";
+const darkGray = "#494949";
+
+export default { blueSitum, white, black, darkGray };

package/src/wayfinding/types/index.d.ts

@@ -0,0 +1,56 @@
+//@ts-ignore
+import { ErrorName } from "../components/MapView";
+
+interface MapViewError {
+  name: ErrorName;
+  description: string;
+}
+
+export interface WayfindingResult {
+  status: string;
+  message: string;
+}
+export interface OnPoiSelectedResult {
+  buildingId: string;
+  buildingName: string;
+  floorId: string;
+  floorName: string;
+  poiId: string;
+  poiName: string;
+}
+export interface OnPoiDeselectedResult {
+  buildingId: string;
+  buildingName: string;
+}
+export interface OnFloorChangedResult {
+  buildingId: string;
+  buildingName: string;
+  fromFloorId: string;
+  toFloorId: string;
+  fromFloorName: string;
+  toFloorName: string;
+}
+export interface Point {
+  buildingId: string;
+  floorId: string;
+  latitude: number;
+  longitude: number;
+}
+export interface Error {
+  code: number;
+  message: string;
+}
+export interface Destination {
+  category: string;
+  identifier?: string;
+  name?: string;
+  point: Point;
+}
+export interface Navigation {
+  status: string;
+  destination?: Destination;
+}
+export interface OnNavigationResult {
+  navigation: Navigation;
+  error?: Error;
+}

package/src/wayfinding/utils/index.ts

@@ -0,0 +1,5 @@
+import WebView from "react-native-webview";
+
+export const sendMessageToViewer = (viewer: WebView, message: string) => {
+  viewer.injectJavaScript(`window.postMessage(${message})`);
+};

package/src/wayfinding/utils/mapper.ts

@@ -0,0 +1,129 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Destination, Navigation, Point } from "..";
+import {
+  Directions,
+  Location,
+  NavigateToPoiType,
+  SDKNavigation,
+} from "../store/index";
+
+const mapperWrapper = (type: string, payload: unknown) =>
+  JSON.stringify({ type, payload });
+
+const Mapper = {
+  location: (location: Location) =>
+    mapperWrapper("location.update", {
+      ...(location.position && {
+        latitude: location.position.coordinate.latitude,
+        longitude: location.position.coordinate.longitude,
+        x: location.position.cartesianCoordinate.x,
+        y: location.position.cartesianCoordinate.y,
+        buildingId: location.position.buildingIdentifier,
+        floorId: location.position.floorIdentifier,
+        bearing: location.bearing?.degreesClockwise,
+        isIndoor: location.position.isIndoor,
+        isOutdoor: location.position.isOutdoor,
+        accuracy: location.accuracy,
+        hasBearing: location.hasBearing,
+      }),
+      status: location.status,
+    }),
+  locationStatus: (locationStatus: Location["status"]) =>
+    mapperWrapper("location_status.update", locationStatus),
+
+  route: (directions: Directions) =>
+    mapperWrapper("directions.update", directions),
+
+  navigation: (navigation: Navigation) =>
+    mapperWrapper(`navigation.${navigation.status}`, navigation),
+
+  navigateToPoi: (navigate: NavigateToPoiType) =>
+    mapperWrapper(`navigation.start`, { navigationTo: navigate?.navigationTo }),
+
+  cancelNavigation: () => mapperWrapper(`navigation.cancel`, {}),
+
+  selectPoi: (poiId: number) =>
+    mapperWrapper(`cartography.select_poi`, { identifier: poiId }),
+
+  followUser: (follow: boolean) => mapperWrapper("camera.follow_user", follow),
+
+  initialConfiguration: (
+    style: any,
+    enablePoiClustering: any,
+    showPoiNames: any,
+    minZoom: any,
+    maxZoom: any,
+    initialZoom: any,
+    useDashboardTheme: any
+  ) =>
+    mapperWrapper("ui.initial_configuration", {
+      ...(style && {
+        style: style,
+      }),
+      ...(enablePoiClustering && {
+        enablePoiClustering: enablePoiClustering,
+      }),
+      ...(showPoiNames && {
+        showPoiNames: showPoiNames,
+      }),
+      ...(minZoom && {
+        minZoom: minZoom,
+      }),
+      ...(maxZoom && {
+        maxZoom: maxZoom,
+      }),
+      ...(initialZoom && {
+        initialZoom: initialZoom,
+      }),
+      ...(useDashboardTheme && {
+        useDashboardTheme: useDashboardTheme,
+      }),
+    }),
+
+  routeToResult: (navigation: any): Navigation => {
+    //console.log('navigation/route to be mapped:', navigation);
+    return {
+      status: navigation.status,
+      destination: {
+        category: navigation?.destinationId ? "POI" : "COORDINATE",
+        identifier: navigation?.destinationId,
+        //name:, //TODO
+        point: {
+          buildingId:
+            navigation.to.buildingIdentifier ||
+            navigation.TO.buildingIdentifier,
+          floorId:
+            navigation.to.floorIdentifier || navigation.TO.floorIdentifier,
+          latitude:
+            navigation.to.coordinate.latitude ||
+            navigation.TO.coordinate.latitude,
+          longitude:
+            navigation.to.coordinate.longitude ||
+            navigation.TO.coordinate.longitude,
+        } as Point,
+      } as Destination,
+    } as Navigation;
+  },
+
+  navigationToResult: (navigation: SDKNavigation): Navigation => {
+    return {
+      status: navigation?.type,
+    };
+    // return {
+    //   status: navigation.status,
+    //   destination: {
+    //     category: navigation.routeStep.TO.destinationId ? 'POI' : 'COORDINATE',
+    //     identifier: navigation.routeStep.TO.destinationId,
+    //     //name:, //TODO
+    //     point: {
+    //       buildingId: navigation.routeStep.TO.buildingIdentifier,
+    //       floorId: navigation.routeStep.TO.floorIdentifier,
+    //       latitude: navigation.routeStep.TO.coordinate.latitude,
+    //       longitude: navigation.routeStep.TO.coordinate.longitude,
+    //     } as Point,
+    //   } as Destination,
+    // } as Navigation;
+  },
+};
+
+export default Mapper;