baazjs/src/components/App/app.js

import React, { useCallback, useEffect, Suspense, lazy } from 'react';
import { array, func, shape, string } from 'prop-types';
import { useApp } from '@baaz/adapter/talons/App/useApp';
import { HeadProvider, Title } from '../Head';
import Main from '../Main';
import Mask from '../Mask';
import Routes from '../Routes';
import { registerMessageHandler } from '../../util/swUtils';
import { HTML_UPDATE_AVAILABLE } from '../../constants/swMessageTypes';

const Navigation = lazy(() => import('../Navigation'));

const ERROR_MESSAGE = 'Sorry! An unexpected error occurred.';

const App = props => {
    const { markErrorHandled, renderError, unhandledErrors } = props;


    const handleIsOffline = useCallback(() => {

    }, []);

    const handleIsOnline = useCallback(() => {

    }, []);

    const handleHTMLUpdate = useCallback(
        async resetHTMLUpdateAvaiableFlag => {

        },
        []
    );

    const handleError = useCallback(
        (error, id, loc, handleDismissError) => {
            const errorToastProps = {
                icon: ErrorIcon,
                message: `${ERROR_MESSAGE}\nDebug: ${id} ${loc}`,
                onDismiss: remove => {
                    handleDismissError();
                    remove();
                },
                timeout: 15000,
                type: 'error'
            };
            //localStorage.clear();
        },
        []
    );

    const talonProps = useApp({
        handleError,
        handleIsOffline,
        handleIsOnline,
        handleHTMLUpdate,
        markErrorHandled,
        renderError,
        unhandledErrors
    });

    const {
        hasOverlay,
        handleCloseDrawer,
        setHTMLUpdateAvailable,
    } = talonProps;

    useEffect(() => {
        const unregisterHandler = registerMessageHandler(
            HTML_UPDATE_AVAILABLE,
            () => {
                setHTMLUpdateAvailable(true);
            }
        );
        return unregisterHandler;
    }, [setHTMLUpdateAvailable]);



    if (renderError) {
        return (
            <HeadProvider>
                <Title>{`${PWA_NAME}`}</Title>
                <Main isMasked={true} />
                <Mask isActive={true} />
            </HeadProvider>
        );
    }

    const _navigation =
        <Suspense fallback={null}>
            <Navigation />
        </Suspense>
    return (
        <HeadProvider>
            <Title>{`${PWA_NAME}`}</Title>
            <Main isMasked={hasOverlay}>
                <Routes />
            </Main>
            <Mask isActive={hasOverlay} dismiss={handleCloseDrawer} />
            {_navigation}
        </HeadProvider>
    );
};

App.propTypes = {
    markErrorHandled: func.isRequired,
    renderError: shape({
        stack: string
    }),
    unhandledErrors: array
};

export default App;