Commit 9446bbe

mo khan <mo@mokhan.ca>
2016-11-26 05:51:32
extract router.
1 parent c825e76
app/components/application-shell.js
@@ -1,19 +1,20 @@
 import React, { Component } from 'react';
 import { AppRegistry, Text, ListView, View, Image, TextInput, Navigator } from 'react-native';
 import LoginScreen from '../screens/login-screen'
+import Router from '../services/router'
 
 export default class ApplicationShell extends Component {
+  constructor(props) {
+    super(props);
+    this.router = new Router();
+  }
   render() {
     return (
       <Navigator
-        initialRoute={{component: LoginScreen, params: {title: 'Hello'}}}
-        renderScene={this.routeTo}
+        initialRoute={{component: LoginScreen, params: {}}}
+        renderScene={this.router.routeTo}
         configureScene={(route) => Navigator.SceneConfigs.FloatFromRight}
       />
     );
   }
-  routeTo(route, navigator) {
-    let Component = route.component;
-    return (<Component navigator={navigator} {...route.params} />)
-  }
 }
app/domain/application-storage.js
@@ -1,13 +1,17 @@
 import { View, Text, TouchableHighlight, AsyncStorage } from 'react-native';
 
 export default class ApplicationStorage {
-  fetch(key) {
-    const value = AsyncStorage.getItem(key);
+  async fetch(key) {
+    const value = await AsyncStorage.getItem(key);
     console.log(`found ${key} ${value}`);
     return value;
   }
-  save(key, value) {
-    console.log(`storing ${key} ${value}`);
-    AsyncStorage.setItem(key, value);
+  async save(key, value) {
+    try {
+      console.log(`storing ${key} ${value}`);
+      AsyncStorage.setItem(key, value);
+    } catch (error) {
+      console.error(error.message);
+    }
   }
 }
app/screens/dashboard-screen.js
@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+import { View, Text, TouchableHighlight, AsyncStorage } from 'react-native';
+
+export default class DashboardScreen extends Component {
+  render() {
+    console.log("LOADING DASHBOARD");
+    return (
+      <View>
+        <Text>Welcome back !</Text>
+      </View>
+    );
+  }
+}
app/screens/login-screen.js
@@ -4,66 +4,53 @@ import Account from '../domain/account'
 import Api from '../services/api'
 import ApplicationStorage from '../domain/application-storage'
 import Movies from '../components/movies';
+import DashboardScreen from './dashboard-screen'
 
 var t = require('tcomb-form-native');
 var Form = t.form.Form;
 
 export default class LoginScreen extends Component {
-  static get defaultProps() {
-    return { title: 'LoginScreen' };
-  }
   constructor(props) {
     super(props)
     this.storage = new ApplicationStorage();
   }
 
   componentDidMount() {
-    debugger
     let token = this.storage.fetch('authentication_token');
+    let username = this.storage.fetch('username');
+
+    console.log(username);
     if (token) {
-      this.props.navigator.push({component: Movies, params: {}});
+      this.props.navigator.push({
+        component: DashboardScreen, params: { username: username }
+      });
     }
   }
 
   render() {
     return (
       <View>
-        <View>
-          <Text>Login</Text>
-        </View>
         <View>
           <Form ref="form" type={Account} options={{}} />
         </View>
         <TouchableHighlight onPress={this.onLogin.bind(this)}>
           <Text>Login</Text>
         </TouchableHighlight>
-        <Text>Hi! My name is {this.props.title}.</Text>
-        <TouchableHighlight onPress={this.onForward.bind(this)}>
-          <Text>Next</Text>
-        </TouchableHighlight>
-        <TouchableHighlight onPress={this.onBack.bind(this)}>
-          <Text>Back</Text>
-        </TouchableHighlight>
       </View>
     )
   }
 
-  onForward() {
-    this.props.navigator.push({component: Movies, params: {}});
-  }
-
-  onBack() {
-    this.props.navigator.pop();
-  }
-
   onLogin() {
     let value = this.refs.form.getValue();
+    console.log(`attempting to login ${value.username}`);
+
     if (value) {
       body = { username: value.username, password: value.password };
       let that = this;
-      new Api('/api/sessions').post(body, (json) => {
+      new Api('/sessions').post(body, (json) => {
         console.log(json);
         that.storage.save("authentication_token", json.token);
+        that.storage.save("username", value.username);
       });
     }
   }
app/services/api.js
@@ -1,30 +1,32 @@
 import Config from 'react-native-config';
+import ApplicationStorage from '../domain/application-storage';
 
 export default class Api {
   constructor(url) {
     if (url.startsWith('http')) {
       this.url = url;
     } else {
-      this.url = `${Config.API_HOST}${url}`
+      this.url = `${Config.API_HOST}/api${url}`
     }
+    this.token = new ApplicationStorage().fetch('authentication_token');
     console.log(this.url);
   }
 
   get(success) {
-    fetch(this.url)
-      .then((response) => response.json())
-      .then(success)
-      .catch((error) => console.error(error))
-      .done();
+    fetch(this.url, {
+      method: 'GET',
+      headers: this.defaultHeaders(),
+    })
+    .then((response) => response.json())
+    .then(success)
+    .catch((error) => console.error(error))
+    .done();
   }
 
   post(body, success) {
     fetch(this.url, {
       method: "POST",
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
+      headers: this.defaultHeaders(),
       body: JSON.stringify(body)
     })
     .then((response) => response.json())
@@ -32,5 +34,13 @@ export default class Api {
     .catch((error) => console.error(error))
     .done();
   }
+
+  defaultHeaders() {
+    return {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${this.token}`,
+    }
+  }
 }
 
app/services/router.js
@@ -0,0 +1,8 @@
+import React, { Component } from 'react';
+
+export default class Router {
+  routeTo(route, navigator) {
+    let Component = route.component;
+    return (<Component navigator={navigator} {...route.params} />)
+  }
+}