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';
interface LatestErrorComponentProps {
asset?: Asset;
latestErrorMessage?: string;
animationState: SlideAnimationState;
shouldRenderOverlay: boolean;
onOverlayClick: () => void;
}
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);
|
