import * as React from 'react' ; import styled from '@client/styledComponents' ; import { RouteComponentProps , withRouter } from 'react-router' ; import { connect } from 'react-redux' ; import { getLanguage } from '@opencrvs/client/src/i18n/selectors' ; import { IStoreState } from '@opencrvs/client/src/store' ; import { setInitialApplications } from '@client/applications' ; import { Spinner } from '@opencrvs/components/lib/interface' ; import { getOfflineDataLoaded , getOfflineLoadingError } from '@client/offline/selectors' ; import { parse } from 'querystring' ; import { checkAuth } from '@client/profile/profileActions' ; import { showConfigurationErrorNotification , hideConfigurationErrorNotification } from '@client/notification/actions' ; import { storage } from '@client/storage' ; import { changeLanguage } from '@client/i18n/actions' ; import { Ii18n } from '@client/type/i18n' ; import { USER_DETAILS } from '@client/utils/userUtils' ; import { getDefaultLanguage } from '@client/i18n/utils' ; import { getInitialApplicationsLoaded } from '@client/applications/selectors' ; import { isRegisterFormReady } from '@client/forms/register/application-selectors' ; const languageFromProps = ( { language } ) => language ; const StyledPage = styled . div < IPageProps > `
  background: ${ ( { theme } ) => theme . colors . background };
  min-height: 100vh;
  box-sizing: border-box;
  padding-bottom: 80px;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  * {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  *:before,
  *:after {
    box-sizing: border-box;
  }

  @font-face {
    /* stylelint-disable-next-line opencrvs/no-font-styles */
    font-family: ${ ( { theme } ) => theme . fonts . semiBoldFont };
    src: url('/fonts/notosans-semibold-webfont-en.ttf') format('truetype');
  }

  @font-face {
    /* stylelint-disable-next-line opencrvs/no-font-styles */
    font-family: ${ ( { theme } ) => theme . fonts . regularFont };
    src: url('/fonts/notosans-regular-webfont-en.ttf') format('truetype');
  }

  @font-face {
    /* stylelint-disable-next-line opencrvs/no-font-styles */
    font-family: ${ ( { theme } ) => theme . fonts . semiBoldFont };
    src: url('/fonts/notosans-semibold-webfont-${ languageFromProps }.ttf')
      format('truetype');
  }

  @font-face {
    /* stylelint-disable-next-line opencrvs/no-font-styles */
    font-family: ${ ( { theme } ) => theme . fonts . regularFont };
    src: url('/fonts/notosans-regular-webfont-${ languageFromProps }.ttf')
      format('truetype');
  }
` ; const StyledSpinner = styled ( Spinner ) `
  position: absolute;
  margin-left: -24px;
  margin-top: -24px;
  top: 50%;
  left: 50%;
` ; interface IPageProps { language ? : string ; initialApplicationsLoaded : boolean ; offlineDataLoaded : boolean ; registerFormLoaded : boolean ; loadingError : boolean ; } interface IDispatchProps { setInitialApplications : ( ) => void ; checkAuth : typeof checkAuth ; showConfigurationErrorNotification : ( ) => void ; hideConfigurationErrorNotification : ( ) => void ; changeLanguage : ( values : Ii18n ) => void ; } class Component extends React . Component < RouteComponentProps < { } > & IPageProps & IDispatchProps > { componentDidUpdate ( prevProps ) { const { hash } = this . props . location ; const hashChanged = hash && hash !== prevProps . location . hash ; if ( hashChanged ) { setTimeout ( ( ) => { const id = hash . replace ( '#' , '' ) ; const element = document . getElementById ( id ) ; if ( element ) { element . scrollIntoView ( ) ; } } , 0 ) ; } if ( this . props . loadingError && navigator . onLine ) { this . props . showConfigurationErrorNotification ( ) ; } if ( prevProps . loadingError && ! this . props . loadingError ) { this . props . hideConfigurationErrorNotification ( ) ; } } async componentDidMount ( ) { const values = parse ( this . props . location . search ) ; this . props . checkAuth ( values ) ; const userDetails = JSON . parse ( ( await storage . getItem ( USER_DETAILS ) ) || '{}' ) ; this . props . changeLanguage ( { language : userDetails . language || getDefaultLanguage ( ) } ) ; } render ( ) { const { initialApplicationsLoaded , offlineDataLoaded , registerFormLoaded , children } = this . props ; if ( offlineDataLoaded && initialApplicationsLoaded && registerFormLoaded ) { return ( < div id = "readyApplication" > < StyledPage { ... this . props } > { children } < /StyledPage> < /div>); } else { return < StyledSpinner id = "appSpinner" / > ; } } } const mapStateToProps = ( store ) : IPageProps => { return { language : getLanguage ( store ) , initialApplicationsLoaded : getInitialApplicationsLoaded ( store ) , offlineDataLoaded : getOfflineDataLoaded ( store ) , loadingError : getOfflineLoadingError ( store ) , registerFormLoaded : isRegisterFormReady ( store ) } ; } ; const mapDispatchToProps = { setInitialApplications , checkAuth , showConfigurationErrorNotification , hideConfigurationErrorNotification , changeLanguage } ; export const Page = withRouter ( connect < IPageProps , IDispatchProps , { } , IStoreState > ( mapStateToProps , mapDispatchToProps ) ( Component ) ) ;