Initial work on composition-based flow

BinaryMuse · May 1, 2015 · f331505 · f331505
1 parent b35d28b
commit f331505
Show file tree

Hide file tree

Showing 12 changed files with 340 additions and 144 deletions.
diff --git a/examples/react-router/app/app.jsx b/examples/react-router/app/app.jsx
@@ -3,14 +3,12 @@ var React = require("react"),
     Fluxxor = require("../../../");
 
 var actions = require("./actions.jsx"),
-    routes = require("./routes.jsx"),
+    router = require("./router.jsx"),
     RecipeStore = require("./stores/recipe_store.jsx");
     RouteStore = require("./stores/route_store.jsx");
 
 require("./style.less");
 
-var router = Router.create({routes: routes});
-
 var stores = {
   recipe: new RecipeStore(),
   route: new RouteStore({router: router})

diff --git a/examples/react-router/app/components/empty_view.jsx b/examples/react-router/app/components/empty_view.jsx
@@ -2,8 +2,10 @@ var React = require("react"),
     Router = require("react-router"),
     RouteHandler = Router.RouteHandler;
 
-module.exports = React.createClass({
-  render: function() {
+class EmptyView extends React.Component {
+  render() {
     return <RouteHandler {...this.props} />;
   }
-});
+}
+
+module.exports = EmptyView;
diff --git a/examples/react-router/app/components/recipe.jsx b/examples/react-router/app/components/recipe.jsx
@@ -1,34 +1,17 @@
 var React = require("react"),
     Router = require("react-router"),
-    Link = Router.Link,
-    Fluxxor = require("../../../../");
+    Link = Router.Link;
 
 var RecipeStore = require("../stores/recipe_store.jsx");
 
-var Recipe = React.createClass({
-  mixins: [
-    Fluxxor.FluxMixin(React),
-    Fluxxor.StoreWatchMixin("recipe")
-  ],
-
-  contextTypes: {
-    router: React.PropTypes.func
-  },
-
-  getStateFromFlux: function() {
-    var params = this.context.router.getCurrentParams();
-
-    return {
-      recipe: this.getFlux().store("recipe").getRecipe(params.id)
-    };
-  },
-
-  componentWillReceiveProps: function(nextProps) {
-    this.setState(this.getStateFromFlux());
-  },
+class Recipe extends React.Component {
+  constructor() {
+    super();
+    this.onDeleteRecipe = this.onDeleteRecipe.bind(this);
+  }
 
-  render: function() {
-    var recipe = this.state.recipe;
+  render() {
+    var recipe = this.props.recipe;
 
     if (recipe === RecipeStore.NOT_FOUND_TOKEN) {
       return this.renderNotFound();
@@ -48,27 +31,27 @@ var Recipe = React.createClass({
 
         <p>
           <Link to="edit-recipe" params={{id: recipe.id}}>Edit Recipe</Link>
-          {" | "}<Link to="home" onClick={this.deleteRecipe}>Delete Recipe</Link>
+          {" | "}<Link to="home" onClick={this.onDeleteRecipe}>Delete Recipe</Link>
         </p>
       </div>
     );
-  },
+  }
 
-  renderIngredient: function(ingredient, idx) {
+  renderIngredient(ingredient, idx) {
     return (
       <li key={idx}>
         <strong>{ingredient.quantity}</strong> {ingredient.item}
       </li>
     );
-  },
+  }
 
-  renderNotFound: function() {
+  renderNotFound() {
     return this.renderWithLayout(
       <div>That recipe was not found.</div>
     );
-  },
+  }
 
-  renderWithLayout: function(content) {
+  renderWithLayout(content) {
     return (
       <div>
         {content}
@@ -77,15 +60,19 @@ var Recipe = React.createClass({
         {" | "}<Link to="add-recipe">Add New Recipe</Link>
       </div>
     );
-  },
+  }
 
-  deleteRecipe: function(e) {
+  onDeleteRecipe(e) {
     if (confirm("Really delete this recipe?")) {
-      this.getFlux().actions.recipes.remove(this.state.recipe.id);
+      this.props.deleteRecipe(this.props.recipe.id);
     } else {
       e.preventDefault();
     }
   }
-});
+}
+
+Recipe.contextTypes = {
+  router: React.PropTypes.func
+};
 
 module.exports = Recipe;
diff --git a/examples/react-router/app/components/recipe_adder.jsx b/examples/react-router/app/components/recipe_adder.jsx
@@ -2,22 +2,18 @@ var t = require("tcomb-form"),
     React = require("react"),
     Router = require("react-router"),
     RouteHandler = Router.RouteHandler,
-    Link = Router.Link,
-    Fluxxor = require("../../../../");
+    Link = Router.Link;
 
 var Recipe = require("../schemas/recipe.jsx"),
     RecipeForm = require("../forms/recipe_form.jsx");
 
-var RecipeAdder = React.createClass({
-  mixins: [
-    Fluxxor.FluxMixin(React)
-  ],
-
-  contextTypes: {
-    router: React.PropTypes.func
-  },
+class RecipeAdder extends React.Component {
+  constructor() {
+    super();
+    this.onSubmit = this.onSubmit.bind(this);
+  }
 
-  render: function() {
+  render() {
     return this.renderWithLayout(
       <div>
         <form onSubmit={this.onSubmit}>
@@ -26,9 +22,9 @@ var RecipeAdder = React.createClass({
         </form>
       </div>
     );
-  },
+  }
 
-  renderWithLayout: function(content) {
+  renderWithLayout(content) {
     return (
       <div>
         {content}
@@ -37,29 +33,38 @@ var RecipeAdder = React.createClass({
         {" | "}<Link to="add-recipe">Add New Recipe</Link>
       </div>
     );
-  },
+  }
 
-  onSubmit: function(e) {
+  onSubmit(e) {
     e.preventDefault();
 
     var newRecipe = this.refs.form.getValue();
     if (newRecipe) {
-      this.getFlux().actions.recipes.add(
+      this.props.onAddRecipe(
         newRecipe.name,
         newRecipe.description,
         newRecipe.ingredients,
         newRecipe.directions
       );
     }
-  },
+  }
 
-  deleteRecipe: function(e) {
+  deleteRecipe(e) {
     if (confirm("Really delete this recipe?")) {
-      this.getFlux().actions.recipes.remove(this.state.recipe.id);
+      this.props.onDeleteRecipe(this.state.recipe.id);
     } else {
       e.preventDefault();
     }
   }
-});
+};
+
+RecipeAdder.propTypes = {
+  onAddRecipe: React.PropTypes.func
+};
+
+RecipeAdder.contextTypes = {
+  router: React.PropTypes.func
+};
+
 
 module.exports = RecipeAdder;
diff --git a/examples/react-router/app/components/recipe_editor.jsx b/examples/react-router/app/components/recipe_editor.jsx
@@ -2,37 +2,21 @@ var t = require("tcomb-form"),
     React = require("react"),
     Router = require("react-router"),
     RouteHandler = Router.RouteHandler,
-    Link = Router.Link,
-    Fluxxor = require("../../../../");
+    Link = Router.Link;
 
 var Recipe = require("../schemas/recipe.jsx"),
     RecipeForm = require("../forms/recipe_form.jsx"),
     RecipeStore = require("../stores/recipe_store.jsx");
 
-var RecipeEditor = React.createClass({
-  mixins: [
-    Fluxxor.FluxMixin(React),
-    Fluxxor.StoreWatchMixin("recipe")
-  ],
-
-  contextTypes: {
-    router: React.PropTypes.func
-  },
-
-  getStateFromFlux: function() {
-    var params = this.context.router.getCurrentParams();
-
-    return {
-      recipe: this.getFlux().store("recipe").getRecipe(params.id)
-    };
-  },
-
-  componentWillReceiveProps: function(nextProps) {
-    this.setState(this.getStateFromFlux());
-  },
+class RecipeEditor extends React.Component {
+  constructor() {
+    super();
+    this.onSubmit = this.onSubmit.bind(this);
+    this.deleteRecipe = this.deleteRecipe.bind(this);
+  }
 
-  render: function() {
-    var recipe = this.state.recipe;
+  render() {
+    var recipe = this.props.recipe;
 
     if (recipe === RecipeStore.NOT_FOUND_TOKEN) {
       return this.renderNotFound();
@@ -50,15 +34,15 @@ var RecipeEditor = React.createClass({
         </p>
       </div>
     );
-  },
+  }
 
-  renderNotFound: function() {
+  renderNotFound() {
     return this.renderWithLayout(
       <div>That recipe was not found.</div>
     );
-  },
+  }
 
-  renderWithLayout: function(content) {
+  renderWithLayout(content) {
     return (
       <div>
         {content}
@@ -67,32 +51,36 @@ var RecipeEditor = React.createClass({
         {" | "}<Link to="add-recipe">Add New Recipe</Link>
       </div>
     );
-  },
+  }
 
-  onSubmit: function(e) {
+  onSubmit(e) {
     e.preventDefault();
 
     var newRecipe = this.refs.form.getValue();
     if (newRecipe) {
-      this.getFlux().actions.recipes.edit(
-        this.state.recipe.id,
+      this.props.onEditRecipe(
+        this.props.recipe.id,
         newRecipe.name,
         newRecipe.description,
         newRecipe.ingredients,
         newRecipe.directions
       );
 
-      this.context.router.transitionTo("recipe", {id: this.state.recipe.id});
+      this.context.router.transitionTo("recipe", {id: this.props.recipe.id});
     }
-  },
+  }
 
-  deleteRecipe: function(e) {
+  deleteRecipe(e) {
     if (confirm("Really delete this recipe?")) {
-      this.getFlux().actions.recipes.remove(this.state.recipe.id);
+      this.props.onDeleteRecipe(this.props.recipe.id);
     } else {
       e.preventDefault();
     }
   }
-});
+};
+
+RecipeEditor.contextTypes = {
+  router: React.PropTypes.func
+};
 
 module.exports = RecipeEditor;
diff --git a/examples/react-router/app/components/recipe_list.jsx b/examples/react-router/app/components/recipe_list.jsx
@@ -1,37 +1,28 @@
 var React = require("react"),
     Router = require("react-router"),
     RouteHandler = Router.RouteHandler,
-    Link = Router.Link,
-    Fluxxor = require("../../../../");
+    Link = Router.Link;
 
-var RecipeList = React.createClass({
-  mixins: [Fluxxor.FluxMixin(React), Fluxxor.StoreWatchMixin("recipe")],
-
-  getStateFromFlux: function() {
-    return {
-      recipes: this.getFlux().store("recipe").getRecipes()
-    };
-  },
-
-  render: function() {
+class RecipeList extends React.Component {
+  render() {
     return (
       <div>
         <h1>Recipes</h1>
-        <ul>{this.state.recipes.map(this.renderRecipeLink)}</ul>
+        <ul>{this.props.recipes.map(this.renderRecipeLink)}</ul>
         <div>
           <Link to="add-recipe">Add New Recipe</Link>
         </div>
       </div>
     );
-  },
+  }
 
-  renderRecipeLink: function(recipe) {
+  renderRecipeLink(recipe) {
     return (
       <li key={recipe.id}>
         <Link to="recipe" params={{id: recipe.id}}>{recipe.name}</Link>
       </li>
     );
   }
-});
+};
 
 module.exports = RecipeList;
diff --git a/examples/react-router/app/forms/recipe_form.jsx b/examples/react-router/app/forms/recipe_form.jsx
@@ -85,7 +85,7 @@ var list = function(locals) {
 };
 
 module.exports = {
-  auto: 'none',
+  auto: 'placeholders',
   templates: {
     struct: struct,
     list: list