sdnr/wt/odlux/framework/src/components/errorDisplay.tsx

   1 import * as React from 'react';
   2 import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
   3
   4 import Modal from '@material-ui/core/Modal';
   5 import Button from '@material-ui/core/Button';
   6 import Card from '@material-ui/core/Card';
   7 import CardActions from '@material-ui/core/CardActions';
   8 import CardContent from '@material-ui/core/CardContent';
   9 import Typography from '@material-ui/core/Typography';
  10
  11 import { ClearErrorInfoAction, RemoveErrorInfoAction } from '../actions/errorActions';
  12
  13 import connect, { Connect } from '../flux/connect';
  14
  15 const styles = (theme: Theme) => createStyles({
  16   modal: {
  17     display: "flex",
  18     alignItems: "center",
  19     justifyContent: "center",
  20   },
  21   paper: {
  22     width: theme.spacing.unit * 50,
  23     backgroundColor: theme.palette.background.paper,
  24     boxShadow: theme.shadows[5],
  25     padding: theme.spacing.unit * 4,
  26   },
  27   card: {
  28     minWidth: 275,
  29   },
  30   bullet: {
  31     display: 'inline-block',
  32     margin: '0 2px',
  33     transform: 'scale(0.8)',
  34   },
  35   title: {
  36     marginBottom: 16,
  37     fontSize: 14,
  38   },
  39   pos: {
  40     marginBottom: 12,
  41   },
  42 });
  43
  44 type ErrorDisplayProps = WithStyles<typeof styles> & Connect;
  45
  46 // function getModalStyle() {
  47 //   const top = 50 + rand();
  48 //   const left = 50 + rand();
  49
  50 //   return {
  51 //     top: `${ top }%`,
  52 //     left: `${ left }%`,
  53 //     transform: `translate(-${ top }%, -${ left }%)`,
  54 //   };
  55 // }
  56
  57 /**
  58  * Represents a compnent for formaing and displaying errors.
  59  */
  60 class ErrorDisplayComponent extends React.Component<ErrorDisplayProps> {
  61   render(): JSX.Element {
  62     const { classes, state } = this.props;
  63     const errorInfo = state.framework.applicationState.errors.length && state.framework.applicationState.errors[state.framework.applicationState.errors.length - 1];
  64     return (
  65       <Modal className={ classes.modal }
  66         aria-labelledby="simple-modal-title"
  67         aria-describedby="simple-modal-description"
  68         open={ state.framework.applicationState.errors && state.framework.applicationState.errors.length > 0 }
  69         onClose={ () => this.props.dispatch(new ClearErrorInfoAction()) }
  70       >
  71         { errorInfo &&
  72           <div className={ classes.paper }>
  73             <Card className={ classes.card }>
  74               <CardContent>
  75                 <Typography className={ classes.title } color="textSecondary">
  76                   Something went wrong.
  77                 </Typography>
  78                 <Typography variant="headline" component="h2">
  79                 { errorInfo.error && errorInfo.error.toString() }
  80                 </Typography>
  81                 <Typography className={ classes.pos } color="textSecondary">
  82                 { errorInfo.message && errorInfo.message .toString() }
  83                 </Typography>
  84                 <Typography component="p">
  85                 { errorInfo.info && errorInfo.info.componentStack && errorInfo.info.componentStack.split('\n').map(line => {
  86                   return [line, <br />];
  87                 }) }
  88                 { errorInfo.info && errorInfo.info.extra && errorInfo.info.extra.split('\n').map(line => {
  89                   return [line, <br />];
  90                 }) }
  91                 </Typography>
  92               </CardContent>
  93               <CardActions>
  94               <Button size="small" onClick={ () => this.props.dispatch(new RemoveErrorInfoAction(errorInfo)) } >Close</Button>
  95               </CardActions>
  96             </Card>
  97           </div> || null
  98         }
  99       </Modal>
 100     );
 101   }
 102 }
 103
 104 export const ErrorDisplay = withStyles(styles)(connect()(ErrorDisplayComponent));
 105 export default ErrorDisplay;