dg-npm-templates/templates/dg-react-micro-frontend/src/js/app/components/App.js

Npx generator for react app dependency creation by digite

/* istanbul ignore file */

import React from 'react';
import MessageContainer from 'js/modules/message/components/MessageContainer';
import { GLOBAL_CONSTANTS } from 'js/common/constants/GlobalConstants';
import AppHelper from 'js/app/AppHelper';
import { changeLanguage } from 'I18N/I18NHelper';
import properties from 'properties';

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

        this.state = {
            selectedMenuText: undefined,
            dependencyTabIndex: 0,
            selectedMenuType: "",
            selectedCard: {}
        };

        this.source = this.props.source;

        this._handleKeyDown = this._handleKeyDown.bind(this);
        this._handleClickEvents = this._handleClickEvents.bind(this);
        this._handleWindowResize = this._handleWindowResize.bind(this);

        document.addEventListener("keydown", this._handleKeyDown);
        document.addEventListener("click", this._handleClickEvents);
        window.addEventListener("resize", this._handleWindowResize);

        changeLanguage(navigator.language || navigator.userLanguage);
    }

    componentDidMount() {
        this.props.initAppComp();
    }

    render() {
        const appData = this.props.appData;
        const imageURL = properties.baseURL + (GLOBAL_CONSTANTS.SWIFTENTERPRISE === properties.sourceType ? "images/loading.gif" : "svg/loading.svg");

        return (
            <div id="mf-cnt">
                <div className='main_body full_height full_width'>
                    Welcome to #GIT-REPO-NAME#
                </div>
                <MessageContainer store={ this.props.store } source={ this.source } />
                {
                    appData && appData.showMask &&
                        <div className='app_mask full_width full_height'>
                            <img src={ imageURL } className='vertical_align' alt='Loading'></img>
                        </div>
                }
            </div>
        )
    }

    _handleKeyDown(event) {
        //const state = this.props.store.getState();

        switch (event.keyCode) {
            case GLOBAL_CONSTANTS.ESCAPE_KEY:
                /* if (state.messageData.messageData && state.messageData.messageData.show) {
                    event.stopImmediatePropagation();
                    this.props.store.dispatch(hideMessage());
                } */

                break;
            case GLOBAL_CONSTANTS.ENTER_KEY:
                /* const msg_btn = document.getElementById('msg_confimation');

                if (document.getElementsByClassName('message_confirmation').length > 0 && msg_btn
                    && state.messageData.messageData && state.messageData.messageData.show) {
                    msg_btn.click();
                } */

                break;
            case GLOBAL_CONSTANTS.F1_KEY:
                if ( AppHelper.getAppData("helpURL") ) {
                    window.open(AppHelper.getAppData("helpURL"), "Help", "width=" + window.screen.availWidth +
                        "px,height=" + window.screen.availHeight + "px,top=0,left=0")
                }
                break;
            default:
                break;
        }
    }

    _handleClickEvents() {
        // click event hadling
    }

    _handleWindowResize() {
        //window resize
    }

    componentWillUnmount() {
        document.removeEventListener("keydown", this._handleKeyDown);
        document.removeEventListener("click", this._handleClickEvents);
        window.removeEventListener("resize", this._handleWindowResize);
    }
}

export default App;