import * as React from 'react' ; import { Spinner } from '@opencrvs/components/lib/interface' ; import { NoWifi } from '@opencrvs/components/lib/icons' ; import { injectIntl , WrappedComponentProps as IntlShapeProps } from 'react-intl' ; import styled from 'styled-components' ; import { errorMessages } from '@client/i18n/messages' ; const ErrorText = styled . div `
  color: ${ ( { theme } ) => theme . colors . error };
  ${ ( { theme } ) => theme . fonts . bodyStyle };
  text-align: center;
  margin-top: 100px;
` ; const Loading = styled ( Spinner ) `
  width: 24px;
  margin-right: 13px;
` ; const NoConnectivity = styled ( NoWifi ) `
  margin-right: 13px;
` ; const Wrapper = styled . div `
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 38px;
` ; const Text = styled . span `
  ${ ( { theme } ) => theme . fonts . bodyStyle };
  display: flex;
` ; type IBaseLoadingProps = { loading : boolean ; hasError : boolean ; noApplication ? : boolean ; } ; type IProps = IBaseLoadingProps & IntlShapeProps & IOnlineStatusProps ; export class LoadingIndicatorComp extends React . Component < IProps > { render ( ) { const { loading , noApplication , hasError , intl } = this . props ; return ( < Wrapper > { this . props . isOnline && loading && ( < > < Loading id = "Spinner" baseColor = "#4C68C1" / > < Text id = "loading-text" > { intl . formatMessage ( errorMessages . loadingApplications ) } < /Text> < />)} { this . props . isOnline && hasError && ( < ErrorText id = "search-result-error-text-count" > { intl . formatMessage ( errorMessages . queryError ) } < /ErrorText>)} { this . props . isOnline && noApplication && ( < Text id = "no-application-text" > { intl . formatMessage ( errorMessages . noApplication ) } < /Text>)} { ! this . props . isOnline && ( < > < NoConnectivity /> < Text id = "wait-connection-text" > { intl . formatMessage ( errorMessages . waitingForConnection ) } < /Text> < />)} < /Wrapper>); } } export function withOnlineStatus < T > ( WrappedComponent ) { const ONLINE_CHECK_INTERVAL = 500 ; return function WithOnlineStatus ( props ) { const [ isOnline , setOnline ] = React . useState ( navigator . onLine ) ; React . useEffect ( ( ) => { const intervalID = setInterval ( ( ) => setOnline ( navigator . onLine ) , ONLINE_CHECK_INTERVAL ) ; return ( ) => clearInterval ( intervalID ) ; } , [ ] ) ; return < WrappedComponent isOnline = { isOnline } { ... props } />; } ; } export type IOnlineStatusProps = { isOnline : boolean ; } ; export const LoadingIndicator = injectIntl ( withOnlineStatus ( LoadingIndicatorComp ) ) ;