Add a countdown on bid page (#120)

src/Client/DynamoLeagueBlazor.Client.csproj

@@ -10,6 +10,7 @@
 
   <ItemGroup>
     <PackageReference Include="Blazored.FluentValidation" Version="2.0.3" />
+    <PackageReference Include="Humanizer.Core" Version="2.14.1" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.5" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.5" PrivateAssets="all" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="6.0.5" />

src/Client/Features/FreeAgents/BidCountdown.razor

@@ -0,0 +1,3 @@
+<MudText Typo=Typo.h6 Color=_color Align=Align.Center>
+    @_remainingTime
+</MudText>

src/Client/Features/FreeAgents/BidCountdown.razor.cs

@@ -0,0 +1,43 @@
+using Humanizer;
+using Humanizer.Localisation;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using System.Timers;
+using Timer = System.Timers.Timer;
+
+namespace DynamoLeagueBlazor.Client.Features.FreeAgents;
+
+public partial class BidCountdown
+{
+    [Parameter, EditorRequired] public DateTime DateTime { get; set; }
+
+    private readonly Timer _timer = new(1000);
+    private string _remainingTime = string.Empty;
+    private Color _color = Color.Warning;
+
+    protected override void OnInitialized()
+    {
+        _timer.Elapsed += CountDown;
+        _timer.Enabled = true;
+    }
+
+    private void CountDown(object? source, ElapsedEventArgs e)
+    {
+        var remainingTime = DateTime - DateTime.Now;
+
+        if (remainingTime <= TimeSpan.FromDays(1))
+        {
+            _color = Color.Error;
+
+            if (remainingTime <= TimeSpan.Zero)
+            {
+                _timer.Enabled = false;
+                remainingTime = TimeSpan.Zero;
+            }
+        }
+
+        _remainingTime = remainingTime.Humanize(4, maxUnit: TimeUnit.Day, minUnit: TimeUnit.Second);
+
+        InvokeAsync(StateHasChanged);
+    }
+}

src/Client/Features/FreeAgents/Detail.razor

@@ -35,11 +35,9 @@ else
                     <MudText Typo=Typo.h6 Color=Color.Secondary>@_result.Position</MudText>
                     <MudDivider Class="mt-2" Style="width: 100%; max-width:250px;"/>
                     <MudText Typo=Typo.h6>
-                        Bidding Ends on
-                    </MudText>
-                    <MudText Typo=Typo.h6 Color=Color.Warning Align=Align.Center>
-                        @_result.EndOfFreeAgency
+                        Bidding Ends In
                     </MudText>
+                    <BidCountdown DateTime=@_result.EndOfFreeAgency />
                 </MudItem>
                 <MudItem lg=9 xs=12>
                      <MudGrid>

src/Server/Features/FreeAgents/Detail.cs

@@ -59,7 +59,7 @@ public class DetailMappingProfile : Profile
     public DetailMappingProfile()
     {
         CreateMap<Player, FreeAgentDetailResult>()
-            .ForMember(d => d.EndOfFreeAgency, mo => mo.MapFrom(s => s.EndOfFreeAgency!.Value.ToShortDateString()))
+            .ForMember(d => d.EndOfFreeAgency, mo => mo.MapFrom(s => s.EndOfFreeAgency!.Value))
             .ForMember(d => d.Team, mo => mo.MapFrom(s => s.Team.Name))
             .ForMember(d => d.Bids, mo => mo.MapFrom(s => s.Bids.OrderByDescending(b => b.CreatedOn)));
         CreateMap<Bid, FreeAgentDetailResult.BidItem>()

src/Shared/Features/FreeAgents/Detail.cs

@@ -6,7 +6,7 @@ public class FreeAgentDetailResult
     public string Position { get; set; } = null!;
     public string HeadShotUrl { get; set; } = null!;
     public string Team { get; set; } = null!;
-    public string EndOfFreeAgency { get; set; } = null!;
+    public DateTime EndOfFreeAgency { get; set; }
 
     public IEnumerable<BidItem> Bids { get; set; } = Enumerable.Empty<BidItem>();
 

src/Tests/Features/FreeAgents/BidCountdownTests.cs

@@ -0,0 +1,43 @@
+using DynamoLeagueBlazor.Client.Features.FreeAgents;
+
+namespace DynamoLeagueBlazor.Tests.Features.FreeAgents;
+
+public class BidCountdownTests : UITestBase
+{
+    [Fact]
+    public void CountsDownEverySecondUntilZero()
+    {
+        var cut = RenderComponent<BidCountdown>(parameters =>
+        {
+            parameters.Add(p => p.DateTime, DateTime.Now.AddSeconds(4));
+        });
+
+        cut.WaitForState(() => cut.Markup.Contains("1 second"), TimeSpan.FromSeconds(4));
+        cut.WaitForState(() => cut.Markup.Contains("0 seconds"));
+
+        cut.Render();
+        cut.Markup.Should().Contain("0 seconds");
+    }
+
+    [Fact]
+    public void GivenLessThanADayAway_ThenShowsRedText()
+    {
+        var cut = RenderComponent<BidCountdown>(parameters =>
+        {
+            parameters.Add(p => p.DateTime, DateTime.Now.AddSeconds(1));
+        });
+
+        cut.Markup.Contains("mud-text-error");
+    }
+
+    [Fact]
+    public void GivenMoreThanADayAway_ThenShowsYellowText()
+    {
+        var cut = RenderComponent<BidCountdown>(parameters =>
+        {
+            parameters.Add(p => p.DateTime, DateTime.Now.AddDays(1));
+        });
+
+        cut.Markup.Contains("mud-text-warning");
+    }
+}

src/Tests/Features/FreeAgents/DetailTests.cs

@@ -49,7 +49,7 @@ public async Task GivenAnyAuthenticatedUser_WhenGivenValidPlayerId_ThenReturnsEx
         response.Position.Should().Be(mockFreeAgent.Position);
         response.Team.Should().Be(mockTeam.Name);
         response.HeadShotUrl.Should().Be(mockFreeAgent.HeadShotUrl);
-        response.EndOfFreeAgency.Should().Be(mockFreeAgent.EndOfFreeAgency!.Value.ToShortDateString());
+        response.EndOfFreeAgency.Should().Be(mockFreeAgent.EndOfFreeAgency!.Value);
 
         response!.Bids.Should().HaveCount(1);
         var bid = response.Bids.First();