From 97157017ed79b46f43ff72ed22d643682c71b388 Mon Sep 17 00:00:00 2001 From: RealOrangeOne Date: Fri, 11 Mar 2016 11:53:55 +0000 Subject: [PATCH] Create basic project details screen --- app/components/builds/BuildItem.js | 28 +++++++++++++++ app/components/builds/BuildList.js | 40 +++++++++++++++++++++ app/components/projects/ProjectItem.js | 7 +++- app/components/projects/ProjectList.js | 2 +- app/components/routes/RouteMaster.js | 5 +++ app/components/routes/home.js | 8 +++-- app/components/routes/project-details.js | 45 ++++++++++++++++++++++++ app/settings/styles.js | 4 ++- 8 files changed, 134 insertions(+), 5 deletions(-) create mode 100644 app/components/builds/BuildItem.js create mode 100644 app/components/builds/BuildList.js create mode 100644 app/components/routes/project-details.js diff --git a/app/components/builds/BuildItem.js b/app/components/builds/BuildItem.js new file mode 100644 index 0000000..b1ecdce --- /dev/null +++ b/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; + } +}; diff --git a/app/components/builds/BuildList.js b/app/components/builds/BuildList.js new file mode 100644 index 0000000..48d1f61 --- /dev/null +++ b/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 ; + } + + render() { + return ( + + + + ); + } +}; diff --git a/app/components/projects/ProjectItem.js b/app/components/projects/ProjectItem.js index 96be259..1d31bbd 100644 --- a/app/components/projects/ProjectItem.js +++ b/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) { diff --git a/app/components/projects/ProjectList.js b/app/components/projects/ProjectList.js index a42c6e4..bb93624 100644 --- a/app/components/projects/ProjectList.js +++ b/app/components/projects/ProjectList.js @@ -41,7 +41,7 @@ export default class ProjectList extends React.Component { } renderRow(project) { - return ; + return ; } render() { diff --git a/app/components/routes/RouteMaster.js b/app/components/routes/RouteMaster.js index 95fbcb3..cf5ef17 100644 --- a/app/components/routes/RouteMaster.js +++ b/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 } }); diff --git a/app/components/routes/home.js b/app/components/routes/home.js index 9f19bcc..4d06169 100644 --- a/app/components/routes/home.js +++ b/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 = ( - + ); loaderHandler.hideLoader(); } else { diff --git a/app/components/routes/project-details.js b/app/components/routes/project-details.js new file mode 100644 index 0000000..c08135c --- /dev/null +++ b/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 ( + + {this.state.project.reponame} + Status: + + ); + } +}; diff --git a/app/settings/styles.js b/app/settings/styles.js index d0f67e6..edbf776 100644 --- a/app/settings/styles.js +++ b/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 });