filter data from stores at components

README.md

@@ -37,7 +37,7 @@ Ui fixes
 * show duration details (steps duration) on build page
 * speed up build points animation at ff
 * current successfully streak icons at project page
-* don't appear build from other project on project page
+* ~~don't appear build from other project on project page~~
 * ~~update project info changes (avg duration, etc) on the fly - project page~~
 * long commit comment breakes build card makeup
 * ~~comment start/duration should be on same place during all steps~~

static/js/app/components/builds/list.js

@@ -3,28 +3,27 @@
 define([
 	'react',
 	'reflux',
+	'underscore',
 	'./item',
 	'app/stores/builds',
 	'templates/app/components/builds/list'
-], function(React, Reflux, Item, buildsStore, template) {
+], function(React, Reflux, _, Item, buildsStore, template) {
 	template = template.locals({
 		Item: Item
 	});
 
 	var Component = React.createClass({
-		mixins: [Reflux.ListenerMixin],
-		componentDidMount: function() {
-			this.listenTo(buildsStore, this.updateItems);
-		},
-		updateItems: function(items) {
-			this.setState({items: items});
-		},
-		render: template,
-		getInitialState: function() {
-			return {
-				items: []
-			};
-		}
+		mixins: [Reflux.connectFilter(buildsStore, 'items', function(items) {
+			var projectName = this.props.projectName;
+			if (projectName) {
+				return _(items).filter(function(item) {
+					return item.project.name === projectName;
+				});
+			} else {
+				return items;
+			}
+		})],
+		render: template
 	});
 
 	return Component;

static/js/app/components/projects/view/index.jade

@@ -55,4 +55,4 @@
 			i.fa.fa-fw.fa-history
 			span 
 			span Build history
-		Builds()
+		Builds(projectName=this.props.params.name)

static/js/app/components/projects/view/index.js

@@ -21,7 +21,14 @@ define([
 	});
 
 	return React.createClass({
-		mixins: [Reflux.ListenerMixin],
+		mixins: [Reflux.connectFilter(projectStore, 'project', function(project) {
+			if (project.name === this.props.params.name) {
+				return project;
+			} else {
+				var state = this.state;
+				return state ? state.project : projectStore.getInitialState();
+			}
+		})],
 		statics: {
 			willTransitionTo: function(transition, params, query) {
 				ProjectActions.read({name: params.name});
@@ -34,17 +41,6 @@ define([
 				ProjectActions.run(this.state.project.name);
 			}
 		},
-		componentDidMount: function() {
-			this.listenTo(projectStore, this.updateItem);
-		},
-		updateItem: function(project) {
-			this.setState({project: project});
-		},
-		getInitialState: function() {
-			return {
-				project: {}
-			}
-		},
-		render: template,
+		render: template
 	});
 });

static/js/app/stores/builds.js

@@ -10,6 +10,10 @@ define([
 		listenables: BuildActions,
 		builds: [],
 
+		getInitialState: function() {
+			return this.builds;
+		},
+
 		onChange: function(data, action) {
 			var oldBuild = _(this.builds).findWhere({id: data.buildId});
 			if (oldBuild) {

static/js/app/stores/project.js

@@ -8,7 +8,11 @@ define([
 
 	var Store = Reflux.createStore({
 		listenables: ProjectActions,
-		project: null,
+		project: {},
+
+		getInitialState: function() {
+			return this.project;
+		},
 
 		onChange: function(data, action) {
 			this.trigger(data.project);