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
|
var id = 0
|
||||||
|
|
||||||
type Contact struct {
|
type Entry struct {
|
||||||
Name string
|
Name string
|
||||||
Email string
|
Message string
|
||||||
Id int
|
Id int
|
||||||
}
|
}
|
||||||
|
|
||||||
func newContact(name, email string) Contact {
|
func newEntry(name, message string) Entry {
|
||||||
id++
|
id++
|
||||||
return Contact{
|
return Entry{
|
||||||
Name: name,
|
Name: name,
|
||||||
Email: email,
|
Message: message,
|
||||||
Id: id,
|
Id: id,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
type Contacts = []Contact
|
type Entries = []Entry
|
||||||
|
|
||||||
type Data struct {
|
type Data struct {
|
||||||
Contacts Contacts
|
Entries Entries
|
||||||
}
|
}
|
||||||
|
|
||||||
func (d *Data) indexOf(id int) int {
|
func (d *Data) indexOf(id int) int {
|
||||||
for i, contact := range d.Contacts {
|
for i, entry := range d.Entries {
|
||||||
if contact.Id == id {
|
if entry.Id == id {
|
||||||
return i
|
return i
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return -1
|
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 {
|
func newData() Data {
|
||||||
return Data{
|
return Data{
|
||||||
Contacts: []Contact{
|
Entries: []Entry{
|
||||||
newContact("John Smith", "johndoe@me.com"),
|
newEntry("John Smith", "Hello world"),
|
||||||
newContact("Jane Doe", "janedoe@me.com"),
|
newEntry("Jane Doe", "This is a great guestbook"),
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -113,27 +104,18 @@ func main() {
|
|||||||
return c.Render(200, "index", page)
|
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")
|
name := c.FormValue("name")
|
||||||
email := c.FormValue("email")
|
message := c.FormValue("message")
|
||||||
|
|
||||||
if page.Data.hasEmail(email) {
|
entry := newEntry(name, message)
|
||||||
formData := newFormData()
|
page.Data.Entries = append(page.Data.Entries, entry)
|
||||||
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)
|
|
||||||
|
|
||||||
c.Render(200, "form", newFormData())
|
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
|
// TODO: remove this to make server faster LOL
|
||||||
time.Sleep(1 * time.Second)
|
time.Sleep(1 * time.Second)
|
||||||
@ -146,10 +128,10 @@ func main() {
|
|||||||
|
|
||||||
i := page.Data.indexOf(id)
|
i := page.Data.indexOf(id)
|
||||||
if i == -1 {
|
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)
|
return c.NoContent(200)
|
||||||
|
|
||||||
})
|
})
|
||||||
|
@ -12,55 +12,41 @@
|
|||||||
{{ template "form" .Form }}
|
{{ template "form" .Form }}
|
||||||
<hr />
|
<hr />
|
||||||
{{ template "display" .Data }}
|
{{ 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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ block "form" . }}
|
{{ block "form" . }}
|
||||||
<form hx-swap="outerHTML" hx-post="/contacts">
|
<form hx-swap="outerHTML" hx-post="/guestbook">
|
||||||
name: <input
|
Name: <input
|
||||||
{{ if .Values.name }} value="{{ .Values.name }}" {{ end }}
|
{{ if .Values.name }} value="{{ .Values.name }}" {{ end }}
|
||||||
type="text" name="name" />
|
type="text" name="name" />
|
||||||
email: <input
|
Message: <input
|
||||||
{{ if .Values.email }} value="{{ .Values.email }}" {{ end }}
|
{{ if .Values.message }} value="{{ .Values.message }}" {{ end }}
|
||||||
type="email" name="email" />
|
type="text" name="message" />
|
||||||
|
|
||||||
{{ if .Errors.email }}
|
{{ if .Errors.message }}
|
||||||
<span style="color: red">{{ .Errors.email }}</span>
|
<span style="color: red">{{ .Errors.message }}</span>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<button>Create contact</button>
|
<button>Sign guestbook</button>
|
||||||
</form>
|
</form>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ block "display" . }}
|
{{ block "display" . }}
|
||||||
<div id="contacts" style="display: flex; flex-direction: column">
|
<div id="guestbook" style="display: flex; flex-direction: column">
|
||||||
{{ range .Contacts }}
|
{{ range .Entries }}
|
||||||
{{ template "contact" . }}
|
{{ template "entry" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ block "contact" . }}
|
{{ block "entry" . }}
|
||||||
<div class="contact" id="contact-{{ .Id }}" style="display: flex;">
|
<div class="entry" id="entry-{{ .Id }}" style="display: flex;">
|
||||||
<div style="width: 1rem; cursor: pointer;"
|
<div style="width: 1rem; cursor: pointer;"
|
||||||
hx-indicator="#contact-{{ .Id }}-indicator"
|
hx-indicator="#entry-{{ .Id }}-indicator"
|
||||||
hx-target="#contact-{{ .Id }}"
|
hx-target="#entry-{{ .Id }}"
|
||||||
hx-swap="outerHTML swap:500ms"
|
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">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||||
<path fill="none" d="M0 0h24v24H0z"/>
|
<path fill="none" d="M0 0h24v24H0z"/>
|
||||||
@ -68,16 +54,17 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
Name: <span>{{ .Name }}</span>
|
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;" />
|
<img src="/images/bars.svg" alt="loading" style="width: 1rem;" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ block "oob-contact" . }}
|
{{ block "oob-entry" . }}
|
||||||
<div id="contacts" hx-swap-oob="afterbegin">
|
<div id="guestbook" hx-swap-oob="afterbegin">
|
||||||
{{ template "contact" . }}
|
{{ template "entry" . }}
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user