diff options
| -rwxr-xr-x | bun.lockb | bin | 275294 -> 280702 bytes | |||
| -rw-r--r-- | package.json | 8 | ||||
| -rw-r--r-- | src/components/Guestbook.jsx | 26 | ||||
| -rw-r--r-- | src/components/GuestbookForm.jsx | 3 | ||||
| -rw-r--r-- | src/env.d.ts | 11 | ||||
| -rw-r--r-- | src/services/GuestbookService.js | 14 | ||||
| -rw-r--r-- | src/services/pocketbase.js | 2 | ||||
| -rw-r--r-- | src/services/supabase.ts | 6 | ||||
| -rw-r--r-- | src/util.ts | 4 |
9 files changed, 52 insertions, 22 deletions
| Binary files differ diff --git a/package.json b/package.json index 89e4038..f7a01a7 100644 --- a/package.json +++ b/package.json @@ -11,15 +11,15 @@ }, "dependencies": { "@astrojs/preact": "^3.1.0", - "@astrojs/rss": "4.0.4", - "@astrojs/vercel": "7.1.1", + "@astrojs/rss": "4.0.5", + "@astrojs/vercel": "7.3.0", "@iconify-json/fa6-brands": "^1.1.18", - "astro": "4.3.2", + "@supabase/supabase-js": "^2.39.3", + "astro": "4.3.5", "astro-icon": "^1.0.2", "dompurify": "^3.0.8", "markdown-it": "^14.0.0", "marked": "^12.0.0", - "pocketbase": "^0.21.1", "preact": "^10.19.3", "sanitize-html": "^2.11.0" } 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 }; |