App.js

import React from 'react';
import {Provider} from 'react-redux';
import App, {Container} from 'next/app';
import withRedux from 'next-redux-wrapper';
import {PersistGate} from 'redux-persist/integration/react';
import {Api} from '@shelf/sdk';
import Error from './_error';
import {initStore} from '../lib/store';
import {initRollbar} from '../lib/rollbar';
import {initIntercom} from '../lib/intercom';
import './_app.scss';
import publicRuntimeConfig from '../lib/helpers/publicRuntimeConfig';
import {getAccessToken, getMeteorTokenString} from '../lib/helpers/apiHelper';
import dynamic from 'next/dynamic';
import {
  checkPermissionsAndRedirect,
  setUserTokenFromMeteor
} from '../lib/store/actions/AuthActions';
import client from '../lib/graphql/apolloClient';
import {ApolloProvider} from 'react-apollo';

/**
 * Need to load dynamically as it has window.document inside which fails during ssr
 */
const ToastrProvider = dynamic(() => import('../components/basic/ToastProvider'), {
  ssr: false
});
const AlertProvider = dynamic(() => import('../components/basic/AlertProvider'), {
  ssr: false
});

export const withError = Component =>
  class extends React.Component {
    static async getInitialProps(context) {
      const props = await Component.getInitialProps(context);
      const {
        ctx: {res, err}
      } = context;
      const statusCode = res ? res.statusCode : err ? err.statusCode : null;

      return {statusCode, ...props};
    }

    render() {
      const {statusCode} = this.props;

      if (statusCode && statusCode !== 200) {
        return <Error statusCode={statusCode} />;
      }

      return <Component {...this.props} />;
    }
  };

class MyApp extends App {
  componentDidMount() {
    const {store} = this.props;

    initRollbar();
    initIntercom();

    Api.API_HOST = publicRuntimeConfig.API_HOST;
    Api.AUTH_TOKEN = getAccessToken() || getMeteorTokenString();

    store.dispatch(setUserTokenFromMeteor());
    store.dispatch(checkPermissionsAndRedirect());
  }

  render() {
    const {Component, store} = this.props;

    return (
      <Container>
        <ApolloProvider client={client}>
          <Provider store={store}>
            <PersistGate persistor={store.__persistor}>
              <ToastrProvider windowGlobal>
                <AlertProvider options={{windowGlobal: true}}>
                  <Component />
                </AlertProvider>
              </ToastrProvider>
            </PersistGate>
          </Provider>
        </ApolloProvider>
      </Container>
    );
  }
}

export default withError(withRedux(initStore)(MyApp));