Changed Home Page to SSR (fixes #1)
This commit is contained in:
parent
16fde0644c
commit
587b073b20
24
Wave/Components/PageComponent.razor
Normal file
24
Wave/Components/PageComponent.razor
Normal file
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -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 [];
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue