feat: add basket button

.github/workflows/ci.yaml

@@ -10,19 +10,6 @@ on:
       - main
 
 jobs:
-  sonarcloud:
-    name: SonarCloud
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - name: SonarCloud Scan
-        uses: SonarSource/sonarcloud-github-action@master
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
-
   ubuntu-latest:
     name: ubuntu-latest
     runs-on: ubuntu-latest
@@ -40,7 +27,7 @@ jobs:
       - name: Set up Bun
         uses: oven-sh/setup-bun@v1
         with:
-          version: "latest"
+          bun-version: "latest"
 
       - name: Cache .nuke/temp, ~/.nuget/packages
         uses: actions/cache@v2

.github/workflows/lint.yaml

@@ -0,0 +1,24 @@
+name: Lint
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, synchronize, reopened]
+    branches:
+      - main
+
+jobs:
+  sonarcloud:
+    name: SonarCloud
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: SonarCloud Scan
+        uses: SonarSource/sonarcloud-github-action@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

ui/storefront/Areas/Basket/Controllers/BasketController.cs

@@ -36,6 +36,9 @@ public async Task<IActionResult> AddToBasket(BasketRequest basketRequest)
 
         await basketService.AddToBasketAsync(basketRequest, Guid.NewGuid());
 
+        var count = HttpContext.Items.TryGetValue("BasketCount", out var cachedCount) ? (int)(cachedCount ?? 0) : 0;
+        HttpContext.Items["BasketCount"] = count + 1;
+
         return RedirectToAction("Detail", "Product", new { id = basketRequest.ProductId, area = "Product" });
     }
 
@@ -55,6 +58,9 @@ await basketService.DeleteItemAsync(new()
             ProductId = productId
         });
 
+        var count = HttpContext.Items.TryGetValue("BasketCount", out var cachedCount) ? (int)(cachedCount ?? 0) : 0;
+        HttpContext.Items["BasketCount"] = count - 1;
+
         return RedirectToAction("Index");
     }
 }

ui/storefront/Areas/Product/Controllers/ProductController.cs

@@ -1,4 +1,6 @@
-using Microsoft.AspNetCore.Mvc;
+using Htmx;
+using Microsoft.AspNetCore.Http.Extensions;
+using Microsoft.AspNetCore.Mvc;
 using RookieShop.Storefront.Areas.Product.Models.Feedbacks;
 using RookieShop.Storefront.Areas.Product.Models.Products;
 using RookieShop.Storefront.Areas.Product.Services;
@@ -26,6 +28,8 @@ public async Task<IActionResult> Index()
                 .Select(c => Guid.TryParse(c, out var parsedGuid) ? parsedGuid : Guid.Empty)
                 .ToArray();
 
+        Response.Htmx(h => h.PushUrl(Request.GetEncodedUrl()));
+
         var product = await productService.ListProductsAsync(new()
         {
             PageNumber = page,

ui/storefront/Views/Shared/Components/BasketButton/BasketButtonViewComponent.cs

@@ -0,0 +1,36 @@
+using System.Security.Claims;
+using Microsoft.AspNetCore.Mvc;
+using RookieShop.Storefront.Areas.Basket.Services;
+
+namespace RookieShop.Storefront.Views.Shared.Components.BasketButton;
+
+[ViewComponent]
+public sealed class BasketButtonViewComponent(
+    IBasketService basketService,
+    IHttpContextAccessor httpContextAccessor) : ViewComponent
+{
+    public async Task<IViewComponentResult> InvokeAsync()
+    {
+        var context = httpContextAccessor.HttpContext!;
+        var userId = httpContextAccessor.HttpContext?.User.FindFirstValue(ClaimTypes.NameIdentifier);
+
+        int count;
+
+        if (context.Items.TryGetValue("BasketCount", out var cachedCount)) return View((int)(cachedCount ?? 0));
+
+        try
+        {
+            var basket = await basketService.GetBasketAsync(Guid.Parse(userId!));
+
+            count = basket.BasketDetails.Count;
+        }
+        catch (HttpRequestException)
+        {
+            count = 0;
+        }
+
+        context.Items["BasketCount"] = count;
+
+        return View(count);
+    }
+}

ui/storefront/Views/Shared/Components/BasketButton/Default.cshtml

@@ -0,0 +1,15 @@
+@model int
+
+<li>
+    <a asp-area="Basket" asp-controller="Basket" asp-action="Index" class="flex items-center space-x-2 justify-center py-4 pr-2">
+        <div class="relative">
+            @if (Model > 0)
+            {
+                <div class="t-0 absolute left-4">
+                    <p class="flex h-2 w-2 items-center justify-center rounded-full bg-red-500 p-2 text-xs text-white">@Model</p>
+                </div>
+            }
+            <img loading="lazy" class="mt-2 h-6 w-6" src="~/imgs/home/cart.svg" alt="Cart" asp-append-version="true"/>
+        </div>
+    </a>
+</li>

ui/storefront/Views/Shared/_Layout.cshtml

@@ -58,13 +58,7 @@
                                 <img loading="lazy" src="~/imgs/home/account.svg" class="h-6 w-6" alt="Account" asp-append-version="true"/>
                             </a>
                         </li>
-                        <li>
-                            <a asp-area="Basket" asp-controller="Basket" asp-action="Index" class="flex items-center space-x-2 justify-center py-4 pr-2">
-                                <div class="relative">
-                                    <img loading="lazy" class="mt-2 h-6 w-6" src="~/imgs/home/cart.svg" alt="Cart" asp-append-version="true"/>
-                                </div>
-                            </a>
-                        </li>
+                        @await Component.InvokeAsync("BasketButton")
                         <li>
                             <a hx-post
                                hx-area="User"

ui/storefront/wwwroot/css/output.css

@@ -633,6 +633,10 @@ video {
   left: 50%;
 }
 
+.left-4 {
+  left: 1rem;
+}
+
 .right-0 {
   right: 0px;
 }
@@ -854,6 +858,10 @@ video {
   height: 2.75rem;
 }
 
+.h-2 {
+  height: 0.5rem;
+}
+
 .h-4 {
   height: 1rem;
 }
@@ -894,6 +902,10 @@ video {
   width: 2.5rem;
 }
 
+.w-2 {
+  width: 0.5rem;
+}
+
 .w-4 {
   width: 1rem;
 }
@@ -1328,6 +1340,11 @@ video {
   background-color: rgb(254 242 242 / var(--tw-bg-opacity));
 }
 
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
 .bg-red-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity));