App.jsx

import React, { Component } from 'react';
import {
  Route,
  Switch,
} from 'react-router-dom';
import { YMInitializer } from 'react-yandex-metrika';

import NoMatch from '../../components/NoMatch';

import UsersEdit from '../Users/edit';
import Home from '../Home';
import Login from '../Login';
import Projects from '../Projects';
import ProjectsShow from '../Projects/show';
import Header from '../Header';
import styled from 'styled-components';
import PrivateRoute from '../../PrivateRoute';
import LogOut from '../Login/LogOut';
import { connect } from 'react-redux';
import {
    getUserInfo,
    logoutUser,
    fetchUserPermissions,
    autosetUser,
} from './actions';
import jwt_decode from 'jwt-decode';
import { withRouter } from 'react-router'
import Autologin from '../Login/Autologin';
import SharingPreview from '../SharingPreview';
import Templates from '../Templates';
import AdminStats from '../Admin/Stats';
import Notifications from '../Notifications';
import Landing from '../Landing';
import ProjectDiagram from '../Projects/Diagram';
import AdminPublished from '../Admin/Published';
import ProjectLogs from '../Projects/Logs';

import FlashBriefingsShow from '../FlashBriefings/show';
import NewFlashBriefingFeedRecord from '../FlashBriefings/new';

import axios from 'axios';

const { NODE_ENV } = process.env;

const MainWrapper = styled.div`
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
`;

class App extends Component {
    constructor(props) {
        super(props);

        axios.interceptors.response.use(null, (error) => {
            if (error.response.status === 401) {
                this.props.logoutUser();

                return new Promise(() => {});
            }
        });
    }

    componentDidMount() {
        const token = localStorage.getItem('token');

        if (token) {
            this.props.autosetUser(token);
            this.props.fetchUserPermissions();
        } else {
            if (NODE_ENV === 'production') {
                window.Intercom('boot', {
                    app_id: 'dw5adnrr',
                });
            }
        }
    }

    componentWillReceiveProps(nextProps) {
        if (NODE_ENV === 'production') {
            if (!this.props.app.user && nextProps.app.user) {
                window.Intercom('boot', {
                    app_id: 'dw5adnrr',
                    name: nextProps.app.user.name,
                    email: nextProps.app.user.email,
                });
            }
        }
    }

    render() {
        const { user, userFeaturePermissions } = this.props.app;
        const { logoutUser } = this.props;

        return (
            <MainWrapper>
                {
                    (this.props.location.pathname.startsWith("/preview") || this.props.location.pathname === '/') ? null : (
                        <Header
                            user={user}
                            blur={this.props.location.search.includes('first_visit')}
                            showToggle={this.props.location.pathname.match(/\/projects\/[0-9)]/)}
                        />
                    )
                }
                <Switch>
                    <Route exact path="/" render={() => <Landing user={user}/>}/>
                    <PrivateRoute
                        exact
                        path="/projects"
                        user={user}
                        component={Projects}
                        userFeaturePermissions={userFeaturePermissions}
                    />
                    <PrivateRoute
                        exact
                        path="/projects/:id"
                        user={user}
                        component={ProjectsShow}
                        userFeaturePermissions={userFeaturePermissions}
                    />
                    <PrivateRoute path="/projects/:id/diagram" user={user} component={ProjectDiagram} />
                    <PrivateRoute path="/projects/:id/logs" user={user} component={ProjectLogs} />

                    <PrivateRoute exact path='/flash_briefings/:id/records/new' user={user} component={NewFlashBriefingFeedRecord} />
                    <PrivateRoute path='/flash_briefings/:id' user={user} component={FlashBriefingsShow} />

                    <PrivateRoute path="/users/edit" user={user} component={UsersEdit} />

                    <PrivateRoute path="/logout" component={LogOut} logoutUser={logoutUser} />

                    <Route exact path="/preview/:token" component={SharingPreview} />
                    <Route exact path="/autologin/:provider/:token" render={(props) => <Autologin {...props} user={user}/>} />
                    <PrivateRoute exact path="/templates" component={Templates} />
                    <Route exact path="/autologin/:provider/:token/:refreshToken" render={(props) => <Autologin {...props} user={user}/>} />

                    <PrivateRoute path="/admin/stats" component={AdminStats} />
                    <PrivateRoute path="/admin/published" component={AdminPublished} />

                    <Route path="/login" render={() => <Login user={user}/>} />

                    <Route component={NoMatch} />
                </Switch>

                { (NODE_ENV === 'production') ? (
                        <YMInitializer
                            accounts={[46052394]}
                            options={{
                              clickmap: true,
                              trackLinks: true,
                              accurateTrackBounce: true,
                              webvisor: true,
                              trackHash: true,
                            }}
                        />
                    ) : null
                }

                <Notifications />
            </MainWrapper>
        );
    }
}

const mapStateToProps = ({ app }) => ({ app });

export default withRouter(connect(mapStateToProps, {
    getUserInfo,
    logoutUser,
    fetchUserPermissions,
    autosetUser,
})(App));