Using supabase as the main db

7 files changed, 48 insertions, 18 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>
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: '',
diff --git a/src/env.d.ts b/src/env.d.ts
index acef35f..1381ce5 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1,2 +1,13 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+declare module 'sanitize-html';
+declare module 'dompurify';
+
+interface ImportMetaEnv {
+    readonly PUBLIC_SUPABASE_URL: string
+    readonly PUBLIC_SUPABASE_ANON_KEY: string
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv
+}
diff --git a/src/services/GuestbookService.js b/src/services/GuestbookService.js
index 53376d7..f821c82 100644
--- a/src/services/GuestbookService.js
+++ b/src/services/GuestbookService.js
@@ -1,8 +1,18 @@
-import { pb } from './pocketbase'
+import { supabase } from "./supabase";
 
 export async function createMessage(data) {
     try {
-        return await pb.collection('guestbook').create(data);
+        const { data: insertedData, error } = await supabase
+            .from('guestbook')
+            .insert([data])
+            .select();
+
+        if (error) {
+            console.error(error);
+            throw error;
+        }
+
+        return insertedData;
     } catch (error) {
         console.error(error);
         throw error;
diff --git a/src/services/pocketbase.js b/src/services/pocketbase.js
deleted file mode 100644
index f45d15a..0000000
--- a/src/services/pocketbase.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import PocketBase from 'pocketbase';
-export const pb = new PocketBase('https://pocketbase.alee14.me');
diff --git a/src/services/supabase.ts b/src/services/supabase.ts
new file mode 100644
index 0000000..a2a9df1
--- /dev/null
+++ b/src/services/supabase.ts
@@ -0,0 +1,6 @@
+import { createClient } from "@supabase/supabase-js";
+
+export const supabase = createClient(
+    import.meta.env.PUBLIC_SUPABASE_URL,
+    import.meta.env.PUBLIC_SUPABASE_ANON_KEY,
+);
diff --git a/src/util.ts b/src/util.ts
index 81a1e18..0c1cecc 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -1,5 +1,5 @@
 // Format date to a string
-function formatDate(date: Date): string {
+function formatDate(date: string): string {
     const options: Intl.DateTimeFormatOptions = {
         year: 'numeric',
         month: 'long',
@@ -12,4 +12,4 @@ function formatDate(date: Date): string {
     return new Date(date).toLocaleDateString(undefined, options);
 }
 
-export { formatDate }
+export { formatDate };