5-react-mobx-start

learncodeacademy · RashmiRanganathan · Aug 16, 2016 · Aug 16, 2016 · Aug 17, 2016 · Sep 26, 2016
commit c40622443caee97298e55e994caccd8bd1eb232f
diff --git a/5-react-mobx/.babelrc b/5-react-mobx/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ['react', 'es2015'],
+  "plugins": ['transform-decorators-legacy', 'transform-class-properties']
+}
diff --git a/5-react-mobx/.gitignore b/5-react-mobx/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+.DS_Store
diff --git a/5-react-mobx/.nvmrc b/5-react-mobx/.nvmrc
@@ -0,0 +1 @@
+v6.3.0
diff --git a/5-react-mobx/package.json b/5-react-mobx/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "react-mobx-todos",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --content-base src --inline --hot"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "mobx": "^2.3.7",
+    "mobx-react": "^3.5.1",
+    "react": "^15.2.1",
+    "react-dom": "^15.3.0"
+  },
+  "devDependencies": {
+    "babel-loader": "^6.2.4",
+    "babel-plugin-transform-class-properties": "^6.10.2",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.11.1",
+    "css-loader": "^0.23.1",
+    "react-addons-test-utils": "^15.3.0",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.14.1"
+  }
+}
diff --git a/5-react-mobx/src/css/main.css b/5-react-mobx/src/css/main.css
@@ -0,0 +1,50 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Slabo 27px', serif;
+  background: #f5f5f5;
+  color: #4d4d4d;
+  min-width: 230px;
+  max-width: 550px;
+  margin: 0 auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+  font-weight: 300;
+}
+
+input {
+  border-radius: 5px;
+  padding: 5px;
+  border: 1px solid rgba(0,0,0,0.3);
+  margin-right: 10px
+}
+
+input::-webkit-input-placeholder {
+  font-style: italic;
+  font-weight: 300;
+  color: rgba(0,0,0,0.3);
+}
+
+input::-moz-placeholder {
+  font-style: italic;
+  font-weight: 300;
+  color: rgba(0,0,0,0.3);
+}
+
+input::input-placeholder {
+  font-style: italic;
+  font-weight: 300;
+  color: rgba(0,0,0,0.3);
+}
+
+h1 {
+  font-weight: 100;
+  font-size: 100px;
+  padding:0;
+  margin: 0;
+}
diff --git a/5-react-mobx/src/index.html b/5-react-mobx/src/index.html
@@ -0,0 +1,9 @@
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="main.min.js"></script>
+  </body>
+</html>
diff --git a/5-react-mobx/src/js/TodoList.js b/5-react-mobx/src/js/TodoList.js
@@ -0,0 +1,39 @@
+import React from "react"
+import { observer } from "mobx-react"
+
+
+@observer
+export default class TodoList extends React.Component {
+  create(e) {
+    if (e.which === 13) {
+      this.props.store.createTodo(e.target.value)
+      e.target.value = ""
+    }
+  }
+
+  filter(e) {
+    this.props.store.filter = e.target.value
+  }
+
+  toggleComplete(todo) {
+    todo.complete = !todo.complete
+  }
+
+  render() {
+    const todos = this.props.store.filteredTodos.map(todo => (
+      <li key={todo.id}>
+        <input type="checkbox" value={todo.complete} onChange={this.toggleComplete.bind(this, todo)} /> <span>{todo.value}</span>
+      </li>
+    ))
+
+    return (
+      <div >
+        <h1>todos</h1>
+        <input placeholder="create new" onKeyPress={this.create.bind(this)} />
+        <input placeholder="filter todos" value={this.props.store.filter} onChange={this.filter.bind(this)} />
+        <ul>{todos}</ul>
+        <a href="#" onClick={this.props.store.clearComplete}>Clear Completed</a>
+      </div>
+    )
+  }
+}
diff --git a/5-react-mobx/src/js/TodoStore.js b/5-react-mobx/src/js/TodoStore.js
@@ -0,0 +1,34 @@
+import mobx from "mobx"
+import { computed, observable} from "mobx"
+
+class Todo {
+  @observable value
+  @observable id
+  @observable complete
+
+  constructor(value) {
+    this.value = value
+    this.id = Date.now()
+    this.complete = false
+  }
+}
+
+export class TodoStore {
+  @observable todos = []
+  @observable filter = ""
+
+  @computed get filteredTodos() {
+    return this.todos.filter(todo => !this.filter || todo.value.toLowerCase().match(this.filter.toLowerCase()))
+  }
+
+  clearComplete = () => {
+    this.todos.replace(this.todos.filter(todo => !todo.complete))
+  }
+
+  createTodo(value) {
+    this.todos.push(new Todo(value))
+  }
+}
+
+export default new TodoStore
+
diff --git a/5-react-mobx/src/js/main.js b/5-react-mobx/src/js/main.js
@@ -0,0 +1,10 @@
+import "../css/main.css"
+import React from "react"
+import ReactDOM from "react-dom"
+import TodoStore from "./TodoStore"
+import TodoList from "./TodoList"
+
+const app = document.getElementById("app")
+
+ReactDOM.render(<TodoList store={TodoStore} />, app)
+
diff --git a/5-react-mobx/webpack.config.js b/5-react-mobx/webpack.config.js
@@ -0,0 +1,28 @@
+var debug = process.env.NODE_ENV !== "production";
+var webpack = require('webpack');
+var path = require('path');
+
+module.exports = {
+  context: path.join(__dirname, "src"),
+  devtool: debug ? "inline-sourcemap" : null,
+  entry: "./js/main.js",
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        exclude: /(node_modules|bower_components)/,
+        loader: 'babel-loader',
+      },
+      { test: /\.css$/, loader: "style-loader!css-loader" },
+    ]
+  },
+  output: {
+    path: path.join(__dirname, "src"),
+    filename: "main.min.js"
+  },
+  plugins: debug ? [] : [
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
+  ],
+};