SideMenu (Functionality)

App/Actions/index.js

@@ -9,14 +9,6 @@ const getApiUrl = (isPro) => {
 
 // Auth
 
-export const RESTORE_AUTH = 'RESTORE_AUTH';
-export function restoreAuth(state) {
-  return {
-    type: RESTORE_AUTH,
-    state
-  };
-}
-
 export const FETCH_GITHUB_TOKEN_REQUEST = 'FETCH_GITHUB_TOKEN_REQUEST';
 export const FETCH_GITHUB_TOKEN_SUCCESS = 'FETCH_GITHUB_TOKEN_SUCCESS';
 export const FETCH_GITHUB_TOKEN_FAILURE = 'FETCH_GITHUB_TOKEN_FAILURE';

App/AppContainer.js

@@ -19,7 +19,7 @@ const store = configureStore();
 
 var styles = StyleSheet.create({
   navbar: {
-    backgroundColor: Constants.THEME_COLOR,
+    backgroundColor: Constants.THEME_RED,
     flexDirection: 'row',
     justifyContent: 'center',
   }
@@ -41,13 +41,23 @@ export default class Trevor extends Component {
     );
   }
 
+  goToRoute(route) {
+    this.refs.navigator.push(route);
+    this.refs.drawer.close();
+  }
+
   render() {
     const dashboardRoute = Routes.Dashboard();
 
     return (
       <Provider store={store}>
-        <Drawer content={<SideMenu />} openDrawerOffset={120} tapToClose={true}>
+         <Drawer
+          ref="drawer"
+          content={<SideMenu pushRoute={(route) => this.goToRoute(route)}/>}
+          openDrawerOffset={120}
+          tapToClose={true}>
           <Navigator
+            ref="navigator"
             initialRoute={dashboardRoute}
             renderScene={this.renderScene}
             navigationBar={<Navigator.NavigationBar style={styles.navbar} routeMapper={RouteMapper} />} />

App/Components/AccountsList.js

@@ -25,7 +25,7 @@ var styles = StyleSheet.create({
   heading: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    backgroundColor: Constants.THEME_LIGHT_EXTRA_BLUE,
+    backgroundColor: Constants.THEME_LIGHTER_BLUE,
     paddingVertical: 7,
     paddingHorizontal: 10,
     alignItems: 'center'

App/Components/SearchBar.js

@@ -36,7 +36,7 @@ var styles = StyleSheet.create({
     marginLeft: 15,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: Constants.THEME_COLOR,
+    backgroundColor: Constants.THEME_RED,
     borderWidth: 0.5,
     borderRadius: 5,
   },

App/Components/SideMenu/SideMenu.js

@@ -1,7 +1,9 @@
 import React, { Component } from 'react'; // eslint-disable-line no-unused-vars
+import { connect } from 'react-redux';
 
 import Constants from '../../Utils/Constants';
 import Divider from '../../Helpers/Divider';
+import Routes from '../../Navigation/Routes.js';
 import SideMenuButton from './SideMenuButton';
 import SideMenuHeader from './SideMenuHeader';
 import SideMenuFooter from './SideMenuFooter';
@@ -21,26 +23,80 @@ var styles = StyleSheet.create({
   }
 });
 
-export default class SideMenu extends Component {
+class SideMenu extends Component {
+  _getAuthUrl(isPro) {
+    var scopes = Constants.oAuthOptions.scopes;
+    if (isPro) {
+      scopes.push('repo');
+    }
+
+    var authUrl = [
+      'https://github.com/login/oauth/authorize',
+      '?client_id=' + Constants.oAuthOptions.client_id,
+      '&client_secret=' + Constants.oAuthOptions.client_secret,
+      '&scope=' + scopes
+    ].join('');
+
+    return authUrl;
+  }
+
+  _doLogin(isPro) {
+    var authUrl = this._getAuthUrl(isPro);
+    const route = Routes.OAuth({
+      isPro: isPro,
+      authUrl: authUrl
+    });
+
+    this.props.pushRoute(route);
+  }
+
   render() {
+    const isLoggedInOs = this.props.auth.token.os !== null;
+    const isLoggedInPro = this.props.auth.token.pro !== null;
+    const isLoggedInEither = isLoggedInOs || isLoggedInPro;
+
     return (
       <View style={styles.container}>
         <SideMenuHeader />
 
         <View style={styles.main}>
           <Divider theme="red" text="Navigation" />
-          <SideMenuButton icon="heart" text="Favourites" />
-          <SideMenuButton icon="gear" text="Settings" />
+          <SideMenuButton
+            onPress={() => {}}
+            show={isLoggedInEither}
+            icon="heart"
+            text="Favourites" />
+          <SideMenuButton
+            onPress={() => {}}
+            show={isLoggedInEither}
+            icon="gear"
+            text="Settings" />
 
           <Divider theme="red" text="Travis for Open Source" />
-          <SideMenuButton icon="key" text="Authenticate" />
+          <SideMenuButton
+            show={!isLoggedInOs}
+            icon="key"
+            text="Authenticate"
+            onPress={() => this._doLogin(false)} />
 
           <Divider theme="red" text="Travis Pro" />
-          <SideMenuButton icon="key" text="Authenticate" />
+          <SideMenuButton
+            show={!isLoggedInPro}
+            icon="key"
+            text="Authenticate"
+            onPress={() => this._doLogin(true)} />
         </View>
 
         <SideMenuFooter />
       </View>
     );
   }
 };
+
+function mapStateToProps(state) {
+  return {
+    auth: state.auth
+  };
+};
+
+export default connect(mapStateToProps, null)(SideMenu);

App/Components/SideMenu/SideMenuButton.js

@@ -33,15 +33,21 @@ var styles = StyleSheet.create({
 
 export default class SideMenuButton extends Component {
   static propTypes = {
+    onPress: PropTypes.func.isRequired,
     text: PropTypes.string.isRequired,
-    icon: PropTypes.string.isRequired
+    icon: PropTypes.string.isRequired,
+    show: PropTypes.bool.isRequired
   }
 
   render() {
+    if (this.props.show === false) {
+      return null;
+    }
+
     return (
       <TouchableHighlight
         style={styles.container}
-        onPress={() => {}}>
+        onPress={() => this.props.onPress()}>
         <View style={styles.buttonContent}>
           <Icon style={styles.icon} name={this.props.icon} />
           <Text style={styles.text}>{this.props.text}</Text>

App/Components/SideMenu/SideMenuFooter.js

@@ -1,6 +1,9 @@
 import React, { Component, PropTypes } from 'react'; // eslint-disable-line no-unused-vars
 
+import Constants from '../../Utils/Constants.js';
+
 import {
+  Linking,
   StyleSheet,
   Text,
   TouchableHighlight,
@@ -26,12 +29,17 @@ var styles = StyleSheet.create({
 });
 
 export default class SideMenuFooter extends Component {
+  _openGithub() {
+    Linking.openURL(Constants.REPO_URL);
+  }
+
   render() {
     return (
       <View style={styles.container}>
         <TouchableHighlight
-          onPress={() => {}}
-          style={styles.buttonGitHub}>
+          onPress={() => this._openGithub()}
+          style={styles.buttonGitHub}
+          underlayColor={Constants.THEME_DARKER_BLUE}>
           <Text style={styles.buttonGitHubText}>View on GitHub</Text>
         </TouchableHighlight>
       </View>

App/Helpers/CustomRefreshControl.js

@@ -14,7 +14,7 @@ export default class CustomRefreshControl extends Component {
         onRefresh={this.props.onRefresh}
         tintColor={Constants.THEME_DARK_BLUE}
         title="Loading..."
-        progressBackgroundColor={Constants.THEME_COLOR} />
+        progressBackgroundColor={Constants.THEME_RED} />
     );
   }
 };

App/Helpers/Divider.js

@@ -18,7 +18,7 @@ var styles = StyleSheet.create({
     backgroundColor: Constants.THEME_DARK_BLUE,
   },
   themeRed: { //eslint-disable-line react-native/no-unused-styles
-    backgroundColor: Constants.THEME_COLOR,
+    backgroundColor: Constants.THEME_RED,
   },
   text: {
     color: '#FFF',

App/Navigation/NavbarBackButton.js

@@ -40,7 +40,7 @@ export default class NavigationButton extends Component {
     return (
       <TouchableHighlight
         style={styles.toolbarButton}
-        underlayColor={Constants.THEME_COLOR}
+        underlayColor={Constants.THEME_RED}
         onPress={this._goBack.bind(this)}>
         <Icon name="chevron-left" style={styles.icon} />
       </TouchableHighlight>
@@ -55,7 +55,7 @@ export default class NavigationButton extends Component {
 
         <TouchableHighlight
           style={styles.toolbarButton}
-          underlayColor={Constants.THEME_COLOR}
+          underlayColor={Constants.THEME_RED}
           onPress={this.context.drawer.toggle}>
           <Icon name="three-bars" style={styles.icon} />
         </TouchableHighlight>

App/Reducers/Auth.js

@@ -1,7 +1,6 @@
 import * as actions from '../Actions';
 
 const initialState = {
-  loaded: false,
   isFetching: false,
   token: {
     os: null,
@@ -12,11 +11,6 @@ const initialState = {
 
 export default function reducer(state = initialState, action) {
   switch (action.type) {
-    case actions.RESTORE_AUTH:
-      return {
-        ...action.state.auth,
-        loaded: true
-      };
     case actions.FETCH_GITHUB_TOKEN_REQUEST:
       return {
         ...state,

App/Routes/Dashboard.js

@@ -9,10 +9,7 @@ import {
 
 import BarButton from '../Helpers/BarButton';
 import Routes from '../Navigation/Routes';
-import Loading from '../Components/Loading';
-import LoginButton from '../Helpers/LoginButton';
 import AccountsList from '../Components/AccountsList';
-import Constants from '../Utils/Constants';
 
 var styles = StyleSheet.create({
   container: {
@@ -22,40 +19,6 @@ var styles = StyleSheet.create({
 });
 
 class Dashboard extends Component {
-  getAuthUrl(isPro) {
-    var scopes = Constants.oAuthOptions.scopes;
-    if (isPro) {
-      scopes.push('repo');
-    }
-
-    var authUrl = [
-      'https://github.com/login/oauth/authorize',
-      '?client_id=' + Constants.oAuthOptions.client_id,
-      '&client_secret=' + Constants.oAuthOptions.client_secret,
-      '&scope=' + scopes
-    ].join('');
-
-    return authUrl;
-  }
-
-  _doLoginOs() {
-    this.doLogin(false);
-  }
-
-  _doLoginPro() {
-    this.doLogin(true);
-  }
-
-  doLogin(isPro) {
-    var authUrl = this.getAuthUrl(isPro);
-    const route = Routes.OAuth({
-      isPro: isPro,
-      authUrl: authUrl
-    });
-
-    this.props.navigator.push(route);
-  }
-
   goToSearch() {
     const route = Routes.SearchPublic();
     this.props.navigator.push(route);
@@ -67,10 +30,6 @@ class Dashboard extends Component {
   }
 
   render() {
-    if (!this.props.auth.loaded) {
-      return <Loading text="Trevor" />;
-    }
-
     return (
       <View style={{flex: 1}}>
         <BarButton
@@ -79,13 +38,8 @@ class Dashboard extends Component {
           onPress={this.goToSearch.bind(this)} />
 
         <ScrollView style={styles.container}>
-          {!this.props.auth.token.os ? (
-            <LoginButton text="Login to Travis for Open Source" onPress={this._doLoginOs.bind(this)} />
-          ) : <AccountsList navigator={this.props.navigator} isPro={false} />}
-
-          {!this.props.auth.token.pro ? (
-            <LoginButton text="Login to Travis Pro" onPress={this._doLoginPro.bind(this)} />
-          ) : <AccountsList navigator={this.props.navigator} isPro={true} />}
+          {!this.props.auth.token.os ? <View /> : <AccountsList navigator={this.props.navigator} isPro={false} />}
+          {!this.props.auth.token.pro ? <View /> : <AccountsList navigator={this.props.navigator} isPro={true} />}
         </ScrollView>
 
         {this.props.isLoggedInPro ? (

App/Store/configureStore.js

@@ -4,13 +4,14 @@ import * as storage from 'redux-storage';
 import createEngine from 'redux-storage-engine-reactnativeasyncstorage';
 import filter from 'redux-storage-decorator-filter';
 
-import { FETCH_TRAVIS_TOKEN_SUCCESS, restoreAuth } from '../Actions';
+import { FETCH_TRAVIS_TOKEN_SUCCESS } from '../Actions';
 import Constants from '../Utils/Constants';
 import requestsMiddleware from '../Middleware/Requests';
 import rootReducer from '../Reducers';
 
-const engine = filter(createEngine(Constants.STORAGE_KEY), ['auth']);
+const engine = filter(createEngine(Constants.STORAGE_KEY), [['Auth', 'token']]);
 const storeMiddleware = storage.createMiddleware(engine, [], [FETCH_TRAVIS_TOKEN_SUCCESS]);
+
 const middlewares = [
   requestsMiddleware, // Should be passed before 'apiMiddleware'
   apiMiddleware,
@@ -32,7 +33,6 @@ export default function configureStore(initialState) {
   load(store)
     .then((newState) => {
       console.log('Loaded state:', newState);
-      store.dispatch(restoreAuth(newState));
     })
     .catch(() => console.log('Failed to load previous state'));
 

App/Utils/Constants.js

@@ -1,4 +1,5 @@
 export default {
+  REPO_URL: 'https://github.com/ekonstantinidis/trevor',
   STORAGE_KEY: 'trevor',
 
   oAuthOptions: {
@@ -13,11 +14,12 @@ export default {
   API_OS: 'https://api.travis-ci.org',
   API_PRO: 'https://api.travis-ci.com',
 
-  THEME_COLOR: '#A53230',
+  THEME_RED: '#A53230',
   THEME_BLUE: '#357389',
   THEME_DARK_BLUE: '#40454F',
+  THEME_DARKER_BLUE: '#333740',
   THEME_LIGHT_BLUE: '#357389',
-  THEME_LIGHT_EXTRA_BLUE: '#5E8599',
+  THEME_LIGHTER_BLUE: '#5E8599',
 
   statusStarted: '#D2C93B',
   statusPassed: '#3FA75F',