initial app router and some views

Gruntfile.js

@@ -114,7 +114,8 @@ module.exports = function(grunt) {
       ],
       options: {
         ignores: [
-          'src/js/**/*.ios.js'
+          'src/js/**/*.ios.js',
+          'src/js/native_react_views/*.js'
         ],
         curly: true,
         // sometimes triple equality is just redundant and unnecessary
@@ -217,6 +218,7 @@ module.exports = function(grunt) {
           'src/__tests__/casperjs/*.js',
           'src/js/__tests__/create.js',
           'src/js/__tests__/*.js',
+          'src/js/native_react_views/*.js',
           'src/js/**/*.ios.js'
         ]
       },

src/js/constants/Routes.js

@@ -0,0 +1,19 @@
+var assign = require('object-assign');
+var keyMirror = require('../util/keyMirror');
+
+module.exports = keyMirror({
+  NUX: null,
+  LOADING: null,
+  SEQUENCE_SELECT: null,
+  LEVEL_SELECT: null,
+});
+
+module.exports.getRouteWithParams = function(id, params) {
+  return assign({id: id}, params);
+};
+
+module.exports.getRouteForID = function(id) {
+  return {
+    id: id,
+  };
+};

src/js/native/index.ios.js

@@ -4,98 +4,49 @@
  */
 'use strict';
 
-var levels = require('../../levels/index.js');
-var LevelStore = require('../stores/LevelStore.js');
-var levelSequences = require('../../levels').levelSequences;
-
 var React = require('react-native');
 var {
   AppRegistry,
-  StyleSheet,
   Image,
+  Navigator,
   ScrollView,
+  StyleSheet,
   Text,
   TouchableHighlight,
   View,
 } = React;
 
+var Routes = require('../constants/Routes');
+var SequenceSelectView = require('../native_react_views/SequenceSelectView');
+var LevelSelectView = require('../native_react_views/LevelSelectView');
+
 var LearnGitBranching = React.createClass({
+
+  _renderScene: function(route, navigator) {
+    switch (route.id) {
+      case Routes.SEQUENCE_SELECT:
+        return <SequenceSelectView navigator={navigator} />;
+      case Routes.LEVEL_SELECT:
+        return <LevelSelectView navigator={navigator} />;
+    }
+    throw new Exception('No route found for ' + route.id);
+  },
+
   render: function() {
     return (
-      <ScrollView>
+      <Navigator
-        <View style={styles.headerSpacer} />
+        initialRoute={Routes.getRouteForID(Routes.SEQUENCE_SELECT)}
-        <View style={styles.container}>
+        renderScene={this._renderScene}
-          <Text style={styles.welcome}>
+      />
-            Yo Whatup Peter
-          </Text>
-          {Object.keys(levelSequences).map(function(sequence) {
-            return (
-              <View style={styles.cardContainer}>
-                <TouchableHighlight>
-                  <Image
-                    key={sequence}
-                    source={require('image!test')}
-                    style={styles.logo}>
-                    <View style={styles.levelLabel}>
-                      <Text style={styles.sequenceName}>
-                        {sequence}
-                      </Text>
-                    </View>
-                  </Image>
-                </TouchableHighlight>
-              </View>
     );
-          })}
+  },
-        </View>
+
-      </ScrollView>
-    );
-  }
 });
 
 var styles = StyleSheet.create({
   headerSpacer: {
     height: 40
   },
-  logo: {
-    width: 300,
-    borderRadius: 2,
-    justifyContent: 'center',
-    flexDirection: 'column',
-    alignItems: 'center',
-    height: 100
-  },
-  cardContainer: {
-    shadowColor: '#666',
-    shadowOpacity: 0.7,
-    marginBottom: 16,
-    shadowOffset: {
-      x: 100,
-      y: 100
-    },
-  },
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#FFF',
-  },
-  levelLabel: {
-    flexDirection: 'column',
-    backgroundColor: 'rgba(0, 0, 0, 0)',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 10
-  },
-  sequenceName: {
-    color: '#FFF',
-    fontWeight: 'bold',
-    fontSize: 20,
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
 });
 
 AppRegistry.registerComponent('LearnGitBranching', () => LearnGitBranching);

src/js/native_react_views/LevelSelectView.js

@@ -0,0 +1,42 @@
+var NavButton = require('../native_react_views/NavButton');
+var React = require('react-native');
+var Routes = require('../constants/Routes');
+
+var {
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+var LevelSelectView = React.createClass({
+
+  propTypes: {
+    navigator: React.PropTypes.object.isRequired,
+  },
+
+  render: function() {
+    return (
+      <ScrollView>
+        <View style={styles.headerSpacer} />
+        <View>
+          <NavButton
+            text="Go to top"
+            onPress={() => {
+              this.props.navigator.popToTop();
+            }}
+          />
+        </View>
+      </ScrollView>
+    );
+  }
+
+});
+
+var styles = StyleSheet.create({
+  headerSpacer: {
+    height: 40
+  },
+});
+
+module.exports = LevelSelectView;

src/js/native_react_views/NavButton.js

@@ -0,0 +1,32 @@
+var React = require('react-native');
+var {
+  PixelRatio,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} = React;
+
+class NavButton extends React.Component {
+  render() {
+    return (
+      <TouchableHighlight
+        style={styles.button}
+        underlayColor="#B5B5B5"
+        onPress={this.props.onPress}>
+        <Text style={styles.buttonText}>{this.props.text}</Text>
+      </TouchableHighlight>
+    );
+  }
+}
+
+var styles = StyleSheet.create({
+  button: {
+    backgroundColor: 'white',
+    padding: 15,
+    borderBottomWidth: 1 / PixelRatio.get(),
+    borderBottomColor: '#CDCDCD',
+  },
+});
+
+module.exports = NavButton;

src/js/native_react_views/SequenceSelectView.js

@@ -0,0 +1,44 @@
+var NavButton = require('../native_react_views/NavButton');
+var React = require('react-native');
+var Routes = require('../constants/Routes');
+var {
+  PixelRatio,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+var SequenceSelectView = React.createClass({
+
+  propTypes: {
+    navigator: React.PropTypes.object.isRequired,
+  },
+
+  render: function() {
+    return (
+      <ScrollView>
+        <View style={styles.headerSpacer} />
+        <View>
+          <NavButton
+            text="Level 1"
+            onPress={() => {
+              this.props.navigator.push(
+                Routes.getRouteForID(Routes.LEVEL_SELECT)
+              );
+            }}
+          />
+        </View>
+      </ScrollView>
+    );
+  }
+
+});
+
+var styles = StyleSheet.create({
+  headerSpacer: {
+    height: 40
+  },
+});
+
+module.exports = SequenceSelectView;