Update 05-checkout-with-validation

Author: danroth27

docs/05-checkout-with-validation.md

@@ -29,7 +29,8 @@ To implement `PlaceOrder`, copy the method with that name from `Index.razor` int
 @code {
     async Task PlaceOrder()
     {
-        var newOrderId = await HttpClient.PostJsonAsync<int>("orders", OrderState.Order);
+        var response = await HttpClient.PostAsJsonAsync("orders", OrderState.Order);
+        var newOrderId = await response.Content.ReadFromJsonAsync<int>();
         OrderState.ResetOrder();
         NavigationManager.NavigateTo($"myorders/{newOrderId}");
     }
@@ -311,6 +312,18 @@ The green/red styling is achieved by applying CSS classes, so you can change the
 
 `InputText` isn't the only built-in input component, though it is the only one we need in this case. Others include `InputCheckbox`, `InputDate`, `InputSelect`, and more.
 
+## Bonus challenge
+
+If you're keen and have time, can you prevent accidental double-submission of the form?
+
+Currently, if it takes a while for the form post to reach the server, the user could click submit multiple times and send multiple copies of their order. Try declaring a `bool isSubmitting` property that, when `true`, results in the *Place order* button being disabled. Remember to set it back to `false` when the submission is completed (successfully or not), otherwise the user might get stuck.
+
+To check your solution works, you might want to slow down the server by adding the following line at the top of `PlaceOrder()` inside `OrdersController.cs`:
+
+```cs
+await Task.Delay(5000); // Wait 5 seconds
+```
+
 ## Up next
 
 Up next we'll add [authentication and authorization](https://github.com/dotnet-presentations/blazor-workshop/blob/master/docs/06-authentication-and-authorization.md)

save-points/05-checkout-with-validation/BlazingPizza.Client/App.razor

@@ -4,7 +4,7 @@
     </Found>
     <NotFound>
         <LayoutView Layout="typeof(MainLayout)">
-            <div class="main">Page not found</div>
+            <div class="main">Sorry, there's nothing at this address.</div>
         </LayoutView>
     </NotFound>
 </Router>

save-points/05-checkout-with-validation/BlazingPizza.Client/BlazingPizza.Client.csproj

@@ -9,8 +9,8 @@
   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="$(BlazorVersion)" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="$(BlazorVersion)" PrivateAssets="all" />
-    <PackageReference Include="Microsoft.AspNetCore.Blazor.HttpClient" Version="$(BlazorVersion)" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="$(AspNetCoreVersion)" />
+    <PackageReference Include="System.Net.Http.Json" Version="$(SystemNetHttpJsonVersion)" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="$(BlazorVersion)" />
   </ItemGroup>
 
   <ItemGroup>

save-points/05-checkout-with-validation/BlazingPizza.Client/Pages/Checkout.razor

@@ -17,7 +17,7 @@
             </div>
         </div>
 
-        <button type="submit" class="checkout-button btn btn-warning">
+        <button type="submit" class="checkout-button btn btn-warning" disabled="@isSubmitting">
             Place order
         </button>
 
@@ -26,9 +26,13 @@
 </div>
 
 @code {
+    bool isSubmitting;
+
     async Task PlaceOrder()
     {
-        var newOrderId = await HttpClient.PostJsonAsync<int>("orders", OrderState.Order);
+        isSubmitting = true;
+        var response = await HttpClient.PostAsJsonAsync("orders", OrderState.Order);
+        var newOrderId= await response.Content.ReadFromJsonAsync<int>();
         OrderState.ResetOrder();
         NavigationManager.NavigateTo($"myorders/{newOrderId}");
     }

save-points/05-checkout-with-validation/BlazingPizza.Client/Pages/Index.razor

@@ -61,6 +61,6 @@
 
     protected override async Task OnInitializedAsync()
     {
-        specials = await HttpClient.GetJsonAsync<List<PizzaSpecial>>("specials");
+        specials = await HttpClient.GetFromJsonAsync<List<PizzaSpecial>>("specials");
     }
 }

save-points/05-checkout-with-validation/BlazingPizza.Client/Pages/MyOrders.razor

@@ -43,6 +43,6 @@
 
     protected override async Task OnParametersSetAsync()
     {
-        ordersWithStatus = await HttpClient.GetJsonAsync<List<OrderWithStatus>>("orders");
+        ordersWithStatus = await HttpClient.GetFromJsonAsync<List<OrderWithStatus>>("orders");
     }
 }

save-points/05-checkout-with-validation/BlazingPizza.Client/Pages/OrderDetails.razor

@@ -57,7 +57,7 @@
             try
             {
                 invalidOrder = false;
-                orderWithStatus = await HttpClient.GetJsonAsync<OrderWithStatus>($"orders/{OrderId}");
+                orderWithStatus = await HttpClient.GetFromJsonAsync<OrderWithStatus>($"orders/{OrderId}");
             }
             catch (Exception ex)
             {

save-points/05-checkout-with-validation/BlazingPizza.Client/Shared/ConfigurePizzaDialog.razor

@@ -69,7 +69,7 @@
 
     protected async override Task OnInitializedAsync()
     {
-        toppings = await HttpClient.GetJsonAsync<List<Topping>>("toppings");
+        toppings = await HttpClient.GetFromJsonAsync<List<Topping>>("toppings");
     }
 
     void ToppingSelected(ChangeEventArgs e)

save-points/05-checkout-with-validation/BlazingPizza.Client/Shared/MainLayout.razor

@@ -1,7 +1,9 @@
 @inherits LayoutComponentBase
 
 <div class="top-bar">
-    <img class="logo" src="img/logo.svg" />
+    <a class="logo" href="">
+        <img src="img/logo.svg" />
+    </a>
 
     <NavLink href="" class="nav-tab" Match="NavLinkMatch.All">
         <img src="img/pizza-slice.svg" />

save-points/05-checkout-with-validation/BlazingPizza.Client/_Imports.razor

@@ -1,9 +1,12 @@
 @using System.Net.Http
+@using System.Net.Http.Headers
+@using System.Net.Http.Json
 @using Microsoft.AspNetCore.Authorization
 @using Microsoft.AspNetCore.Components.Authorization
 @using Microsoft.AspNetCore.Components.Forms
 @using Microsoft.AspNetCore.Components.Routing
 @using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
 @using Microsoft.JSInterop
 @using BlazingPizza.Client
 @using BlazingPizza.Client.Shared