Merged Guestbook and Blog Comments into HOC

1 files changed, 86 insertions, 0 deletions

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 (
+                <div>
+                    <FormComponent onMessageSent={this.refresh} {...this.props} />
+                    {error ? (
+                        <p>{error}</p>
+                    ) : message ? (
+                        <WrappedComponent
+                            message={message}
+                            page={page}
+                            totalPages={totalPages}
+                            handleNext={this.handleNext}
+                            handlePrevious={this.handlePrevious}
+                            {...this.props}
+                        />
+                    ) : (
+                        <p>Loading messages...</p>
+                    )}
+                </div>
+            );
+        }
+    };
+}
+
+export default withMessages;