Almost finished implementing guestbook; More consistency in cards

2 files changed, 105 insertions, 0 deletions

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;
diff --git a/src/components/GuestbookForm.jsx b/src/components/GuestbookForm.jsx
new file mode 100644
index 0000000..aae5e10
--- /dev/null
+++ b/src/components/GuestbookForm.jsx
@@ -0,0 +1,56 @@
+import { h, Component } from 'preact';
+import { createMessage } from '../services/GuestbookService';
+
+class GuestbookForm extends Component {
+    state = {
+        name: '',
+        email: '',
+        website: '',
+        message: ''
+    };
+
+    handleChange = (e) => {
+        this.setState({ [e.target.name]: e.target.value });
+    }
+
+    handleSubmit = async (e) => {
+        e.preventDefault();
+        await createMessage(this.state);
+        this.setState({
+            name: '',
+            email: '',
+            website: '',
+            message: ''
+        });
+    }
+
+    render() {
+        return (
+            <form class="card" onSubmit={this.handleSubmit}>
+                <h2>Submit Message</h2>
+                <label>
+                    Name<br />
+                    <input type="text" name="name" placeholder="Name" required value={this.state.name} onChange={this.handleChange} />
+                </label>
+                <br />
+                <label>
+                    Email Address<br />
+                    <input type="email" name="email" placeholder="Email Address (optional)" value={this.state.email} onChange={this.handleChange} />
+                </label>
+                <br />
+                <label>
+                    Your Website<br />
+                    <input type="url" name="website" placeholder="https://example.com (optional)" value={this.state.website} onChange={this.handleChange} />
+                </label>
+                <br />
+                <label>
+                    Message<br />
+                    <textarea name="message" placeholder="Message (Up to 1000 characters)" required value={this.state.message} onChange={this.handleChange}></textarea>
+                </label>
+                <button type="submit">Send</button>
+            </form>
+        );
+    }
+}
+
+export default GuestbookForm;