Guestbook refreshes once submitting a message

2 files changed, 35 insertions, 32 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>