Create basic project details screen

app/components/builds/BuildItem.js

@@ -0,0 +1,28 @@
+import React from 'react-native';
+import GlobalStyles from '../../settings/styles';
+import Icon from 'react-native-vector-icons/Octicons';
+
+const {
+  View,
+  Text,
+  StyleSheet,
+  TouchableHighlight
+} = React;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    height: 70,
+    alignItems: 'stretch',
+    backgroundColor: GlobalStyles.get('CIRCLE_ITEM_BG'),
+    borderBottomColor: GlobalStyles.get('CIRCLE_ITEM_BORDER'),
+    borderBottomWidth: 2,
+    flexDirection: 'row',
+  }
+});
+
+export default class BuildItem extends React.Component {
+  render() {
+    return null;
+  }
+};

app/components/builds/BuildList.js

@@ -0,0 +1,40 @@
+import React from 'react-native';
+import BuildItem from './BuildItem';
+
+const {
+  ListView,
+  StyleSheet,
+  ScrollView
+} = React;
+
+const styles = StyleSheet.create({
+  listView: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+    paddingHorizontal: 5
+  },
+});
+
+export default class BuildList extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  renderRow(build) {
+    return <BuildItem build={build} />;
+  }
+
+  render() {
+    return (
+      <ScrollView>
+        <ListView
+          contentContainerStyle={styles.listView}
+          dataSource={this.state.dataSource}
+          renderRow={this.renderRow} />
+      </ScrollView>
+    );
+  }
+};

app/components/projects/ProjectItem.js

@@ -3,6 +3,7 @@ import GlobalStyles from '../../settings/styles';
 import { getProjectRecentBuilds } from '../../api/CircleCI';
 import moment from 'moment';
 import Icon from 'react-native-vector-icons/Octicons';
+import RouteMaster from '../routes/RouteMaster';
 
 const {
   View,
@@ -73,7 +74,11 @@ export default class ProjectItem extends React.Component {
   }
 
   _viewBuildDetails() {
-
+    const destination = RouteMaster.get('PROJECT_DETAILS');
+    destination.props = {
+      project: this.props.project
+    };
+    this.props.nav.push(destination);
   }
 
   _displayMoreInfo(mostRecentBuild) {

app/components/projects/ProjectList.js

@@ -41,7 +41,7 @@ export default class ProjectList extends React.Component {
   }
 
   renderRow(project) {
-    return <ProjectItem project={project} userDetails={this.props.userDetails} />;
+    return <ProjectItem project={project} userDetails={this.props.userDetails} nav={this.props.nav} />;
   }
 
   render() {

app/components/routes/RouteMaster.js

@@ -3,6 +3,7 @@ import { Map } from 'immutable';
 import Login from './login';
 import Info from './info';
 import Home from './home';
+import ProjectDetails from './project-details';
 
 export default Map({
   'LOGIN': {
@@ -16,5 +17,9 @@ export default Map({
   'HOME': {
     id: 'home',
     component: Home
+  },
+  'PROJECT_DETAILS': {
+    id: 'project_details',
+    component: ProjectDetails
   }
 });

app/components/routes/home.js

@@ -26,6 +26,7 @@ export default class Home extends React.Component {
       projects: '',
       userDetails: ''
     };
+    this.didReset = false;
   }
 
   componentWillUnmount() {
@@ -39,7 +40,10 @@ export default class Home extends React.Component {
 
   componentDidMount() {
     this.props.nav.navigationContext.addListener('didfocus', function () {
-      this.props.nav.immediatelyResetRouteStack([this.props.currentRoute]);
+      if (!this.didReset) {
+        this.props.nav.immediatelyResetRouteStack([this.props.currentRoute]);
+        this.didReset = true;
+      }
     }.bind(this));
 
     getProjects().then(function (data) {
@@ -57,7 +61,7 @@ export default class Home extends React.Component {
     let list;
     if (this.state.projects) {
       list = (
-        <ProjectList data={this.state.projects} userDetails={this.state.userDetails} />
+        <ProjectList data={this.state.projects} userDetails={this.state.userDetails} nav={this.props.nav} />
       );
       loaderHandler.hideLoader();
     } else {

app/components/routes/project-details.js

@@ -0,0 +1,45 @@
+import React from 'react-native';
+import { getProjectRecentBuilds } from '../../api/CircleCI';
+import loaderHandler from 'react-native-busy-indicator/LoaderHandler';
+// import BuildList from '../builds/BuildList';
+import GlobalStyles from '../../settings/styles';
+
+
+const {
+  StyleSheet,
+  View,
+  BackAndroid,
+  Text
+} = React;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: GlobalStyles.get('CIRCLE_BG')
+  },
+  title: {
+    fontSize: GlobalStyles.get('TITLE_FONT_SIZE'),
+    textAlign: 'center'
+  },
+  statusHeading: {
+    fontSize: 18,
+    textAlign: 'center'
+  }
+});
+
+export default class ProjectDetails extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      project: props.currentRoute.props.project
+    };
+  }
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>{this.state.project.reponame}</Text>
+        <Text style={styles.statusHeading}>Status: </Text>
+      </View>
+    );
+  }
+};

app/settings/styles.js

@@ -9,5 +9,7 @@ export default Map({
   CIRCLE_ITEM_BG: '#fff',
   CIRCLE_ITEM_BORDER: '#E5E5E5',
   CIRCLE_TEST_FAIL: '#ED5C5C',
-  CIRCLE_TEST_PASS: '#42C88A'
+  CIRCLE_TEST_PASS: '#42C88A',
+
+  TITLE_FONT_SIZE: 24
 });