Change Primeagens contact book example into guestbook lmao

This commit is contained in:
bdnugget 2024-09-18 21:30:23 +02:00
parent cac3525484
commit fbc95e960a
3 changed files with 46 additions and 77 deletions

View File

@ -26,50 +26,41 @@ func newTemplate() *Templates {
var id = 0
type Contact struct {
Name string
Email string
Id int
type Entry struct {
Name string
Message string
Id int
}
func newContact(name, email string) Contact {
func newEntry(name, message string) Entry {
id++
return Contact{
Name: name,
Email: email,
Id: id,
return Entry{
Name: name,
Message: message,
Id: id,
}
}
type Contacts = []Contact
type Entries = []Entry
type Data struct {
Contacts Contacts
Entries Entries
}
func (d *Data) indexOf(id int) int {
for i, contact := range d.Contacts {
if contact.Id == id {
for i, entry := range d.Entries {
if entry.Id == id {
return i
}
}
return -1
}
func (d *Data) hasEmail(email string) bool {
for _, contact := range d.Contacts {
if contact.Email == email {
return true
}
}
return false
}
func newData() Data {
return Data{
Contacts: []Contact{
newContact("John Smith", "johndoe@me.com"),
newContact("Jane Doe", "janedoe@me.com"),
Entries: []Entry{
newEntry("John Smith", "Hello world"),
newEntry("Jane Doe", "This is a great guestbook"),
},
}
}
@ -113,27 +104,18 @@ func main() {
return c.Render(200, "index", page)
})
e.POST("/contacts", func(c echo.Context) error {
e.POST("/guestbook", func(c echo.Context) error {
name := c.FormValue("name")
email := c.FormValue("email")
message := c.FormValue("message")
if page.Data.hasEmail(email) {
formData := newFormData()
formData.Values["name"] = name
formData.Values["email"] = email
formData.Errors["email"] = "Email already exists"
return c.Render(422, "form", formData)
}
contact := newContact(name, email)
page.Data.Contacts = append(page.Data.Contacts, contact)
entry := newEntry(name, message)
page.Data.Entries = append(page.Data.Entries, entry)
c.Render(200, "form", newFormData())
return c.Render(200, "oob-contact", contact)
return c.Render(200, "oob-entry", entry)
})
e.DELETE("/contacts/:id", func(c echo.Context) error {
e.DELETE("/guestbook/:id", func(c echo.Context) error {
// TODO: remove this to make server faster LOL
time.Sleep(1 * time.Second)
@ -146,10 +128,10 @@ func main() {
i := page.Data.indexOf(id)
if i == -1 {
return c.String(404, "Contact not found")
return c.String(404, "Entry not found")
}
page.Data.Contacts = append(page.Data.Contacts[:i], page.Data.Contacts[i+1:]...)
page.Data.Entries = append(page.Data.Entries[:i], page.Data.Entries[i+1:]...)
return c.NoContent(200)
})

BIN
tmp/main

Binary file not shown.

View File

@ -12,55 +12,41 @@
{{ template "form" .Form }}
<hr />
{{ template "display" .Data }}
<script>
// allow 422 responses to swap as we are using this as a signal that
// a form was submitted with bad data and want to rerender with the errors
document.addEventListener("DOMContentLoaded", event => {
document.body.addEventListener("htmx:beforeSwap", evt => {
if (evt.detail.xhr.status === 422) {
evt.detail.shouldSwap = true;
evt.detail.isError = false;
}
})
})
</script>
</body>
</html>
{{ end }}
{{ block "form" . }}
<form hx-swap="outerHTML" hx-post="/contacts">
name: <input
<form hx-swap="outerHTML" hx-post="/guestbook">
Name: <input
{{ if .Values.name }} value="{{ .Values.name }}" {{ end }}
type="text" name="name" />
email: <input
{{ if .Values.email }} value="{{ .Values.email }}" {{ end }}
type="email" name="email" />
Message: <input
{{ if .Values.message }} value="{{ .Values.message }}" {{ end }}
type="text" name="message" />
{{ if .Errors.email }}
<span style="color: red">{{ .Errors.email }}</span>
{{ if .Errors.message }}
<span style="color: red">{{ .Errors.message }}</span>
{{ end }}
<button>Create contact</button>
<button>Sign guestbook</button>
</form>
{{ end }}
{{ block "display" . }}
<div id="contacts" style="display: flex; flex-direction: column">
{{ range .Contacts }}
{{ template "contact" . }}
<div id="guestbook" style="display: flex; flex-direction: column">
{{ range .Entries }}
{{ template "entry" . }}
{{ end }}
</div>
{{ end }}
{{ block "contact" . }}
<div class="contact" id="contact-{{ .Id }}" style="display: flex;">
{{ block "entry" . }}
<div class="entry" id="entry-{{ .Id }}" style="display: flex;">
<div style="width: 1rem; cursor: pointer;"
hx-indicator="#contact-{{ .Id }}-indicator"
hx-target="#contact-{{ .Id }}"
hx-indicator="#entry-{{ .Id }}-indicator"
hx-target="#entry-{{ .Id }}"
hx-swap="outerHTML swap:500ms"
hx-delete="/contacts/{{ .Id }}"
hx-delete="/guestbook/{{ .Id }}"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"/>
@ -68,16 +54,17 @@
</svg>
</div>
Name: <span>{{ .Name }}</span>
Email: <span>{{ .Email }}</span>
Message: <span>{{ .Message }}</span>
<div id="contact-{{ .Id }}-indicator" class="htmx-indicator">
<div id="entry-{{ .Id }}-indicator" class="htmx-indicator">
<img src="/images/bars.svg" alt="loading" style="width: 1rem;" />
</div>
</div>
{{ end }}
{{ block "oob-contact" . }}
<div id="contacts" hx-swap-oob="afterbegin">
{{ template "contact" . }}
{{ block "oob-entry" . }}
<div id="guestbook" hx-swap-oob="afterbegin">
{{ template "entry" . }}
</div>
{{ end }}