Guestbook refreshes once submitting a message

5 files changed, 41 insertions, 35 deletions

diff --git a/src/components/Guestbook.jsx b/src/components/Guestbook.jsx
index 498bbbe..41d0271 100644
--- a/src/components/Guestbook.jsx
+++ b/src/components/Guestbook.jsx
@@ -2,6 +2,7 @@ import { h, Component } from 'preact';
 import { pb } from '../services/pocketbase';
 import { formatDate } from "../util";
 import sanitizeHtml from 'sanitize-html';
+import GuestbookForm from "./GuestbookForm.jsx";
 
 class Guestbook extends Component {
     state = {
@@ -25,29 +26,32 @@ class Guestbook extends Component {
         await this.fetchMessages();
     }
 
+    refresh = async () => {
+        await this.fetchMessages();
+    }
+
     render() {
         const { message, error } = this.state;
 
-        if (error) {
-            return <p>{error}</p>;
-        }
-
-        if (!message) {
-            return <p>Loading messages...</p>;
-        }
-
         return (
             <div>
-                <div class="grid">
-                    {message.map((g) => (
-                        <article class="card">
-                            <h1>Message from: {g.name}</h1>
-                            <small>{formatDate(g.created)}</small>
-                            <div dangerouslySetInnerHTML={{__html: sanitizeHtml(g.message)}}/>
-                            {g.website && <a href={g.website}>Website</a>}
-                        </article>
-                    ))}
-                </div>
+                <GuestbookForm onMessageSent={this.refresh} />
+                {error ? (
+                    <p>{error}</p>
+                ) : !message ? (
+                    <p>Loading messages...</p>
+                ) : (
+                    <div class="grid">
+                        {message.map((g) => (
+                            <article class="card">
+                                <h1>Message from: {g.name}</h1>
+                                <small>{formatDate(g.created)}</small>
+                                <div dangerouslySetInnerHTML={{__html: sanitizeHtml(g.message)}}/>
+                                {g.website && <a href={g.website}>Website</a>}
+                            </article>
+                        ))}
+                    </div>
+                )}
             </div>
         );
     }
diff --git a/src/components/GuestbookForm.jsx b/src/components/GuestbookForm.jsx
index b8fc1c2..841902d 100644
--- a/src/components/GuestbookForm.jsx
+++ b/src/components/GuestbookForm.jsx
@@ -25,19 +25,18 @@ class GuestbookForm extends Component {
         }
 
         const messageHtml = marked(DOMPurify.sanitize(this.state.message));
-        try {
-            await createMessage({ ...this.state, message: messageHtml });
+        await createMessage({ ...this.state, message: messageHtml });
 
-            this.setState({
-                name: '',
-                email: '',
-                website: '',
-                message: '',
-                isMessageSent: true,
-                errorMessage: ''
-            });
-        } catch (error) {
-            this.setState({ errorMessage: error.message });
+        this.setState({
+            name: '',
+            email: '',
+            website: '',
+            message: '',
+            isMessageSent: true,
+        });
+
+        if (this.props.onMessageSent) {
+            this.props.onMessageSent();
         }
     }
 
@@ -47,7 +46,7 @@ class GuestbookForm extends Component {
                 <form onSubmit={this.handleSubmit}>
                     <h2>Submit Message</h2>
                     <label>Name</label>
-                    <input type="text" name="name" placeholder="Name" required value={this.state.name}
+                    <input type="text" name="name" placeholder="John Doe" required value={this.state.name}
                            onChange={this.handleChange}/>
                     <label>Email Address</label>
                     <input type="email" name="email" placeholder="hello@example.com (optional)" value={this.state.email}
@@ -56,7 +55,7 @@ class GuestbookForm extends Component {
                     <input type="url" name="website" placeholder="https://example.com (optional)"
                            value={this.state.website} onChange={this.handleChange}/>
                     <label>Message (Supports Markdown)</label>
-                    <textarea name="message" placeholder="Message" required value={this.state.message}
+                    <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>
diff --git a/src/pages/guestbook.astro b/src/pages/guestbook.astro
index 661dff2..9f6ad34 100644
--- a/src/pages/guestbook.astro
+++ b/src/pages/guestbook.astro
@@ -1,7 +1,6 @@
 ---
 import Page from '../layouts/Page.astro'
 import "../styles/cards.css";
-import GuestbookForm from '../components/GuestbookForm'
 import Guestbook from '../components/Guestbook'
 ---
 <Page title="Guestbook" description="Use this page to send me a message">
@@ -10,7 +9,6 @@ import Guestbook from '../components/Guestbook'
             <h2>Welcome to my Guestbook!</h2>
             <p>Feel free to send a nice message here!</p>
         </div>
-        <GuestbookForm client:visible />
         <Guestbook client:visible />
     </main>
 </Page>
diff --git a/src/styles/GuestbookForm.css b/src/styles/GuestbookForm.css
index fa31429..e540d42 100644
--- a/src/styles/GuestbookForm.css
+++ b/src/styles/GuestbookForm.css
@@ -15,6 +15,7 @@
 
 .card form textarea[name="message"] {
     height: 200px;
+    resize: none;
 }
 
 .card form button {
@@ -31,6 +32,10 @@
     transition: ease-in-out 0.2s;
 }
 
+.card form button:active {
+    background-color: #243824;
+}
+
 .card form label {
     display: block;
 }
diff --git a/src/styles/cards.css b/src/styles/cards.css
index 67a618c..12e5a3f 100644
--- a/src/styles/cards.css
+++ b/src/styles/cards.css
@@ -27,7 +27,7 @@
 
 /* Mobile view */
 @media (max-width: 992px) {
-    main {
+    .grid {
         grid-template-columns: 1fr;
     }
 }