view: added subreddits listing page

server/routes/page_subreddits.go

@@ -0,0 +1,25 @@
+package routes
+
+import (
+	"net/http"
+
+	"github.com/tigorlazuardi/redmage/pkg/log"
+	"github.com/tigorlazuardi/redmage/views"
+	"github.com/tigorlazuardi/redmage/views/subredditsview"
+)
+
+func (routes *Routes) PageSubreddits(rw http.ResponseWriter, r *http.Request) {
+	ctx, span := tracer.Start(r.Context(), "*Routes.PageSubreddits")
+	defer span.End()
+
+	data := subredditsview.Data{
+		// Subreddits: routes.API.SubredditsList(ctx),
+	}
+
+	c := views.NewContext(routes.Config, r)
+
+	if err := subredditsview.Subreddit(c, data).Render(r.Context(), rw); err != nil {
+		log.New(ctx).Err(err).Error("failed to render subreddits view")
+		rw.WriteHeader(http.StatusInternalServerError)
+	}
+}

server/routes/routes.go

@@ -64,5 +64,6 @@ func (routes *Routes) registerWWWRoutes(router chi.Router) {
 		r.Use(chimiddleware.RequestLogger(middleware.ChiLogger{}))
 		r.Use(chimiddleware.SetHeader("Content-Type", "text/html; charset=utf-8"))
 		r.Get("/", routes.PageHome)
+		r.Get("/subreddits", routes.PageSubreddits)
 	})
 }

views/components/dayjs.templ

@@ -0,0 +1,13 @@
+package components
+
+templ Dayjs() {
+	<script src="/public/dayjs-1.11.10.min.js"></script>
+	<script src="/public/dayjs-relativeTime-1.11.10.min.js"></script>
+	<script src="/public/dayjs-utc-1.11.10.min.js"></script>
+	<script src="/public/dayjs-timezone-1.11.10.min.js"></script>
+	<script>
+        dayjs.extend(window.dayjs_plugin_relativeTime)
+        dayjs.extend(window.dayjs_plugin_utc)
+        dayjs.extend(window.dayjs_plugin_timezone)
+	</script>
+}

views/components/head.templ

@@ -10,15 +10,6 @@ templ Head(vc *views.Context, extras ...templ.Component) {
 		<link rel="icon" href="/public/favicon.svg"/>
 		<script src="/public/htmx-1.9.11.min.js"></script>
 		<script src="/public/htmx-response-targets-1.9.11.min.js"></script>
-		<script src="/public/dayjs-1.11.10.min.js"></script>
-		<script src="/public/dayjs-relativeTime-1.11.10.min.js"></script>
-		<script src="/public/dayjs-utc-1.11.10.min.js"></script>
-		<script src="/public/dayjs-timezone-1.11.10.min.js"></script>
-		<script>
-			dayjs.extend(window.dayjs_plugin_relativeTime)
-			dayjs.extend(window.dayjs_plugin_utc)
-			dayjs.extend(window.dayjs_plugin_timezone)
-		</script>
 		<script src="/public/theme-change-2.0.2.min.js"></script>
 		if vc.Config.Bool("http.hotreload") {
 			<script src="/public/hot_reload.js"></script>

views/homeview/homeview.templ

@@ -8,7 +8,10 @@ import "fmt"
 
 templ Home(c *views.Context, data Data) {
 	@components.Doctype() {
-		@components.Head(c, components.HeadTitle("Redmage - Home"))
+		@components.Head(c,
+			components.Dayjs(),
+			components.HeadTitle("Redmage - Home"),
+		)
 		@components.Body(c) {
 			@HomeContent(c, data)
 		}
@@ -19,7 +22,7 @@ templ Home(c *views.Context, data Data) {
 //
 // Use this template if request is HX-Boosted.
 templ HomeContent(c *views.Context, data Data) {
-	<main id="main" class="prose min-w-full">
+	<main class="prose min-w-full">
 		@components.Container() {
 			if data.Error != "" {
 				@components.ErrorToast(data.Error)
@@ -51,7 +54,7 @@ templ HomeContent(c *views.Context, data Data) {
 							<h2 class="mt-4">{ recently.Device.Name }</h2>
 							for _, subreddit := range recently.Subreddits {
 								<h4>
-									<a class="text-primary" href={ templ.SafeURL(fmt.Sprintf("/subreddits/details/%s?device=%d", subreddit.Subreddit.Name, recently.Device.Slug)) }>
+									<a class="text-primary" href={ templ.SafeURL(fmt.Sprintf("/subreddits/details/%s?device=%s", subreddit.Subreddit.Name, recently.Device.Slug)) }>
 										{ subreddit.Subreddit.Name }
 									</a>
 									- { strconv.Itoa(len(subreddit.Images)) } images

views/subredditsview/subredditsview.templ

@@ -0,0 +1,29 @@
+package subredditsview
+
+import "github.com/tigorlazuardi/redmage/views"
+import "github.com/tigorlazuardi/redmage/views/components"
+
+templ Subreddit(c *views.Context, data Data) {
+	@components.Doctype() {
+		@components.Head(c, components.HeadTitle("Redmage - Subreddits"))
+		@components.Body(c) {
+			@SubredditContent(c, data)
+		}
+	}
+}
+
+templ SubredditContent(c *views.Context, data Data) {
+	<main class="prose min-w-full">
+		@components.Container() {
+			<h1>Subreddits</h1>
+			<div class="divider"></div>
+			if len(data.Subreddits) == 0 {
+				<h3>You have not added any subreddits yet.</h3>
+				<p>Click <a class="text-primary" href="/subreddits/add">here</a> to add a new subreddit.</p>
+			}
+			for _, subreddit := range data.Subreddits {
+				<p>{ subreddit.Name }</p>
+			}
+		}
+	</main>
+}

views/subredditsview/subredditsview_data.go

@@ -0,0 +1,7 @@
+package subredditsview
+
+import "github.com/tigorlazuardi/redmage/models"
+
+type Data struct {
+	Subreddits models.SubredditSlice
+}