Untitled

import * as React from 'react';
import { ErrorBoundary } from 'react-error-boundary';

import {
  ActionToolbarContext,
  ActionToolbarRenderer,
  AuthProps,
  getLanguageText,
  hasPermission,
  LanguageTextType,
  LoadingSpinner,
  MainFrameContext,
  MainFrameProps,
  Permission,
  WarningBox,
  withAuth,
} from '@flaminem/kyc-front-lib';

import { MainRoutes } from './components/MainRoutes';
import { MainNavBar } from './components/MainNavBar';

import './MainFrame.scss';

interface State {
  applicationError: Error | null;
  actionToolbarRenderer: ActionToolbarRenderer;
  userLogoutRequested: boolean | null;
}

export type Props = MainFrameProps & AuthProps;

const FallbackRender = ({ error }: { error: Error }) => (
  <div role='alert'>
    <div
      data-notification
      className='main-frame-container-error bx--inline-notification bx--inline-notification--error'
      role='alert'
    >
      <div className='bx--inline-notification__details'>
        <div className='bx--inline-notification__text-wrapper'>
          <p className='bx--inline-notification__title'>A technical error occured!</p>
          <p className='bx--inline-notification__subtitle'>
            Try to reload the page. If it happens again, please contact the support and report the
            following error:
            <br />
            <br />
            {error.message}
          </p>
        </div>
      </div>
    </div>
  </div>
);

// refactor MainFrame react class component to functional component
const MainFrame: React.FC<Props> = (props) => {
  const context = React.useContext(MainFrameContext);
  const [state, setState] = React.useState<State>({
    applicationError: null,
    actionToolbarRenderer: () => null,
    userLogoutRequested: false,
  });

  const actionToolbarContext = React.useContext(ActionToolbarContext);

  const clearApplicationError = () => {
    setState((state) => ({ ...state, applicationError: null }));
  };

  const userLogoutRequested = () => {
    setState((state) => ({ ...state, userLogoutRequested: true }));
    props.userLogoutRequested();
    setState((state) => ({ ...state, userLogoutRequested: null }));
  };

  return (
    <>
      <MainNavBar
        renderActionToolbar={state.actionToolbarRenderer}
        onNavigate={clearApplicationError}
        logoutUser={userLogoutRequested}
      />

      {!props.isUserAuthenticated && (
        <WarningBox
          header={getLanguageText(LanguageTextType.AUTHENTICATION_TEXT)}
          heading={getLanguageText(LanguageTextType.CONNECTION_TEXT)}
          actionConfirmed={props.userAuthenticationExpired}
        >
          <p>{getLanguageText(LanguageTextType.EXPIRED_SESSION_TEXT)}</p>
          <p>{getLanguageText(LanguageTextType.PLEASE_RECONNECT_TEXT)}</p>
        </WarningBox>
      )}

      {state.userLogoutRequested !== false && (
        <WarningBox
          header={getLanguageText(LanguageTextType.AUTHENTICATION_TEXT)}
          heading={getLanguageText(LanguageTextType.DECONNECTION_TEXT)}
          actionConfirmed={
            state.userLogoutRequested === null ? props.userAuthenticationExpired : undefined
          }
        >
          <p>
            {getLanguageText(
              state.userLogoutRequested === true
                ? LanguageTextType.DECONNECTION_IN_PROCESS_TEXT
                : LanguageTextType.DECONNECTION_SUCCESSFUL
            )}
          </p>
        </WarningBox>
      )}

      {!hasPermission(context.userSettings.permissions, Permission.VIEW) && (
        <div
          data-notification
          className='main-frame-container-disallowed bx--inline-notification bx--inline-notification--warning'
          role='alert'
        >
          <div className='bx--inline-notification__details'>
            <div className='bx--inline-notification__text-wrapper'>
              <p className='bx--inline-notification__title'>
                {getLanguageText(LanguageTextType.INSUFFICIENT_RIGHTS_CONSULT_FILES_TEXT)}
              </p>
              <p className='bx--inline-notification__subtitle'>
                {getLanguageText(LanguageTextType.PLEASE_INQUIRE_WITH_ADMINISTRATOR_TEXT)}
              </p>
            </div>
          </div>
        </div>
      )}

      <div className='main-frame-item-container'>
        <React.Suspense fallback={<LoadingSpinner className='kyc-mainframe-loading' />}>
          <ErrorBoundary fallbackRender={FallbackRender}>
            <MainRoutes actionToolbarContext={actionToolbarContext} />
          </ErrorBoundary>
        </React.Suspense>
      </div>
    </>
  );
};

export default withAuth(MainFrame);