ported the flow-router demo to React

grigio · grigio · commit dac3117f3d19 · 2015-04-06T18:20:33.000+02:00
diff --git a/README.md b/README.md
@@ -1,4 +1,6 @@
-## Subscriptions Management with Flow Router
+## Subscriptions Management with Flow Router and React
+
+with `grigio:babel` + `grove:react`
 
 See:
 
diff --git a/ccd.html b/ccd.html
@@ -1,29 +1,7 @@
-<template name="page">
-  <div class="page">
-    <h1>My Blog</h1>
-    <div class="post">
-      {{#if isReady "currentPost"}}
-        <!-- render the blog post -->
-        This is a very cool blog post
-      {{else}}
-        Loading...
-      {{/if}}
-    </div>
-    <div class="categories">
-      <h3> Categories </h3>
-      {{#if isReady}}
-        <!-- render categories after all subscriptions are ready -->
-        Categories: {{getCategories}}
-      {{/if}}
-      <!-- No need to show some loading message -->
-    </div>
-  </div>
-
-  <div class="comments">
-    <!-- Render comments as they came -->
-    <h4>Comments</h4>
-    {{#each getComments}}
-      <div>{{text}}</div>
-    {{/each}}
-  </div>
-</template>
+<head>
+	<title></title>
+</head>
+<body>
+	<!-- This will be filled by FlowRouter with React stuff -->
+	<div id="yield"></div>
+</body>
diff --git a/ccd.jsx b/ccd.jsx
@@ -9,25 +9,8 @@ if (Meteor.isClient) {
     },
 
     action: function() {
-      // We render the template with Flow Layout
-      FlowLayout.render('page');
-    }
-  });
-
-  Template.page.helpers({
-    isReady: function(sub) {
-      if(sub) {
-        return FlowRouter.subsReady(sub);
-      } else {
-        return FlowRouter.subsReady();
-      }
-    },
-    getComments: function() {
-      return Comments.find();
-    },
-    getCategories: function() {
-      var categories = Categories.find().fetch();
-      return _.pluck(categories, 'text').join(', ');
+      // We render the template with React
+      React.render(<Page />, document.getElementById('yield'));
     }
   });
 }
diff --git a/page.jsx b/page.jsx
@@ -0,0 +1,59 @@
+if (Meteor.isClient) {  
+
+  Page = React.createClass({
+    mixins: [ DDPMixin, ReactiveMixin ],
+    getReactiveState: function() {
+
+      return {
+        postContent: this.getPostContent(),
+        categories: this.getCategories(),
+        comments: this.getComments()
+      }
+    },
+
+    getPostContent:function () {
+      if (FlowRouter.subsReady('currentPost'))
+        return "This is a very cool blog post"
+      else
+        return "loading post.."
+    },
+
+    getCategories: function() {
+      // render categories after all subscriptions are ready
+      if (FlowRouter.subsReady()) {
+        var categories = Categories.find().fetch();
+        return _.pluck(categories, 'text').join(', ');
+      } 
+    },
+
+    getComments:function () {
+      // Render comments as they came
+      return Comments.find();
+    },
+
+    renderComment: function(model) {
+      return (
+          <p key={model._id}>{model.text}</p>
+      )
+    },
+
+    render: function() {
+
+      return (
+        <div className="page">
+          <h1>My Blog</h1>
+          {this.state.postContent}
+          <div className="categories">
+            <h3>Categories</h3>
+              Categories: {this.state.categories}
+          </div>
+            <div className="comments">
+            <h4>Comments</h4>
+              {this.state.comments.map(this.renderComment)}
+          </div>
+        </div>
+      )
+    }
+
+  });
+}
