From 7a42ff04d8175b7f15f048a6272942d1c2702cb5 Mon Sep 17 00:00:00 2001
From: Andrew P Maney <amaney@usc.edu>
Date: Tue, 31 Mar 2020 13:09:15 -0700
Subject: [PATCH] UI: pretty error messages

Add Toast component for displaying error messages in a more prominent way
---
 src/components/EventEdit.tsx      | 17 ++++++++++++++---
 src/components/Tasks/TaskEdit.tsx | 16 +++++++++++++---
 src/widgets/Toast.tsx             | 25 +++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 6 deletions(-)
 create mode 100644 src/widgets/Toast.tsx

diff --git a/src/components/EventEdit.tsx b/src/components/EventEdit.tsx
index b8d1f2d..397dbc5 100644
--- a/src/components/EventEdit.tsx
+++ b/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"
diff --git a/src/components/Tasks/TaskEdit.tsx b/src/components/Tasks/TaskEdit.tsx
index 5b09f85..75c2407 100644
--- a/src/components/Tasks/TaskEdit.tsx
+++ b/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"
diff --git a/src/widgets/Toast.tsx b/src/widgets/Toast.tsx
new file mode 100644
index 0000000..61221e1
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file