From 64cd7fc83d43a0ad7db1b51214291736bd245b44 Mon Sep 17 00:00:00 2001
From: Andrew Lee <alee14498@protonmail.com>
Date: Fri, 28 Jun 2024 20:31:02 -0400
Subject: Guestbook overhaul; Comments; New post; Updated packages

---
 src/components/Guestbook.jsx | 61 ++++++++++++++++++++++++--------------------
 1 file changed, 33 insertions(+), 28 deletions(-)

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

diff --git a/src/components/Guestbook.jsx b/src/components/Guestbook.jsx
index 584a4eb..e3238f9 100644
--- a/src/components/Guestbook.jsx
+++ b/src/components/Guestbook.jsx
@@ -1,5 +1,4 @@
 import { Component } from 'preact';
-import { supabase } from '../services/supabase';
 import { formatDate } from "../util";
 import sanitizeHtml from 'sanitize-html';
 import GuestbookForm from "./GuestbookForm.jsx";
@@ -12,23 +11,27 @@ class Guestbook extends Component {
     };
 
     fetchMessages = async (page) => {
-        const perPage = 10;
-        const start = (page - 1) * perPage;
-        const end = start + perPage - 1;
+        try {
+            const response = await fetch(`${import.meta.env.PUBLIC_API_URL}/guestbook?page=${page}`);
+
+            if (!response.ok) {
+                const errorData = await response.json();
+                this.setState({ error: `Failed to fetch data: ${errorData.message}` });
+                console.error('Failed to fetch data:', errorData.message);
+                return;
+            }
+
+            const { messages, totalPages } = await response.json();
 
-        let { data: messages, error, count } = await supabase
-            .from('guestbook')
-            .select('*', { count: 'exact' })
-            .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(count / perPage)
+                totalPages: totalPages,
+                error: null // clear any previous error
             });
+
+        } catch (error) {
+            this.setState({ error: `Failed to fetch data: ${error.message}` });
+            console.error('Failed to fetch data:', error);
         }
     }
 
@@ -63,22 +66,24 @@ class Guestbook extends Component {
                 <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_at)}</small>
-                                <div dangerouslySetInnerHTML={{__html: sanitizeHtml(g.message)}}/>
-                                {g.website && <a href={g.website} target="_blank">My Website</a>}
-                            </article>
-                        ))}
+                ) : message ? (
+                    <div>
+                        <div className="grid">
+                            {message.map((g) => (
+                                <article className="card">
+                                    <h1>Message from: {g.name}</h1>
+                                    <small>{formatDate(g.created_at)}</small>
+                                    <div dangerouslySetInnerHTML={{__html: sanitizeHtml(g.message)}}/>
+                                    {g.website && <a href={g.website} target="_blank">My Website</a>}
+                                </article>
+                            ))}
+                        </div>
+                        {page > 1 && <button class="button margin" onClick={this.handlePrevious}>Previous</button>}
+                        {page < totalPages && <button class="button margin" onClick={this.handleNext}>Next</button>}
                     </div>
+                ) : (
+                    <p>Loading messages...</p>
                 )}
-                {page > 1 && <button class="button margin" onClick={this.handlePrevious}>Previous</button>}
-                {page < totalPages && <button class="button margin" onClick={this.handleNext}>Next</button>}
             </div>
         );
     }
-- 
cgit v1.2.3