From 64cd7fc83d43a0ad7db1b51214291736bd245b44 Mon Sep 17 00:00:00 2001 From: Andrew Lee Date: Fri, 28 Jun 2024 20:31:02 -0400 Subject: Guestbook overhaul; Comments; New post; Updated packages --- src/components/BlogComments.jsx | 89 +++++++++++++++++++++++++ src/components/BlogCommentsForm.jsx | 124 +++++++++++++++++++++++++++++++++++ src/components/GitHubProjects.jsx | 86 ------------------------ src/components/GitHubProjects.svelte | 81 +++++++++++++++++++++++ src/components/Guestbook.jsx | 61 +++++++++-------- src/components/GuestbookForm.jsx | 74 ++++++++++++++++----- src/components/Navbar.jsx | 2 +- 7 files changed, 387 insertions(+), 130 deletions(-) create mode 100644 src/components/BlogComments.jsx create mode 100644 src/components/BlogCommentsForm.jsx delete mode 100644 src/components/GitHubProjects.jsx create mode 100644 src/components/GitHubProjects.svelte (limited to 'src/components') diff --git a/src/components/BlogComments.jsx b/src/components/BlogComments.jsx new file mode 100644 index 0000000..183fb94 --- /dev/null +++ b/src/components/BlogComments.jsx @@ -0,0 +1,89 @@ +import { Component } from 'preact'; +import { formatDate } from "../util"; +import sanitizeHtml from 'sanitize-html'; +import BlogCommentsForm from "./BlogCommentsForm.jsx"; + +class BlogComments extends Component { + state = { + message: null, + error: null, + page: 1, + }; + + fetchMessages = async (page) => { + try { + const response = await fetch(`${import.meta.env.PUBLIC_API_URL}/comments/${this.props.slug}?page=${page}`); + + if (!response.ok) { + const errorData = await response.json(); + this.setState({ error: errorData.message }); + console.error('Failed to fetch data:', errorData.message); + return; + } + + const { messages, totalPages } = await response.json(); + + this.setState({ + message: messages, + totalPages: totalPages, + error: null // clear any previous error + }); + + } catch (error) { + this.setState({ error: `${error.message}` }); + console.error('Failed to fetch data:', error); + } + } + + refresh = async () => { + await this.fetchMessages(this.state.page); + } + + async componentDidMount() { + await this.fetchMessages(this.state.page); + } + + handleNext = async () => { + const nextPage = this.state.page + 1; + if (nextPage > this.state.totalPages) { + return; + } + this.setState({ page: nextPage }); + await this.fetchMessages(nextPage); + } + + handlePrevious = async () => { + const previousPage = this.state.page - 1; + this.setState({ page: previousPage }); + await this.fetchMessages(previousPage); + } + + render() { + const { message, error, page, totalPages } = this.state; + + return ( +
+ + {error ? ( +

{error}

+ ) : message ? ( +
+ {message.map((g) => ( +
+

{g.author}

+
+ {formatDate(g.created_at)} +
+ ))} + {page > 1 && } + {page < totalPages && } +
+ ) : ( +

Loading comments...

+ )} +
+ ); + } +} + +export default BlogComments; diff --git a/src/components/BlogCommentsForm.jsx b/src/components/BlogCommentsForm.jsx new file mode 100644 index 0000000..b48236e --- /dev/null +++ b/src/components/BlogCommentsForm.jsx @@ -0,0 +1,124 @@ +import { Component } from 'preact'; +import '../styles/Form.css'; +import { marked } from "marked"; +import DOMPurify from 'dompurify'; + +class BlogCommentsForm extends Component { + state = { + author: '', + comment: '', + isMessageSent: false, + commentId: '' + }; + + componentDidMount() { + // Ensure the Turnstile script is loaded with explicit rendering + const script = document.createElement('script'); + script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit&onload=onloadTurnstileCallback'; + script.defer = true; + document.body.appendChild(script); + + // Callback function to handle Turnstile token + window.onloadTurnstileCallback = () => { + window.turnstile.render('#turnstile-container', { + sitekey: '0x4AAAAAAAdb4uvxFFzNEDxB', + callback: (token) => { + // Here you can handle the token, e.g., by storing it in a hidden form field + this.setState({turnstileToken: token}); + }, + }); + }; + + // Cleanup function to remove the script when the component unmounts + return () => { + document.body.removeChild(script); + }; + } + + handleChange = (e) => { + this.setState({ [e.target.name]: e.target.value }); + } + + handleSubmit = async (e) => { + e.preventDefault(); + + if (this.state.isMessageSent) { + this.setState({ + errorMessage: 'You have already sent a comment.', + }); + return; + } + + try { + const messageHtml = marked(DOMPurify.sanitize(this.state.comment)); + const { isMessageSent, errorMessage, ...messageData } = this.state; // Exclude isMessageSent from the data + + const response = await fetch(`${import.meta.env.PUBLIC_API_URL}/comments/${this.props.slug}`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ ...messageData, comment: messageHtml }), + }); + + if (!response.ok) { + const errorBody = await response.json(); + const errorMessage = `HTTP Error ${response.status}: ${response.statusText}
${errorBody.message}`; + + this.setState({ + errorMessage: `There was an error submitting your comment.
Details:
${errorMessage}`, + isMessageSent: false, + }); + return; + } + + const responseBody = await response.json(); + + this.setState({ + author: '', + comment: '', + isMessageSent: true, + errorMessage: '', + commentId: responseBody.id, + }); + + if (this.props.onMessageSent) { + this.props.onMessageSent(); + } + } catch (error) { + this.setState({ + errorMessage: `There was an error submitting your message.
Details:
${error.message}
Check the console for more details.`, + isMessageSent: false, + }); + } + } + + render() { + return ( +
+
+

Submit Comment

+ + + + +
+ +
+ {this.state.errorMessage &&

} + {this.state.isMessageSent && !this.state.errorMessage && +

+

Sent successfully!

+

(Optional)

+

Save this message ID: {this.state.commentId}

+

Then send it to me, to verify that you sent this comment.

+

Email me or tag/message me on these platforms.

+
+ } +
+ ); + } +} + +export default BlogCommentsForm; diff --git a/src/components/GitHubProjects.jsx b/src/components/GitHubProjects.jsx deleted file mode 100644 index 33b4e64..0000000 --- a/src/components/GitHubProjects.jsx +++ /dev/null @@ -1,86 +0,0 @@ -import { useState, useEffect } from 'preact/hooks'; - -const GitHubProjects = ({ username, isOrganization }) => { - const [repos, setRepos] = useState([]); - const [error, setError] = useState(null); - const [isLoading, setIsLoading] = useState(true); - const [currentPage, setCurrentPage] = useState(1); - const reposPerPage = 10; - - const fetchRepos = async (page = 1, allRepos = []) => { - const baseUrl = 'https://api.github.com'; - const url = isOrganization - ? `${baseUrl}/orgs/${username}/repos?page=${page}&per_page=100` - : `${baseUrl}/users/${username}/repos?page=${page}&per_page=100`; - - try { - const response = await fetch(url); - const data = await response.json(); - - if (response.ok) { - if (Array.isArray(data)) { - allRepos = allRepos.concat(data.filter(repo => !repo.fork)); - // If the data length is 100, there might be more repositories to fetch - if (data.length === 100) { - return fetchRepos(page + 1, allRepos); - } - } else { - console.error('Unexpected data format:', data); - setError('Unexpected data format'); - setRepos([]); - } - } else { - console.error('API error:', data); - setError(data.message); - setRepos([]); - } - } catch (err) { - console.error('Failed to fetch projects:', err); - setError(err.message); - setRepos([]); - } - - setIsLoading(false); - return allRepos; - }; - - useEffect(() => { - fetchRepos().then(setRepos); - }, [username, isOrganization]); - - const indexOfLastRepo = currentPage * reposPerPage; - const indexOfFirstRepo = indexOfLastRepo - reposPerPage; - const currentRepos = repos.slice(indexOfFirstRepo, indexOfLastRepo); - - const nextPage = () => setCurrentPage(currentPage + 1); - const prevPage = () => setCurrentPage(currentPage - 1); - - return ( -
- {isLoading ? ( -
Loading...
- ) : ( - <> - {error &&
{error}
} -
- {currentRepos.map((repo) => ( -
-

{repo.name}

-

{repo.description}

-
- Repository -
-
- ))} -
-
- {currentPage > 1 && } - {currentPage < Math.ceil(repos.length / reposPerPage) && } -
- - )} -
- ); -}; - -export default GitHubProjects; diff --git a/src/components/GitHubProjects.svelte b/src/components/GitHubProjects.svelte new file mode 100644 index 0000000..2753b89 --- /dev/null +++ b/src/components/GitHubProjects.svelte @@ -0,0 +1,81 @@ + + +
+ {#if isLoading} +
Loading...
+ {:else} + {#if error} +
{error}
+ {:else} +
+ {#each repos.slice((currentPage - 1) * reposPerPage, currentPage * reposPerPage) as repo (repo.id)} +
+

{repo.name}

+

{repo.description || 'No description provided'}

+
+ Repository +
+
+ {/each} +
+ {#if currentPage > 1} + + {/if} + {#if currentPage < Math.ceil(repos.length / reposPerPage)} + + {/if} + {/if} + {/if} +
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 { {error ? (

{error}

- ) : !message ? ( -

Loading messages...

- ) : ( -
- {message.map((g) => ( -
-

Message from: {g.name}

- {formatDate(g.created_at)} -
- {g.website && My Website} -
- ))} + ) : message ? ( +
+
+ {message.map((g) => ( +
+

Message from: {g.name}

+ {formatDate(g.created_at)} +
+ {g.website && My Website} +
+ ))} +
+ {page > 1 && } + {page < totalPages && }
+ ) : ( +

Loading messages...

)} - {page > 1 && } - {page < totalPages && }
); } diff --git a/src/components/GuestbookForm.jsx b/src/components/GuestbookForm.jsx index 613c9d3..1f1d3c9 100644 --- a/src/components/GuestbookForm.jsx +++ b/src/components/GuestbookForm.jsx @@ -1,6 +1,5 @@ import { Component } from 'preact'; -import { createMessage } from '../services/GuestbookService'; -import '../styles/GuestbookForm.css'; +import '../styles/Form.css'; import { marked } from "marked"; import DOMPurify from 'dompurify'; @@ -10,8 +9,33 @@ class GuestbookForm extends Component { website: '', message: '', isMessageSent: false, + messageId: '' }; + componentDidMount() { + // Ensure the Turnstile script is loaded with explicit rendering + const script = document.createElement('script'); + script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit&onload=onloadTurnstileCallback'; + script.defer = true; + document.body.appendChild(script); + + // Callback function to handle Turnstile token + window.onloadTurnstileCallback = () => { + window.turnstile.render('#turnstile-container', { + sitekey: '0x4AAAAAAAdb4uvxFFzNEDxB', + callback: (token) => { + // Here you can handle the token, e.g., by storing it in a hidden form field + this.setState({turnstileToken: token}); + }, + }); + }; + + // Cleanup function to remove the script when the component unmounts + return () => { + document.body.removeChild(script); + }; + } + handleChange = (e) => { this.setState({ [e.target.name]: e.target.value }); } @@ -26,20 +50,30 @@ class GuestbookForm extends Component { return; } - const urlRegex = /(https?:\/\/\S+)/g; - const imageRegex = /!\[.*]\(.*\)/g; - - if (urlRegex.test(this.state.message) || imageRegex.test(this.state.message)) { - this.setState({ - errorMessage: 'Links and images are not allowed.', - }); - return; - } - try { const messageHtml = marked(DOMPurify.sanitize(this.state.message)); const { isMessageSent, errorMessage, ...messageData } = this.state; // Exclude isMessageSent from the data - await createMessage({ ...messageData, message: messageHtml }); + + const response = await fetch(`${import.meta.env.PUBLIC_API_URL}/guestbook`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ ...messageData, message: messageHtml }), + }); + + if (!response.ok) { + const errorBody = await response.json(); + const errorMessage = `HTTP Error ${response.status}: ${response.statusText}
${errorBody.message}`; + + this.setState({ + errorMessage: `There was an error submitting your message.
Details:
${errorMessage}`, + isMessageSent: false, + }); + return; + } + + const responseBody = await response.json(); this.setState({ name: '', @@ -47,6 +81,7 @@ class GuestbookForm extends Component { message: '', isMessageSent: true, errorMessage: '', + messageId: responseBody.id, }); if (this.props.onMessageSent) { @@ -54,7 +89,7 @@ class GuestbookForm extends Component { } } catch (error) { this.setState({ - errorMessage: `There was an error submitting your message.
Details: ${error}
Check the console for more details.`, + errorMessage: `There was an error submitting your message.
Details:
${error.message}
Check the console for more details.`, isMessageSent: false, }); } @@ -72,10 +107,19 @@ class GuestbookForm extends Component { +
{this.state.errorMessage &&

} - {this.state.isMessageSent && !this.state.errorMessage &&

Sent successfully!

} + {this.state.isMessageSent && !this.state.errorMessage && +
+

Sent successfully!

+

(Optional)

+

Save this message ID: {this.state.messageId}

+

Then send it to me, to verify that you sent this message.

+

Email me or tag/message me on these platforms.

+
+ } ); } diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index cda6b67..f76a5f2 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -26,4 +26,4 @@ class Navbar extends Component { } } -export default Navbar; \ No newline at end of file +export default Navbar; -- cgit v1.2.3