Convert cache page to Templ

pkg/handlers/cache.go

@@ -4,11 +4,14 @@ import (
 	"errors"
 	"time"
 
+	"github.com/a-h/templ"
 	"github.com/labstack/echo/v4"
 
 	"git.grosinger.net/tgrosinger/saasitone/pkg/form"
 	"git.grosinger.net/tgrosinger/saasitone/pkg/page"
 	"git.grosinger.net/tgrosinger/saasitone/pkg/services"
+	"git.grosinger.net/tgrosinger/saasitone/templ/layouts"
+	"git.grosinger.net/tgrosinger/saasitone/templ/pages"
 	"git.grosinger.net/tgrosinger/saasitone/templates"
 )
 
@@ -22,11 +25,6 @@ type (
 		cache *services.CacheClient
 		*services.TemplateRenderer
 	}
-
-	cacheForm struct {
-		Value string `form:"value"`
-		form.Submission
-	}
 )
 
 func init() {
@@ -46,10 +44,8 @@ func (h *Cache) Routes(g *echo.Group) {
 
 func (h *Cache) Page(ctx echo.Context) error {
 	p := page.New(ctx)
-	p.Layout = templates.LayoutMain
 	p.Name = templates.PageCache
 	p.Title = "Set a cache entry"
-	p.Form = form.Get[cacheForm](ctx)
 
 	// Fetch the value from the cache
 	value, err := h.cache.
@@ -57,20 +53,31 @@ func (h *Cache) Page(ctx echo.Context) error {
 		Key("page_cache_example").
 		Fetch(ctx.Request().Context())
 
+	var valueStrPtr *string = nil
+
 	// Store the value in the page, so it can be rendered, if found
 	switch {
 	case err == nil:
-		p.Data = value.(string)
+		valueStr := value.(string)
+		valueStrPtr = &valueStr
 	case errors.Is(err, services.ErrCacheMiss):
 	default:
 		return fail(err, "failed to fetch from cache")
 	}
 
-	return h.RenderPage(ctx, p)
+	f := form.Get[pages.CacheForm](ctx)
+	component := pages.Cache(p, f, valueStrPtr)
+
+	// TODO: This can be reused
+	p.LayoutComponent = func(content templ.Component) templ.Component {
+		return layouts.Main(p, content)
+	}
+
+	return h.RenderPageTempl(ctx, p, component)
 }
 
 func (h *Cache) Submit(ctx echo.Context) error {
-	var input cacheForm
+	var input pages.CacheForm
 
 	if err := form.Submit(ctx, &input); err != nil {
 		return err

templ/pages/cache.templ

@@ -0,0 +1,46 @@
+package pages
+
+import (
+	"git.grosinger.net/tgrosinger/saasitone/templ/components"
+	"git.grosinger.net/tgrosinger/saasitone/pkg/form"
+	"git.grosinger.net/tgrosinger/saasitone/pkg/page"
+)
+
+type CacheForm struct {
+	Value string `form:"value"`
+	form.Submission
+}
+
+templ Cache(p page.Page, f *CacheForm, value *string) {
+	<form id="task" method="post" hx-post={ p.ToURL("cache.submit") }>
+		<article class="message">
+			<div class="message-header">
+				<p>Test the cache</p>
+			</div>
+			<div class="message-body">
+				This route handler shows how the default in-memory cache works. Try updating the value using the form below and see how it persists after you reload the page.
+				HTMX makes it easy to re-render the cached value after the form is submitted.
+			</div>
+		</article>
+		<label for="value" class="label">Value in cache: </label>
+		if value != nil {
+			<span class="tag is-success">{ *value }</span>
+		} else {
+			<i>(empty)</i>
+		}
+		<br/>
+		<br/>
+		<div class="field">
+			<label for="value" class="label">Value</label>
+			<div class="control">
+				<input id="value" name="value" class="input" value={ f.Value }/>
+			</div>
+		</div>
+		<div class="field is-grouped">
+			<div class="control">
+				<button class="button is-link">Update cache</button>
+			</div>
+		</div>
+		@components.CSRF(p.CSRF)
+	</form>
+}

templ/pages/cache_templ.go

@@ -0,0 +1,108 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.707
+package pages
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import (
+	"git.grosinger.net/tgrosinger/saasitone/pkg/form"
+	"git.grosinger.net/tgrosinger/saasitone/pkg/page"
+	"git.grosinger.net/tgrosinger/saasitone/templ/components"
+)
+
+type CacheForm struct {
+	Value string `form:"value"`
+	form.Submission
+}
+
+func Cache(p page.Page, f *CacheForm, value *string) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<form id=\"task\" method=\"post\" hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(p.ToURL("cache.submit"))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/cache.templ`, Line: 15, Col: 64}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><article class=\"message\"><div class=\"message-header\"><p>Test the cache</p></div><div class=\"message-body\">This route handler shows how the default in-memory cache works. Try updating the value using the form below and see how it persists after you reload the page. HTMX makes it easy to re-render the cached value after the form is submitted.</div></article><label for=\"value\" class=\"label\">Value in cache: </label> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if value != nil {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<span class=\"tag is-success\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var3 string
+			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(*value)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/cache.templ`, Line: 27, Col: 40}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<i>(empty)</i>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<br><br><div class=\"field\"><label for=\"value\" class=\"label\">Value</label><div class=\"control\"><input id=\"value\" name=\"value\" class=\"input\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(f.Value)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/cache.templ`, Line: 36, Col: 64}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></div></div><div class=\"field is-grouped\"><div class=\"control\"><button class=\"button is-link\">Update cache</button></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = components.CSRF(p.CSRF).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</form>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

templates/pages/cache.gohtml

@@ -1,36 +0,0 @@
-{{define "content"}}
-    <form id="task" method="post" hx-post="{{url "cache.submit"}}">
-        <article class="message">
-            <div class="message-header">
-                <p>Test the cache</p>
-            </div>
-            <div class="message-body">
-                This route handler shows how the default in-memory cache works. Try updating the value using the form below and see how it persists after you reload the page.
-                HTMX makes it easy to re-render the cached value after the form is submitted.
-            </div>
-        </article>
-
-        <label for="value" class="label">Value in cache: </label>
-        {{if .Data}}
-            <span class="tag is-success">{{.Data}}</span>
-        {{- else}}
-            <i>(empty)</i>
-        {{- end}}
-        <br/><br/>
-
-        <div class="field">
-            <label for="value" class="label">Value</label>
-            <div class="control">
-                <input id="value" name="value" class="input" value="{{.Form.Value}}"/>
-            </div>
-        </div>
-
-        <div class="field is-grouped">
-            <div class="control">
-                <button class="button is-link">Update cache</button>
-            </div>
-        </div>
-
-        {{template "csrf" .}}
-    </form>
-{{end}}