NeilBrommer/BlazorStart
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Use Fluxor for state management

Browse source
This commit is contained in:
Neil Brommer 2021-12-03 16:44:02 -08:00
parent 437e90039f
commit 560c25b4e8
27 changed files with 823 additions and 210 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Start/Client/Components/BookmarkContainer.razor
View file

@ -1,6 +1,4 @@
@using Start.Shared
<div class="activeBookmarkContainer">
<div class="activeBookmarkContainer">
@if (this.Container == null)
{
<div class="empty">

4
Start/Client/Components/BookmarkGroup.razor
View file

@ -1,6 +1,4 @@
@using Start.Shared
<h2 class="bookmarkGroupTitle" style="background-color: #@this.Group.Color">
<h2 class="bookmarkGroupTitle" style="background-color: #@this.Group.Color">
@this.Group.Title
</h2>
<ul class="bookmarkGroupList">

63
Start/Client/Components/CreateContainer.razor
View file

@ -1,15 +1,17 @@
@using Start.Shared
@using Start.Shared.Api
@using Refit
@using Start.Client.Store.Features.CreateContainer
@using Fluxor
@inject IBookmarkContainersApi bookmarkContainersApi
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
<Dialog Title="Create Container" Active="this.IsOpen" OnClose="this.OnDialogClose">
<EditForm Model="this.model" OnValidSubmit="this.OnSubmit">
@if (displayError)
@inject IDispatcher dispatch
@inject IState<CreateContainerState> state
<Dialog Title="Create Container" Active="this.state.Value.ShowCreateContainerForm" OnClose="this.OnDialogClose">
<EditForm Model="this.Model" OnValidSubmit="this.OnSubmit">
@if (this.state.Value.CreateContainerErrorMessage != null)
{
<Alert Type="Alert.AlertType.Error">
There was an error creating the container
@this.state.Value.CreateContainerErrorMessage
</Alert>
}
<div class="form-group">
@ -19,7 +21,7 @@
<div>
<label for="createBookmarkContainerTitle" class="form-label">Title</label>
<InputText id="createBookmarkContainerTitle" name="createBookmarkContainerTitle"
class="form-input" @bind-Value="this.model.Title" />
class="form-input" @bind-Value="this.Model.Title" />
</div>
</div>
</div>
@ -28,9 +30,18 @@
<div class="columns">
<div class="column col-12 text-right">
<div>
<button type="submit" class="btn btn-primary">
<i class="icon icon-plus"></i> Create
</button>
@if (this.state.Value.IsLoadingCreateContainer)
{
<button type="submit" disabled class="btn btn-primary loading">
<i class="icon icon-plus"></i> Create
</button>
}
else
{
<button type="submit" class="btn btn-primary">
<i class="icon icon-plus"></i> Create
</button>
}
</div>
</div>
</div>
@ -42,34 +53,16 @@
@code {
[Parameter]
public EventCallback<BookmarkContainerDto> OnCreated { get; set; }
[Parameter]
public bool IsOpen { get; set; }
[Parameter]
public EventCallback OnClose { get; set; }
private BookmarkContainerDto model = new("");
private bool displayError = false;
private BookmarkContainerDto Model { get; set; } = new BookmarkContainerDto("");
protected async void OnSubmit()
protected void OnSubmit()
{
ApiResponse<BookmarkContainerDto?> apiResponse = await bookmarkContainersApi
.CreateBookmarkContainer(model.Title);
BookmarkContainerDto? container = apiResponse.Content;
if (container == null)
{
this.displayError = true;
}
else
{
await this.OnCreated.InvokeAsync(container);
}
dispatch.Dispatch(new SubmitCreateContainerAction(this.Model));
}
protected async void OnDialogClose()
protected void OnDialogClose()
{
this.IsOpen = false;
await this.OnClose.InvokeAsync();
dispatch.Dispatch(new HideCreateContainerFormAction());
}
}

82
Start/Client/Components/DeleteContainer.razor
View file

@ -1,66 +1,48 @@
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using Start.Shared.Api
@using Start.Client.Store.Features.DeleteContainer
@using Fluxor
@inject HttpClient Http
@inject IBookmarkContainersApi bookmarkContainersApi
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
@{ string title = $"Delete Container \"{this.ContainerTitle}\""; }
@inject IDispatcher dispatch
@inject IState<DeleteContainerState> state
<Dialog Title="@title" Active="this.Active">
@if (this.ShowAlert)
@{ string title = $"Delete Container \"{this.state.Value.BookmarkContainerTitleToDelete}\""; }
<Dialog Title="@title" Active="this.state.Value.ShowDeleteContainerForm" OnClose="this.OnDialogClose">
@if (this.state.Value.DeleteContainerErrorMessage != null)
{
<div class="toast toast-error">
There was an error deleting the bookmark container
</div>
<Alert Type="Alert.AlertType.Error">
@this.state.Value.DeleteContainerErrorMessage
</Alert>
}
<p>Are you sure you want to delete the bookmark container "@this.ContainerTitle"?</p>
<p>
Are you sure you want to delete the bookmark container
"@this.state.Value.BookmarkContainerTitleToDelete"?
</p>
<div class="text-right">
<button class="btn" @onclick="this.OnDialogClose">Cancel</button>
<button class="btn btn-error" @onclick="this.OnConfirmDelete">Delete</button>
@if (!this.state.Value.IsLoadingDeleteContainer)
{
<button type="button" class="btn" @onclick="this.OnDialogClose">Cancel</button>
<button type="submit" class="btn btn-error" @onclick="this.OnConfirmDelete">Delete</button>
}
else
{
<button type="button" disabled class="btn" @onclick="this.OnDialogClose">Cancel</button>
<button type="submit" disabled class="btn btn-error loading" @onclick="this.OnConfirmDelete">Delete</button>
}
</div>
</Dialog>
@code {
[Parameter]
public int BookmarkContainerId { get; set; }
[Parameter]
public string ContainerTitle { get; set; } = null!;
[Parameter]
public bool Active { get; set; }
[Parameter]
public EventCallback<int> OnDeleted { get; set; }
[Parameter]
public EventCallback OnClose { get; set; }
public bool ShowAlert { get; set; } = false;
public async Task OnDialogClose()
public void OnDialogClose()
{
this.Active = false;
await this.OnClose.InvokeAsync();
this.dispatch.Dispatch(new HideDeleteContainerFormAction());
}
public async Task OnConfirmDelete()
public void OnConfirmDelete()
{
try
{
HttpResponseMessage result = await bookmarkContainersApi
.DeleteBookmarkContainer(this.BookmarkContainerId);
if (result.StatusCode == System.Net.HttpStatusCode.OK)
{
await this.OnDeleted.InvokeAsync(BookmarkContainerId);
this.ShowAlert = false;
this.Active = false;
}
else
{
this.ShowAlert = true;
}
}
catch (AccessTokenNotAvailableException e)
{
e.Redirect();
}
this.dispatch.Dispatch(new SubmitDeleteContainerAction(
this.state.Value.BookmarkContainerIdToDelete));
}
}