App.js

import React, {Component} from 'react';
import { Redirect} from 'react-router-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import classNames from 'classnames';
import { AppTopbar } from './layout/components/AppTopbar';
import  AppMenu  from './layout/components/AppMenu';
import {AppFooter } from './layout/components/AppFooter';
import {RoutedContent} from './routes';
import AppBreadcrumb from "./layout/components/AppBreadcrumb";
import {withRouter } from 'react-router';
import handleResponse from "./response.handler"
import 'primeicons/primeicons.css';
import 'primereact/resources/themes/nova/theme.css';
import 'primereact/resources/primereact.css';
import './layout/layout.scss';
import 'primeflex/primeflex.css';
import './App.scss';
import './App.css';
import Auth from'./authenticate/auth';
import { Login } from './authenticate/login';

import pubsub from './utils/pubSub';
import { CustomDialog } from './layout/components/CustomDialog';

import AuthStore from './authenticate/auth.store';
import {Provider} from "react-redux";
import AuthComponent from './components/AuthComponent';


const {  publish, subscribe } = pubsub();

export {
    publish,
    subscribe
};
class App extends Component {
    constructor() {
        super();
        this.isBackButtonClicked = false;
        this.state = {
        layoutMode: 'static',
        currentMenu: '',
        currentPath: '/',
        PageTitle:'',
        staticMenuInactive: localStorage.getItem('staticMenuInactive') === 'true' ? true : false,
        overlayMenuActive: localStorage.getItem('overlayMenuActive') === 'true' ? true : false,
        mobileMenuActive: localStorage.getItem('mobileMenuActive') === 'true' ? true : false,
        authenticated: true,
        findObjectPlaceholder: 'Sub Task',
        redirect: window.location.pathname === '/'? '/su/timelineview/week': window.location.pathname,
        isLogin: true
        };
        this.onWrapperClick = this.onWrapperClick.bind(this);
        this.onToggleMenu = this.onToggleMenu.bind(this);
        this.onSidebarClick = this.onSidebarClick.bind(this);
        this.onMenuItemClick = this.onMenuItemClick.bind(this);
        this.setPageTitle = this.setPageTitle.bind(this);
        this.logout = this.logout.bind(this);
        this.validateAndLogout = this.validateAndLogout.bind(this);
        this.setSearchField = this.setSearchField.bind(this);
        this.toggleEditToggle = this.toggleEditToggle.bind(this);

        this.menu = [ {label: 'Dashboard', icon: 'pi pi-fw pi-home', to:'/dashboard',section: 'dashboard'},
        {label: 'Cycle', icon:'pi pi-fw pi-spinner', to:'/cycle',section: 'cycle'},
        {label: 'Project', icon: 'fab fa-fw fa-wpexplorer', to:'/project',section: 'project'},
        {label: 'Scheduling Units', icon: 'pi pi-fw pi-calendar', to:'/schedulingunit',section: 'schedulingunit'},
        {label: 'Tasks', icon: 'pi pi-fw pi-check-square', to:'/task'},
        {label: 'Workflow', icon: 'pi pi-sitemap', to:'/su/workflow',section: 'workflow'},
        {label: 'Week View', icon: 'fab fa fa-calendar-alt', to:'/su/timelineview/week',section: 'su/timelineview/week'},
        {label: 'Timeline', icon: 'pi pi-fw pi-clock', to:'/su/timelineview',section: 'su/timelineview'},
        {label: 'Reports', icon: 'pi pi-fw pi-chart-bar', to:'/reports',section: 'reports'},
    ];
    }
    onWrapperClick(event) {
        if (!this.menuClick) {
            this.setState({
                overlayMenuActive: false,
                mobileMenuActive: false
            });
        }
        this.menuClick = false;
    }    

    onToggleMenu(event) {
        this.menuClick = true;
        if (this.isDesktop()) {
            if (this.state.layoutMode === 'overlay') {
                this.setState({
                    overlayMenuActive: !this.state.overlayMenuActive
                }, () => {
                    localStorage.setItem('overlayMenuActive', this.state.overlayMenuActive);
                }
                );
            }
            else if (this.state.layoutMode === 'static') {
                this.setState({
                    staticMenuInactive: !this.state.staticMenuInactive
                }, () => {
                    localStorage.setItem('staticMenuInactive', this.state.staticMenuInactive);
                });
            }
        }
        else {
            const mobileMenuActive = this.state.mobileMenuActive;
            this.setState({
                mobileMenuActive: !mobileMenuActive
            },() => {
                localStorage.setItem('mobileMenuActive', this.state.mobileMenuActive);
            }
            );
        }
       event.preventDefault();
    }

    onSidebarClick(event) {
        this.menuClick = true;
    }

    onMenuItemClick(event) {
        this.setState({currentMenu:event.item.label, currentPath: event.item.path});
    }
		
	isDesktop() {
        return window.innerWidth > 1024;
    }

    setPageTitle(PageTitle) {
        if (PageTitle !== this.state.PageTitle) {
            this.setState({ PageTitle })
        }
    } 

    /**
     * Callback function from login page to set the authentication state to true amd redirect to the 
     * original requested URL.
     */

    /**
     * Logout and redirect to login page.
     */
    logout() {
        Auth.logout();
        this.setState({ redirect:"/login", isLogin: false});
    }

    /**
     * Get confirmation if any of the page has unsaved data and then logout.
     * @returns 
     */
    validateAndLogout() {
        if (this.state.isEditDirty) {
            this.toggleDirtyDialog(this.logout);
        }   else {
            this.logout();
        }
    }

    toggleEditToggle() {
        this.setState({ showEditDialog: !this.state.showEditDialog });
    }

    componentDidMount() {
        //PermissionStackUtil.getPermissions(true);
        subscribe('edit-dirty', (flag) => {
            this.setState({ isEditDirty: flag }, () => {
                if (flag) {
                    window.addEventListener("beforeunload", reloadDirty);
                    // window.addEventListener('popstate', this.onBackButtonEvent);
                    window.history.pushState(null, document.title, window.location.href);
                    window.addEventListener('popstate', this.onBackButtonEvent);
                } else {
                    window.removeEventListener("beforeunload",reloadDirty);
                }
            });
        });

        var reloadDirty =function  (e) {
            var confirmationMessage = "\o/";
            (e || window.event).returnValue = confirmationMessage; //Gecko + IE
            return confirmationMessage;   
           // this.toggleDirtyDialog();
        };
    }

    componentDidUpdate(prevProps, prevState) {
        if(window.location.pathname === '/'){
            this.setState({redirect : '/su/timelineview/week'})
        }
    }

    onBackButtonEvent = (e) => {
        e.preventDefault();
        if (this.state.isEditDirty) {
            const leavePage = window.confirm("Do you want to leave this page? Your changes may not be saved.");
            if (leavePage) {
                this.setState({isEditDirty: false});
                window.history.back(); 
            } else {
                window.history.pushState(null, document.title, window.location.href);
            } 
        }
    }

    componentWillUnmount = () => {
        //window.removeEventListener('popstate', this.onBackButtonEvent);
    }

    close = () => {     
        this.setState({showDirtyDialog: false});
    }
    /**
     * Cancel edit and redirect to Cycle View page
     */
    cancelEdit = () => {        
        this.setState({ isEditDirty: false, showDirtyDialog: false });
        this.state.toPathCallback();
    }

    toggleDirtyDialog = (callback) => {
        this.setState({ showDirtyDialog: true, toPathCallback: callback });
    }

    onBreadcrumbClick = (callback) => {
        if (this.state.isEditDirty) {
            this.toggleDirtyDialog(callback);
            return;
        }
        callback();
    }

     /**
     * Set search param
     * @param {*} key 
     * @param {*} value 
     */
      setSearchField(key, value) {
        this.setState({
            objectType: key, 
            findObjectId: value, 
            redirect:"/find/object/"+key+"/"+value
        });
    }
    
    render() {
        const wrapperClass = classNames('layout-wrapper', {
            'layout-overlay': this.state.layoutMode === 'overlay',
            'layout-static': this.state.layoutMode === 'static',
            'layout-static-sidebar-inactive': this.state.staticMenuInactive && this.state.layoutMode === 'static',
            'layout-overlay-sidebar-active': this.state.overlayMenuActive && this.state.layoutMode === 'overlay',
            'layout-mobile-sidebar-active': this.state.mobileMenuActive			
        });
        return (
            <React.Fragment>
                <div className="App">
                    <Provider store={AuthStore}>
                    {/* <div className={wrapperClass} onClick={this.onWrapperClick}> */}
                    <div className={wrapperClass}>
                        {/* Load main routes and application only if the application is authenticated */}
                        <>
                        {this.state.redirect &&
                        // <AuthComponent isLogin = {this.state.isLogin}>
                        <AuthComponent>
                            <AppTopbar 
                                onToggleMenu={this.onToggleMenu} 
                                isLoggedIn={this.state.authenticated} 
                                onLogout={this.validateAndLogout} 
                                setSearchField={this.setSearchField}
                            />
                            <Router basename={ this.state.currentPath }>
    
                                <AppMenu model={this.menu} toggleDirtyDialog={this.toggleDirtyDialog} isEditDirty={this.state.isEditDirty} onMenuItemClick={this.onMenuItemClick} layoutMode={this.state.la} active={this.state.menuActive}/>
                                <div className="layout-main">
                                    {(this.state.redirect || this.state.redirect==="/login") &&
                                        <Redirect to={{pathname: this.state.redirect==="/login"?"/su/timelineview/week":this.state.redirect, state: {userrole: this.state.userrole}}} />}
                                    <AppBreadcrumb setPageTitle={this.setPageTitle} section={this.state.currentMenu} onBreadcrumbClick={this.onBreadcrumbClick} />
                                    <RoutedContent />
                                </div>
                            </Router>   

                            <AppFooter></AppFooter>
                            </AuthComponent>
                        }
                        </>
                        <CustomDialog type="confirmation" visible={this.state.showDirtyDialog} width="40vw"
                            header={'Confirmation'} message={'Do you want to leave this page? Your changes may not be saved.'} 
                            content={''} onClose={this.close} onCancel={this.close} onSubmit={this.cancelEdit}>
                        </CustomDialog>
                    </div>
                    </Provider>
                </div>
            </React.Fragment>
        );
    }
}

export default handleResponse(App);