From b21f48d0a0b3c6d32b8eb9a3b5c84f8ff3dbc136 Mon Sep 17 00:00:00 2001
From: Andrew Lee <alee14498@protonmail.com>
Date: Wed, 7 Feb 2024 18:06:04 -0500
Subject: Using supabase as the main db

---
 src/components/Guestbook.jsx     | 26 +++++++++++++++-----------
 src/components/GuestbookForm.jsx |  3 ++-
 2 files changed, 17 insertions(+), 12 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Guestbook.jsx b/src/components/Guestbook.jsx
index f839848..caa092a 100644
--- a/src/components/Guestbook.jsx
+++ b/src/components/Guestbook.jsx
@@ -1,5 +1,5 @@
 import { h, Component } from 'preact';
-import { pb } from '../services/pocketbase';
+import { supabase } from '../services/supabase';
 import { formatDate } from "../util";
 import sanitizeHtml from 'sanitize-html';
 import GuestbookForm from "./GuestbookForm.jsx";
@@ -13,18 +13,22 @@ class Guestbook extends Component {
 
     fetchMessages = async (page) => {
         const perPage = 10;
+        const start = (page - 1) * perPage;
+        const end = start + perPage - 1;
 
-        try {
-            const result = await pb.collection('guestbook').getList(page, perPage, {
-                sort: '-created',
-            });
-            this.setState({
-                message: result.items,
-                totalPages: result.totalPages
-            });
-        } catch (error) {
+        let { data: messages, error } = await supabase
+            .from('guestbook')
+            .select('*')
+            .range(start, end)
+            .order('created_at', { ascending: false });
+        if (error) {
             this.setState({ error: `Failed to fetch data: ${error.message}` });
             console.error('Failed to fetch data:', error);
+        } else {
+            this.setState({
+                message: messages,
+                totalPages: Math.ceil(messages.length / perPage)
+            });
         }
     }
 
@@ -66,7 +70,7 @@ class Guestbook extends Component {
                         {message.map((g) => (
                             <article class="card">
                                 <h1>Message from: {g.name}</h1>
-                                <small>{formatDate(g.created)}</small>
+                                <small>{formatDate(g.created_at)}</small>
                                 <div dangerouslySetInnerHTML={{__html: sanitizeHtml(g.message)}}/>
                                 {g.website && <a href={g.website} target="_blank">Website</a>}
                             </article>
diff --git a/src/components/GuestbookForm.jsx b/src/components/GuestbookForm.jsx
index 8573b5c..d0fcbce 100644
--- a/src/components/GuestbookForm.jsx
+++ b/src/components/GuestbookForm.jsx
@@ -38,7 +38,8 @@ class GuestbookForm extends Component {
 
         try {
             const messageHtml = marked(DOMPurify.sanitize(this.state.message));
-            await createMessage({ ...this.state, message: messageHtml });
+            const { isMessageSent, errorMessage, ...messageData } = this.state; // Exclude isMessageSent from the data
+            await createMessage({ ...messageData, message: messageHtml });
 
             this.setState({
                 name: '',
-- 
cgit v1.2.3