From beb54b0acb7721068bc36da6906bd615eb01fb8c Mon Sep 17 00:00:00 2001 From: Andrew Lee Date: Sat, 29 Jun 2024 08:38:44 -0400 Subject: Merged Guestbook and Blog Comments into HOC --- src/components/BlogComments.jsx | 107 +++++------------------- src/components/BlogCommentsForm.jsx | 150 +++++++--------------------------- src/components/FetchMessages.jsx | 86 ++++++++++++++++++++ src/components/FormHandling.jsx | 111 +++++++++++++++++++++++++ src/components/Guestbook.jsx | 113 +++++--------------------- src/components/GuestbookForm.jsx | 157 ++++++++---------------------------- 6 files changed, 303 insertions(+), 421 deletions(-) create mode 100644 src/components/FetchMessages.jsx create mode 100644 src/components/FormHandling.jsx (limited to 'src') diff --git a/src/components/BlogComments.jsx b/src/components/BlogComments.jsx index 183fb94..9914741 100644 --- a/src/components/BlogComments.jsx +++ b/src/components/BlogComments.jsx @@ -1,89 +1,20 @@ -import { Component } from 'preact'; -import { formatDate } from "../util"; -import sanitizeHtml from 'sanitize-html'; +import withMessages from './FetchMessages'; 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; +import { formatDate } from "../util"; +import sanitizeHtml from "sanitize-html"; + +const BlogComments = ({ message, page, totalPages, handleNext, handlePrevious }) => ( +
+ {message.map((g) => ( +
+

{g.author}

+
+ {formatDate(g.created_at)} +
+ ))} + {page > 1 && } + {page < totalPages && } +
+); + +export default withMessages(BlogComments, '/comments/:slug', BlogCommentsForm); diff --git a/src/components/BlogCommentsForm.jsx b/src/components/BlogCommentsForm.jsx index b48236e..d0c585c 100644 --- a/src/components/BlogCommentsForm.jsx +++ b/src/components/BlogCommentsForm.jsx @@ -1,124 +1,36 @@ -import { Component } from 'preact'; +import { h } from 'preact'; +import withFormHandling from './FormHandling'; 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, - }); +const BlogCommentsForm = ({ state, handleChange, handleSubmit }) => ( +
+
+

Submit Comment

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

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

+

Sent successfully!

+

(Optional)

+

Save this message ID: {state.commentId}

+

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

+

Email me or tag/message me on these platforms.

+
} - } +
+); - 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.

-
- } -
- ); - } -} +const getBlogCommentsApiUrl = (props) => `${import.meta.env.PUBLIC_API_URL}/comments/${props.slug}`; -export default BlogCommentsForm; +export default withFormHandling(BlogCommentsForm, getBlogCommentsApiUrl, { + author: '', + comment: '', + commentId: '' +}); diff --git a/src/components/FetchMessages.jsx b/src/components/FetchMessages.jsx new file mode 100644 index 0000000..aa6f261 --- /dev/null +++ b/src/components/FetchMessages.jsx @@ -0,0 +1,86 @@ +import { Component } from 'preact'; + +const withMessages = (WrappedComponent, apiEndpoint, FormComponent) => { + return class extends Component { + state = { + message: null, + error: null, + page: 1, + }; + + fetchMessages = async (page) => { + try { + const { slug } = this.props; + const response = await fetch(`${import.meta.env.PUBLIC_API_URL}${apiEndpoint.replace(':slug', slug)}?page=${page}`); + + if (!response.ok) { + const errorData = await response.json(); + this.setState({ error: errorData.message }); + console.error(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: `Failed to fetch data: ${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 ? ( + + ) : ( +

Loading messages...

+ )} +
+ ); + } + }; +} + +export default withMessages; diff --git a/src/components/FormHandling.jsx b/src/components/FormHandling.jsx new file mode 100644 index 0000000..8f7f688 --- /dev/null +++ b/src/components/FormHandling.jsx @@ -0,0 +1,111 @@ +import { Component } from 'preact'; +import { marked } from 'marked'; +import DOMPurify from 'dompurify'; + +const withFormHandling = (WrappedComponent, getApiUrl, initialState) => { + return class extends Component { + state = { + ...initialState, + isMessageSent: false, + errorMessage: '', + turnstileToken: '' + }; + + 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 message.', + }); + return; + } + + try { + const messageKey = this.state.comment !== undefined ? 'comment' : 'message'; + const messageHtml = marked(DOMPurify.sanitize(this.state[messageKey])); + const { isMessageSent, errorMessage, ...messageData } = this.state; // Exclude isMessageSent and errorMessage from the data + + messageData[messageKey] = messageHtml; + + const response = await fetch(getApiUrl(this.props), { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(messageData), + }); + + 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({ + ...initialState, + isMessageSent: true, + errorMessage: '', + [messageKey === 'comment' ? 'commentId' : 'messageId']: 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 ( + + ); + } + }; +}; + +export default withFormHandling; diff --git a/src/components/Guestbook.jsx b/src/components/Guestbook.jsx index e3238f9..a04990a 100644 --- a/src/components/Guestbook.jsx +++ b/src/components/Guestbook.jsx @@ -1,92 +1,23 @@ -import { Component } from 'preact'; -import { formatDate } from "../util"; -import sanitizeHtml from 'sanitize-html'; +import withMessages from './FetchMessages'; import GuestbookForm from "./GuestbookForm.jsx"; - -class Guestbook extends Component { - state = { - message: null, - error: null, - page: 1, - }; - - fetchMessages = async (page) => { - 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(); - - this.setState({ - message: messages, - 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); - } - } - - 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) => ( -
-

Message from: {g.name}

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

Loading messages...

- )} -
- ); - } -} - -export default Guestbook; +import { formatDate } from "../util"; +import sanitizeHtml from "sanitize-html"; + +const Guestbook = ({ message, page, totalPages, handleNext, handlePrevious }) => ( +
+
+ {message.map((g) => ( +
+

Message from: {g.name}

+ {formatDate(g.created_at)} +
+ {g.website && My Website} +
+ ))} +
+ {page > 1 && } + {page < totalPages && } +
+); + +export default withMessages(Guestbook, '/guestbook', GuestbookForm); diff --git a/src/components/GuestbookForm.jsx b/src/components/GuestbookForm.jsx index 1f1d3c9..4e06a27 100644 --- a/src/components/GuestbookForm.jsx +++ b/src/components/GuestbookForm.jsx @@ -1,128 +1,39 @@ -import { Component } from 'preact'; +import { h } from 'preact'; +import withFormHandling from './FormHandling'; import '../styles/Form.css'; -import { marked } from "marked"; -import DOMPurify from 'dompurify'; -class GuestbookForm extends Component { - state = { - name: '', - 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 }); - } - - handleSubmit = async (e) => { - e.preventDefault(); - - if (this.state.isMessageSent) { - this.setState({ - errorMessage: 'You have already sent a message.', - }); - return; - } - - try { - const messageHtml = marked(DOMPurify.sanitize(this.state.message)); - const { isMessageSent, errorMessage, ...messageData } = this.state; // Exclude isMessageSent from the data - - 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: '', - website: '', - message: '', - isMessageSent: true, - errorMessage: '', - messageId: 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, - }); +const GuestbookForm = ({ state, handleChange, handleSubmit }) => ( +
+
+

Submit Message

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

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

+

Sent successfully!

+

(Optional)

+

Save this message ID: {state.messageId}

+

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

+

Email me or tag/message me on these platforms.

+
} - } +
+); - render() { - return ( -
-
-

Submit Message

- - - - - - -
- -
- {this.state.errorMessage &&

} - {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.

-
- } -
- ); - } -} +const getGuestbookApiUrl = () => `${import.meta.env.PUBLIC_API_URL}/guestbook`; -export default GuestbookForm; +export default withFormHandling(GuestbookForm, getGuestbookApiUrl, { + name: '', + website: '', + message: '', + messageId: '' +}); -- cgit v1.2.3