Merged Guestbook and Blog Comments into HOC

1 files changed, 19 insertions, 88 deletions

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 (
-            <div>
-                <BlogCommentsForm onMessageSent={this.refresh} slug={this.props.slug} />
-                {error ? (
-                    <p>{error}</p>
-                ) : message ? (
-                    <div>
-                        {message.map((g) => (
-                            <article className="card">
-                                <h1>{g.author}</h1>
-                                <div dangerouslySetInnerHTML={{__html: sanitizeHtml(g.comment)}}/>
-                                <small>{formatDate(g.created_at)}</small>
-                            </article>
-                        ))}
-                        {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 comments...</p>
-                )}
-            </div>
-        );
-    }
-}
-
-export default BlogComments;
+import { formatDate } from "../util";
+import sanitizeHtml from "sanitize-html";
+
+const BlogComments = ({ message, page, totalPages, handleNext, handlePrevious }) => (
+    <div>
+        {message.map((g) => (
+            <article className="card">
+                <h1>{g.author}</h1>
+                <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(g.comment) }} />
+                <small>{formatDate(g.created_at)}</small>
+            </article>
+        ))}
+        {page > 1 && <button className="button margin" onClick={handlePrevious}>Previous</button>}
+        {page < totalPages && <button className="button margin" onClick={handleNext}>Next</button>}
+    </div>
+);
+
+export default withMessages(BlogComments, '/comments/:slug', BlogCommentsForm);