diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/GuestbookForm.jsx | 39 | ||||
| -rw-r--r-- | src/layouts/Default.astro | 3 | ||||
| -rw-r--r-- | src/services/GuestbookService.js | 1 | ||||
| -rw-r--r-- | src/styles/GuestbookForm.css | 8 |
4 files changed, 28 insertions, 23 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> ); diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro index 4f3c87a..72851a4 100644 --- a/src/layouts/Default.astro +++ b/src/layouts/Default.astro @@ -43,8 +43,7 @@ const date = new Date(); <slot /> <footer> <p>Made with {Astro.generator} and Hosted on Vercel</p> - <p>Copyright © {date.getFullYear()} Andrew Lee</p> - <p><a href="https://github.com/Alee14/personal-website">View source code.</a></p> + <p>Copyright © {date.getFullYear()} Andrew Lee. <a href="https://github.com/Alee14/personal-website">View source code.</a></p> </footer> </div> </body> diff --git a/src/services/GuestbookService.js b/src/services/GuestbookService.js index eebb8e5..53376d7 100644 --- a/src/services/GuestbookService.js +++ b/src/services/GuestbookService.js @@ -5,5 +5,6 @@ export async function createMessage(data) { return await pb.collection('guestbook').create(data); } catch (error) { console.error(error); + throw error; } } diff --git a/src/styles/GuestbookForm.css b/src/styles/GuestbookForm.css index e540d42..42a5f8f 100644 --- a/src/styles/GuestbookForm.css +++ b/src/styles/GuestbookForm.css @@ -8,9 +8,9 @@ .card form textarea { padding: 10px; border-radius: 5px; - background: #2c2c2c; + background: #253625; color: #FFFFFF; - border: 1px solid #4b4b4b; + border: 1px solid #253625; } .card form textarea[name="message"] { @@ -35,7 +35,3 @@ .card form button:active { background-color: #243824; } - -.card form label { - display: block; -} |