How can I create a wrapper component for entire app?


I'm trying to add some analytics tracking for my react app. Basically just using a component to add global event listeners and then handle the event appropriately in that component.

I want to wrap my entire app in this component and for it to pick up componentWillUpdate prop changes so I can react to page changes using prop.location. My problem is I don't know how to setup my wrapper component to do this. I know the concept of HOC can help wrap one component and I've tested that to work but I want this to be a more generic and global component.

Tracker.js

import PropTypes from "prop-types"
import * as React from "react"
import { connect } from "react-redux"

import TrackingManager from './TrackingManager'
import ScriptManager from "./ScriptManager"
import { isLeftClickEvent } from "../utils/Utils"

const trackingManager = new TrackingManager()

const config = {
    useTagManager: true,
    tagManagerAccount: 'testCccount', 
    tagManagerProfile: 'testProfile', 
    tagManagerEnvironment: 'dev'
}

/**
 * compares the locations of 2 components, mostly taken from:
 * http://github.com/nfl/react-metrics/blob/master/src/react/locationEquals.js
 *
 * @param a
 * @param b
 * @returns {boolean}
 */
function locationEquals(a, b) {
  if (!a && !b) {
    return true;
  }
  if ((a && !b) || (!a && b)) {
    return false;
  }

  return (
    a.pathname === b.pathname && a.search === b.search && a.state === b.state
  );
}

/**
 * Tracking container which wraps the supplied Application component.
 * @param Application
 * @param beforeAction
 * @param overrides
 * @returns {object}
 */
const track = Application =>
  class TrackingContainer extends React.Component {
    constructor(props) {
      super(props)
    }

    componentDidMount() {
      this._addClickListener()
      this._addSubmitListener()
    }

    componentWillUnmount() {
      // prevent side effects by removing listeners upon unmount
      this._removeClickListener()
      this._removeSubmitListener()
    }

    componentDidUpdate(prevProps) {
      // if and only if the location has changed we need to track a
      // new pageview
      if (!locationEquals(this.props.location, prevProps.location)) {
        this._handlePageView(this.props)
      }
    }


    _addClickListener = () => {
      // bind to body to catch clicks in portaled elements (modals, tooltips, dropdowns)
      document.body.addEventListener("click", this._handleClick)
    }

    _removeClickListener = () => {
      document.body.removeEventListener("click", this._handleClick)
    }

    _addSubmitListener = () => {
      document.body.addEventListener("submit", this._handleSubmit)
    }

    _removeSubmitListener = () => {
      document.body.removeEventListener("submit", this._handleSubmit)
    }

    _handleSubmit = event => {
        console.log(event.target.name)
    }

    _handleClick = event => {
      // ensure the mouse click is an event we're interested in processing,
      // we have discussed limiting to external links which go outside the
      // react application and forcing implementers to use redux actions for
      // interal links, however the app is not implemented like that in
      // places, eg: Used Search List. so we're not enforcing that restriction
      if (!isLeftClickEvent(event)) {
        return
      }

      // Track only events when triggered from a element that has 
      // the `analytics` data attribute.
      if (event.target.dataset.analytics !== undefined) {
        trackingManager.event('pageName', 'User')
      }
    }

    _handlePageView = route => {
      console.log('CHANGE PAGE EVENT')
      console.log(route)
    }

    /**
     * Return  tracking script. 
     */
    _renderTrackingScript() {

        /**
         * If utag is already loaded on the page we don't  want to load it again
         */
        if (window.utag !== undefined) return

        if (config.useTagManager === false) return

        /**
         * Load  utag script. 
         */
        return (
          <ScriptManager
            account={config.tagManagerAccount}
            profile={config.tagManagerProfile}
            environment={config.tagManagerEnvironment}
          />
        )
    }


    render() {
      return (
        <React.Fragment>
          <Application {...this.props} {...this.state} />
          {this.props.children}
          {this._renderTrackingScript()}
        </React.Fragment>
      )
    }
  }

export default track

With my index.js I want to do something similar to this:

import React from 'react'
import ReactDOM from 'react-dom'
import { Router, Switch, Route } from 'react-router-dom'
import { Provider } from 'react-redux'
import store from './lib/store'
import history from './lib/history'
import Loadable from 'react-loadable'
import PageLoader from './components/PageLoader/PageLoader'
import { 
    DEFAULT_PATH, 
    LOGIN_PATH, 
    LOGOUT_PATH, 
    USER_PATH,
} from './lib/paths'

const Login = Loadable({ loader: () => import('./scenes/Auth/Login' /* webpackChunkName: 'login' */), loading: PageLoader })
const Logout = Loadable({ loader: () => import('./scenes/Auth/Logout'/* webpackChunkName: 'logout' */), loading: PageLoader })
const User = Loadable({ loader: () => import('./scenes/Auth/User'/* webpackChunkName: 'user' */), loading: PageLoader })


import Track from './lib/tracking/Tracker'

import './assets/stylesheets/bootstrap.scss'
import './bootstrap-ds.css'
import './index.css'
import './assets/stylesheets/scenes.scss'

ReactDOM.render((
// This is an example of what I want to accomplish
<Track>
    <Provider store={store}>
        <Router history={history}>
            <Switch>
                <Route path={LOGIN_PATH} component={Login}  />
                <Route path={LOGOUT_PATH} component={Logout} />
                <Route path={USER_PATH} component={User} />
            </Switch>
        </Router>
    </Provider>
</Track>
), document.getElementById('root'))

So, basically where the <Track> component can wrap the entire app and still use the props and check if they update. Is there a way to do this? What do I need to change?

Context API seems to be your use case here. You want a decoupled way to share data between components in the same tree. Your wrapper could implement a Provider, and all components that are interest on the shared value will implement a Consumer. HOC and render Props are useful to share stateful logic, not state itself.

const { Provider, Consumer } = React.createContext()

const Wrapper = ({children}) =>{
    return(
        <Provider value={mySharedValue}>
            {children}
        </Provider>
    )
}

const NestedChildren = () =>{
    return(
        <Consumer>
            {context => <div>{context}</div>}
        </Consumer>
    )
}

const App = () =>{
    return(
        <Wrapper>
            <Child> <NestedChild /> </Child>
        </Wrapper>
    )
}