aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/containers/latest_error.tsx
blob: 0d4349124ae0ccaaecec8e1a57a92d3b70ea6fcc (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import * as React from 'react';

import { connect } from 'react-redux';
import { Dispatch } from 'redux';

import { SlidingError } from '../components/sliding_error';
import { Container } from '../components/ui/container';
import { Overlay } from '../components/ui/overlay';
import { Action } from '../redux/actions';
import { State } from '../redux/reducer';
import { ScreenWidths } from '../style/media';
import { generateOverlayBlack } from '../style/theme';
import { zIndex } from '../style/z_index';
import { Asset, DisplayStatus, Omit, SlideAnimationState } from '../types';
import { errorFlasher } from '../util/error_flasher';

export interface LatestErrorComponentProps {
    asset?: Asset;
    latestErrorMessage?: string;
    animationState: SlideAnimationState;
    shouldRenderOverlay: boolean;
    onOverlayClick: () => void;
}

export const LatestErrorComponent: React.StatelessComponent<LatestErrorComponentProps> = props => {
    if (!props.latestErrorMessage) {
        // Render a hidden SlidingError such that instant does not move when a real error is rendered.
        return (
            <Container isHidden={true}>
                <SlidingError animationState="slidIn" icon="😢" message="" />
            </Container>
        );
    }
    return (
        <React.Fragment>
            <SlidingError animationState={props.animationState} icon="😢" message={props.latestErrorMessage} />
            {props.shouldRenderOverlay && (
                <Overlay
                    onClick={props.onOverlayClick}
                    zIndex={zIndex.containerOverlay}
                    showMaxWidth={ScreenWidths.Sm}
                    backgroundColor={generateOverlayBlack(0.4)}
                />
            )}
        </React.Fragment>
    );
};

export interface LatestErrorProps {}
interface ConnectedState extends Omit<LatestErrorComponentProps, 'onOverlayClick'> {}
const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({
    asset: state.selectedAsset,
    latestErrorMessage: state.latestErrorMessage,
    animationState: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'slidIn' : 'slidOut',
    shouldRenderOverlay: state.latestErrorDisplayStatus === DisplayStatus.Present,
});

type ConnectedDispatch = Pick<LatestErrorComponentProps, 'onOverlayClick'>;
const mapDispatchToProps = (dispatch: Dispatch<Action>, _ownProps: LatestErrorProps): ConnectedDispatch => ({
    onOverlayClick: () => {
        errorFlasher.clearError(dispatch);
    },
});

export const LatestError = connect(mapStateToProps, mapDispatchToProps)(LatestErrorComponent);