implement mobx in jetsetter

Author: Isaac Ramirez

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+ "javascript.implicitProjectConfig.experimentalDecorators": true
+}

8-mobx/jetsetter/src/components/Application.js

@@ -9,31 +9,42 @@ import { inject, observer } from 'mobx-react';
 
 const PackedItems = inject('itemList')(
  observer(({ itemList }) => (
- <Items title="Packed Items" items={itemList.packedItems}>
+ <Items title="Packed Items" items={itemList.filteredPackedList}>
  <Filter
- searchTerm={itemList.packedItemsFilter}
- onChange={itemList.updatePackedFilter}
+ searchTerm={itemList.searchFilter.packedItems}
+ onChange={itemList.updatePackedItemsFilter}
  />
  </Items>
  )),
 );
 
 const UnpackedItems = inject('itemList')(
  observer(({ itemList }) => (
- <Items title="Unpacked Items" items={itemList.unpackedItems} />
+ <Items title="Unpacked Items" items={itemList.filteredUnpackedList}>
+ <Filter
+ searchTerm={itemList.searchFilter.unpackedItems}
+ onChange={itemList.updateUnpackedItemsFilter}
+ />
+ </Items>
  )),
 );
 
+const MarkAllAsUnpacked = inject('itemList')(
+ observer(({itemList}) => (
+ <button className="button full-width" onClick={itemList.markAllAsUnpacked}>
+ Mark All As Unpacked
+ </button>
+ ))
+)
+
 class Application extends Component {
  render() {
  return (
  <div className="Application">
- <NewItem onSubmit={() => {}} />
+ <NewItem />
  <UnpackedItems />
  <PackedItems />
- <button className="button full-width" onClick={() => {}}>
- Mark All As Unpacked
- </button>
+ <MarkAllAsUnpacked />
  </div>
  );
  }

8-mobx/jetsetter/src/components/Filter.js

@@ -11,6 +11,7 @@ class Filter extends Component {
 
  render() {
  const { searchTerm } = this.props;
+
  return (
  <input
  className="Items-searchTerm"

8-mobx/jetsetter/src/components/Item.js

@@ -3,7 +3,8 @@ import './Item.css';
 
 class Item extends Component {
  render() {
- const { item, onCheckOff, onRemove } = this.props;
+ const { item } = this.props;
+
  return (
  <article className="Item">
  <label htmlFor={item.id}>

8-mobx/jetsetter/src/components/Items.js

@@ -1,19 +1,10 @@
 import React, { Component } from 'react';
 import Item from './Item';
-import Filter from './Filter';
 
 class Items extends Component {
- state = {
- searchTerm: '',
- };
-
- updateSearchTerm = searchTerm => {
- this.setState({ searchTerm });
- };
-
  render() {
- const { title, items, onCheckOff, onRemove } = this.props;
- const { searchTerm } = this.state;
+ const { title, items } = this.props;
+
  return (
  <section className="Items">
  <h2>

8-mobx/jetsetter/src/components/NewItem.js

@@ -1,6 +1,4 @@
 import React, { Component } from 'react';
-import uniqueId from 'lodash/uniqueId';
-
 import { inject } from 'mobx-react';
 
 import './NewItem.css';

8-mobx/jetsetter/src/models/ItemList.js

@@ -3,8 +3,10 @@ import Item from './item';
 
 export default class ItemList {
  @observable items = [];
- @observable unpackedItemsFilter = '';
- @observable packedItemsFilter = '';
+ @observable searchFilter = {
+ packedItems: '',
+ unpackedItems: ''
+ }
 
  @computed
  get packedItems() {
@@ -19,14 +21,14 @@ export default class ItemList {
  @computed
  get filteredUnpackedList() {
  return this.unpackedItems.filter(item =>
- item.value.includes(this.unpackedItemsFilter),
+ item.value.includes(this.searchFilter.unpackedItems),
  );
  }
 
  @computed
- get filteredpackedList() {
+ get filteredPackedList() {
  return this.packedItems.filter(item =>
- item.value.includes(this.packedItemsFilter),
+ item.value.includes(this.searchFilter.packedItems),
  );
  }
 
@@ -41,10 +43,14 @@ export default class ItemList {
  }
 
  @action.bound updatePackedItemsFilter(value) {
- this.packedItemsFilter = value;
+ this.searchFilter.packedItems = value;
  }
 
  @action.bound updateUnpackedItemsFilter(value) {
- this.unpackedItemsFilter = value;
+ this.searchFilter.unpackedItems = value;
+ }
+
+ @action.bound markAllAsUnpacked () {
+ this.items.forEach(i => i.packed = false);
  }
 }

8-mobx/jetsetter/yarn.lock

@@ -2027,58 +2027,6 @@ currently-unhandled@^0.4.1:
  dependencies:
  array-find-index "^1.0.1"
 
-custom-react-scripts@0.2.1:
- version "0.2.1"
- resolved "https://registry.yarnpkg.com/custom-react-scripts/-/custom-react-scripts-0.2.1.tgz#4346a08ab01d2e7f54d1b92d5080b0ea4dd0ea95"
- dependencies:
- autoprefixer "7.1.2"
- babel-core "6.25.0"
- babel-eslint "7.2.3"
- babel-jest "20.0.3"
- babel-loader "7.1.1"
- babel-plugin-transform-decorators-legacy "^1.3.4"
- babel-preset-react-app "^3.0.2"
- babel-preset-stage-0 "^6.24.1"
- babel-runtime "6.23.0"
- case-sensitive-paths-webpack-plugin "2.1.1"
- chalk "1.1.3"
- css-loader "0.28.4"
- dotenv "4.0.0"
- eslint "4.4.1"
- eslint-config-react-app "^2.0.0"
- eslint-loader "1.9.0"
- eslint-plugin-flowtype "2.35.0"
- eslint-plugin-import "2.7.0"
- eslint-plugin-jsx-a11y "5.1.1"
- eslint-plugin-react "7.1.0"
- extract-text-webpack-plugin "3.0.0"
- file-loader "0.11.2"
- fs-extra "3.0.1"
- html-webpack-plugin "2.29.0"
- jest "20.0.4"
- less "^2.7.2"
- less-loader "^4.0.5"
- node-sass "^4.5.3"
- object-assign "4.1.1"
- postcss-flexbugs-fixes "3.2.0"
- postcss-loader "2.0.6"
- promise "8.0.1"
- react-dev-utils "^3.1.0"
- react-error-overlay "^1.0.10"
- sass-loader "^6.0.6"
- style-loader "0.18.2"
- stylus "^0.54.5"
- stylus-loader "^3.0.1"
- sw-precache-webpack-plugin "0.11.4"
- url-loader "0.5.9"
- webpack "3.5.1"
- webpack-dashboard "^1.0.0-2"
- webpack-dev-server "2.7.1"
- webpack-manifest-plugin "1.2.1"
- whatwg-fetch "2.0.3"
- optionalDependencies:
- fsevents "1.1.2"
-
 d@1:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
@@ -3117,13 +3065,6 @@ fs.realpath@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
 
-fsevents@1.1.2:
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.2.tgz#3282b713fb3ad80ede0e9fcf4611b5aa6fc033f4"
- dependencies:
- nan "^2.3.0"
- node-pre-gyp "^0.6.36"
-
 fsevents@^1.0.0:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.3.tgz#11f82318f5fe7bb2cd22965a108e9306208216d8"
@@ -4943,7 +4884,7 @@ node-notifier@^5.0.2:
  shellwords "^0.1.0"
  which "^1.2.12"
 
-node-pre-gyp@^0.6.36, node-pre-gyp@^0.6.39:
+node-pre-gyp@^0.6.39:
  version "0.6.39"
  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz#c00e96860b23c0e1420ac7befc5044e1d78d8649"
  dependencies:

notes.md

@@ -198,4 +198,7 @@ export const updateAllItems = (items) => {
  }
 }
 
-```
+```
+
+## MobX
+insert some content here