Guestbook refreshes once submitting a message

1 files changed, 22 insertions, 18 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>
         );
     }