From f5efedcaf7ff2ad509304a6f44771d2bac2001fc Mon Sep 17 00:00:00 2001
From: Andrew Lee <alee14498@protonmail.com>
Date: Sun, 4 Feb 2024 20:40:26 -0500
Subject: Proper error handling and css tweak for guestbooks

---
 src/components/GuestbookForm.jsx | 39 ++++++++++++++++++++++++---------------
 src/layouts/Default.astro        |  3 +--
 src/services/GuestbookService.js |  1 +
 src/styles/GuestbookForm.css     |  8 ++------
 4 files changed, 28 insertions(+), 23 deletions(-)

(limited to 'src')

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 &copy; {date.getFullYear()} Andrew Lee</p>
-			<p><a href="https://github.com/Alee14/personal-website">View source code.</a></p>
+			<p>Copyright &copy; {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;
-}
-- 
cgit v1.2.3