Using supabase as the main db

1 files changed, 15 insertions, 11 deletions

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>