From 587b073b203d8eacf757ac694623381806d9119d Mon Sep 17 00:00:00 2001
From: Mia Winter <mia@miawinter.de>
Date: Wed, 21 Feb 2024 22:51:11 +0100
Subject: [PATCH] Changed Home Page to SSR (fixes #1)

---
 Wave/Components/PageComponent.razor |  24 +++++
 Wave/Components/Pages/Home.razor    | 139 +++++++++++++---------------
 2 files changed, 87 insertions(+), 76 deletions(-)
 create mode 100644 Wave/Components/PageComponent.razor

diff --git a/Wave/Components/PageComponent.razor b/Wave/Components/PageComponent.razor
new file mode 100644
index 0000000..72e486b
--- /dev/null
+++ b/Wave/Components/PageComponent.razor
@@ -0,0 +1,24 @@
+@typeparam T
+
+@foreach (var item in Items) {
+	@ChildContent(item)
+}
+
+@code {
+	[SupplyParameterFromQuery]
+	public int Page { get; set; } = 0;
+
+	[Parameter]
+	public required RenderFragment<T> ChildContent { get; set; }
+	[Parameter]
+	public required Func<int, int, ValueTask<IEnumerable<T>>> LoadCallback { get; set; }
+	
+	[Parameter]
+	public int ItemsPerPage { get; set; } = 10;
+
+	private List<T> Items { get; } = [];
+
+	protected override async Task OnInitializedAsync() {
+		foreach (var i in await LoadCallback(Page * ItemsPerPage, ItemsPerPage)) Items.Add(i);
+	}
+}
diff --git a/Wave/Components/Pages/Home.razor b/Wave/Components/Pages/Home.razor
index 02eb27b..cf2fd1b 100644
--- a/Wave/Components/Pages/Home.razor
+++ b/Wave/Components/Pages/Home.razor
@@ -4,13 +4,12 @@
 @using Wave.Data
 @using Wave.Utilities
 
-@rendermode InteractiveServer
-@attribute [StreamRendering]
 @inject IOptions<Customization> Customizations
 @inject IOptions<Features> Features
 @inject NavigationManager Navigation
 @inject IDbContextFactory<ApplicationDbContext> ContextFactory;
 @inject IStringLocalizer<Home> Localizer
+@inject IMessageDisplay Message
 
 <HeadContent>
 	<meta property="og:type" content="website">
@@ -62,100 +61,88 @@
 	}
 </section>
 
-<!-- TODO: somehow get status message -->
-
-@if (Busy) {
-	<div class="flex place-content-center h-full text-primary">
-		<span class="loading loading-spinner loading-lg"></span>
-	</div>
-} else {
-	@if (Articles.FirstOrDefault() is {} featured) {
-		<article class="mb-6">
-			<ArticleLink Article="featured">
-				<div class="hero bg-secondary text-secondary-content border-l-8 border-current shadow rounded-box">
-					<div class="hero-content">
-						<div class="flex flex-col space-y-6 my-3">
-							<h2 class="text-2xl lg:text-4xl">
-								@featured.Title
-								<p class="flex flex-wrap gap-2">
-									@foreach (var category in featured.Categories.OrderBy(c => c.Color)) {
-										<span class="badge badge-@CategoryUtilities.GetCssClassPostfixForColor(category.Color)">
-											@category.Name
-										</span>
-									}
-								</p>
-							</h2>
-							<p class="line-clamp-6">
-								<small class="text-sm">@featured.PublishDate.ToString("g")</small><br/>
-								@featured.Body[..Math.Min(1000, featured.Body.Length)]
+@if (Featured is {} featured) {
+	<article class="mb-6">
+		<ArticleLink Article="featured">
+			<div class="hero bg-secondary text-secondary-content border-l-8 border-current shadow rounded-box">
+				<div class="hero-content">
+					<div class="flex flex-col space-y-6 my-3">
+						<h2 class="text-2xl lg:text-4xl">
+							@featured.Title
+							<p class="flex flex-wrap gap-2">
+								@foreach (var category in featured.Categories.OrderBy(c => c.Color)) {
+									<span class="badge badge-@CategoryUtilities.GetCssClassPostfixForColor(category.Color)">
+										@category.Name
+									</span>
+								}
 							</p>
-							<div class="flex">
-								<ProfilePill Profile="featured.Author" DisableProfileLink="true" />
-							</div>
+						</h2>
+						<p class="line-clamp-6">
+							<small class="text-sm">@featured.PublishDate.ToString("g")</small><br/>
+							@featured.Body[..Math.Min(1000, featured.Body.Length)]
+						</p>
+						<div class="flex">
+							<ProfilePill Profile="featured.Author" DisableProfileLink="true" />
 						</div>
 					</div>
 				</div>
-			</ArticleLink>
-		</article>
-	} else {
-		<h2 class="text-2xl lg:text-4xl mb-6">@Localizer["NoArticles_Title"]</h2>
-		<p>@Localizer["NoArticles_Message"]</p>
-	}
-
-	<ArticleTileArray>
-		@foreach (var article in Articles.Skip(1)) {
-			<ArticleTile Article="article" />
-		}
-	</ArticleTileArray>
+			</div>
+		</ArticleLink>
+	</article>
+} else {
+	<h2 class="text-2xl lg:text-4xl mb-6">@Localizer["NoArticles_Title"]</h2>
+	<p>@Localizer["NoArticles_Message"]</p>
 }
 
-@if (HasMore) {
-	<div class="flex place-content-center">
-		<button class="btn btn-wide" @onclick="More">@Localizer["More"]</button>
+<ArticleTileArray>
+	<PageComponent LoadCallback="LoadArticles">
+		<ArticleTile Article="context" />
+	</PageComponent>
+</ArticleTileArray>
+
+<div class="grid place-content-center my-3">
+	<div class="join">
+		<a class="join-item btn" href="/?page=@(Page-1)" disabled="@(Page < 1)">«</a>
+		<button class="join-item btn">Page @(Page+1)</button>
+		<a class="join-item btn" href="/?page=@(Page+1)" disabled="@(Page >= TotalPages-1)">»</a>
 	</div>
-}
+</div>
 
 @code {
 	[CascadingParameter(Name = "TitlePrefix")]
 	private string TitlePrefix { get; set; } = default!;
+	[SupplyParameterFromQuery]
+	public int Page { get; set; } = 0;
 
-	private List<Article> Articles { get; } = [];
-	private bool HasMore { get; set; }
-	private bool Busy { get; set; } = true;
+	private int TotalPages { get; set; } = 1;
 
-	protected override async Task OnAfterRenderAsync(bool firstRender) {
-		if (firstRender) {
-			try {
-				await using var context = await ContextFactory.CreateDbContextAsync();
+	private Article? Featured { get; set; }
 
-				var query = context.Set<Article>()
-					.Include(a => a.Author).Include(a => a.Categories)
-					.OrderByDescending(a => a.PublishDate);
-				var articles = await query.Take(11).ToListAsync();
-				HasMore = (await query.CountAsync()) > 11;
-				Articles.AddRange(articles);
-			} finally {
-				Busy = false;
-				await InvokeAsync(StateHasChanged);
-			}
-		}
-	}
-
-	private async Task More() {
+	protected override async Task OnInitializedAsync() {
 		try {
-			Busy = HasMore = true;
 			await using var context = await ContextFactory.CreateDbContextAsync();
 
 			var query = context.Set<Article>()
 				.Include(a => a.Author).Include(a => a.Categories)
-				.OrderByDescending(a => a.PublishDate)
-				.Skip(Articles.Count);
-			var articles = await query.Take(10).ToListAsync();
-			Articles.AddRange(articles);
-			HasMore = (await query.CountAsync()) > 10;
-		} finally {
-			Busy = false;
+				.OrderByDescending(a => a.PublishDate).ThenBy(a => a.Id);
+
+			Featured = await query.FirstOrDefaultAsync();
+			TotalPages = (int) Math.Ceiling((await query.CountAsync() - 1) / 10.0);
+		} catch {
+			Message.ShowError(Localizer["Articles_Load_Error"]);
 		}
 	}
 
+	private async ValueTask<IEnumerable<Article>> LoadArticles(int page, int count) {
+		try {
+			await using var context = await ContextFactory.CreateDbContextAsync();
+			return await context.Set<Article>()
+				.Include(a => a.Author).Include(a => a.Categories)
+				.OrderByDescending(a => a.PublishDate).ThenBy(a => a.Id)
+				.Skip(page + 1).Take(count).ToListAsync();
+		} catch {
+			Message.ShowError(Localizer["Articles_Load_Error"]);
+			return [];
+		}
+	}
 }
\ No newline at end of file