Offline first approach

android/app/build.gradle

@@ -175,6 +175,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-device-info')
     compile project(':react-native-paypal')
     compile project(':react-native-localization')
     compile project(':react-native-vector-icons')

android/app/src/main/AndroidManifest.xml

@@ -7,6 +7,8 @@
     android:launchMode="singleTop">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
     <uses-permission android:name="android.permission.CAMERA" />
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

android/app/src/main/java/io/devsummit/app/android/MainApplication.java

@@ -3,6 +3,7 @@
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.learnium.RNDeviceInfo.RNDeviceInfo;
 import br.com.vizir.rn.paypal.PayPalPackage;
 import com.babisoft.ReactNativeLocalization.ReactNativeLocalizationPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
@@ -54,6 +55,7 @@ protected List<ReactPackage> getPackages() {
       MainApplication.paypalPackage = new PayPalPackage(PAY_PAL_REQUEST_ID);
       return Arrays.asList(
           new MainReactPackage(),
+            new RNDeviceInfo(),
           new ReactNativeLocalizationPackage(),
               MainApplication.getPaypalPackage(),
           new VectorIconsPackage(),

android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'DevSummit'
+include ':react-native-device-info'
+project(':react-native-device-info').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-device-info/android')
 include ':react-native-paypal'
 project(':react-native-paypal').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-paypal/android')
 include ':react-native-localization'

app/components/Splash/index.js

@@ -4,6 +4,7 @@ import { createTransition, Fade } from 'react-native-transition';
 import { Actions } from 'react-native-router-flux';
 import { getAccessToken } from '../../helpers';
 import SplashScreen from './SplashScreen';
+import { createStructuredSelector } from 'reselect';
 
 const Transition = createTransition(Fade);
 
@@ -16,13 +17,6 @@ export default class Splash extends Component {
   }
 
   componentDidMount() {
-    getAccessToken().then((accessToken) => {
-      if (accessToken) {
-        Actions.mainTabs();
-      } else {
-        Actions.main();
-      }
-    });
   }
 
   render() {

app/containers/Feed/actions.js

@@ -56,15 +56,6 @@ export function isFetchingMoreFeeds(status) {
   };
 }
 
-export function setTokenHeader(currentpage) {
-  return (dispatch) => {
-    getAccessToken().then((accessToken) => {
-      Api.setAuthorizationToken(accessToken);
-      dispatch(fetchFeeds(currentpage));
-    });
-  };
-}
-
 export function fetchFeeds(currentpage) {
   return (dispatch) => {
     dispatch(isFetchingFeeds(true));

app/containers/Feed/index.js

@@ -50,6 +50,7 @@ import strings from '../../localization';
 import HeaderPoint from '../../components/Header';
 import * as actions from './actions';
 import * as selectors from './selectors';
+import { getProfileData } from '../Main/selectors';
 import OrderList from '../OrderList';
 import Redeem from '../Redeem';
 import { PRIMARYCOLOR } from '../../constants';
@@ -132,7 +133,8 @@ const mapStateToProps = () =>
     imagesData: selectors.getUpdateImage(),
     textData: selectors.getUpdateText(),
     currentPage: selectors.getCurrentPage(),
-    isRemoving: selectors.getIsRemoveFeed()
+    isRemoving: selectors.getIsRemoveFeed(),
+    profileData: getProfileData(),
   });
 
 class Feed extends Component {
@@ -170,16 +172,12 @@ class Feed extends Component {
   }
 
   componentWillMount() {
-    this.props.setTokenHeader(this.props.currentPage);
-
-    AsyncStorage.getItem('profile_data').then((profile) => {
-      const data = JSON.parse(profile);
-      const firstName = data.first_name;
-      const lastName = data.last_name;
-      const url = data.photos[0].url;
-      const id = data.id;
-      this.setState({ firstName, lastName, profileUrl: url, userId: id });
-    });
+    // const data = this.props.profileData;
+    // const firstName = data.first_name;
+    // const lastName = data.last_name;
+    // const url = data.photos[0].url;
+    // const id = data.id;
+    // this.setState({ firstName, lastName, profileUrl: url, userId: id });
   }
 
   setModalVisible = (visible, image) => {

app/containers/Main/actions.js

@@ -5,6 +5,7 @@ import { Actions } from 'react-native-router-flux';
 import axios from 'axios';
 
 import { DevSummitAxios } from '../../helpers';
+import api from '../../services/api';
 
 /*
  * import constants
@@ -23,7 +24,9 @@ import {
   GOOGLE_CLIENT_SECRET,
   TWITTER_CALLBACK,
   TWITTER_CONSUMER_KEY,
-  TWITTER_CONSUMER_KEY_SECRET
+  TWITTER_CONSUMER_KEY_SECRET,
+  SET_TOKEN,
+  RESET_TOKEN
 } from './constants';
 
 /*
@@ -74,6 +77,13 @@ export function updateisLoading(status) {
   };
 }
 
+export function setToken(token) {
+  return {
+    type: SET_TOKEN,
+    token
+  }
+}
+
 /*
  * Log user in
  * save access_token & refresh_token to asyncstorage
@@ -93,17 +103,19 @@ export function login() {
       .then(async (response) => {
         if (response && response.data && response.data.meta.success) {
           const resData = response.data.data;
-          const roleId = JSON.stringify(response.data.included.role_id);
-          const profileData = JSON.stringify(response.data.included);
-          const boothData = JSON.stringify(response.data.included.booth);
+          const roleId = response.data.included.role_id;
+          const profileData = response.data.included;
+          const boothData = response.data.included.booth;
           try {
             if (profileData || boothData) {
-              await AsyncStorage.multiSet([
-                [ 'access_token', resData.access_token ],
-                [ 'refresh_token', resData.refresh_token ],
-                [ 'role_id', roleId ],
-                [ 'profile_data', profileData ]
-              ]);
+              dispatch(setToken({
+                accessToken: resData.access_token,
+                refreshToken: resData.refresh_token,
+                roleId,
+                profileData,
+                boothData
+              }))
+              api.setAuthorizationToken(resData.access_token);
             }
           } catch (error) {
             console.log(error, 'error caught');
@@ -225,15 +237,14 @@ export function loginGoogle() {
             .then(async (response) => {
               if (response && response.data && response.data.meta.success) {
                 const resData = response.data.data;
-                const roleId = JSON.stringify(response.data.included.role_id);
-                const profileData = JSON.stringify(response.data.included);
                 try {
-                  await AsyncStorage.multiSet([
-                    [ 'access_token', resData.access_token ],
-                    [ 'refresh_token', resData.refresh_token ],
-                    [ 'role_id', roleId ],
-                    [ 'profile_data', profileData ]
-                  ]);
+                  dispatch(setToken({
+                    accessToken: resData.access_token,
+                    refreshToken: resData.refresh_token,
+                    roleId: response.data.included.role_id,
+                    profileData: response.data.included,
+                  }))
+                  api.setAuthorizationToken(resData.access_token);
                 } catch (error) {
                   console.log(error, 'error caught');
                 }
@@ -423,3 +434,9 @@ export function subscribeNewsletter() {
     });
   };
 }
+
+export function resetToken() {
+  return {
+    type: RESET_TOKEN
+  }
+}

app/containers/Main/constants.js

@@ -15,3 +15,6 @@ export const UPDATE_SINGLE_FIELD = 'app/containers/Main/UPDATE_FIELD';
 export const UPDATE_IS_LOGGED_IN = 'app/containers/Main/CHECK_IS_LOGGED_IN';
 export const UPDATE_IS_SUBSCRIBED = 'app/containers/Main/UPDATE_IS_SUBSCRIBED';
 export const UPDATE_IS_LOADING = 'app/containers/Main/UPDATE_IS_LOADING';
+
+export const SET_TOKEN = 'app/containers/Main/SET_TOKEN';
+export const RESET_TOKEN = 'app/containers/Main/RESET_TOKEN';

app/containers/Main/reducer.js

@@ -10,7 +10,9 @@ import {
   UPDATE_IS_SUBSCRIBED,
   UPDATE_IS_NOT_REGISTERED,
   UPDATE_IS_LOADING,
-  FETCH_PROFILE_DATA
+  FETCH_PROFILE_DATA,
+  SET_TOKEN,
+  RESET_TOKEN
 } from './constants';
 
 /*
@@ -24,7 +26,11 @@ const initialState = fromJS({
   },
   isLoading: false,
   isLoggedIn: false,
-  isSubscribed: false
+  isSubscribed: false,
+  accessToken: '',
+  refreshToken: '',
+  roleId: null,
+  profileData: null,
 });
 
 function mainReducer(state = initialState, action) {
@@ -37,6 +43,17 @@ function mainReducer(state = initialState, action) {
       return state.setIn([ 'fields', action.field ], action.value);
     case UPDATE_IS_LOADING:
       return state.set('isLoading', action.status);
+    case SET_TOKEN:
+      const token = action.token;
+      return state.set('accessToken', token.accessToken)
+        .set('refreshToken', token.refreshToken)
+        .set('roleId', token.roleId)
+        .set('profileData', token.profileData)
+    case RESET_TOKEN:
+      return state.set('accessToken', '')
+        .set('refreshToken', '')
+        .set('roleId', null)
+        .set('profileData', null)
     default:
       return state;
   }

app/containers/Main/selectors.js

@@ -43,3 +43,21 @@ export const getIsLoading = () => createSelector(
   selectMainReducer(),
   state => state.get('isLoading')
 );
+
+/**
+ *  Get access token
+ *  @return boolean
+ */
+export const getAccessToken = () => createSelector(
+  selectMainReducer(),
+  state => state.get('accessToken')
+);
+
+/**
+ * Get profile data
+ *  @return boolean
+ */
+export const getProfileData = () => createSelector(
+  selectMainReducer(),
+  state => state.get('profileData')
+);

app/containers/MainTabs/PushNotification.js

@@ -7,6 +7,7 @@ import Toast from 'react-native-simple-toast';
 import FCM, { FCMEvent, RemoteNotificationResult, WillPresentNotificationResult, NotificationType } from 'react-native-fcm';
 
 import { getAccessToken, DevSummitAxios } from '../../helpers';
+import auth from '../../services/auth';
 
 
 // this shall be called regardless of app state: running, background or not running.
@@ -53,20 +54,15 @@ FCM.on(FCMEvent.Notification, async (notif) => {
 });
 
 FCM.on(FCMEvent.RefreshToken, (token) => {
-  getAccessToken().then((usertoken) => {
-    const headers = { Authorization: usertoken };
-    DevSummitAxios.patch('auth/me/updatefcmtoken', { token }, { headers })
-      .then(async (response) => {
-        if (response.meta && response.meta.success) {
-          await AsyncStorage.setItem('fcmtoken', token);
-        }
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  }).catch((err) => {
-    console.log(err);
-  });
+  auth.updateFcmToken(token)
+    .then(async (response) => {
+      if (response.meta && response.meta.success) {
+        await AsyncStorage.setItem('fcmtoken', token);
+      }
+    })
+    .catch((err) => {
+      console.log(err);
+    });
   // fcm token may not be available on first load, catch it here
 });
 
@@ -88,20 +84,15 @@ export default class PushNotification extends Component {
     FCM.getFCMToken().then((token) => {
       this.setState({ fcm_token: token });
       // update your fcm token on server.
-      getAccessToken().then((usertoken) => {
-        const headers = { Authorization: usertoken };
-        DevSummitAxios.patch('auth/me/updatefcmtoken', { token }, { headers })
-          .then(async (response) => {
-            if (response.meta && response.meta.success) {
-              await AsyncStorage.setItem('fcmtoken', token);
-            }
-          })
-          .catch((err) => {
-            console.log(err);
-          });
-      }).catch((err) => {
-        console.log(err);
-      });
+      auth.updateFcmToken(token)
+        .then(async (response) => {
+          if (response.meta && response.meta.success) {
+            await AsyncStorage.setItem('fcmtoken', token);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
     });
     this.notificationListener = FCM.on(FCMEvent.Notification, async (notif) => {
       // do some component related stuff

app/containers/Settings/actions.js

@@ -12,6 +12,7 @@ import {
   UPDATE_IS_DISABLED
 } from './constants';
 import { restoreCurrentPage } from '../Feed/actions';
+import { resetToken } from '../Main/actions';
 import local from '../../../config/local';
 
 /*
@@ -162,6 +163,7 @@ export function logOut() {
 
     const keys = [ 'access_token', 'refresh_token', 'role_id', 'profile_data' ];
     await AsyncStorage.multiRemove(keys);
+    dispatch(resetToken());
     dispatch(restoreCurrentPage());
     dispatch(isLoadingLogout(false));
     dispatch(updateIsLogOut(true));