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)