Create basic project details screen

This commit is contained in:
Jake Howard 2016-03-11 11:53:55 +00:00
parent 8528f19beb
commit 97157017ed
8 changed files with 134 additions and 5 deletions

View file

@ -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;
}
};

View file

@ -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>
);
}
};

View file

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

View file

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

View file

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

View file

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

View file

@ -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>
);
}
};

View file

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