Skip to content

Instantly share code, notes, and snippets.

@JRGould JRGould/index.ios.js
Last active Aug 31, 2015

Embed
What would you like to do?
Deep Thoughts React Native App v 0.3
/**
* DeepThoughts App v 0.3
*/
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
} = React;
// The URL for the `posts` endpoint provided by WP JSON API
var REQUEST_URL_BASE = 'http://deep-thoughts.dev/wp-json/';
var POSTS_URL_PATH = 'wp/v2/posts/';
var GET_POST_IDS_PATH = 'deep-thoughts/v1/get-all-post-ids';
var DeepThoughts = React.createClass( {
getInitialState: function() {
return {
//thought is initially set to null so that the loading message shows
thought: null,
thoughtIDs: null,
currentID: null
};
},
// Automatically called by react when this component has finished mounting.
componentDidMount: function() {
this.getAllIDs();
},
getAllIDs: function(){
fetch(REQUEST_URL_BASE + GET_POST_IDS_PATH)
.then((response) => response.json())
.then((responseData) => {
// this.setState() will cause the new data to be applied to the UI that is created by the `render` function below
this.setState({
thoughtIDs: responseData
});
})
.then(this.fetchData)
.done();
},
getRandID: function() {
var currentID = this.state.thoughtIDs[Math.floor(Math.random()*this.state.thoughtIDs.length)];
// Don't show the same "thought" twice - recursively call this function again if old and new IDs are the same
if ( this.state.currentID === currentID ) {
currentID = this.getRandID();
} else {
this.setState( {
currentID: currentID
} );
}
return currentID;
},
// This is where the magic happens! Fetches the data from our API and updates the application state.
fetchData: function() {
var currentID = this.getRandID();
this.setState( {
// we'll also set thought to null when loading new thoughts so that the loading message shows
thought: null
} );
fetch(REQUEST_URL_BASE + POSTS_URL_PATH + currentID)
.then( (response) => response.json() )
.then( (responseData) => {
// this.setState() will cause the new data to be applied to the UI that is created by the `render` function below
this.setState( {
thought: { title: responseData.title.rendered, content: responseData.plaintext }
} );
} )
.done();
},
// instead of immediately rendering the template, we now check if there is data in the 'thought' variable
// and render a loading view if it's empty, or the 'thought' template if there is data
render: function() {
if ( !this.state.thought ) {
return this.renderLoadingView();
}
return this.renderThought();
},
// the loading view template just shows the message "Thinking thoughts..."
renderLoadingView: function() {
return (
<View style={styles.container}>
<Text>
Thinking thoughts...
</Text>
</View>
);
},
// this is the original render function, now renamed to renderThought, which will render our main template
renderThought: function() {
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<Text style={styles.title}>
{this.state.thought.title}
</Text>
<Text style={styles.text}>
{this.state.thought.content}
</Text>
</View>
<View style={styles.buttonContainer}>
<TouchableHighlight
style={styles.button}
underlayColor='#ccc'
onPress={this.fetchData}
>
<Text style={styles.buttonText}>Hmmmmm...</Text>
</TouchableHighlight>
</View>
</View>
);
}
} );
var Dimensions = require( 'Dimensions' );
var windowSize = Dimensions.get( 'window' );
var styles = StyleSheet.create( {
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
textContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
title: {
fontSize: 30,
textAlign: 'center',
margin: 10,
},
text: {
fontSize: 18,
paddingLeft: 20,
paddingRight: 20,
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
buttonContainer: {
bottom: 0,
flex: .1,
width: windowSize.width,
backgroundColor: '#eee',
},
button: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
buttonText: {
fontSize: 30,
color: '#666666',
},
} );
AppRegistry.registerComponent( 'DeepThoughts', () => DeepThoughts );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.