Display dates/times in local TZ (#7)

src/JobsJobsJobs/Client/AppState.cs

@@ -1,4 +1,6 @@
 using JobsJobsJobs.Shared;
+using Microsoft.JSInterop;
+using NodaTime;
 using System;
 using System.Collections.Generic;
 using System.Net.Http;
@@ -75,6 +77,32 @@ namespace JobsJobsJobs.Client
             return _continents;
         }
 
+        private DateTimeZone? _tz = null;
+
+        /// <summary>
+        /// Get the time zone for the current user's browser
+        /// </summary>
+        /// <param name="js">The JS interop runtime for the application</param>
+        /// <returns>The time zone based on the user's browser</returns>
+        public async Task<DateTimeZone> GetTimeZone(IJSRuntime js)
+        {
+            if (_tz == null)
+            {
+                try
+                {
+                    _tz = DateTimeZoneProviders.Tzdb.GetZoneOrNull(await js.InvokeAsync<string>("getTimeZone"));
+                }
+                catch (Exception) { }
+            }
+            if (_tz == null)
+            {
+                // Either the zone wasn't found, or the user's browser denied us access to it; there's not much to do
+                // here but set it to UTC and move on
+                _tz = DateTimeZoneProviders.Tzdb.GetZoneOrNull("Etc/UTC")!;
+            }
+            return _tz;
+        }
+
         public AppState() { }
 
         private void NotifyChanged() => OnChange.Invoke();

src/JobsJobsJobs/Client/Shared/FullDate.razor

@@ -1,23 +1,4 @@
-@using NodaTime
-@using NodaTime.Text
-@using System.Globalization
+@inject IJSRuntime js
+@inject AppState state
 
 @Translated
-
-@code {
-  /// <summary>
-  /// The pattern with which dates will be formatted
-  /// </summary>
-  private static InstantPattern pattern = InstantPattern.Create("ld<MMMM d, yyyy>", CultureInfo.CurrentCulture);
-
-  /// <summary>
-  /// The date to be formatted
-  /// </summary>
-  [Parameter]
-  public Instant TheDate { get; set; }
-
-  /// <summary>
-  /// The formatted date
-  /// </summary>
-  private string Translated => pattern.Format(TheDate);
-}

src/JobsJobsJobs/Client/Shared/FullDate.razor.cs

@@ -0,0 +1,30 @@
+using Microsoft.AspNetCore.Components;
+using NodaTime;
+using NodaTime.Text;
+using System.Threading.Tasks;
+
+namespace JobsJobsJobs.Client.Shared
+{
+    public partial class FullDate : ComponentBase
+    {
+        /// <summary>
+        /// The pattern with which dates will be formatted
+        /// </summary>
+        private static readonly ZonedDateTimePattern Pattern =
+            ZonedDateTimePattern.CreateWithCurrentCulture("ld<MMMM d, yyyy>", DateTimeZoneProviders.Tzdb);
+
+        /// <summary>
+        /// The date to be formatted
+        /// </summary>
+        [Parameter]
+        public Instant TheDate { get; set; }
+
+        /// <summary>
+        /// The formatted date
+        /// </summary>
+        private string Translated { get; set; } = "";
+
+        protected override async Task OnInitializedAsync() =>
+            Translated = Pattern.Format(TheDate.InZone(await state.GetTimeZone(js)));
+    }
+}

src/JobsJobsJobs/Client/Shared/FullDateTime.razor

@@ -1,23 +1,4 @@
-@using NodaTime
-@using NodaTime.Text
-@using System.Globalization
+@inject IJSRuntime js
+@inject AppState state
 
 @Translated
-
-@code {
-    /// <summary>
-    /// The pattern with which dates will be formatted
-    /// </summary>
-    private static InstantPattern pattern = InstantPattern.Create("ld<D> ' at ' lt<t>", CultureInfo.CurrentCulture);
-
-    /// <summary>
-    /// The date to be formatted
-    /// </summary>
-    [Parameter]
-    public Instant TheDate { get; set; }
-
-    /// <summary>
-    /// The formatted date
-    /// </summary>
-    private string Translated => pattern.Format(TheDate);
-}

src/JobsJobsJobs/Client/Shared/FullDateTime.razor.cs

@@ -0,0 +1,30 @@
+using Microsoft.AspNetCore.Components;
+using NodaTime;
+using NodaTime.Text;
+using System.Threading.Tasks;
+
+namespace JobsJobsJobs.Client.Shared
+{
+    public partial class FullDateTime : ComponentBase
+    {
+        /// <summary>
+        /// The pattern with which dates will be formatted
+        /// </summary>
+        private static readonly ZonedDateTimePattern Pattern =
+            ZonedDateTimePattern.CreateWithCurrentCulture("ld<D> ' at ' lt<t>", DateTimeZoneProviders.Tzdb);
+
+        /// <summary>
+        /// The date to be formatted
+        /// </summary>
+        [Parameter]
+        public Instant TheDate { get; set; }
+
+        /// <summary>
+        /// The formatted date
+        /// </summary>
+        private string Translated { get; set; } = "";
+
+        protected override async Task OnInitializedAsync() =>
+            Translated = Pattern.Format(TheDate.InZone(await state.GetTimeZone(js)));
+    }
+}

src/JobsJobsJobs/Client/wwwroot/index.html

@@ -43,6 +43,9 @@
     function setPageTitle(theTitle) {
       document.title = theTitle
     }
+    function getTimeZone() {
+      return Intl.DateTimeFormat().resolvedOptions().timeZone
+    }
   </script>
 </body>
 

src/JobsJobsJobs/Server/Pages/_Host.cshtml

@@ -35,6 +35,9 @@
     function setPageTitle(theTitle) {
       document.title = theTitle
     }
+    function getTimeZone() {
+      return Intl.DateTimeFormat().resolvedOptions().timeZone
+    }
   </script>
 </body>