UI: pretty error messages

Add Toast component for displaying error messages in a more prominent way

src/components/EventEdit.tsx

@@ -24,6 +24,7 @@ import DateTimePicker from '../widgets/DateTimePicker';
 
 import ConfirmationDialog from '../widgets/ConfirmationDialog';
 import TimezonePicker from '../widgets/TimezonePicker';
+import Toast from '../widgets/Toast';
 
 import { Location } from 'history';
 import { withRouter } from 'react-router';
@@ -138,6 +139,7 @@ class EventEdit extends React.PureComponent<PropsType> {
     this.onDeleteRequest = this.onDeleteRequest.bind(this);
     this.toggleRecurring = this.toggleRecurring.bind(this);
     this.handleRRuleChange = this.handleRRuleChange.bind(this);
+    this.handleCloseToast = this.handleCloseToast.bind(this);
   }
 
   public UNSAFE_componentWillReceiveProps(nextProps: any) {
@@ -180,6 +182,15 @@ class EventEdit extends React.PureComponent<PropsType> {
   public handleRRuleChange(rrule: RRuleOptions): void {
     this.setState({ rrule: rrule });
   }
+
+  public handleCloseToast(_event?: React.SyntheticEvent, reason?: string) {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    this.setState({ error: '' });
+  }
+
   public onSubmit(e: React.FormEvent<any>) {
     e.preventDefault();
 
@@ -279,9 +290,9 @@ class EventEdit extends React.PureComponent<PropsType> {
             (by editing the first instance) is supported.
           </div>
         )}
-        {this.state.error && (
-          <div>ERROR! {this.state.error}</div>
-        )}
+        <Toast open={!!this.state.error} onClose={this.handleCloseToast}>
+          ERROR! {this.state.error}
+        </Toast>
         <form style={styles.form} onSubmit={this.onSubmit}>
           <TextField
             name="title"

src/components/Tasks/TaskEdit.tsx

@@ -28,6 +28,7 @@ import DateTimePicker from '../../widgets/DateTimePicker';
 
 import ConfirmationDialog from '../../widgets/ConfirmationDialog';
 import TimezonePicker from '../../widgets/TimezonePicker';
+import Toast from '../../widgets/Toast';
 
 import { Location } from 'history';
 import { withRouter } from 'react-router';
@@ -127,6 +128,7 @@ class TaskEdit extends React.PureComponent<PropsType> {
     this.handleInputChange = this.handleInputChange.bind(this);
     this.toggleTime = this.toggleTime.bind(this);
     this.onDeleteRequest = this.onDeleteRequest.bind(this);
+    this.handleCloseToast = this.handleCloseToast.bind(this);
   }
 
   public UNSAFE_componentWillReceiveProps(nextProps: any) {
@@ -161,6 +163,14 @@ class TaskEdit extends React.PureComponent<PropsType> {
     this.setState({ includeTime: !this.state.includeTime });
   }
 
+  public handleCloseToast(_event?: React.SyntheticEvent, reason?: string) {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    this.setState({ error: '' });
+  }
+
   public onSubmit(e: React.FormEvent<any>) {
     e.preventDefault();
 
@@ -265,9 +275,9 @@ class TaskEdit extends React.PureComponent<PropsType> {
             (by editing the first instance) is supported.
           </div>
         )}
-        {this.state.error && (
-          <div>ERROR! {this.state.error}</div>
-        )}
+        <Toast open={!!this.state.error} onClose={this.handleCloseToast}>
+          ERROR! {this.state.error}
+        </Toast>
         <form style={styles.form} onSubmit={this.onSubmit}>
           <TextField
             name="title"

src/widgets/Toast.tsx

@@ -0,0 +1,25 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from 'react';
+
+import Snackbar from '@material-ui/core/Snackbar';
+import Alert from '@material-ui/lab/Alert';
+
+interface PropsType {
+  open: boolean;
+  children: React.ReactNode;
+  onClose?: (event?: React.SyntheticEvent, reason?: string) => void;
+}
+
+export default function Toast(props: PropsType) {
+  const { open, children, onClose } = props;
+
+  return (
+    <Snackbar open={open} onClose={onClose}>
+      <Alert severity="error" variant="filled" elevation={6} onClose={onClose}>
+        {children}
+      </Alert>
+    </Snackbar>
+  );
+}