Merge pull request #50 from ecohealthalliance/bug-fixes-and-performance

Fixes bugs with authentication, header, and performance.

js/api/Account.js

@@ -75,8 +75,9 @@ export function isAuthenticated(done) {
   currentUser(function(err, user) {
     if (err) {
       done(false);
+    } else {
+      done(true);
     }
-    done(true);
   });
 };
 
@@ -91,9 +92,9 @@ export function currentUser(done) {
     function(user) {
       if (user && typeof user.getSessionToken() !== 'undefined') {
         done(null, user);
-        return;
+      } else {
+        done('Invalid User');
       }
-      done('Invalid User');
     },
     function(err) {
       done('Invalid User');
@@ -305,3 +306,18 @@ export function updateProfile(name, phone, done) {
     );
   });
 };
+
+/**
+ * Checks for the current logged in user, navigates back to the login page if verification fails.
+ */
+export function validateUser() {
+  isAuthenticated((isValidUser) => {
+    if (!isValidUser) {
+      console.log('User validation failed, returning to login screen.')
+      logout()
+      Store.navigator.resetTo({path: 'login', title: ''})
+    }
+  })
+}
+
+

js/components/Header.js

@@ -14,9 +14,11 @@ const Header = React.createClass ({
   },
 
   getInitialState() {
+    let routeStack = this.props.navState.routeStack
+    let title = routeStack[routeStack.length-1].title
     return {
       index: 0,
-      title: '',
+      title: title,
       path: 'none'
     }
   },

js/data/Store.js

@@ -1,3 +1,4 @@
+// Used for global variables that do not fit in a Realm database
 const Store = {
   platform: null,
   server: 'local',
@@ -10,6 +11,8 @@ const Store = {
     long: 0,
   },
 
+  navigator: false,
+
   user: {
     objectId: 'SoMeH4sH',
     name: 'John Doe',

js/router/SharedNavigator.js

@@ -67,15 +67,17 @@ const SharedNavigator = React.createClass ({
       title: '',
       isLoading: true,
       isAuthenticated: false,
-      drawerOpen: false,
     }
   },
   componentWillMount() {
     connectToParseServer(Settings.parse.serverUrl, Settings.parse.appId);
   },
   componentDidMount() {
+    let self = this
     isAuthenticated((authenticated) => {
-      this.setState({
+      console.log('authenticated')
+      console.log(authenticated)
+      self.setState({
         isAuthenticated: authenticated,
         isLoading: false,
       });
@@ -100,13 +102,21 @@ const SharedNavigator = React.createClass ({
     });
   },
 
+  closeControlPanel() {
+    this._drawer.close()
+  },
+
+  openControlPanel() {
+    this._drawer.open()
+  },
+
   routeMapper(route, nav) {
     const sharedProps = {
       navigator: nav,
       logout: this.logoutHandler,
     };
 
-    if (!this.state.isAuthenticated && !route.unsecured) {
+    if (!this.state.isAuthenticated) {
       route.path = 'login'
       route.title = ''
     }
@@ -136,31 +146,33 @@ const SharedNavigator = React.createClass ({
       return (
         <Drawer
           type="overlay"
+          ref={(ref) => this._drawer = ref}
           content={<ControlPanel
             navigator={navigator}
             logout={this.logoutHandler}
-            closeDrawer={()=>this.setState({drawerOpen: false})} />}
+            closeDrawer={this.closeControlPanel} />}
           tapToClose={true}
           openDrawerOffset={0.2} // 20% gap on the right side of drawer
           panCloseMask={0.2}
           closedDrawerOffset={-3}
           styles={Styles.drawer}
-          open={this.state.drawerOpen}
-          onClose={()=>this.setState({drawerOpen: false})}
           tweenHandler={(ratio) => ({
             main: { opacity:(2-ratio)/2 }
           })}
           >
           <Navigator
-            ref={(nav) => { navigator = nav }}
+            ref={(nav) => { 
+              navigator = nav
+              Store.navigator = nav // Store globally so we can use the navigator outside components
+            }}
             initialRoute={initialRoute}
             renderScene={this.routeMapper}
             configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromRight}
             style={Styles.container.wrapper}
             navigationBar={
               <Header
                 title={this.state.title}
-                openDrawer={()=>this.setState({drawerOpen: true})} />
+                openDrawer={this.openControlPanel} />
             }
           />
         </Drawer>

js/views/ControlPanel.js

@@ -3,13 +3,16 @@ import React, {View, Text, Linking} from 'react-native'
 
 import {logout} from '../api/Account'
 import Styles from '../styles/Styles'
+import Store from '../data/Store'
 import ControlPanelItem from '../components/ControlPanelItem'
 import { version } from '../../package'
 
 export default React.createClass({
   navigateToView(viewPath, title) {
+    console.log(this.props)
     let props = this.props
-    let navigator = props.navigator
+    let navigator = Store.navigator
+    console.log(navigator)
     let routeStack = navigator.getCurrentRoutes()
     let currentRoutePath = routeStack[routeStack.length-1].path
     if (viewPath !== currentRoutePath) {

js/views/FormPage.js

@@ -29,6 +29,7 @@ import Loading from '../components/Loading';
 import Color from '../styles/Color';
 import Swiper from 'react-native-page-swiper'
 import { loadCachedForms } from '../api/Forms'
+import { validateUser } from '../api/Account'
 
 import { loadCachedSubmissions, saveSubmission} from '../api/Submissions'
 import { loadQuestions, loadCachedQuestions } from '../api/Questions'
@@ -82,6 +83,10 @@ const FormPage = React.createClass ({
     this.cancelCallbacks = true
   },
 
+  componentDidMount() {
+    validateUser()
+  },
+
   /* Methods */
 
   submit() {

js/views/SurveyListPage.js

@@ -14,6 +14,7 @@ import Styles from '../styles/Styles'
 import { loadSurveyList, loadCachedSurveyList } from '../api/Surveys'
 import { loadForms } from '../api/Forms'
 import SurveyListItem from '../components/SurveyListItem'
+import Loading from '../components/Loading'
 
 const SurveyListPage = React.createClass ({
   title: 'Surveys',
@@ -29,9 +30,7 @@ const SurveyListPage = React.createClass ({
   },
 
   componentDidMount() {
-    this.setState({
-      dataSource: this.state.dataSource.cloneWithRows(this.state.list),
-    });
+    this.mountTimeStamp = Date.now()
 
     if (this.state.list.length === 0) {
       loadSurveyList({}, this.loadList);
@@ -56,21 +55,31 @@ const SurveyListPage = React.createClass ({
 
   /* Methods */
   loadList(error, response){
+    console.log('loading list...')
     // Prevent this callback from working if the component has unmounted.
     if (this.cancelCallbacks) return
 
     if (error) {
       console.warn(error)
     } else {
+      let self = this
       // Use the Realm cached versions to determine accept/decline status
       let cachedSurveys = loadCachedSurveyList()
-      if (this.isMounted()) {
-        this.setState({
-          isLoading: false,
-          list: cachedSurveys,
-          dataSource: this.state.dataSource.cloneWithRows(cachedSurveys)
-        })
-      }
+
+      let delay = 0
+      if (this.mountTimeStamp + 750 > Date.now()) delay = 750
+
+      setTimeout(() => {
+        console.log('loading timeout')
+        if (!self.cancelCallbacks) {
+          console.log('loading setstate')
+          self.setState({
+            isLoading: false,
+            list: cachedSurveys,
+            dataSource: self.state.dataSource.cloneWithRows(cachedSurveys)
+          })
+        }
+      }, delay)
     }
   },
 
@@ -103,13 +112,17 @@ const SurveyListPage = React.createClass ({
   },
 
   render() {
-    return (
-      <ListView dataSource = { this.state.dataSource }
-        renderRow = { this.renderItem }
-        contentContainerStyle = { [Styles.container.default, Styles.survey.list] }
-        enableEmptySections
-      />
-    )
+    if (this.state.isLoading) {
+      return (<Loading/>)
+    } else {
+      return (
+        <ListView dataSource = { this.state.dataSource }
+          renderRow = { this.renderItem }
+          contentContainerStyle = { [Styles.container.default, Styles.survey.list] }
+          enableEmptySections
+        />
+      )
+    }
   }
 })
 

package.json

@@ -21,7 +21,7 @@
     "react-native-drawer": "^2.2.2",
     "react-native-page-swiper": "https://github.com/dan-nyanko/react-native-page-swiper#master",
     "react-native-vector-icons": "1.3.4",
-    "realm": "^0.12.0"
+    "realm": "^0.13.1"
   },
   "devDependencies": {
     "commander": "^2.9.0"