feat: add storefront memcache

ui/storefront/Areas/Basket/Views/Shared/Components/CheckOut/Default.cshtml

@@ -123,11 +123,12 @@
         </div>
     </div>
     <hr/>
-    <button class="w-full text-center bg-indigo-600 rounded-xl py-3 px-6 font-semibold text-lg text-white transition-all duration-500 hover:bg-indigo-700 my-6">
+    <button type="submit"
+            class="w-full text-center bg-indigo-600 rounded-xl py-3 px-6 font-semibold text-lg text-white transition-all duration-500 hover:bg-indigo-700 my-6">
         Checkout
     </button>
     <smart-paste-button class="w-full text-center bg-stone-600 rounded-xl py-3 px-6 font-semibold text-lg text-white transition-all duration-500 hover:bg-stone-700">
-        <img loading="lazy" src="~/imgs/payment/smart-paste.svg" class="h-6 inline-block mr-2" alt="Paste" asp-append-version="true"/>
+        <img loading="lazy" src="~/imgs/payment/smart-paste.svg" class="h-6 inline-block mr-2 htmx-indicator" alt="Paste" asp-append-version="true" />
         Smart Paste
     </smart-paste-button>
 </form>

ui/storefront/Areas/Product/Views/Shared/Components/ListCategories/ListCategoriesViewComponent.cs

@@ -1,14 +1,20 @@
 using Microsoft.AspNetCore.Mvc;
+using RookieShop.Storefront.Areas.Product.Models.Categories;
 using RookieShop.Storefront.Areas.Product.Services;
+using RookieShop.Storefront.Services;
 
 namespace RookieShop.Storefront.Areas.Product.Views.Shared.Components.ListCategories;
 
 [ViewComponent]
-public class ListCategoriesViewComponent(ICategoryService categoryService) : ViewComponent
+public class ListCategoriesViewComponent(
+    ICategoryService categoryService,
+    IMemoryCacheService memoryCacheService) : ViewComponent
 {
     public async Task<IViewComponentResult> InvokeAsync()
     {
-        var categories = await categoryService.ListCategoriesAsync();
-        return View(categories);
+        var data = await memoryCacheService.GetOrSetAsync(nameof(ListCategoriesViewModel),
+            categoryService.ListCategoriesAsync);
+
+        return View(data);
     }
 }

ui/storefront/Areas/Product/Views/Shared/_ProductSubLayout.cshtml

@@ -11,29 +11,25 @@
             <h1 class="text-4xl font-bold tracking-tight text-gray-900">All Products</h1>
             <div class="flex items-center">
                 <div class="relative inline-block text-left">
-                    <div>
-                        <button 
-                            id="sort-btn" 
-                            type="button" 
-                            class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900" 
-                            aria-expanded="false" 
-                            aria-haspopup="true"
-                            @@click="isDropdownOpen = !isDropdownOpen"
-                        >
-                            Sort
-                            <img asp-append-version="true" loading="lazy" class="-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500" src="~/imgs/filter/arrow-down.svg" alt="Sort"/>
-                        </button>
-                    </div>
-                    <div 
-                        id="sort-category-dropdown" 
-                        class="absolute right-0 z-10 mt-2 w-40 origin-top-right rounded-md bg-white shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none" 
-                        role="menu" 
-                        aria-orientation="vertical" 
-                        aria-labelledby="menu-button" 
+                    <button
+                        id="sort-btn"
+                        type="button"
+                        class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900"
+                        aria-expanded="false"
+                        aria-haspopup="true"
+                        @@click="isDropdownOpen = !isDropdownOpen">
+                        Sort
+                        <img asp-append-version="true" loading="lazy" class="-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500" src="~/imgs/filter/arrow-down.svg" alt="Sort"/>
+                    </button>
+                    <div
+                        id="sort-category-dropdown"
+                        class="absolute right-0 z-10 mt-2 w-40 origin-top-right rounded-md bg-white shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+                        role="menu"
+                        aria-orientation="vertical"
+                        aria-labelledby="menu-button"
                         tabindex="-1"
                         x-show="isDropdownOpen"
-                        @@click.away="isDropdownOpen = false"
-                    >
+                        @@click.away="isDropdownOpen = false">
                         <div class="py-1" role="none">
                             <a hx-get
                                hx-area="Product"

ui/storefront/Program.cs

@@ -5,6 +5,7 @@
 using RookieShop.Storefront.Configurations;
 using RookieShop.Storefront.Middlewares;
 using RookieShop.Storefront.Options;
+using RookieShop.Storefront.Services;
 using SmartComponents.Inference.OpenAI;
 
 var builder = WebApplication.CreateBuilder(args);
@@ -37,6 +38,8 @@
 
 builder.Services.AddMemoryCache();
 
+builder.Services.AddSingleton<IMemoryCacheService, MemoryCacheService>();
+
 builder.Services.AddScoped<CustomerInfoMiddleware>();
 
 builder.Services.AddRouting(options => options.ConstraintMap["slugify"] = typeof(SlugifyParameterTransformer));

ui/storefront/Services/IMemoryCacheService.cs

@@ -0,0 +1,7 @@
+namespace RookieShop.Storefront.Services;
+
+public interface IMemoryCacheService
+{
+    public Task<T?> GetOrSetAsync<T>(string cacheKey, Func<Task<T>> getItemCallback);
+    public void Remove(string cacheKey);
+}

ui/storefront/Services/MemoryCacheService.cs

@@ -0,0 +1,35 @@
+using Ardalis.GuardClauses;
+using Microsoft.Extensions.Caching.Memory;
+
+namespace RookieShop.Storefront.Services;
+
+public sealed class MemoryCacheService(IMemoryCache cache) : IMemoryCacheService
+{
+    private readonly MemoryCacheEntryOptions _cacheDuration = new()
+    {
+        AbsoluteExpirationRelativeToNow = TimeSpan.FromMinutes(5)
+    };
+
+    public async Task<T?> GetOrSetAsync<T>(string cacheKey, Func<Task<T>> getItemCallback)
+    {
+        Guard.Against.NullOrEmpty(cacheKey);
+
+        if (cache.TryGetValue(cacheKey, out T? cachedItem))
+            return cachedItem;
+
+        var item = await getItemCallback();
+
+        if (item is null)
+            return item;
+
+        cache.Set(cacheKey, item, _cacheDuration);
+
+        return item;
+    }
+
+    public void Remove(string cacheKey)
+    {
+        Guard.Against.NullOrEmpty(cacheKey);
+        cache.Remove(cacheKey);
+    }
+}

ui/storefront/Views/Shared/Components/CategoryDropDown/CategoryDropDownViewComponent.cs

@@ -0,0 +1,20 @@
+using Microsoft.AspNetCore.Mvc;
+using RookieShop.Storefront.Areas.Product.Models.Categories;
+using RookieShop.Storefront.Areas.Product.Services;
+using RookieShop.Storefront.Services;
+
+namespace RookieShop.Storefront.Views.Shared.Components.CategoryDropDown;
+
+[ViewComponent]
+public sealed class CategoryDropDownViewComponent(
+    ICategoryService categoryService,
+    IMemoryCacheService memoryCacheService) : ViewComponent
+{
+    public async Task<IViewComponentResult> InvokeAsync()
+    {
+        var data = await memoryCacheService.GetOrSetAsync(nameof(ListCategoriesViewModel),
+            categoryService.ListCategoriesAsync);
+
+        return View(data);
+    }
+}

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

@@ -0,0 +1,25 @@
+@model RookieShop.Storefront.Areas.Product.Models.Categories.ListCategoriesViewModel
+
+@if(Model.Categories.Count > 0)
+{
+    <li x-data="{ open: false }" class="relative group" @@click.away=" open=false">
+        <button class="block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 text-gray-900" @@click="open = !open">
+            Categories
+            <img asp-append-version="true" loading="lazy" class="inline-block w-4 h-4 ml-2" src="~/imgs/filter/arrow-down.svg" alt="Sort" />
+        </button>
+
+        <div x-show="open" class="absolute mt-2 w-48 bg-white rounded-md shadow-lg z-10">
+            @foreach(var category in Model.Categories)
+            {
+                <a asp-area="Product"
+                   asp-controller="Product"
+                   asp-action="Index"
+                   asp-route-category="@category.Id"
+                   asp-route-page="1"
+                   class="block px-4 py-2 text-gray-800 hover:bg-gray-100">
+                    @category.Name
+                </a>
+            }
+        </div>
+    </li>
+}

ui/storefront/Views/Shared/_Layout.cshtml

@@ -73,7 +73,6 @@
                                hx-vals="@null"
                                hx-swap="outerHTML"
                                hx-target="#head"
-                               hx-indicator=".loading"
                                hx-trigger="confirmed"
                                onClick="Swal.fire({
                                             title: 'Are you sure?' ,
@@ -116,6 +115,7 @@
                             Products
                         </a>
                     </li>
+                    @await Component.InvokeAsync("CategoryDropDown")
                     <li>
                         <a asp-area="" asp-controller="About" asp-action="Index" class="block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 @(ViewContext.RouteData.Values["controller"]!.Equals("About") ? "text-blue-700" : "text-gray-900")">
                             About

ui/storefront/wwwroot/css/output.css

@@ -762,6 +762,10 @@ video {
   margin-left: 0.25rem;
 }
 
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
 .ml-3 {
   margin-left: 0.75rem;
 }
@@ -902,6 +906,10 @@ video {
   width: 11rem;
 }
 
+.w-48 {
+  width: 12rem;
+}
+
 .w-5 {
   width: 1.25rem;
 }
@@ -1818,6 +1826,12 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);