Reactotron mission

App.js

//eslint-disable-next-line
console.ignoredYellowBox = ["Setting a timer"];
import "./ReactotronConfig";
import React, { PureComponent } from "react";
import {
  StyleSheet,
  View,
  StatusBar,
  Linking,
  Platform,
  Alert
} from "react-native";
import { createStore, applyMiddleware, compose, combineReducers } from "redux";
import { Provider } from "react-redux";
import thunkMiddleware from "redux-thunk";
import Reactotron from "reactotron-react-native";
import logger from "logger";
import OneSignal from "react-native-onesignal";
import SplashScreen from "react-native-splash-screen";

import { Sentry } from "react-native-sentry";
import {
  setJSExceptionHandler,
  setNativeExceptionHandler
} from "react-native-exception-handler";
import { jsHandler, nativeHandler } from "utils/error-handlers";

import RootNavigation from "navigation/RootNavigation";
import LocalStorage from "services/LocalStorage";
import reducers from "reducers";
import {
  setCurrentUser,
  validateUserInformationForVoterVoice
} from "auth/loginActions";
import { handleEventsDeepLink } from "events/actions";
import { handleBallotsDeepLink } from "surveys-ballots/actions";
import { setResetPasswordKey } from "auth/registrationActions";
import { setNotificationData, deepLinkReceived } from "navigation/actions";
import { view } from "utils/view";
import { v2Colors } from "theme";
import env from "env";
import base from "base-endpoint";
import * as appcenter from "utils/appcenterLogger";
import * as cache from "utils/cache";
import * as regex from "utils/helpers/regex";

const appReducer = combineReducers({
  ...reducers
});
const middleware = applyMiddleware(thunkMiddleware);
//react-native-debugger config
// eslint-disable-next-line no-underscore-dangle
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(appReducer, composeEnhancers(middleware, Reactotron.createEnhancer()));

setJSExceptionHandler(jsHandler, true);
setNativeExceptionHandler(nativeHandler);

export default class NFIBEngage extends PureComponent {
  constructor() {
    super();
    this._startSentry();
  }

  componentWillMount() {
    OneSignal.addEventListener("received", this._onReceived);
    OneSignal.addEventListener("opened", this._onOpened);
    OneSignal.addEventListener("registered", this._onRegistered);
    OneSignal.addEventListener("ids", this._onIds);
    Linking.addEventListener("url", this._handleOpenURL);
  }

  componentDidMount() {
    if (Platform.OS === "ios") {
      OneSignal.checkPermissions(({ alert, _badge, _sound }) => {
        const active = alert === 1;
        OneSignal.setSubscription(active);
      });
    }
    this.loadCache();
    Linking.getInitialURL().then(this._redirect);
  }

  componentWillUnmount() {
    OneSignal.removeEventListener("received", this._onReceived);
    OneSignal.removeEventListener("opened", this._onOpened);
    OneSignal.removeEventListener("registered", this._onRegistered);
    OneSignal.removeEventListener("ids", this._onIds);
    Linking.removeEventListener("url", this._handleOpenURL);
  }

  _handleOpenURL = event => {
    if (event && event.url) {
      this._redirect(event.url);
    }
  };

  _authDeepLink = url => {
    const [_, key] = url.split("=");
    cache.saveDeepLinkElement("auth", key);
    store.dispatch(setResetPasswordKey(key));
  };

  _eventDeepLink = async url => {
    try {
      const user = await LocalStorage.get("user");
      const key = regex.extrackDeepLinkKey(url);
      if (user) {
        store.dispatch(deepLinkReceived());
        store.dispatch(handleEventsDeepLink(key));
      } else {
        cache.saveDeepLinkElement("event", key);
        this._alertNoAuthDeepLinkElement("Event");
      }
    } catch (e) {
      return false;
    }
  };

  _ballotDeepLink = async url => {
    try {
      const user = await LocalStorage.get("user");
      const key = regex.extrackDeepLinkKey(url);
      if (user) {
        store.dispatch(deepLinkReceived());
        store.dispatch(handleBallotsDeepLink(key));
      } else {
        cache.saveDeepLinkElement("survey", key);
        this._alertNoAuthDeepLinkElement("Survey");
      }
    } catch (e) {
      return false;
    }
  };

  _alertNoAuthDeepLinkElement = type => {
    setTimeout(() => {
      Alert.alert(
        "Unauthenticated User",
        `In order to access this ${type} you must login or register first.`,
        [
          {
            text: "Cancel",
            onPress: () => {
              cache.deleteDeepLinkElement(type);
            },
            style: "cancel"
          },
          { text: "OK", onPress: () => null }
        ],
        { cancelable: false }
      );
    }, 1000);
  };

  _redirect = url => {
    if (url) {
      if (url.includes("auth/reset?resetkey")) {
        this._authDeepLink(url);
      }
      if (url.includes("events")) {
        this._eventDeepLink(url);
      } else if (url.includes("surveys")) {
        this._ballotDeepLink(url);
      }
    }
  };

  _startSentry = () => {
    //eslint-disable-next-line
    if (!__DEV__) {
      const envs = {
        dv: "INT",
        qa: "QA",
        ua: "UA",
        prod: "PROD"
      };

      Sentry.config(
        "https://f33c27ee79b04c1bb5117cac6a97d03c:[email protected]/264268"
      ).install();
      Sentry.setTagsContext({
        environment: envs[base]
      });
    }
  };

  _onReceived = _notification => {};

  _onOpened = ({ notification }) => {
    const { payload } = notification;
    this._handleNotificationReceived(payload);
  };

  _onRegistered = _notifData => {};

  _onIds = _device => {};

  _handleNotificationReceived = ({ additionalData }) => {
    store.dispatch(setNotificationData(additionalData));
  };

  async loadCache() {
    try {
      logger("LOADING APP CACHE");
      const user = await LocalStorage.get("user");
      if (user) {
        await store.dispatch(setCurrentUser(user));
        store.dispatch(validateUserInformationForVoterVoice(user.Key));
        appcenter.trackUser("SessionStart", user, true);
        this._hideSplash();
      } else {
        this._hideSplash();
      }
      logger("LOADING APP CACHE FINISHED");
    } catch (error) {
      logger("LOADING APP CACHE ERROR", error);
      this._hideSplash();
    }
  }

  _hideSplash = () => {
    SplashScreen.hide();
  };

  render() {
    return (
      <Provider store={store}>
        <View style={styles.container}>
          <StatusBar barStyle="light-content" />
          <RootNavigation />
        </View>
      </Provider>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: v2Colors.charcoalDarkest
  },
  image: {
    width: view.width(),
    height: view.height(),
    flex: 1,
    position: "absolute",
    top: 0,
    left: 0
  },
  spinner: {
    flex: 1,
    zIndex: 1
  }
});

ReactotronConfig.js

import Reactotron, {
  trackGlobalErrors,
  openInEditor,
  networking,
} from 'reactotron-react-native';
import {reactotronRedux} from 'reactotron-redux';

Reactotron.configure({
  name: 'NFIB Engage - Mobile',
})
  .useReactNative()
  .use(reactotronRedux())
  .use(trackGlobalErrors())
  .use(openInEditor())
  .use(networking());

//eslint-disable-next-line
if (__DEV__) {
  Reactotron.connect();
  Reactotron.clear();
  //eslint-disable-next-line
  debug = (title, data={}) =>
    Reactotron.display({
      name: title,
      value: data,
      preview: JSON.stringify(data).substr(0, 50),
    });
}