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

Npx generator for react app dependency creation by digite

/* istanbul ignore file */

import React, { useState, useEffect } from 'react';
import MessageView from 'js/modules/message/components/MessageView';
import { GLOBAL_CONSTANTS } from 'js/common/constants/GlobalConstants';
import AppHelper from 'js/app/AppHelper';
import { changeLanguage } from 'I18N/I18NHelper';
import properties from 'properties';
import { useSelector, useDispatch } from 'react-redux';
import { initAppComp } from '../slice/AppSlice';

const App = (props) => {
    const {source, store} = props;
    const dispatch = useDispatch();
    
    const appData = useSelector( state => state.appData.appData);
    
    useEffect(() => {
        dispatch(initAppComp())

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

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

        return () => {
                console.log("Behavior right before the component is removed from the DOM.");
                destroy();
            }
      }, [dispatch]);
       
    const imageURL = properties.baseURL + (GLOBAL_CONSTANTS.SWIFTENTERPRISE === properties.sourceType ? "images/loading.gif" : "svg/loading.svg");
    
    return (
        <div id="mf-cnt">
            <header className="App-header">
                <img src="images/logo192.png" className="App-logo" alt="logo" />
                {appData?.initialConfig?.welcomeMsg && <h1 className='heading' > {appData.initialConfig.welcomeMsg} </h1> }
            </header>
            <div className='main_body full_height full_width'>
                <div className='template-cnt'>
                    Welcome to #GIT-REPO-NAME#
                </div>
            </div>
            <MessageView source={ source } />
             {
                appData && appData.showMask &&
                    <div className='app_mask full_width full_height'>
                        <img src={ imageURL } className='vertical_align' alt='Loading'></img>
                    </div>
            }
        </div>
    )

    function _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;
        }
    };

    function _handleClickEvents() {
        // click event hadling
    };

    function _handleWindowResize() {
        //window resize
    };

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

export default App;