Create form page to add new snippets

Author: fmsrodrigues

client.http

@@ -9,19 +9,18 @@ Content-Type: application/json
 ###
 
 # @name view_snippet
-GET {{baseUrl}}/snippet/view?id=1
+GET {{baseUrl}}/snippet/view/1
 Content-Type: application/json
 
 ###
 
 # @name create_snippet
 POST {{baseUrl}}/snippet/create
-Content-Type: application/json
+Content-Type: application/x-www-form-urlencoded
 
-{
-  "title": "Snippet Title",
-  "content": "Snippet Content"
-}
+title="title"
+&content="content"
+&expires=7
 
 ###
 

cmd/web/handlers.go

@@ -5,7 +5,10 @@ import (
 	"fmt"
 	"lets-go-snippetbox/internal/models"
 	"net/http"
+	"slices"
 	"strconv"
+	"strings"
+	"unicode/utf8"
 
 	"github.com/julienschmidt/httprouter"
 )
@@ -50,15 +53,66 @@ func (app *application) snippetView(w http.ResponseWriter, r *http.Request) {
 }
 
 func (app *application) snippetCreate(w http.ResponseWriter, r *http.Request) {
-	w.Write([]byte("Display the form for creating a new snippet..."))
+	data := app.newTemplateData(r)
+
+	data.Form = snippetCreateForm{
+		Expires: 365,
+	}
+
+	app.render(w, http.StatusOK, "create.html", data)
+}
+
+type snippetCreateForm struct {
+	Title       string
+	Content     string
+	Expires     int
+	FieldErrors map[string]string
 }
 
 func (app *application) snippetCreatePost(w http.ResponseWriter, r *http.Request) {
-	title := "O snail"
-	content := "O snail\nClimb Mount Fuji,\nBut slowly, slowly!\n\n- Kobayashi Issa"
-	expires := 7
+	err := r.ParseForm()
+	if err != nil {
+		app.clientError(w, http.StatusBadRequest)
+		return
+	}
+
+	expires, err := strconv.Atoi(r.PostForm.Get("expires"))
+	if err != nil {
+		app.clientError(w, http.StatusBadRequest)
+		return
+	}
+
+	form := snippetCreateForm{
+		Title:       r.PostForm.Get("title"),
+		Content:     r.PostForm.Get("content"),
+		Expires:     expires,
+		FieldErrors: map[string]string{},
+	}
+
+	if strings.TrimSpace(form.Title) == "" {
+		form.FieldErrors["title"] = "this field cannot be blank"
+	} else if utf8.RuneCountInString(form.Title) > 100 {
+		form.FieldErrors["title"] = "this field cannot be more than 100 characters long"
+	}
+
+	if strings.TrimSpace(form.Content) == "" {
+		form.FieldErrors["content"] = "this field cannot be blank"
+	}
+
+	if !slices.Contains([]int{1, 7, 365}, form.Expires) {
+		form.FieldErrors["expires"] = "this field must equal 1, 7 or 365"
+	}
+
+	if len(form.FieldErrors) > 0 {
+		data := app.newTemplateData(r)
+		data.Form = form
+
+		app.render(w, http.StatusUnprocessableEntity, "create.html", data)
+
+		return
+	}
 
-	id, err := app.snippets.Insert(title, content, expires)
+	id, err := app.snippets.Insert(form.Title, form.Content, form.Expires)
 	if err != nil {
 		app.serverError(w, err)
 		return

cmd/web/templates.go

@@ -11,6 +11,7 @@ type templateData struct {
 	CurrentYear int
 	Snippet     *models.Snippet
 	Snippets    []*models.Snippet
+	Form        any
 }
 
 func humanDate(t time.Time) string {

ui/html/pages/create.html

@@ -0,0 +1,32 @@
+{{define "title"}}Create a New Snippet{{end}}
+
+{{define "main"}}
+<form action='/snippet/create' method='POST'>
+  <div>
+    <label>Title:</label>
+    {{with .Form.FieldErrors.title}}
+    <label class='error'>{{.}}</label>
+    {{end}}
+    <input type='text' name='title' value='{{.Form.Title}}'>
+  </div>
+  <div>
+    <label>Content:</label>
+    {{with .Form.FieldErrors.content}}
+    <label class='error'>{{.}}</label>
+    {{end}}
+    <textarea name='content'>{{.Form.Content}}</textarea>
+  </div>
+  <div>
+    <label>Delete in:</label>
+    {{with .Form.FieldErrors.expires}}
+    <label class='error'>{{.}}</label>
+    {{end}}
+    <input type='radio' name='expires' value='365' {{if (eq .Form.Expires 365)}}checked{{end}}> One Year
+    <input type='radio' name='expires' value='7' {{if (eq .Form.Expires 7)}}checked{{end}}> One Week
+    <input type='radio' name='expires' value='1' {{if (eq .Form.Expires 1)}}checked{{end}}> One Day
+  </div>
+  <div>
+    <input type='submit' value='Publish snippet'>
+  </div>
+</form>
+{{end}}

ui/html/partials/nav.html

@@ -1,5 +1,6 @@
 {{define "nav"}}
 <nav>
     <a href='/'>Home</a>
+    <a href='/snippet/create'>Create snippet</a>
 </nav>
 {{end}}