feat: Enhance UserProfile page with real API integration and improved UI

- Updated UserProfile.razor to utilize ReqResApi for fetching user data from JSONPlaceholder.
- Improved loading states and error handling for user profile loading.
- Expanded user selection options from 6 to 12 users.
- Added a Quick Load section for faster user switching.
- Refined UI elements for better user experience and clarity.
- Introduced ReqResApi service for real API calls and data fetching.
- Updated AsyncDataDemoState to remove simulated API calls and reflect real data fetching.
- Created MiddlewareDemoState to demonstrate custom middleware functionality.
- Implemented RealApiDemoState to showcase multiple public REST APIs.
- Enhanced Query and QueryComponent classes for better query management and initialization.

Author: mashrulhaque

samples/EasyAppDev.Blazor.Store.Sample/EasyAppDev.Blazor.Store.Sample.csproj

@@ -1,14 +1,14 @@
 <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
   <PropertyGroup>
-    <TargetFramework>net10.0</TargetFramework>
+    <TargetFramework>net9.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.0-preview.1.25120.3" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.0-preview.1.25120.3" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.0" PrivateAssets="all" />
   </ItemGroup>
 
   <ItemGroup>

samples/EasyAppDev.Blazor.Store.Sample/Layout/NavMenu.razor

@@ -104,6 +104,11 @@
                 <span aria-hidden="true">:</span> Redux-Style Actions
             </NavLink>
         </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="middleware-demo">
+                <span aria-hidden="true">|</span> Middleware System
+            </NavLink>
+        </div>
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="plugin-demo">
                 <span aria-hidden="true">[</span> Plugin System
@@ -129,6 +134,11 @@
                 <span aria-hidden="true">,</span> Cross-Store Updates
             </NavLink>
         </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="real-api-demo">
+                <span aria-hidden="true">@("@")</span> Real API Demo
+            </NavLink>
+        </div>
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="comprehensive-demo">
                 <span aria-hidden="true">/</span> All Features Demo

samples/EasyAppDev.Blazor.Store.Sample/Middleware/DemoMiddleware.cs

@@ -0,0 +1,101 @@
+using System.Diagnostics;
+using EasyAppDev.Blazor.Store.Middleware;
+using EasyAppDev.Blazor.Store.Sample.State;
+
+namespace EasyAppDev.Blazor.Store.Sample.Middleware;
+
+/// <summary>
+/// Simple logging middleware that logs state changes to the console.
+/// Demonstrates basic middleware implementation.
+/// </summary>
+public class ConsoleLoggingMiddleware : IMiddleware<MiddlewareDemoState>
+{
+    public Task OnBeforeUpdateAsync(MiddlewareDemoState currentState, string? action)
+    {
+        Console.WriteLine($"[BEFORE] Action: {action}, Current Counter: {currentState.Counter}");
+        return Task.CompletedTask;
+    }
+
+    public Task OnAfterUpdateAsync(MiddlewareDemoState previousState, MiddlewareDemoState newState, string? action)
+    {
+        Console.WriteLine($"[AFTER] Action: {action}, Counter: {previousState.Counter} -> {newState.Counter}");
+        return Task.CompletedTask;
+    }
+}
+
+/// <summary>
+/// Performance tracking middleware that measures update duration.
+/// Demonstrates stateful middleware with Stopwatch.
+/// </summary>
+public class PerformanceMiddleware : IMiddleware<MiddlewareDemoState>
+{
+    private readonly Stopwatch _stopwatch = new();
+
+    public Action<string?, TimeSpan>? OnActionCompleted { get; set; }
+
+    public Task OnBeforeUpdateAsync(MiddlewareDemoState currentState, string? action)
+    {
+        _stopwatch.Restart();
+        return Task.CompletedTask;
+    }
+
+    public Task OnAfterUpdateAsync(MiddlewareDemoState previousState, MiddlewareDemoState newState, string? action)
+    {
+        _stopwatch.Stop();
+        OnActionCompleted?.Invoke(action, _stopwatch.Elapsed);
+        return Task.CompletedTask;
+    }
+}
+
+/// <summary>
+/// Validation middleware that prevents invalid state changes.
+/// Demonstrates middleware that can affect state updates.
+/// </summary>
+public class ValidationMiddleware : IMiddleware<MiddlewareDemoState>
+{
+    public int MinValue { get; set; } = -100;
+    public int MaxValue { get; set; } = 100;
+
+    public Action<string>? OnValidationFailed { get; set; }
+
+    public Task OnBeforeUpdateAsync(MiddlewareDemoState currentState, string? action)
+    {
+        return Task.CompletedTask;
+    }
+
+    public Task OnAfterUpdateAsync(MiddlewareDemoState previousState, MiddlewareDemoState newState, string? action)
+    {
+        if (newState.Counter < MinValue || newState.Counter > MaxValue)
+        {
+            OnValidationFailed?.Invoke($"Counter {newState.Counter} is out of range [{MinValue}, {MaxValue}]");
+        }
+        return Task.CompletedTask;
+    }
+}
+
+/// <summary>
+/// Action history middleware that tracks all actions.
+/// Demonstrates middleware that can update state with additional info.
+/// </summary>
+public class ActionHistoryMiddleware : IMiddleware<MiddlewareDemoState>
+{
+    public List<(DateTime Time, string? Action, int PrevValue, int NewValue)> History { get; } = new();
+
+    public Task OnBeforeUpdateAsync(MiddlewareDemoState currentState, string? action)
+    {
+        return Task.CompletedTask;
+    }
+
+    public Task OnAfterUpdateAsync(MiddlewareDemoState previousState, MiddlewareDemoState newState, string? action)
+    {
+        History.Add((DateTime.Now, action, previousState.Counter, newState.Counter));
+
+        // Keep only last 50 entries
+        while (History.Count > 50)
+        {
+            History.RemoveAt(0);
+        }
+
+        return Task.CompletedTask;
+    }
+}