How to use the mobx.observable.map function in mobx

import {
  // computed,
  observable,
} from 'mobx'

export interface ProductProps {
    id: number;
    name: string;
    price: number;
    count: number;
}

export const cart = observable({
  products: observable.map(),

  addProduct (product: ProductProps) {
    if (this.Products.has(product.id)) {
      throw new Error('Product already exists')
    } else {
      this.Products.set(product.id, product)
    }
  },

  updateProduct (product: ProductProps) {
    this.Products.set(product.id, product)
  },

  removeProduct (id: any) {
    this.Products.delete(id)
  },

@action onBlurClick() {
    this.multiSelected = observable.map();
    if (this.clickIssueDetail && this.clickIssueDetail.issueId) {
      this.multiSelected.set(this.clickIssueDetail.issueId, this.clickIssueDetail);
    }
    // this.clickIssueDetail = {};
  }

import { observable } from 'mobx';
import { RPC_STATUS_INIT, SERVICE_STATUS_INIT, SERVICE_STATUS_RUNNING } from '../constants';

const store = observable({

  // global environment variables
  env: observable.map({}),

  // global websocket status
  rpcStatus: RPC_STATUS_INIT,

  // global websocket latency in ms
  rpcLatency: 0,

  // services
  services: observable.map({
    // : {
    //   status: SERVICE_XXX,
    //   connections: 0,
    //   total_download_bytes: 0,
    //   total_upload_bytes: 0,
    //   download_speed: 0,
    //   upload_speed: 0,
    // },
    // ...
  }),

  // custom methods
  isServiceRunning(id) {
    return this.getServiceStatusById(id) === SERVICE_STATUS_RUNNING;
  },
  getServiceStatusById(id) {

import firebase from 'firebase'
import { action, observable, autorun } from 'mobx'
import isSameDay from 'date-fns/is_same_day'
import { db, getAuthStore } from './'
import { generateHash } from '~/utils'

let store = null

class Store {
    @observable hash = '';
    @observable hashes = observable.map([]);
    @observable ready = false;

  constructor () {
    this.authStore = getAuthStore()
    autorun(() => {
      if (!this.ready) return // data not yet fetched
      if (this.timeout) clearTimeout(this.timeout)
      const text = this.hash
      this.timeout = setTimeout(() => {
        const hashes = this.hashes.entries()
        if (!hashes) return
        const last = hashes[hashes.length - 1]
        if (last.text === text) return
        if (last && isSameDay(new Date(last[1].created), new Date())) {
          this.update(text, last[0])
        } else {

it('undoes a delete to a map', () => {
            let index = 'key';
            let oldValue = 5;

            let object = observable.map({ [index]: oldValue });
            let undoableAction = action('deleteMap')(() => {
                object.delete(index);
            });

            let undoResult = createUndo('deleteMap', true)(undoableAction);

            expect(object.has(index)).toBeFalsy;

            undoResult();

            expect(object.get(index)).toBe(oldValue);
        });
    });

maps = [];
    @observable currentMap = 'none';

    @observable moduleStatus = observable.map();
    @observable componentStatus = observable.map();
    @observable enableStartAuto = false;
    @observable dockerImage = 'unknown';
    @observable isCoDriver = false;
    @observable isMute = false;

    displayName = {};
    utmZoneId = 10;

    @observable isCalibrationMode = false;
    @observable dataCollectionUpdateStatus = observable.map();
    @observable dataCollectionProgress = observable.map();

    @action toggleCoDriverFlag() {
        this.isCoDriver = !this.isCoDriver;
    }

    @action toggleMuteFlag() {
        this.isMute = !this.isMute;
        UTTERANCE.setMute(this.isMute);
    }

    @action updateStatus(newStatus) {
        if (newStatus.dockerImage) {
            this.dockerImage = newStatus.dockerImage;
        }
        if (newStatus.utmZoneId) {

this.allDataMap = allDataMap;
    this.mapStructure = mapStructure;
    if (url && url.paramIssueId) {
      this.clickIssueDetail = { issueId: url.paramIssueId };
    }
    if (issueTypes && !issueTypes.failed) {
      this.issueTypes = issueTypes;
    } else {
      this.issueTypes = [];
    }
    this.stateMachineMap = stateMachineMap;
    this.canDragOn = observable.map(canDragOn);
    this.statusColumnMap = statusColumnMap;
    const { unInterConnectedDataMap, interConnectedDataMap, swimLaneData } = renderData;
    this.otherIssue = unInterConnectedDataMap;
    this.interconnectedData = observable.map(interConnectedDataMap);
    this.swimLaneData = swimLaneData;
    this.statusMap = observable.map(statusMap);
    this.headerData = observable.map(headerData);
  }

function TreeNodeScope () {
  const NOWHERE_LAND = '@@NOWHERE_LAND_FOR_THE_EXILEES@@'
  const SHADOW_ROOT_NODE = 'SHADOW_ROOT_NODE'
  const state = observable({
    entities: observable.map({}),
    get shadowRoot () { return this.entities.get(SHADOW_ROOT_NODE) },
  })

  class TreeNode {
    static nodeSorter = (a, b) => a.index - b.index
    constructor (props) {
      this.id = _.isUndefined(props.id) ? _.uniqueId('tree_node_') : props.id

      if (_.isBoolean(props.isDir)) this._isDir = props.isDir
      if (_.isString(props.name)) this._name = props.name
      if (_.isBoolean(props.isFolded)) this.isFolded = props.isFolded
      if (_.isBoolean(props.isFocused)) this.isFocused = props.isFocused
      if (_.isBoolean(props.isHighlighted)) this.isHighlighted = props.isHighlighted
      if (_.isNumber(props.index)) this.index = props.index

      if (props.parent) {

constructor(bridge) {
    this.bridge = bridge

    this.entity = {
      config: observable.map({}, { deep: true }),
      contact: observable.map({}, { deep: true }),
      device: observable.map({}, { deep: true }),
      conversation: observable.map({}, { deep: true }),
      conversationMember: observable.map({}, { deep: true }),
      event: observable.map({}, { deep: true }),
      devicePushConfig: observable.map({}, { deep: true }),
      devicePushIdentifier: observable.map({}, { deep: true }),
      eventDispatch: observable.map({}, { deep: true }),
      senderAlias: observable.map({}, { deep: true }),
    }

    this.node = {
      service:
        this.bridge &&
        this.bridge.node &&
        this.bridge.node.service &&
        new NodeServiceStore(this, this.bridge.node.service),
    }

    this.daemon = this.bridge.daemon

@action clickedOnce(sprintId, currentClick) {
    const index = this.issueMap.get(sprintId).findIndex(issue => issue.issueId === currentClick.issueId);
    this.multiSelected = observable.map();
    this.multiSelected.set(currentClick.issueId, currentClick);
    this.prevClickedIssue = {
      ...currentClick,
      index,
    };
    this.setClickIssueDetail(currentClick);
  }