diff options
| -rw-r--r-- | src/components/Guestbook.jsx | 40 | ||||
| -rw-r--r-- | src/components/GuestbookForm.jsx | 27 | ||||
| -rw-r--r-- | src/pages/guestbook.astro | 2 | ||||
| -rw-r--r-- | src/styles/GuestbookForm.css | 5 | ||||
| -rw-r--r-- | src/styles/cards.css | 2 |
5 files changed, 41 insertions, 35 deletions
diff --git a/src/components/Guestbook.jsx b/src/components/Guestbook.jsx index 498bbbe..41d0271 100644 --- a/src/components/Guestbook.jsx +++ b/src/components/Guestbook.jsx @@ -2,6 +2,7 @@ import { h, Component } from 'preact'; import { pb } from '../services/pocketbase'; import { formatDate } from "../util"; import sanitizeHtml from 'sanitize-html'; +import GuestbookForm from "./GuestbookForm.jsx"; class Guestbook extends Component { state = { @@ -25,29 +26,32 @@ class Guestbook extends Component { await this.fetchMessages(); } + refresh = async () => { + await this.fetchMessages(); + } + render() { const { message, error } = this.state; - if (error) { - return <p>{error}</p>; - } - - if (!message) { - return <p>Loading messages...</p>; - } - return ( <div> - <div class="grid"> - {message.map((g) => ( - <article class="card"> - <h1>Message from: {g.name}</h1> - <small>{formatDate(g.created)}</small> - <div dangerouslySetInnerHTML={{__html: sanitizeHtml(g.message)}}/> - {g.website && <a href={g.website}>Website</a>} - </article> - ))} - </div> + <GuestbookForm onMessageSent={this.refresh} /> + {error ? ( + <p>{error}</p> + ) : !message ? ( + <p>Loading messages...</p> + ) : ( + <div class="grid"> + {message.map((g) => ( + <article class="card"> + <h1>Message from: {g.name}</h1> + <small>{formatDate(g.created)}</small> + <div dangerouslySetInnerHTML={{__html: sanitizeHtml(g.message)}}/> + {g.website && <a href={g.website}>Website</a>} + </article> + ))} + </div> + )} </div> ); } diff --git a/src/components/GuestbookForm.jsx b/src/components/GuestbookForm.jsx index b8fc1c2..841902d 100644 --- a/src/components/GuestbookForm.jsx +++ b/src/components/GuestbookForm.jsx @@ -25,19 +25,18 @@ class GuestbookForm extends Component { } const messageHtml = marked(DOMPurify.sanitize(this.state.message)); - try { - await createMessage({ ...this.state, message: messageHtml }); + await createMessage({ ...this.state, message: messageHtml }); - this.setState({ - name: '', - email: '', - website: '', - message: '', - isMessageSent: true, - errorMessage: '' - }); - } catch (error) { - this.setState({ errorMessage: error.message }); + this.setState({ + name: '', + email: '', + website: '', + message: '', + isMessageSent: true, + }); + + if (this.props.onMessageSent) { + this.props.onMessageSent(); } } @@ -47,7 +46,7 @@ class GuestbookForm extends Component { <form onSubmit={this.handleSubmit}> <h2>Submit Message</h2> <label>Name</label> - <input type="text" name="name" placeholder="Name" required value={this.state.name} + <input type="text" name="name" placeholder="John Doe" required value={this.state.name} onChange={this.handleChange}/> <label>Email Address</label> <input type="email" name="email" placeholder="hello@example.com (optional)" value={this.state.email} @@ -56,7 +55,7 @@ class GuestbookForm extends Component { <input type="url" name="website" placeholder="https://example.com (optional)" value={this.state.website} onChange={this.handleChange}/> <label>Message (Supports Markdown)</label> - <textarea name="message" placeholder="Message" required value={this.state.message} + <textarea name="message" placeholder="This is a **message**. I can *do* this, and __this__." required value={this.state.message} onChange={this.handleChange}></textarea> <button type="submit">Send</button> </form> diff --git a/src/pages/guestbook.astro b/src/pages/guestbook.astro index 661dff2..9f6ad34 100644 --- a/src/pages/guestbook.astro +++ b/src/pages/guestbook.astro @@ -1,7 +1,6 @@ --- import Page from '../layouts/Page.astro' import "../styles/cards.css"; -import GuestbookForm from '../components/GuestbookForm' import Guestbook from '../components/Guestbook' --- <Page title="Guestbook" description="Use this page to send me a message"> @@ -10,7 +9,6 @@ import Guestbook from '../components/Guestbook' <h2>Welcome to my Guestbook!</h2> <p>Feel free to send a nice message here!</p> </div> - <GuestbookForm client:visible /> <Guestbook client:visible /> </main> </Page> diff --git a/src/styles/GuestbookForm.css b/src/styles/GuestbookForm.css index fa31429..e540d42 100644 --- a/src/styles/GuestbookForm.css +++ b/src/styles/GuestbookForm.css @@ -15,6 +15,7 @@ .card form textarea[name="message"] { height: 200px; + resize: none; } .card form button { @@ -31,6 +32,10 @@ transition: ease-in-out 0.2s; } +.card form button:active { + background-color: #243824; +} + .card form label { display: block; } diff --git a/src/styles/cards.css b/src/styles/cards.css index 67a618c..12e5a3f 100644 --- a/src/styles/cards.css +++ b/src/styles/cards.css @@ -27,7 +27,7 @@ /* Mobile view */ @media (max-width: 992px) { - main { + .grid { grid-template-columns: 1fr; } } |