Add deleting bookmarks

Start/Client/Components/Bookmark.razor

@@ -1,20 +1,41 @@
-<li class="bookmark">
+@using Start.Client.Store.State
+@using Start.Client.Store.Features.DeleteBookmark
+@using Fluxor
+
+@inherits Fluxor.Blazor.Web.Components.FluxorComponent
+
+@inject IDispatcher dispatch
+@inject IState<RootState> state
+
+<li class="bookmark">
     @if (!String.IsNullOrEmpty(this.Model.Notes))
     {
-        <details>
+        <details class="bookmarkDetails">
             <summary>
                 <a href="@this.Model.Url" class="bookmarkLink">@this.Model.Title</a>
             </summary>
-            @this.Model.Notes
+            <pre>@this.Model.Notes</pre>
         </details>
     }
     else
     {
-        <a href="@this.Model.Url" class="bookmarkLink">@this.Model.Title</a>
+        <a href="@this.Model.Url" class="bookmarkLink bookmarkDetails">@this.Model.Title</a>
+    }
+
+    @if (this.state.Value.EditMode)
+    {
+        <button class="btn btn-link text-error" @onclick="this.OnDeleteBookmarkClick">
+            <i class="icon icon-delete"></i>
+        </button>
     }
 </li>
 
 @code {
     [Parameter]
     public BookmarkDto Model { get; set; } = null!;
+
+    public void OnDeleteBookmarkClick()
+    {
+        this.dispatch.Dispatch(new ShowDeleteBookmarkFormAction(this.Model));
+    }
 }

Start/Client/Components/DeleteBookmark.razor

@@ -0,0 +1,75 @@
+@using Start.Client.Store.Features.DeleteBookmark
+@using Fluxor
+
+@inherits Fluxor.Blazor.Web.Components.FluxorComponent
+
+@inject IDispatcher dispatch
+@inject IState<DeleteBookmarkState> state
+
+@{ string title = $"Delete Bookmark \"{this.state.Value.BookmarkToDelete?.Title}\""; }
+
+<Dialog Title="@title" Active="this.state.Value.ShowDeleteBookmarkForm" OnClose="this.OnClose">
+    @if (this.state.Value.DeleteBookmarkErrorMessage != null)
+    {
+        <Alert Type="Alert.AlertType.Error">
+            @this.state.Value.DeleteBookmarkErrorMessage
+        </Alert>
+    }
+
+    @if (this.state.Value.BookmarkToDelete == null)
+    {
+        <Alert Type="Alert.AlertType.Error">
+            There is no bookmark to delete selected
+        </Alert>
+    }
+    else
+    {
+        <p>Are you sure you want to delete this bookmark?</p>
+        <dl>
+            <dt>Title</dt>
+            <dd>@this.state.Value.BookmarkToDelete.Title</dd>
+
+            <dt>URL</dt>
+            <dd>@this.state.Value.BookmarkToDelete.Url</dd>
+
+            @if (!string.IsNullOrWhiteSpace(this.state.Value.BookmarkToDelete.Notes))
+            {
+                <dt>Notes</dt>
+                <dd>@this.state.Value.BookmarkToDelete.Notes</dd>
+            }
+        </dl>
+
+        <div class="text-right">
+            @if (!this.state.Value.IsLoadingDeleteBookmark)
+            {
+                <button type="button" class="btn" @onclick="this.OnClose">Cancel</button>
+                <button type="submit" class="btn btn-error" @onclick="this.OnConfirmDelete">Delete</button>
+            }
+            else
+            {
+                <button type="button" disabled class="btn" @onclick="this.OnClose">Cancel</button>
+                <button type="submit" disabled class="btn btn-error loading" @onclick="this.OnConfirmDelete">Delete</button>
+            }
+        </div>
+    }
+</Dialog>
+
+@code {
+    private void OnClose()
+    {
+        this.dispatch.Dispatch(new HideDeleteBookmarkFormAction());
+    }
+
+    private void OnConfirmDelete()
+    {
+        if (this.state.Value.BookmarkToDelete == null)
+        {
+            dispatch.Dispatch(new ErrorFetchingDeleteBookmarkAction(
+                "No bookmark to delete is selected"));
+            return;
+        }
+
+        this.dispatch.Dispatch(new SubmitDeleteBookmarkFormAction(
+            this.state.Value.BookmarkToDelete.BookmarkId));
+    }
+}