outline/app/index.js

// @flow
import * as React from 'react';
import { render } from 'react-dom';
import { Provider } from 'mobx-react';
import { ThemeProvider } from 'styled-components';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from 'react-router-dom';

import stores from 'stores';
import theme from 'shared/styles/theme';
import globalStyles from 'shared/styles/globals';
import 'shared/styles/prism.css';

import Home from 'scenes/Home';
import Dashboard from 'scenes/Dashboard';
import Starred from 'scenes/Starred';
import Drafts from 'scenes/Drafts';
import Collection from 'scenes/Collection';
import Document from 'scenes/Document';
import Search from 'scenes/Search';
import Settings from 'scenes/Settings';
import Details from 'scenes/Settings/Details';
import People from 'scenes/Settings/People';
import Slack from 'scenes/Settings/Slack';
import Shares from 'scenes/Settings/Shares';
import Tokens from 'scenes/Settings/Tokens';
import Export from 'scenes/Settings/Export';
import Error404 from 'scenes/Error404';

import ErrorBoundary from 'components/ErrorBoundary';
import ScrollToTop from 'components/ScrollToTop';
import ScrollToAnchor from 'components/ScrollToAnchor';
import Layout from 'components/Layout';
import Auth from 'components/Auth';
import RouteSidebarHidden from 'components/RouteSidebarHidden';

import { matchDocumentSlug } from 'utils/routeHelpers';

let DevTools;
if (__DEV__) {
  DevTools = require('mobx-react-devtools').default; // eslint-disable-line global-require
}

const notFoundSearch = () => <Search notFound />;
const DocumentNew = () => <Document newDocument />;
const RedirectDocument = ({ match }: { match: Object }) => (
  <Redirect to={`/doc/${match.params.documentSlug}`} />
);

globalStyles();

const element = document.getElementById('root');

if (element) {
  render(
    <React.Fragment>
      <ThemeProvider theme={theme}>
        <ErrorBoundary>
          <Provider {...stores}>
            <Router>
              <ScrollToTop>
                <ScrollToAnchor>
                  <Switch>
                    <Route exact path="/" component={Home} />
                    <Route exact path="/share/:shareId" component={Document} />
                    <Auth>
                      <Layout>
                        <Switch>
                          <Route
                            exact
                            path="/dashboard"
                            component={Dashboard}
                          />
                          <Route exact path="/starred" component={Starred} />
                          <Route exact path="/drafts" component={Drafts} />
                          <Route exact path="/settings" component={Settings} />
                          <Route
                            exact
                            path="/settings/details"
                            component={Details}
                          />
                          <Route
                            exact
                            path="/settings/people"
                            component={People}
                          />
                          <Route
                            exact
                            path="/settings/shares"
                            component={Shares}
                          />
                          <Route
                            exact
                            path="/settings/tokens"
                            component={Tokens}
                          />
                          <Route
                            exact
                            path="/settings/integrations/slack"
                            component={Slack}
                          />
                          <Route
                            exact
                            path="/settings/export"
                            component={Export}
                          />
                          <Route
                            exact
                            path="/collections/:id"
                            component={Collection}
                          />
                          <Route
                            exact
                            path={`/d/${matchDocumentSlug}`}
                            component={RedirectDocument}
                          />
                          <Route
                            exact
                            path={`/doc/${matchDocumentSlug}`}
                            component={Document}
                          />
                          <Route
                            exact
                            path={`/doc/${matchDocumentSlug}/move`}
                            component={Document}
                          />
                          <Route exact path="/search" component={Search} />
                          <Route
                            exact
                            path="/search/:query"
                            component={Search}
                          />
                          <Route path="/404" component={Error404} />
                          <RouteSidebarHidden
                            exact
                            path={`/doc/${matchDocumentSlug}/edit`}
                            component={Document}
                          />
                          <RouteSidebarHidden
                            exact
                            path="/collections/:id/new"
                            component={DocumentNew}
                          />
                          <Route component={notFoundSearch} />
                        </Switch>
                      </Layout>
                    </Auth>
                  </Switch>
                </ScrollToAnchor>
              </ScrollToTop>
            </Router>
          </Provider>
        </ErrorBoundary>
      </ThemeProvider>
      {DevTools && <DevTools position={{ bottom: 0, right: 0 }} />}
    </React.Fragment>,
    element
  );
}

window.addEventListener('load', async () => {
  // installation does not use Google Analytics, or tracking is blocked on client
  // no point loading the rest of the analytics bundles
  if (!process.env.GOOGLE_ANALYTICS_ID || !window.ga) return;

  // https://github.com/googleanalytics/autotrack/issues/137#issuecomment-305890099
  await import('autotrack/autotrack.js');

  window.ga('require', 'outboundLinkTracker');
  window.ga('require', 'urlChangeTracker');
});