view: added subreddits listing page

This commit is contained in:
Tigor Hutasuhut 2024-04-30 15:28:04 +07:00
parent 4876930563
commit c26d9fa0b0
8 changed files with 81 additions and 12 deletions

Binary file not shown.

View file

@ -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)
}
}

View file

@ -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)
})
}

View file

@ -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>
}

View file

@ -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>

View file

@ -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

View file

@ -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>
}

View file

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