Check-in with routing structure for demos

Author: auser

app/components/List/List.js

@@ -0,0 +1,130 @@
+import React, { PropTypes as T } from 'react'
+
+import {
+ View,
+ Text,
+ StyleSheet,
+ TouchableHighlight,
+ ListView
+} from 'react-native'
+
+import colors from '../../styles/colors'
+import appStyles from '../../styles/app';
+
+export class List extends React.Component {
+ static propTypes = {
+ initialRows: T.array,
+ onRowPress: T.func
+ }
+
+ static defaultProps = {
+ initialRows: []
+ }
+
+ constructor(props, context) {
+ super(props, context);
+
+ const dataSource = new ListView.DataSource({
+ sectionHeaderHasChanged: this._sectionHeaderHasChanged.bind(this),
+ rowHasChanged: this._rowHasChanged.bind(this)
+ });
+
+ const {initialRows} = this.props;
+
+ this.state = {
+ dataSource: dataSource.cloneWithRows(initialRows)
+ }
+ }
+
+ _sectionHeaderHasChanged(oldSection, newSection) {
+ return oldSection !== newSection;
+ }
+
+ _rowHasChanged(oldRow, newRow) {
+ return oldRow !== newRow;
+ }
+
+ render() {
+ const {style} = this.props;
+ const headerStyle = [styles.header, style];
+
+ return (
+ <ListView
+ ref="listView"
+ scrollRenderAheadDistance={0}
+ automaticallyAdjustContentInsets={true}
+ dataSource={this.state.dataSource}
+ renderSectionHeader={this._renderSectionHeader.bind(this)}
+ renderRow={this._renderRow.bind(this)}
+ renderFooter={this._renderFooter.bind(this)}
+ renderSeparator={this._renderSeparator.bind(this)}
+ />
+ )
+ }
+
+ _renderSectionHeader(data, sectionId) {
+ return <View></View>; // empty, for now
+ return (
+ <View style={styles.sectionHeader}>
+ <Text style={styles.sectionHeaderText}>{sectionId}</Text>
+ </View>
+ )
+ }
+
+ _renderSeparator(sectionID: number, rowID: number, adjacentRowHighlighted: bool) {
+ return (
+ <View
+ key={`${sectionID}-${rowID}`}
+ style={{
+ height: adjacentRowHighlighted ? 4 : 1,
+ backgroundColor: adjacentRowHighlighted ? '#3B5998' : '#CCCCCC',
+ }}
+ />
+ );
+ }
+
+ _defaultRenderRow(rowData, sectionID, rowID, highlightRow) {
+ return (
+ <View style={appStyles.row}>
+ <Text>{rowData.title}</Text>
+ </View>
+ )
+ }
+
+ _renderRow(rowData, sectionID, rowID, highlightRow) {
+ const {renderRow} = this.props;
+
+ return (
+ <TouchableHighlight onPress={() => {
+ this._pressRow(rowData, sectionID, rowID, highlightRow);
+ }}>
+ {renderRow ? 
+ renderRow(rowData, sectionID, rowID, highlightRow) :
+ this._defaultRenderRow(rowData, sectionID, rowID, highlightRow)}
+ </TouchableHighlight>
+ )
+ }
+
+ _pressRow(...args) {
+ const {onRowPress} = this.props;
+ if (onRowPress && typeof onRowPress === 'function') {
+ onRowPress(...args);
+ }
+ }
+
+ _renderFooter() {
+ return (
+ <View style={[appStyles.container, styles.scrollSpinner]}>
+ <Text></Text>
+ </View>
+ )
+ }
+
+}
+
+const styles = StyleSheet.create({
+ header: {
+ }
+})
+
+export default List;

app/components/Navigation/Navigator.js

@@ -59,6 +59,7 @@ export class FirestackNavigator extends React.Component {
  <Scene
  {...componentProps}
  key={scene.key}
+ firestack={this.props.firestack}
  navigate={this._navigate.bind(this)}>
  <Component />
  </Scene>

app/components/Navigation/Scene.js

@@ -33,12 +33,13 @@ class Scene extends Component {
  };
 
  render(): ReactElement<any> {
- const {scene, navigate, children} = this.props;
+ const {scene, navigate, children, firestack} = this.props;
+ const childProps = Object.assign({}, this.props, {firestack})
  return (
  <Animated.View
  style={[styles.scene, this._getAnimatedStyle()]}>
  {Children.map(children, 
- c => React.cloneElement(c, this.props))}
+ c => React.cloneElement(c, childProps))}
  </Animated.View>
  );
  }

app/containers/App.js

@@ -17,11 +17,12 @@ export class App extends React.Component {
  }
 
  render() {
- const {navigationState} = this.props;
+ const {firestack, navigationState} = this.props;
  return (
  <View style={styles.container}>
  <FirestackNavigator
  {...this.props}
+ firestack={firestack}
  navigationState={navigationState}
  navigate={this._navigate.bind(this)} />
  </View>
@@ -37,6 +38,7 @@ const styles = StyleSheet.create({
 
 export default connect(state => {
  return {
- navigationState: state.navigation
+ navigationState: state.navigation,
+ firestack: state.firestack
  }
 })(App);

app/routes.js

@@ -9,6 +9,7 @@ import appStyles from './styles/app';
 import Home from './views/Home';
 import Database from './views/Database';
 import Authentication from './views/Authentication';
+import Messaging, { Routes as MessagingRoutes } from './views/Messaging';
 
 export type Route = {
  key: String,
@@ -28,6 +29,13 @@ export const exampleRoutes = {
  title: 'Authentication',
  Component: Authentication
  }
+ },
+ 'messaging': {
+ route: {
+ title: 'Messaging',
+ Component: Messaging
+ },
+ children: MessagingRoutes
  }
 }
 
@@ -43,4 +51,5 @@ export const routes = toList({
  },
 });
 
+console.log('routes ->', routes);
 export default routes;

app/views/Database/index.js

@@ -19,7 +19,9 @@ export class Database extends React.Component {
  }
 
  componentDidMount() {
- const ref = this.db.ref('chat-messages').child('roomId');
+ const roomId = 'roomId';
+ const ref = this.db.ref('chat-messages').child(roomId);
+ ref.keepSynced(true);
  ref.orderByKey().limitToLast(3).once('value').then(snapshot => {
  console.log('snapshot ->', snapshot);
  });

app/views/Home.js

@@ -105,7 +105,7 @@ export class Home extends React.Component {
  _pressRow(rowKey) {
  const {actions} = this.props;
  const {navigation} = actions;
- navigation.push(rowKey);
+ navigation.push(rowKey, this.props);
  }
 
  _renderFooter() {

app/views/Messaging/Demos/Setup.js

@@ -0,0 +1,49 @@
+import React from 'react'
+
+import {
+ View,
+ Text,
+} from 'react-native'
+
+import appStyles from '../../../styles/app';
+
+export class Setup extends React.Component {
+
+ componentWillMount() {
+ const {firestack} = this.props;
+
+ firestack.cloudMessaging.getToken().then(function (token) {
+ console.log('device token', token);
+ });
+
+ firestack.cloudMessaging.subscribeToTopic("setup_topic").then(function (topic) {
+ console.log('Subscribe:'+topic);
+ }).catch(function(err){
+ console.error(err);
+ });
+
+ firestack.cloudMessaging.listenForReceiveNotification((msg) =>{
+ console.log('Receive Messages:'+msg.data);
+ console.log('Receive Messages:'+msg.notification);
+ });
+ }
+
+ _sendHi() {
+ const {firestack} = this.props;
+ firestack.cloudMessaging.send("hi", "bee", 2, "Alerting")
+ }
+
+ render() {
+ return (
+ <View>
+ <Text>Hi</Text>
+ <View style={appStyles.row}>
+ <Text onPress={this._sendHi.bind(this)}>Hi</Text>
+ </View>
+ </View>
+ )
+ }
+
+}
+
+export default Setup;

app/views/Messaging/index.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import {connect} from 'react-redux'
+import {
+ View,
+ Text
+} from 'react-native'
+
+import appStyles from '../../styles/app';
+
+import List from '../../components/List/List'
+
+// Demos
+import Setup from './Demos/Setup';
+
+export const Routes = {
+ 'setup': {
+ route: {
+ title: 'Setup',
+ Component: Setup
+ }
+ }
+}
+
+export class Messaging extends React.Component {
+ render() {
+ const initialRows = [
+ { title: 'Setup example', key: 'messaging.setup' }
+ ];
+ return (
+ <View style={appStyles.container}>
+ <List 
+ initialRows={initialRows}
+ renderRow={this._renderRow.bind(this)}
+ onRowPress={this._onRowPress.bind(this)}
+ />
+ </View>
+ )
+ }
+
+ _renderRow(rowData, sectionID, rowID, highlightRow) {
+ console.log(rowData)
+ return (
+ <View style={[appStyles.row]}>
+ <Text>{rowData.title}</Text>
+ </View>
+ )
+ }
+
+ _onRowPress(rowData) {
+ const rowKey = rowData.key;
+ const {actions} = this.props;
+ const {navigation} = actions;
+ navigation.push(rowKey, this.props);
+ }
+}
+
+const mapStateToProps = (state) => ({
+ firestack: state.firestack
+})
+export default connect(mapStateToProps)(Messaging)