Updated presence demo with redux-persist for quicker navigation

Author: auser

app/components/Navigation/Navigator.js

@@ -98,7 +98,7 @@ export class FirestackNavigator extends React.Component {
         route = Object.assign({}, routes.default, {title, actions});
       }
 
-      route.actions = actions
+      // route.actions = actions
       const {headerStyle} = route;
       let headerProps = Object.assign({}, sceneProps, {
         route,

app/redux/configureStore.js

@@ -1,43 +1,66 @@
 import { applyMiddleware, combineReducers, createStore } from 'redux'
-import { bindActionCreators } from 'redux'
-import thunk from 'redux-thunk'
+import { bindActionCreatorsToStore } from 'redux-module-builder';
+import { bindActionCreators, compose } from 'redux'
+import thunkMiddleware from 'redux-thunk'
+import {persistStore, autoRehydrate} from 'redux-persist'
+import {AsyncStorage} from 'react-native'
 
 import Firestack from 'react-native-firestack'
 import env from '../../config/environment'
 
-import * as currentUser from './modules/currentUser'
-import * as navigation from './modules/navigation'
+import { rootReducer, actions, initialState } from './rootReducer';
 
 export const configureStore = (userInitialState = {}) => {
-  const middleware = applyMiddleware(thunk);
+  let middleware = [
+    thunkMiddleware,
+  ]
+
+  let tools = [];
+  if (process.env.NODE_ENV === 'development') {
+    // const devTools = require('remote-redux-devtools');
+    // tools.push(devTools());
+  }
+
+  tools.push(autoRehydrate())
 
   const firestack = new Firestack(env.firestack)
 
-  const rootReducer = combineReducers({
-    user: currentUser.reducer,
-    navigation: navigation.reducer,
-    firestack: (state) => firestack
-  });
+  let finalCreateStore;
+  finalCreateStore = compose(
+    applyMiddleware(...middleware),
+    ...tools
+  )(createStore);
 
-  let initialState = 
-    Object.assign({}, {
-      navigation: navigation.initialState
-    })
+  const finalInitialState = Object.assign({},
+    initialState,
+    userInitialState,
+    {firestack}
+  );
 
-  const store = createStore(
+  const store = finalCreateStore(
     rootReducer,
-    initialState,
-    middleware);
+    finalInitialState
+  );
+  
+  const persistor = persistStore(store, {
+    storage: AsyncStorage, 
+    blacklist: ['firestack']
+  });
 
   firestack.setStore(store);
 
-  const dispatch = store.dispatch;
-  const actions = {
-    currentUser: bindActionCreators(currentUser.actions, dispatch),
-    navigation: bindActionCreators(navigation.actions, dispatch),
+  if (module.hot) {
+    module.hot.accept('./rootReducer', () => {
+      const {rootReducer} = require('./rootReducer').default;
+      store.replaceReducer(rootReducer);
+    });
   }
 
-  return {store,actions}
+  const boundActions = bindActionCreatorsToStore(actions, store);
+  return {
+    store,
+    actions: boundActions
+  }
 }
 
 export default configureStore

app/redux/modules/navigation.js

@@ -1,4 +1,5 @@
 import {createConstants, createReducer} from 'redux-module-builder'
+import {REHYDRATE} from 'redux-persist/constants'
 import * as NavUtils from 'NavigationStateUtils'
 
 import routes from '../../routes'
@@ -16,7 +17,7 @@ export const types = createConstants('navigation')(
 export const actions = {
   // init: firstRoute => dispatch => dispatch({type: types.INIT, payload: firstRoute}),
   push: (routeKey, routeProps={}) => {
-    const route = Object.assign({}, {routeProps, key: routeKey}, routes[routeKey])
+    const route = Object.assign({}, {key: routeKey}, routes[routeKey])
     return {
       type: types.PUSH,
       route
@@ -31,7 +32,7 @@ export const actions = {
 
 const getRoutesForKeys = (keys) => keys.map(key => Object.assign({}, routes[key], {key}))
 
-const initialRoutes = ['home']
+const initialRoutes = [routes['home']]
 const reset = (state, payload = {}) => {
   const {nextRoutes, index} = payload;
   let newIndex = index || 0;
@@ -42,6 +43,17 @@ const reset = (state, payload = {}) => {
 }
 
 export const reducer = createReducer({
+  [REHYDRATE]: (state, {payload}) => {
+console.log('REHYDRATE called for navigation', payload);
+    const {navigation} = payload;
+    const index = navigation ? navigation.index : 0;
+    // return NavUtils.reset(state, [routes['welcome']]);
+    const navRoutes = navigation ? navigation.routes : initialRoutes;
+    const newRoutes = navRoutes
+      .map(route => Object.assign({}, routes[route.key], route));
+
+    return NavUtils.reset(state, newRoutes, index);
+  },
   [types.INIT]: (state, {payload}) => ({
     ...state,
     ready: true,
@@ -71,7 +83,7 @@ export const reducer = createReducer({
 
 export const initialState = {
   index: 0,
-  routes: getRoutesForKeys(initialRoutes),
+  routes: initialRoutes,
   showMenu: false
   // routes: [routes['signup']]
 }

app/redux/rootReducer.js

@@ -0,0 +1,26 @@
+import { combineReducers } from 'redux';
+
+const modules = {
+  currentUser: require('./modules/currentUser'),
+  navigation: require('./modules/navigation'),
+}
+
+// const currentUser = require('./reducers/currentUser')
+// const navigation = require('./reducers/navigation')
+// const feed = require('./reducers/feed')
+
+export let actions = {}
+
+export let reducers = {
+  'firestack': state => state || null // filled in later
+}
+export let initialState = {};
+
+Object.keys(modules).forEach(key => {
+  const container = modules[key];
+  initialState[key] = container.initialState || {};
+  actions[key] = container.actions;
+  reducers[key] = container.reducer;
+});
+
+export const rootReducer = combineReducers(reducers);

app/routes.js

@@ -10,6 +10,7 @@ import Home from './views/Home';
 import Database from './views/Database';
 import Authentication from './views/Authentication';
 import Messaging, { Routes as MessagingRoutes } from './views/Messaging';
+import Presence, { Routes as PresenceRoutes } from './views/Presence'
 
 export type Route = {
   key: String,
@@ -30,6 +31,13 @@ export const exampleRoutes = {
       Component: Authentication
     }
   },
+  'presence': {
+    route: {
+      title: 'Presence',
+      Component: Presence
+    },
+    children: PresenceRoutes
+  },
   'messaging': {
     route: {
       title: 'Messaging',
@@ -51,5 +59,4 @@ export const routes = toList({
   },
 });
 
-console.log('routes ->', routes);
 export default routes;

app/views/Presence/Demos/Online.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import {
+  View,
+  Text,
+} from 'react-native'
+
+import appStyles from '../../../styles/app';
+
+export class Online extends React.Component {
+
+  componentWillMount() {
+    const {firestack} = this.props;
+  }
+
+  _sendHi() {
+    const {firestack} = this.props;
+  }
+
+  render() {
+    return (
+      <View>
+        <View style={appStyles.row}>
+          <Text>
+            This is a test for dealing with Presence. 
+          </Text>
+        </View>
+      </View>
+    )
+  }
+
+}
+
+export default Online

app/views/Presence/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 Online from './Demos/Online';
+
+export const Routes = {
+  'online': {
+    route: {
+      title: 'Online',
+      Component: Online
+    }
+  }
+}
+
+export class Presence extends React.Component {
+  render() {
+    const initialRows = [
+      { title: 'Online', key: 'presence.online' }
+    ];
+    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)(Presence)

package.json

@@ -17,6 +17,7 @@
     "react-redux": "^4.4.5",
     "redux": "^3.6.0",
     "redux-module-builder": "^0.3.2",
+    "redux-persist": "^3.5.0",
     "redux-thunk": "^2.1.0"
   },
   "devDependencies": {

scripts/adb-logcat.sh

@@ -1,3 +1,3 @@
-#!/usr/local/env bash
+#!/usr/bin/env bash
 
-adb logcat | grep $(adb shell ps | grep -i com.firestackapp | cut -c10-15) 
+adb logcat | grep $(adb shell ps | grep -i com.firestackapp | cut -c10-15)