recursive user browsing

Author: bleonard

App/Mixins/ListHelper.js

@@ -14,15 +14,17 @@ var {
   ListView
 } = React;
 
+var CurrentUserStore   = require('../Stores/CurrentUserStore');
 var NavigationListener = require('../Mixins/NavigationListener');
+var NavBarHelper       = require('../Mixins/NavBarHelper');
 
 var Loading          = require('../Screens/Loading');
 var Text             = require('../Components/Text');
 var SegmentedControl = require('../Components/SegmentedControl');
 var SimpleList       = require('../Components/SimpleList');
 
 var ListHelper = {
-  mixins: [NavigationListener],
+  mixins: [NavigationListener, NavBarHelper],
 
   getInitialState: function() {
     return this.getListState();
@@ -56,14 +58,27 @@ var ListHelper = {
     this.props.store.removeChangeListener(this.onListChange);
   },
 
+  getNavBarState: function() {
+    var title = this.props.username ? this.props.username : "Dashboard";
+    return { title: title };
+  },
+
+  getUsername: function() {
+    if (!this.username) {
+      this.username = this.props.username || CurrentUserStore.get().data.username;
+    }
+    return this.username;
+  },
+
   renderItems: function() {
     return (
       <SimpleList
-        {...this.props.listProps}
         style={styles.flex}
+        currentRoute={this.props.currentRoute}
         getItemProps={this.getItemProps}
         items={this.state.items}
         reloadList={this.reloadList}
+        {...this.props.listProps}
       />
     );
   },

App/Mixins/NavBarHelper.js

@@ -0,0 +1,45 @@
+// parent must implement getNavBarState()
+
+var TimerMixin = require('react-timer-mixin');
+
+var Dispatcher   = require('../Dispatcher');
+var AppConstants = require('../Constants/AppConstants');
+
+var NavBarHelper = {
+  mixins: [TimerMixin],
+
+  componentDidMount: function() {
+    this.updateNavTitle();
+  },
+  
+  componentDidUpdate: function() {
+    this.updateNavTitle();
+  },
+
+  updateNavTitle: function() {
+    var updates = this.getNavBarState();
+    if (!updates) return;
+
+    if(typeof updates.title !== "undefined") {
+      this.props.currentRoute.title = updates.title;
+    }
+    if (typeof updates.navRightDisabled !== "undefined") {
+      this.props.currentRoute.navRight.disabled = updates.navRightDisabled;
+    }
+    if (typeof updates.navRightIcon !== "undefined") {
+      this.props.currentRoute.navRight.icon = updates.navRightIcon;
+    }
+    
+    // if called during componentDidLoad, nav bar not loaded yet
+    // requestAnimationFrame to allow it to finish
+    var route = this.props.currentRoute;
+    this.requestAnimationFrame(function() {
+      Dispatcher.dispatch({
+        actionType: AppConstants.NAVBAR_UPDATE,
+        route: route
+      });
+    });
+  },
+};
+
+module.exports = NavBarHelper;

App/Navigation/Router.js

@@ -34,31 +34,69 @@ parseUri.options = {
   }
 };
 
+
+
+var listRoute = function(route, defaultRoute) {
+  var username = route.passProps ? route.passProps.username : null;
+  route.parse = function(path) {
+    switch(path) {
+      case '_post':
+        return Routes.CreatePost();
+      case '_settings':
+        // only on 'Dashboard'
+        if(username) return null;
+        return Routes.Settings();
+      default:
+        if (!defaultRoute) return null;
+        return defaultRoute(path);
+    }
+  }
+
+  if(!route.navRight) {
+    route.navRight = {
+      subPath: '_post',
+      label: '+' // TODO: icon font
+    };
+  }
+
+  if(!route.navLeft && !username) {
+    route.navLeft = {
+      subPath: '_settings',
+      label: 'Me' // TODO: icon font
+    };
+  }
+  return route;
+};
+
+var userRoute = function(username) {
+  var route = {}
+  route._notAddressable = true;
+  route._routerAppend = 'posts';
+
+  route.parse = function(path) {
+    switch(path) {
+      case 'posts':
+        return listRoute(Routes.PostList(username), function(postId) {
+          // TOOD: show post
+          return null;
+        });
+      case 'follows':
+        return listRoute(Routes.FollowList(username), function(follow) {
+          // it's a user
+          return userRoute(follow);
+        });
+      default:
+        return null;
+    };
+  };
+  return route;
+};
+
 var LoggedIn = {
   parse: function(host) {
     switch (host) {
-      case 'dashboard':
-        var dashboard = Routes.Dashboard();
-        dashboard._routerAppend = 'posts';
-        dashboard.parse = function(path) {
-          switch(path) {
-            case 'settings':
-              return Routes.Settings();
-            case 'post':
-              return Routes.CreatePost();
-            case 'posts':
-              var posts = Routes.PostList('bleonard');
-              posts._routerReplace = true;
-              return posts;
-            case 'follows':
-              var follows = Routes.FollowList('bleonard');
-              follows._routerReplace = true;
-              return follows;
-            default:
-              return null;
-          };
-        };
-        return dashboard;
+      case 'dashboard':        
+        return userRoute(null);
       default:
         return null;
     }
@@ -120,7 +158,16 @@ var Router = {
           if (route._routerReplace) {
             stack[stack.length-1] = route;
           }
-          else if (!route._notAddressable) {
+          else if (route._notAddressable) {
+            if (route._routerAppend && i === (pieces.length-1)) {
+              // add soemthing to route on the last one (kind of like a forward)
+              var child = route.parse(route._routerAppend);
+              child.routePath = route.routePath + "/" + route._routerAppend;
+              route = child;
+              stack.push(route);
+            }
+          }
+          else {
             if (route._routerAppend && i === (pieces.length-1)) {
               // add soemthing to route on the last one (kind of like a forward)
               route.routePath = route.routePath + "/" + route._routerAppend;

App/Navigation/Routes.js

@@ -14,29 +14,10 @@ var Routes = {
     };
   },
 
-  Dashboard: function() {
-    return {
-      component: require('../Screens/Dashboard'),
-      title: 'Dashboard',
-      navLeft: {
-        subPath: 'settings',
-        label: 'Me' // TODO: icon font
-      },
-      navRight: {
-        subPath: 'post',
-        label: '+' // TODO: icon font
-      }
-    };
-  },
-
   PostList: function(username) {
     return {
       component: require('../Screens/PostList'),
       title: '', // set to name
-      navRight: {
-        subPath: 'post',
-        label: '+' // TODO: icon font
-      },
       passProps: {
         username: username
       }
@@ -47,10 +28,6 @@ var Routes = {
     return {
       component: require('../Screens/FollowList'),
       title: '', // set to name
-      navRight: {
-        subPath: 'post',
-        label: '+' // TODO: icon font
-      },
       passProps: {
         username: username
       }

App/Screens/Dashboard.js

@@ -12,7 +12,7 @@ var FollowList = React.createClass({
     return {
       store: FollowListStore,
       listProps: {
-        noTap: true
+        nextIcon: true
       },
       segment: {
         items: [
@@ -31,22 +31,24 @@ var FollowList = React.createClass({
   },
 
   getListItems: function() {
-    return FollowListStore.get(this.props.username);
+    return FollowListStore.get(this.getUsername());
   },
 
   isListChange: function(username) {
-    return this.props.username == username;
+    return this.getUsername() == username;
   },
 
   getItemProps: function(follow) {
     return {
-      title: follow.data.username
+      key: follow.data.id,
+      title: follow.data.username,
+      subPath: follow.data.username
     }
   },
 
   reloadList: function() {
-    console.log("reloading follows: " + this.props.username);
-    FollowActions.fetchList(this.props.username, function(error) {
+    console.log("reloading follows: " + this.getUsername());
+    FollowActions.fetchList(this.getUsername(), function(error) {
       // TODO: handle error
       if (error) {
         alert(error.message);

App/Screens/FollowList.js

@@ -31,22 +31,23 @@ var PostList = React.createClass({
   },
 
   getListItems: function() {
-    return PostListStore.get(this.props.username);
+    return PostListStore.get(this.getUsername());
   },
 
   isListChange: function(username) {
-    return this.props.username == username;
+    return this.getUsername() == username;
   },
 
   getItemProps: function(post) {
     return {
+      key: post.data.id,
       title: post.data.content
     }
   },
 
   reloadList: function() {
-    console.log("reloading posts: " + this.props.username);
-    PostActions.fetchList(this.props.username, function(error) {
+    console.log("reloading posts: " + this.getUsername());
+    PostActions.fetchList(this.getUsername(), function(error) {
       // TODO: handle error
       if (error) {
         alert(error.message);

App/Screens/PostList.js

@@ -15,6 +15,7 @@
     "react-native-keyboardevents": "^0.4.5",
     "react-native-keychain": "^0.2.5",
     "react-native-refreshable-listview": "^1.3.0",
+    "react-timer-mixin": "^0.13.3",
     "superagent": "^1.4.0"
   }
 }