Handling sessions with react native

SessionManager.js

import { Component } from 'react';
import { AppState } from 'react-native';
import { connect } from 'react-redux';
import { recordSomething } from 'some-component';
import { recordSomethingElse } from 'some-other-component';
import { storeSessionData } from 'redux/actions/sessions';
import * as Sentry from '@sentry/react-native';

import { navigator } from 'utils';
import { chatActions } from 'actions';
import { bindActionCreators } from 'redux';

class SessionManager extends Component {
  constructor(props) {
    super(props);
    this.state = { startTime: new Date().getTime(), appState: AppState.currentState };
    this._initSentryTags = this._initSentryTags.bind(this);
    this.reconnectChatSession = this.reconnectChatSession.bind(this);
    this.disconnectChatSession = this.disconnectChatSession.bind(this);
  }

  componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
    this._initSentryTags();
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
  }

  _initSentryTags() {
    if (!__DEV__) {
      const { userId, userName } = this.props;
      Sentry.setTag('userId', userId);
      Sentry.setTag('userName', userName);
      Sentry.setExtra('userId', userId);
    }
  }

  _handleAppStateChange = nextAppState => {
    if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
      // App coming to foreground
      this.setState({ startTime: new Date().getTime() });
      this._initSentryTags();
      if (!!chatActions.globalSocket.getSocket()) this.reconnectChatSession();
    } else {
      // App going to background
      const state = this.props.state;
      const views1 = state.Views.views1;
      const views2 = state.Views.views2;
      if (views1.length > 20) recordSomething(views1);
      if (views2.length > 20) recordSomethingElse(views2);
      if (!!chatActions.globalSocket.getSocket()) this.closeSession();
    }
    this.setState({ appState: nextAppState });
  };

  closeSession() {
    storeSessionData(this.state.startTime, this.props.userId);
    this.disconnectChatSession();
  }

  disconnectChatSession() {
    const routes = navigator.state.nav.routes;
    const onChatScreen = routes[routes.length - 1].routeName == 'ChatThread';
    const currentChannel = chatActions.currentChannel.getChannel();
    const globalChannel = chatActions.globalChannel.getChannel();
    if (onChatScreen && currentChannel)
      currentChannel.leave().receive('ok', () => console.log('left!'));
    if (globalChannel) globalChannel.leave().receive('ok', () => console.log('Globalleft!'));
    chatActions.globalChannel.resetChannel();
    chatActions.currentChannel.resetChannel();
  }

  reconnectChatSession() {
    const routes = navigator.state.nav.routes;
    const onChatScreen = routes[routes.length - 1].routeName == 'ChatThread';
    this.props.connectToGlobalChannel();
    if (onChatScreen) {
      // navigate({ routeName: 'Chat' });
      this.props.subscribeToCurrentChannel();
    }
  }

  render() {
    return null;
  }
}

function mapStateToProps(state) {
  return { state: state, userId: state.Auth.userId, userName: state.Auth.userName };
}

const mapDispatchToProps = dispatch => {
  return bindActionCreators({ ...chatActions }, dispatch);
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SessionManager);