TodoMVC Flux Example

kanitw · Mar 26, 2014 · 85339bf · 85339bf
1 parent 308c9a0
commit 85339bf
Show file tree

Hide file tree

Showing 22 changed files with 1,953 additions and 0 deletions.
diff --git a/examples/todomvc-flux/css/app.css b/examples/todomvc-flux/css/app.css
@@ -0,0 +1,25 @@
+/**
+ * Copyright 2013-2014 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * 
+ * base.css overrides 
+ */
+
+/**
+ * We are not changing from display:none, but rather re-rendering instead. 
+ * Therefore this needs to be displayed normally by default.
+ */
+#todo-list li .edit {
+  display: inline;
+}
diff --git a/examples/todomvc-flux/index.html b/examples/todomvc-flux/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>Flux • TodoMVC</title>
+		<link rel="stylesheet" href="todomvc-common/base.css">
+		<link rel="stylesheet" href="css/app.css">
+	</head>
+	<body>
+		<section id="todoapp" />
+		<footer id="info">
+			<p>Double-click to edit a todo</p>
+			<p>Created by <a href="http://facebook.com/bill.fisher.771">Bill Fisher</a></p>
+			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+		</footer>
+		<script src="todomvc-common/base.js"></script>
+		<script src="js/bundle.js"></script>
+	</body>
+</html>
diff --git a/examples/todomvc-flux/js/actions/TodoActions.js b/examples/todomvc-flux/js/actions/TodoActions.js
@@ -0,0 +1,95 @@
+/**
+ * Copyright 2013-2014 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * TodoActions
+ */
+
+var AppDispatcher = require('../dispatcher/AppDispatcher');
+var TodoConstants = require('../constants/TodoConstants');
+
+var TodoActions = {
+
+  /**
+   * @param  {string} text
+   */
+  create: function(text) {
+    AppDispatcher.handleViewAction({
+      actionType: TodoConstants.TODO_CREATE,
+      text: text
+    });
+  },
+
+  /**
+   * @param  {string} id The ID of the ToDo item
+   * @param  {string} text
+   */
+  updateText: function(id, text) {
+    AppDispatcher.handleViewAction({
+      actionType: TodoConstants.TODO_UPDATE_TEXT,
+      id: id,
+      text: text
+    });
+  },
+
+  /**
+   * Toggle whether a single ToDo is complete
+   * @param  {object} todo
+   */
+  toggleComplete: function(todo) {
+    var id = todo.id;
+    if (todo.complete) {
+      AppDispatcher.handleViewAction({
+        actionType: TodoConstants.TODO_UNDO_COMPLETE,
+        id: id
+      });
+    } else {
+      AppDispatcher.handleViewAction({
+        actionType: TodoConstants.TODO_COMPLETE,
+        id: id
+      });
+    }
+  },
+
+  /**
+   * Mark all ToDos as complete
+   */
+  toggleCompleteAll: function() {
+    AppDispatcher.handleViewAction({
+      actionType: TodoConstants.TODO_TOGGLE_COMPLETE_ALL
+    });
+  },
+
+  /**
+   * @param  {string} id
+   */
+  destroy: function(id) {
+    AppDispatcher.handleViewAction({
+      actionType: TodoConstants.TODO_DESTROY,
+      id: id
+    });
+  },
+
+  /**
+   * Delete all the completed ToDos
+   */
+  destroyCompleted: function() {
+    AppDispatcher.handleViewAction({
+      actionType: TodoConstants.TODO_DESTROY_COMPLETED
+    });
+  }
+
+};
+
+module.exports = TodoActions;
diff --git a/examples/todomvc-flux/js/app.js b/examples/todomvc-flux/js/app.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2013-2014 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @jsx React.DOM
+ */
+
+var React = require('react');
+
+var TodoApp = require('./components/TodoApp.react');
+
+React.renderComponent(
+  <TodoApp />,
+  document.getElementById('todoapp')
+);
diff --git a/examples/todomvc-flux/js/components/Footer.react.js b/examples/todomvc-flux/js/components/Footer.react.js
@@ -0,0 +1,84 @@
+/**
+ * Copyright 2013-2014 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @jsx React.DOM
+ */
+
+var React = require('react');
+var ReactPropTypes = React.PropTypes;
+var TodoActions = require('../actions/TodoActions');
+
+var Footer = React.createClass({
+
+  propTypes: {
+    allTodos: ReactPropTypes.object.isRequired
+  },
+
+  /**
+   * @return {object}
+   */
+  render: function() {
+    var allTodos = this.props.allTodos;
+    var total = Object.keys(allTodos).length;
+
+    if (total === 0) {
+      return <noscript />;
+    }
+
+    var completed = 0;
+    for (var key in allTodos) {
+      if (allTodos[key].complete) {
+        completed++;
+      }
+    }
+
+    var itemsLeft = total - completed;
+    var itemsLeftPhrase = itemsLeft === 1 ? ' item ' : ' items ';
+    itemsLeftPhrase += 'left';
+
+    // Undefined and thus not rendered if no completed items are left.
+    var clearCompletedButton;
+    if (completed) {
+      clearCompletedButton =
+        <button
+          id="clear-completed"
+          onClick={this._onClearCompletedClick}>
+          Clear completed ({completed})
+        </button>;
+    }
+
+  	return (
+      <footer id="footer">
+        <span id="todo-count">
+          <strong>
+            {itemsLeft}
+          </strong>
+          {itemsLeftPhrase}
+        </span>
+        {clearCompletedButton}
+      </footer>
+    );
+  },
+
+  /**
+   * Event handler to delete all completed TODOs
+   */
+  _onClearCompletedClick: function() {
+    TodoActions.destroyCompleted();
+  }
+
+});
+
+module.exports = Footer;
diff --git a/examples/todomvc-flux/js/components/Header.react.js b/examples/todomvc-flux/js/components/Header.react.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright 2013-2014 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @jsx React.DOM
+ */
+
+var React = require('react');
+var TodoActions = require('../actions/TodoActions');
+var TodoTextInput = require('./TodoTextInput.react');
+
+var Header = React.createClass({
+
+  /**
+   * @return {object}
+   */
+  render: function() {
+    return (
+      <header id="header">
+        <h1>todos</h1>
+        <TodoTextInput
+          id="new-todo"
+          placeholder="What needs to be done?"
+          onSave={this._onSave}
+        />
+      </header>
+    );
+  },
+
+  /**
+   * Event handler called within TodoTextInput.
+   * Defining this here allows TodoTextInput to be used in multiple places
+   * in different ways.
+   * @param {string} text
+   */
+  _onSave: function(text) {
+    TodoActions.create(text);
+  }
+
+});
+
+module.exports = Header;
diff --git a/examples/todomvc-flux/js/components/MainSection.react.js b/examples/todomvc-flux/js/components/MainSection.react.js
@@ -0,0 +1,71 @@
+/**
+ * Copyright 2013-2014 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @jsx React.DOM
+ */
+
+var React = require('react');
+var ReactPropTypes = React.PropTypes;
+var TodoActions = require('../actions/TodoActions');
+var TodoItem = require('./TodoItem.react');
+
+var MainSection = React.createClass({
+
+  propTypes: {
+    allTodos: ReactPropTypes.object.isRequired,
+    areAllComplete: ReactPropTypes.bool.isRequired
+  },
+
+  /**
+   * @return {object}
+   */
+  render: function() {
+    // This section should be hidden by default
+    // and shown when there are todos.
+    if (Object.keys(this.props.allTodos).length < 1) {
+      return <noscript />;
+    }
+
+    var allTodos = this.props.allTodos;
+    var todos = [];
+
+    for (var key in allTodos) {
+      todos.push(<TodoItem key={key} todo={allTodos[key]} />);
+    }
+
+    return (
+      <section id="main">
+        <input
+          id="toggle-all"
+          type="checkbox"
+          onChange={this._onToggleCompleteAll}
+          checked={this.props.areAllComplete ? 'checked' : ''}
+        />
+        <label htmlFor="toggle-all">Mark all as complete</label>
+        <ul id="todo-list">{todos}</ul>
+      </section>
+    );
+  },
+
+  /**
+   * Event handler to mark all TODOs as complete
+   */
+  _onToggleCompleteAll: function() {
+    TodoActions.toggleCompleteAll();
+  }
+
+});
+
+module.exports = MainSection;