Add common loading component

This has no specific issue associated, but reduces boilerplate in most page components

src/JobsJobsJobs/Client/Pages/Citizen/Dashboard.razor

@@ -6,13 +6,7 @@
 
 <h3>Welcome, @state.User!.Name!</h3>
 
-@if (RetrievingData)
+<Loading OnLoad=@LoadProfile Message=@(new MarkupString("Retrieving your employment profile&hellip;"))>
-{
-  <p>Retrieving your employment profile...</p>
-}
-else
-{
-  <ErrorList Errors=@ErrorMessages>
   @if (Profile != null)
   {
     <p>
@@ -44,8 +38,7 @@ else
       <text>Take a look around and see if you can help them find work!</text>
     }
   </p>
-  </ErrorList>
+</Loading>
-}
 <hr>
 <h4>
   <a href="https://github.com/bit-badger/jobs-jobs-jobs/issues/3" target="_blank">Phase 3</a> &ndash; What Works

src/JobsJobsJobs/Client/Pages/Citizen/Dashboard.razor.cs

@@ -11,11 +11,6 @@ namespace JobsJobsJobs.Client.Pages.Citizen
     /// </summary>
     public partial class Dashboard : ComponentBase
     {
-        /// <summary>
-        /// Whether the data is being retrieved
-        /// </summary>
-        private bool RetrievingData { get; set; } = true;
-
         /// <summary>
         /// The user's profile
         /// </summary>
@@ -27,11 +22,10 @@ namespace JobsJobsJobs.Client.Pages.Citizen
         private int ProfileCount { get; set; }
 
         /// <summary>
-        /// Error messages from data access
+        /// Load the user's profile information
         /// </summary>
-        private IList<string> ErrorMessages { get; } = new List<string>();
+        /// <param name="errors">A collection to report errors that may be encountered</param>
-
+        public async Task LoadProfile(ICollection<string> errors)
-        protected override async Task OnInitializedAsync()
         {
             if (state.User != null)
             {
@@ -47,7 +41,7 @@ namespace JobsJobsJobs.Client.Pages.Citizen
                 }
                 else
                 {
-                    ErrorMessages.Add(profileTask.Result.Error);
+                    errors.Add(profileTask.Result.Error);
                 }
 
                 if (profileCountTask.Result.IsOk)
@@ -56,10 +50,8 @@ namespace JobsJobsJobs.Client.Pages.Citizen
                 }
                 else
                 {
-                    ErrorMessages.Add(profileCountTask.Result.Error);
+                    errors.Add(profileCountTask.Result.Error);
-                }
+                }
-
-                RetrievingData = false;
             }
         }
     }

src/JobsJobsJobs/Client/Pages/Citizen/EditProfile.razor

@@ -8,9 +8,7 @@
 
 <h3>Employment Profile</h3>
 
-@if (AllLoaded)
+<Loading OnLoad=@SetUpProfile Message=@(new MarkupString("Loading Your Profile&hellip;"))>
-{
-  <ErrorList Errors=@ErrorMessages>
   <EditForm Model=@ProfileForm OnValidSubmit=@SaveProfile>
     <DataAnnotationsValidator />
     <div class="form-row">
@@ -117,9 +115,4 @@
       <br><a href="/profile/view/@state.User!.Id"><span class="oi oi-file"></span> View Your User Profile</a>
     </p>
   }
-  </ErrorList>
+</Loading>
-}
-else
-{
-  <p>Loading your profile...</p>
-}

src/JobsJobsJobs/Client/Pages/Citizen/EditProfile.razor.cs

@@ -18,11 +18,6 @@ namespace JobsJobsJobs.Client.Pages.Citizen
         /// </summary>
         private int _newSkillCounter = 0;
 
-        /// <summary>
-        /// A flag that indicates all the required API calls have completed, and the form is ready to be displayed
-        /// </summary>
-        private bool AllLoaded { get; set; } = false;
-
         /// <summary>
         /// Whether the citizen is seeking employment at the time the profile is loaded (used to show success story
         /// link)
@@ -45,11 +40,10 @@ namespace JobsJobsJobs.Client.Pages.Citizen
         private bool IsNew { get; set; } = false;
 
         /// <summary>
-        /// Error messages from API access
+        /// Set up the data needed to add or edit the user's profile
         /// </summary>
-        private IList<string> ErrorMessages { get; } = new List<string>();
+        /// <param name="errors">The collection where errors can be reported</param>
-
+        public async Task SetUpProfile(ICollection<string> errors)
-        protected override async Task OnInitializedAsync()
         {
             ServerApi.SetJwt(http, state);
             var continentTask = state.GetContinents(http);
@@ -75,10 +69,8 @@ namespace JobsJobsJobs.Client.Pages.Citizen
             }
             else
             {
-                ErrorMessages.Add(profileTask.Result.Error);
+                errors.Add(profileTask.Result.Error);
             }
-
-            AllLoaded = true;
         }
 
         /// <summary>
@@ -118,6 +110,5 @@ namespace JobsJobsJobs.Client.Pages.Citizen
                 toast.ShowError($"{(int)res.StatusCode} {error}");
             }
         }
-
     }
 }

src/JobsJobsJobs/Client/Pages/Profile/View.razor

@@ -2,14 +2,8 @@
 @inject HttpClient http
 @inject AppState state
 
-@if (IsLoading)
+<Loading OnLoad=@RetrieveProfile>
-{
-  <p>Loading profile...</p>
-}
-else
-{
   <PageTitle Title=@($"Employment Profile for {Citizen.DisplayName}") />
-  <ErrorList Errors=@ErrorMessages>
   <h2><a href="@Citizen.ProfileUrl" target="_blank">@Citizen.DisplayName</a></h2>
   <h4>@Profile.Continent!.Name, @Profile.Region</h4>
   <p>@WorkTypes</p>
@@ -48,5 +42,4 @@ else
     <hr>
     <p><a href="/citizen/profile"><span class="oi oi-pencil"></span> Edit Your Profile</a></p>
   }
-  </ErrorList>
+</Loading>
-}

src/JobsJobsJobs/Client/Pages/Profile/View.razor.cs

@@ -1,6 +1,5 @@
 using Microsoft.AspNetCore.Components;
 using System.Collections.Generic;
-using System.Linq;
 using System.Threading.Tasks;
 using Domain = JobsJobsJobs.Shared;
 
@@ -8,11 +7,6 @@ namespace JobsJobsJobs.Client.Pages.Profile
 {
     public partial class View : ComponentBase
     {
-        /// <summary>
-        /// Whether data for this component is loading
-        /// </summary>
-        private bool IsLoading { get; set; } = true;
-
         /// <summary>
         /// The citizen whose profile is being displayed
         /// </summary>
@@ -48,18 +42,17 @@ namespace JobsJobsJobs.Client.Pages.Profile
             }
         }
 
-        /// <summary>
-        /// Error messages from data retrieval
-        /// </summary>
-        private IList<string> ErrorMessages { get; } = new List<string>();
-
         /// <summary>
         /// The ID of the citizen whose profile should be displayed
         /// </summary>
         [Parameter]
         public string Id { get; set; } = default!;
 
-        protected override async Task OnInitializedAsync()
+        /// <summary>
+        /// Retrieve the requested profile
+        /// </summary>
+        /// <param name="errors">A collection to report errors that may occur</param>
+        public async Task RetrieveProfile(ICollection<string> errors)
         {
             ServerApi.SetJwt(http, state);
             var citizenTask = ServerApi.RetrieveOne<Domain.Citizen>(http, $"citizen/get/{Id}");
@@ -73,11 +66,11 @@ namespace JobsJobsJobs.Client.Pages.Profile
             }
             else if (citizenTask.Result.IsOk)
             {
-                ErrorMessages.Add("Citizen not found");
+                errors.Add("Citizen not found");
             }
             else
             {
-                ErrorMessages.Add(citizenTask.Result.Error);
+                errors.Add(citizenTask.Result.Error);
             }
 
             if (profileTask.Result.IsOk && profileTask.Result.Ok != null)
@@ -86,14 +79,12 @@ namespace JobsJobsJobs.Client.Pages.Profile
             }
             else if (profileTask.Result.IsOk)
             {
-                ErrorMessages.Add("Profile not found");
+                errors.Add("Profile not found");
             }
             else
             {
-                ErrorMessages.Add(profileTask.Result.Error);
+                errors.Add(profileTask.Result.Error);
-            }
+            }
-            
-            IsLoading = false;
         }
     }
 }

src/JobsJobsJobs/Client/Pages/SuccessStory/EditStory.razor

@@ -6,16 +6,9 @@
 @inject IToastService toast
 
 <PageTitle Title=@Title />
-
 <h3>@Title</h3>
 
-<ErrorList Errors=@ErrorMessages>
+<Loading OnLoad=@RetrieveStory>
-  @if (Loading)
-  {
-    <p>Loading...</p>
-  }
-  else
-  {
   @if (IsNew)
   {
     <p>
@@ -53,5 +46,4 @@
       </div>
     </div>
   </EditForm>
-  }
+</Loading>
-</ErrorList>

src/JobsJobsJobs/Client/Pages/SuccessStory/EditStory.razor.cs

@@ -16,11 +16,6 @@ namespace JobsJobsJobs.Client.Pages.SuccessStory
         [Parameter]
         public string? Id { get; set; }
 
-        /// <summary>
-        /// Whether we are loading information
-        /// </summary>
-        private bool Loading { get; set; } = true;
-
         /// <summary>
         /// The page title / header
         /// </summary>
@@ -37,11 +32,10 @@ namespace JobsJobsJobs.Client.Pages.SuccessStory
         private bool IsNew => Form.Id == "new";
 
         /// <summary>
-        /// Error messages from API access
+        /// Retrieve the story
         /// </summary>
-        private IList<string> ErrorMessages { get; } = new List<string>();
+        /// <param name="errors">A collection to use in reporting errors that may occur</param>
-
+        public async Task RetrieveStory(ICollection<string> errors)
-        protected override async Task OnInitializedAsync()
         {
             if (Id != null)
             {
@@ -58,14 +52,13 @@ namespace JobsJobsJobs.Client.Pages.SuccessStory
                 }
                 else if (story.IsOk)
                 {
-                    ErrorMessages.Add($"The success story {Id} does not exist");
+                    errors.Add($"The success story {Id} does not exist");
                 }
                 else
                 {
-                    ErrorMessages.Add(story.Error);
+                    errors.Add(story.Error);
                 }
             }
-            Loading = false;
         }
 
         /// <summary>

src/JobsJobsJobs/Client/Pages/SuccessStory/ListStories.razor

@@ -3,15 +3,10 @@
 @inject AppState state
 
 <PageTitle Title="Success Stories" />
-
 <h3>Success Stories</h3>
 
-<ErrorList Errors=@ErrorMessages>
+<Loading OnLoad=@LoadStories>
-  @if (Loading)
+  @if (Stories.Any())
-  {
-    <p>Loading...</p>
-  }
-  else if (Stories.Any())
   {
     <table class="table table-sm table-hover">
       <thead>
@@ -43,4 +38,4 @@
   {
     <p>There are no success stories recorded <em>(yet)</em></p>
   }
-</ErrorList>
+</Loading>

src/JobsJobsJobs/Client/Pages/SuccessStory/ListStories.razor.cs

@@ -1,30 +1,22 @@
 using JobsJobsJobs.Shared.Api;
 using Microsoft.AspNetCore.Components;
-using System;
 using System.Collections.Generic;
-using System.Linq;
 using System.Threading.Tasks;
 
 namespace JobsJobsJobs.Client.Pages.SuccessStory
 {
     public partial class ListStories : ComponentBase
     {
-        /// <summary>
-        /// Whether we are still loading data
-        /// </summary>
-        private bool Loading { get; set; } = true;
-
         /// <summary>
         /// The story entries
         /// </summary>
         private IEnumerable<StoryEntry> Stories { get; set; } = default!;
 
         /// <summary>
-        /// Error messages encountered
+        /// Load all success stories
         /// </summary>
-        private IList<string> ErrorMessages { get; set; } = new List<string>();
+        /// <param name="errors">The collection into which errors can be reported</param>
-
+        public async Task LoadStories(ICollection<string> errors)
-        protected override async Task OnInitializedAsync()
         {
             ServerApi.SetJwt(http, state);
             var stories = await ServerApi.RetrieveMany<StoryEntry>(http, "success/list");
@@ -35,10 +27,8 @@ namespace JobsJobsJobs.Client.Pages.SuccessStory
             }
             else
             {
-                ErrorMessages.Add(stories.Error);
+                errors.Add(stories.Error);
-            }
+            }
-
-            Loading = false;
         }
     }
 }

src/JobsJobsJobs/Client/Shared/Loading.razor

@@ -0,0 +1,18 @@
+@if (IsLoading)
+{
+  <p>@Message</p>
+}
+else if (ErrorMessages.Count > 0)
+{
+  <p>The following error@(ErrorMessages.Count == 1 ? "" : "s") occurred:</p>
+  <ul>
+    @foreach (var msg in ErrorMessages)
+    {
+      <li><pre>@msg</pre></li>
+    }
+  </ul>
+}
+else
+{
+  @ChildContent
+}

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

@@ -0,0 +1,58 @@
+using Microsoft.AspNetCore.Components;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace JobsJobsJobs.Client.Shared
+{
+    public partial class Loading : ComponentBase
+    {
+        /// <summary>
+        /// The delegate to call to load the data for this page
+        /// </summary>
+        [Parameter]
+        public EventCallback<ICollection<string>> OnLoad { get; set; }
+
+        /// <summary>
+        /// The message to display when the page is loading (optional)
+        /// </summary>
+        [Parameter]
+        public MarkupString Message { get; set; } = new MarkupString("Loading&hellip;");
+
+        /// <summary>
+        /// The content to be displayed once the data has been loaded
+        /// </summary>
+        [Parameter]
+        public RenderFragment ChildContent { get; set; } = default!;
+
+        /// <summary>
+        /// Error messages that may arise from the data loading delegate
+        /// </summary>
+        private ICollection<string> ErrorMessages { get; set; } = new List<string>();
+
+        /// <summary>
+        /// Whether we are currently loading data
+        /// </summary>
+        private bool IsLoading { get; set; } = true;
+
+        protected override async Task OnInitializedAsync()
+        {
+            if (OnLoad.HasDelegate)
+            {
+                try
+                {
+                    await OnLoad.InvokeAsync(ErrorMessages);
+                }
+                finally
+                {
+                    IsLoading = false;
+                }
+            }
+            else
+            {
+                IsLoading = false;
+            }
+        }
+    }
+}

src/JobsJobsJobs/Client/Shared/NavMenu.razor

@@ -9,10 +9,10 @@
   </button>
 </div>
 
-<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
+<div class="@NavMenuCssClass" @onclick=@ToggleNavMenu>
   <ul class="nav flex-column">
     <li class="nav-item px-3">
-      <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+      <NavLink class="nav-link" href="" Match=@NavLinkMatch.All>
         <span class="oi oi-home" aria-hidden="true"></span> Home
       </NavLink>
     </li>