Pagination; Disabled form when sending

2 files changed, 44 insertions, 20 deletions

diff --git a/src/components/Guestbook.jsx b/src/components/Guestbook.jsx
index a959b5a..5935d04 100644
--- a/src/components/Guestbook.jsx
+++ b/src/components/Guestbook.jsx
@@ -7,31 +7,52 @@ import GuestbookForm from "./GuestbookForm.jsx";
 class Guestbook extends Component {
     state = {
         message: null,
-        error: null
+        error: null,
+        page: 1,
     };
 
-    fetchMessages = async () => {
+    fetchMessages = async (page) => {
+        const perPage = 10;
+
         try {
-            const message = await pb.collection('guestbook').getFullList({
+            const result = await pb.collection('guestbook').getList(page, perPage, {
                 sort: '-created',
             });
-            this.setState({ message });
+            this.setState({
+                message: result.items,
+                totalPages: result.totalPages
+            });
         } 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();
+        await this.fetchMessages(this.state.page);
     }
 
-    refresh = async () => {
-        await this.fetchMessages();
+    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 } = this.state;
+        const { message, error, page, totalPages } = this.state;
 
         return (
             <div>
@@ -52,6 +73,8 @@ class Guestbook extends Component {
                         ))}
                     </div>
                 )}
+                {page > 1 && <button class="margin" onClick={this.handlePrevious}>Previous</button>}
+                {page < totalPages && <button class="margin" onClick={this.handleNext}>Next</button>}
             </div>
         );
     }
diff --git a/src/components/GuestbookForm.jsx b/src/components/GuestbookForm.jsx
index e2283f0..56f3930 100644
--- a/src/components/GuestbookForm.jsx
+++ b/src/components/GuestbookForm.jsx
@@ -20,6 +20,9 @@ class GuestbookForm extends Component {
         e.preventDefault();
 
         if (this.state.isMessageSent) {
+            this.setState({
+                errorMessage: 'You have already sent a message.',
+            });
             return;
         }
 
@@ -58,22 +61,20 @@ class GuestbookForm extends Component {
 
     render() {
         return (
-            <div class="card">
+            <div className="card">
                 <form onSubmit={this.handleSubmit}>
                     <h2>Submit Message</h2>
-                    <label for="name">Name</label>
-                    <input type="text" name="name" placeholder="John Doe" required value={this.state.name}
-                           onChange={this.handleChange}/>
-                    <label for="website">Your Website</label>
-                    <input type="url" name="website" placeholder="https://example.com (optional)"
-                           value={this.state.website} onChange={this.handleChange}/>
-                    <label for="message">Message (Supports <a href="https://www.markdownguide.org/cheat-sheet/" target="_blank">Markdown</a>)</label>
+                    <label htmlFor="name">Name</label>
+                    <input type="text" name="name" placeholder="John Doe" required value={this.state.name} onChange={this.handleChange} disabled={this.state.isMessageSent}/>
+                    <label htmlFor="website">Your Website (Optional)</label>
+                    <input type="url" name="website" placeholder="https://example.com" value={this.state.website} onChange={this.handleChange} disabled={this.state.isMessageSent}/>
+                    <label htmlFor="message">Message (Supports <a href="https://www.markdownguide.org/cheat-sheet/" target="_blank">Markdown</a>)</label>
                     <textarea name="message" placeholder="Enter your message here." required value={this.state.message}
-                              onChange={this.handleChange}></textarea>
-                    <button type="submit">Send</button>
+                              onChange={this.handleChange} disabled={this.state.isMessageSent}></textarea>
+                    <button type="submit" disabled={this.state.isMessageSent}>Send</button>
                 </form>
-                {this.state.errorMessage && <p dangerouslySetInnerHTML={{ __html: this.state.errorMessage }} />}
-                {this.state.isMessageSent && <p>Sent successfully!</p>}
+                {this.state.errorMessage && <p dangerouslySetInnerHTML={{__html: this.state.errorMessage}}/>}
+                {this.state.isMessageSent && !this.state.errorMessage && <p>Sent successfully!</p>}
             </div>
         );
     }