Implementation of the Page Visibility API and Browser idle state detection

Final implementation.js

export default class MainLayout extends Component {

  constructor() {
    super()

    window.idleTime = 0
    window.idleInterval = null
  }

  timerIncrement = () => {

    window.idleTime = window.idleTime + 1;
    if (window.idleTime > 1) { // 2 minutes

        let currentIsVisible = store.getState().parentWindow.isVisible

        // When the current state is vissible, we will just toggle it
        if (currentIsVisible) {
          store.dispatch(parentWindowActions.isVisible(!currentIsVisible))
        }
    }
  }
  
  componentDidMount() {

    var hidden, visibilityChange; 

    if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
        hidden = "hidden";
        visibilityChange = "visibilitychange";
    } else if (typeof document.msHidden !== "undefined") {
        hidden = "msHidden";
        visibilityChange = "msvisibilitychange";
    } else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden";
        visibilityChange = "webkitvisibilitychange";
    }
    
    // we need to pause the running placements when the status of the parent window changes
    // when the parent window events happen, we need to react accordingly
    document.addEventListener(visibilityChange, () => {
      
      // We are going to Send this to all components that are listening to these events
      store.dispatch(parentWindowActions.isVisible(!document[hidden]))
    })

    // A little mix of JQuery usage in our ReactJS
    if (window.$) {

      //Increment the idle time counter every minute.
      window.idleInterval = setInterval(this.timerIncrement, 60000); // 1 minute

      var parentContainer = window.$("#root")
      parentContainer.mousemove((e) => {
        window.idleTime = 0

        // We also
        this.updateParentWindow()
      })
      parentContainer.keypress((e) => {
        window.idleTime = 0
        this.updateParentWindow()
      })
    }
  }

  updateParentWindow = () => {
    let currentIsVisible = store.getState().parentWindow.isVisible
    if (!currentIsVisible) {
      store.dispatch(parentWindowActions.isVisible(!currentIsVisible))
    }
  }

  componentWillUnmount() {
    // Unregister events when the parent container is no longer mounted
    if (window.$) {
      var parentContainer = window.$("#root")
      parentContainer.off("mousemove")
      parentContainer.off("keypress")

      clearInterval(window.idleInterval)
      window.idleTime = 0
    }
  }

  render() {
    return (isLoggedIn() ? <MasterAuthLayout /> : <MasterCleanLayout />)
  }
}