map.js

const ENABLE_MAP = "ENABLE_MAP";
const DISABLE_MAP = "DISABLE_MAP";
const SET_CENTER_COORDINATE = "SET_CENTER_COORDINATE";
const SET_PLACEHOLDER = "SET_PLACEHOLDER";
const CLEAR_PLACEHOLDER = "CLEAR_PLACEHOLDER";
const START_NAVIGATION_MODE = "START_NAVIGATION_MODE";
const STOP_NAVIGATION_MODE = "STOP_NAVIGATION_MODE";

const SET_ACTIVE_POINT = "SET_ACTIVE_POINT";
const RESET_POINTS = "RESET_POINTS";

export function enableMap() {
  return dispatch => {
    dispatch({
      type: ENABLE_MAP
    });
  };
}

export function disableMap() {
  return dispatch => {
    dispatch({
      type: DISABLE_MAP
    });
  };
}

export function setCenterCoordinate(lat, lon) {
  return dispatch => {
    dispatch({
      type: SET_CENTER_COORDINATE,
      latitude: lat,
      longitude: lon
    });
  };
}

export function setPlaceholder(activeID, activeType) {
  return dispatch => {
    dispatch({
      type: SET_PLACEHOLDER,
      showUserLocation: false,
      activeID: activeID,
      activeType: activeType
    });
  };
}

export function clearPlaceholder() {
  return dispatch => {
    dispatch({
      type: CLEAR_PLACEHOLDER,
      showUserLocation: true,
      activeID: -1,
      activeType: null
    });
  };
}

export function setActivePiont(activeID) {
  return dispatch => {
    dispatch({
      type: SET_ACTIVE_POINT,
      activeID: activeID,
      showDirection: true
    });
  };
}

export function resetPionts() {
  return dispatch => {
    dispatch({
      type: RESET_POINTS,
      activeID: -1,
      showDirection: false
    });
  };
}

export function startNavigationMode() {
  return dispatch => {
    dispatch({
      type: START_NAVIGATION_MODE
    });
  };
}

export function stopNavigationMode() {
  return dispatch => {
    dispatch({
      type: STOP_NAVIGATION_MODE
    });
  };
}

const initialState = {
  enableMap: false,
  zoomLevel: 4,
  showUserLocation: true,
  showDirection: false,
  navigationMode: false,
  centerLat: 55.185348,
  centerLon: 25.141306,
  activeType: null,
  activeID: -1,
  animated: true,
  zoomEnabled: true,
  userTrackingMode: "None",
  styleURL: "mapbox://styles/mapbox/navigation-preview-day-v2"
};

const actionsMap = {
  [ENABLE_MAP]: state => {
    return {
      ...state,
      enableMap: true
    };
  },
  [DISABLE_MAP]: state => {
    return {
      ...state,
      enableMap: false
    };
  },
  [SET_CENTER_COORDINATE]: (state, action) => {
    return {
      ...state,
      centerLat: action.latitude,
      centerLon: action.longitude
    };
  },
  [SET_PLACEHOLDER]: (state, action) => {
    return {
      ...state,
      showUserLocation: action.showUserLocation,
      activeID: action.activeID,
      activeType: action.activeType
    };
  },
  [CLEAR_PLACEHOLDER]: (state, action) => {
    return {
      ...state,
      showUserLocation: action.showUserLocation,
      activeID: action.activeID,
      activeType: action.activeType
    };
  },
  [START_NAVIGATION_MODE]: state => {
    return {
      ...state,
      navigationMode: true,
      userTrackingMode: "FollowWithHeading"
    };
  },
  [STOP_NAVIGATION_MODE]: state => {
    return {
      ...state,
      navigationMode: false,
      userTrackingMode: "None"
    };
  },
  [SET_ACTIVE_POINT]: (state, action) => {
    return {
      ...state,
      showDirection: action.showDirection,
      activeID: action.activeID
    };
  },
  [RESET_POINTS]: (state, action) => {
    return {
      ...state,
      showDirection: action.showDirection,
      activeID: action.activeID
    };
  }
};

export default function map(state = initialState, action) {
  const reduceFn = actionsMap[action.type];
  if (!reduceFn) return state;
  return reduceFn(state, action);
}