Change Primeagens contact book example into guestbook lmao
This commit is contained in:
parent
cac3525484
commit
fbc95e960a
66
cmd/main.go
66
cmd/main.go
@ -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)
|
||||
|
||||
})
|
||||
|
@ -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 }}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user