react-mobx-take-2

• react-mobx-take-2 from stackblitz, but with no decorators
• Integrating React Testing Library
• Mobx Without Decorators from Mobx Documentation

Original store.js

import { observable, computed, action } from "mobx";

export class Store {
  @observable cartItems = [];
  @observable products = new Map([
    ["10-SOCKS", {
      name: "blue socks",
      price: 1.99
    }], [
      "20-SOCKS", {
        name: "red tube socks",
        price: 2.99
      }],
    ["30-SOCKS", {
      name: "ankle socks",
      price: 1.00
    }
    ],
    ["10-SHOES", {
      name: "blue suede",
      price: 110.99
    }],
    [
      "20-SHOES", {
        name: "red converse all stars",
        price: 72.99
      }],
    ["30-SHOES", {
      name: "zip up ankle boot",
      price: 89.99
    }
    ]
  ])
  @observable filter = 'SHOES';


  @action showProduct(_value) {
    this.filter = _value;
  }

  @action addItemToCart(_product) {
    this.cartItems.push({
      id: _product.id,
      ...this.products.get(_product.id)
    });
  }
  @action removeItemFromCart(index) {
    let r = this.cartItems.splice(index, 1)
    return r
  }

  @action clearCart(_product) {
    this.cartItems = []
  }

  @computed get cartSize() {
    return this.cartItems.length
  }

  @computed get currentFilter() {
    return this.filter
  }

  @computed get cartTotal() {
    return this.cartItems.reduce((total, item) => {
      return total + item.price
    }, 0.00)
  }

  @computed get filteredProducts() {
    console.log("filteredProducts: " + this.filter)
    return this._filterByValue(this.products, this.filter)
  }

  _filterByValue(products, filter) {
    let result = []
    products.forEach((v, k) => {
      if ((k.indexOf(filter) !== -1) || filter === 'SHOW_ALL') {
        result.push({ ...v, id: k })
      }
    })
    return result;
  }
}

removed decorators

import { observable, computed, action, decorate } from "mobx";

export class Store {
   cartItems = [];
   products = new Map([
    ["10-SOCKS", {
      name: "blue socks",
      price: 1.99
    }], [
      "20-SOCKS", {
        name: "red tube socks",
        price: 2.99
      }],
    ["30-SOCKS", {
      name: "ankle socks",
      price: 1.00
    }
    ],
    ["10-SHOES", {
      name: "blue suede",
      price: 110.99
    }],
    [
      "20-SHOES", {
        name: "red converse all stars",
        price: 72.99
      }],
    ["30-SHOES", {
      name: "zip up ankle boot",
      price: 89.99
    }
    ]
  ])
   filter = 'SHOES';


   showProduct(_value) {
    this.filter = _value;
  }

   addItemToCart(_product) {
    this.cartItems.push({
      id: _product.id,
      ...this.products.get(_product.id)
    });
  }
   removeItemFromCart(index) {
    let r = this.cartItems.splice(index, 1)
    return r
  }

   clearCart(_product) {
    this.cartItems = []
  }

   get cartSize() {
    return this.cartItems.length
  }

   get currentFilter() {
    return this.filter
  }

   get cartTotal() {
    return this.cartItems.reduce((total, item) => {
      return total + item.price
    }, 0.00)
  }

 get filteredProducts() {
    console.log("filteredProducts: " + this.filter)
    return this._filterByValue(this.products, this.filter)
  }

  _filterByValue(products, filter) {
    let result = []
    products.forEach((v, k) => {
      if ((k.indexOf(filter) !== -1) || filter === 'SHOW_ALL') {
        result.push({ ...v, id: k })
      }
    })
    return result;
  }
}

decorate(Store, {
  cartItems: observable,
  products: observable,
  filter: observable,

  // COMPUTED
  cartSize: computed,
  currentFilter: computed,
  cartTotal: computed,
  filteredProducts: computed,

  // ACTIONS
  showProduct : action,
  addItemToCart : action,
  removeItemFromCart : action,
  clearCart : action,
});

Working with Testing Library