From af3b4be59ba1359bd49677159d91991fda1770ea Mon Sep 17 00:00:00 2001
From: Nguyen Xuan Nhan <nguyenxuannhan407@gmail.com>
Date: Sun, 9 Jun 2024 15:50:43 +0700
Subject: [PATCH] style: intergrate blazor component

---
 Directory.Packages.props                      |  1 +
 .../Components/App.razor                      |  1 +
 .../Components/_Imports.razor                 | 10 +++++
 src/RookieShop.StoreFront/Program.cs          | 10 +++++
 .../RookieShop.Storefront.csproj              | 10 +++--
 .../Views/Shared/_Layout.cshtml               | 40 ++++++++++---------
 6 files changed, 49 insertions(+), 23 deletions(-)
 create mode 100644 src/RookieShop.StoreFront/Components/App.razor
 create mode 100644 src/RookieShop.StoreFront/Components/_Imports.razor

diff --git a/Directory.Packages.props b/Directory.Packages.props
index 8931143..4a13d68 100644
--- a/Directory.Packages.props
+++ b/Directory.Packages.props
@@ -76,6 +76,7 @@
 		<!-- Scaffolding -->
 		<PackageVersion Include="Microsoft.TypeScript.MSBuild" Version="5.4.4" />
 		<PackageVersion Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="8.0.2" />
+		<PackageVersion Include="Microsoft.Web.LibraryManager.Build" Version="2.1.175" />
 		<!-- xUnit -->
 		<PackageVersion Include="xunit" Version="2.8.1" />
 		<PackageVersion Include="xunit.runner.visualstudio" Version="2.8.1" />
diff --git a/src/RookieShop.StoreFront/Components/App.razor b/src/RookieShop.StoreFront/Components/App.razor
new file mode 100644
index 0000000..caf75c0
--- /dev/null
+++ b/src/RookieShop.StoreFront/Components/App.razor
@@ -0,0 +1 @@
+@* No-op App component *@
\ No newline at end of file
diff --git a/src/RookieShop.StoreFront/Components/_Imports.razor b/src/RookieShop.StoreFront/Components/_Imports.razor
new file mode 100644
index 0000000..de49b0c
--- /dev/null
+++ b/src/RookieShop.StoreFront/Components/_Imports.razor
@@ -0,0 +1,10 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using static Microsoft.AspNetCore.Components.Web.RenderMode
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+@using Microsoft.JSInterop
+@using RookieShop.Storefront
+@using RookieShop.Storefront.Components
\ No newline at end of file
diff --git a/src/RookieShop.StoreFront/Program.cs b/src/RookieShop.StoreFront/Program.cs
index 17ef2bc..43921a7 100644
--- a/src/RookieShop.StoreFront/Program.cs
+++ b/src/RookieShop.StoreFront/Program.cs
@@ -7,6 +7,7 @@
 using RookieShop.Storefront.Options;
 using RookieShop.Storefront.Services;
 using SmartComponents.Inference.OpenAI;
+using RookieShop.Storefront.Components;
 using Stripe;
 
 var builder = WebApplication.CreateBuilder(args);
@@ -15,6 +16,10 @@
 
 builder.Configuration.Bind(appSettings);
 
+builder.Services.AddRazorComponents()
+    .AddInteractiveServerComponents()
+    .AddCircuitOptions(opt => opt.DetailedErrors = true);
+
 builder.AddServiceDefaults();
 
 StripeConfiguration.ApiKey = appSettings.StripeSettings.StripeSecretKey;
@@ -90,6 +95,11 @@
 
 app.UseAuthorization();
 
+app.UseAntiforgery();
+
+app.MapRazorComponents<App>()
+    .AddInteractiveServerRenderMode();
+
 app.MapControllerRoute(
     "Product",
     "{area:exists}/{controller=Home}/{action=Index}/{id?}");
diff --git a/src/RookieShop.StoreFront/RookieShop.Storefront.csproj b/src/RookieShop.StoreFront/RookieShop.Storefront.csproj
index 5d8d96e..04d1e2d 100644
--- a/src/RookieShop.StoreFront/RookieShop.Storefront.csproj
+++ b/src/RookieShop.StoreFront/RookieShop.Storefront.csproj
@@ -28,12 +28,10 @@
 	</ItemGroup>
 
 	<ItemGroup>
-		<PackageReference Include="Microsoft.TypeScript.MSBuild">
-			<PrivateAssets>all</PrivateAssets>
-			<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
-		</PackageReference>
+		<PackageReference Include="Microsoft.TypeScript.MSBuild" />
 		<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" />
 		<PackageReference Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" />
+		<PackageReference Include="Microsoft.Web.LibraryManager.Build" />
 	</ItemGroup>
 
 	<ItemGroup>
@@ -59,6 +57,10 @@
 		</PackageReference>
 	</ItemGroup>
 
+	<ItemGroup>
+	  <Folder Include="wwwroot\lib\dist\hyperscript.org\" />
+	</ItemGroup>
+
 	<Target Name="Tailwind" BeforeTargets="Build">
 		<Message Importance="Normal" Text="Installing node packages" Condition="!Exists('node_modules')" />
 		<Exec Command="bun install" Condition="!Exists('node_modules')" WorkingDirectory="$(MSBuildProjectDirectory)" />
diff --git a/src/RookieShop.StoreFront/Views/Shared/_Layout.cshtml b/src/RookieShop.StoreFront/Views/Shared/_Layout.cshtml
index 208a4a6..cf585e6 100644
--- a/src/RookieShop.StoreFront/Views/Shared/_Layout.cshtml
+++ b/src/RookieShop.StoreFront/Views/Shared/_Layout.cshtml
@@ -1,6 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <base href="~/"/>
+    <component type="typeof(Microsoft.AspNetCore.Components.Web.HeadOutlet)"
+               render-mode="ServerPrerendered"/>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <partial name="Partials/_DefaultMetaTagsPartital"/>
@@ -69,19 +72,19 @@
                                hx-target="#head"
                                hx-trigger="confirmed"
                                onClick="Swal.fire({
-                                            title: 'Are you sure?' ,
-                                            text: 'You will be logged out.' ,
-                                            icon: 'warning',
-                                            showCancelButton: true,
-                                            confirmButtonColor: '#3085d6',
-                                            cancelButtonColor: '#d33' ,
-                                            confirmButtonText: 'Yes, log out!'
-                                        }).then((result)=>{
-                                            if(result.isConfirmed){
-                                                htmx.trigger(this, 'confirmed');
-                                                toastr.success('You have been logged out');
-                                            } 
-                                        })"
+                                                title: 'Are you sure?' ,
+                                                text: 'You will be logged out.' ,
+                                                icon: 'warning',
+                                                showCancelButton: true,
+                                                confirmButtonColor: '#3085d6',
+                                                cancelButtonColor: '#d33' ,
+                                                confirmButtonText: 'Yes, log out!'
+                                            }).then((result)=>{
+                                                if(result.isConfirmed){
+                                                    htmx.trigger(this, 'confirmed');
+                                                    toastr.success('You have been logged out');
+                                                } 
+                                            })"
                                class="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-4 py-2 text-center cursor-pointer">
                                 Log Out
                             </a>
@@ -145,7 +148,7 @@
                 asp-append-version="true"
                 integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
                 crossorigin="anonymous">
-        </script>
+            </script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.11.0/sweetalert2.min.js"
                 asp-fallback-src="~/lib/dist/sweetalert2/sweetalert2.min.js"
                 asp-fallback-test="window.Swal"
@@ -153,7 +156,7 @@
                 integrity="sha512-Wi5Ms24b10EBwWI9JxF03xaAXdwg9nF51qFUDND/Vhibyqbelri3QqLL+cXCgNYGEgokr+GA2zaoYaypaSDHLg=="
                 crossorigin="anonymous"
                 referrerpolicy="no-referrer">
-        </script>
+            </script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"
                 asp-fallback-src="~/lib/dist/toastr.js/toastr.min.js"
                 asp-fallback-test="window.toastr"
@@ -161,14 +164,14 @@
                 integrity="sha512-lbwH47l/tPXJYG9AcFNoJaTMhGvYWhVM9YI43CT+uteTRRaiLCui8snIgyAN8XWgNjNhCqlAUdzZptso6OCoFQ=="
                 crossorigin="anonymous"
                 referrerpolicy="no-referrer">
-        </script>
+            </script>
         <script src="https://unpkg.com/htmx.org@1.9.12"
                 asp-fallback-src="~/lib/dist/htmx/htmx.min.js"
                 asp-fallback-test="window.htmx"
                 asp-append-version="true"
                 integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2"
                 crossorigin="anonymous">
-        </script>
+            </script>
         <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js"
                 asp-fallback-src="~/lib/dist/alpinejs/cdn.min.js"
                 asp-fallback-test="window.Alpine"
@@ -178,8 +181,7 @@
                 asp-append-version="true"></script>
     </environment>
 </cache>
-
 @await RenderSectionAsync("Scripts", false)
-
+<script src="~/_framework/blazor.server.js"></script>
 </body>
 </html>
\ No newline at end of file