Proper error handling and css tweak for guestbooks

1 files changed, 24 insertions, 15 deletions

diff --git a/src/components/GuestbookForm.jsx b/src/components/GuestbookForm.jsx
index 841902d..26e32b1 100644
--- a/src/components/GuestbookForm.jsx
+++ b/src/components/GuestbookForm.jsx
@@ -24,19 +24,27 @@ class GuestbookForm extends Component {
             return;
         }
 
-        const messageHtml = marked(DOMPurify.sanitize(this.state.message));
-        await createMessage({ ...this.state, message: messageHtml });
+        try {
+            const messageHtml = marked(DOMPurify.sanitize(this.state.message));
+            await createMessage({ ...this.state, message: messageHtml });
 
-        this.setState({
-            name: '',
-            email: '',
-            website: '',
-            message: '',
-            isMessageSent: true,
-        });
+            this.setState({
+                name: '',
+                email: '',
+                website: '',
+                message: '',
+                isMessageSent: true,
+                errorMessage: '',
+            });
 
-        if (this.props.onMessageSent) {
-            this.props.onMessageSent();
+            if (this.props.onMessageSent) {
+                this.props.onMessageSent();
+            }
+        } catch (error) {
+            this.setState({
+                errorMessage: `There was an error submitting your message.<br>Details: ${error}<br>Check the console for more details.`,
+                isMessageSent: false,
+            });
         }
     }
 
@@ -45,20 +53,21 @@ class GuestbookForm extends Component {
             <div class="card">
                 <form onSubmit={this.handleSubmit}>
                     <h2>Submit Message</h2>
-                    <label>Name</label>
+                    <label for="name">Name</label>
                     <input type="text" name="name" placeholder="John Doe" required value={this.state.name}
                            onChange={this.handleChange}/>
-                    <label>Email Address</label>
+                    <label for="email">Email Address</label>
                     <input type="email" name="email" placeholder="hello@example.com (optional)" value={this.state.email}
                            onChange={this.handleChange}/>
-                    <label>Your Website</label>
+                    <label for="website">Your Website</label>
                     <input type="url" name="website" placeholder="https://example.com (optional)"
                            value={this.state.website} onChange={this.handleChange}/>
-                    <label>Message (Supports Markdown)</label>
+                    <label for="message">Message (Supports Markdown)</label>
                     <textarea name="message" placeholder="This is a **message**. I can *do* this, and __this__." required value={this.state.message}
                               onChange={this.handleChange}></textarea>
                     <button type="submit">Send</button>
                 </form>
+                {this.state.errorMessage && <p dangerouslySetInnerHTML={{ __html: this.state.errorMessage }} />}
                 {this.state.isMessageSent && <p>Sent successfully!</p>}
             </div>
         );