From 71093a4c88ed41bd51a3387f1e91c7ee05f2203c Mon Sep 17 00:00:00 2001
From: Andrew Lee <alee14498@protonmail.com>
Date: Sun, 4 Feb 2024 12:30:02 -0500
Subject: Almost finished implementing guestbook; More consistency in cards

---
 src/components/Guestbook.jsx | 49 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 src/components/Guestbook.jsx

(limited to 'src/components/Guestbook.jsx')

diff --git a/src/components/Guestbook.jsx b/src/components/Guestbook.jsx
new file mode 100644
index 0000000..91e2a0f
--- /dev/null
+++ b/src/components/Guestbook.jsx
@@ -0,0 +1,49 @@
+import { h, Component } from 'preact';
+import { pb } from '../services/pocketbase';
+import { formatDate } from "../util";
+
+class Guestbook extends Component {
+    state = {
+        message: null,
+        error: null
+    };
+
+    async componentDidMount() {
+        try {
+            const message = await pb.collection('guestbook').getFullList({
+                sort: '-created',
+            });
+            this.setState({ message });
+        } catch (error) {
+            this.setState({ error: `Failed to fetch data: ${error.message}` });
+            console.error('Failed to fetch data:', error);
+        }
+    }
+
+    render() {
+        const { message, error } = this.state;
+
+        if (error) {
+            return <p>{error}</p>;
+        }
+
+        if (!message) {
+            return <p>Loading messages...</p>;
+        }
+
+        return (
+            <div>
+                {message.map((g) => (
+                    <article class="card">
+                        <h1>Message from: {g.name}</h1>
+                        <small>{formatDate(g.created)}</small>
+                        <p>{g.message}</p>
+                        {g.website && <a href={g.website}>Website</a>}
+                    </article>
+                ))}
+            </div>
+        );
+    }
+}
+
+export default Guestbook;
-- 
cgit v1.2.3