Consolidate empty states into a shared component

LiamMorrow · Sep 14, 2024 · 7908ce1 · 7908ce1
1 parent ea20538
commit 7908ce1
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 48 deletions.
diff --git a/LiftLog.Ui/Pages/Feed/FeedPage.razor b/LiftLog.Ui/Pages/Feed/FeedPage.razor
@@ -41,12 +41,9 @@
 
         @if (FeedState.Value.Feed is { Count: 0 })
         {
-            <div class="flex flex-col justify-center items-center h-full mt-10 mx-4 gap-4 text-on-surface">
-                <md-icon>info</md-icon>
-                <span>
-                    <p>Nothing here yet!<br> Nobody you're following has published anything yet! Come back later.</p>
-                </span>
-            </div>
+            <EmptyInfo class="mx-4 mt-10">
+                <p>Nothing here yet!<br> Nobody you're following has published anything yet! Come back later.</p>
+            </EmptyInfo>
         }
         <VirtualizedCardList Items="@(FeedState.Value.Feed.Select(x => (Item: x, User: FeedState.Value.FollowedUsers.GetValueOrDefault(x.UserId))).Where(x => x.User is not null).ToList())" OnClick="@(x => ViewFeedSession(x.Item))" CardClass="animate-fade-zoom-in">
             <FeedItemCardContent Item="context.Item" User="@(context.User)"/>
@@ -56,12 +53,9 @@
     <div id="following-panel" role="tabpanel" aria-labelledby="following-tab" class="@(GetTabClass("following-panel"))">
         @if (FeedState.Value.FollowedUsers is { Count: 0 })
         {
-            <div class="flex flex-col justify-center items-center h-full gap-4 mt-10 text-on-surface mx-2">
-                <md-icon>info</md-icon>
-                <span>
-                    <p>Start following someone!<br>You're not currently following anyone, ask a friend for their share link to start!</p>
-                </span>
-            </div>
+            <EmptyInfo class="mx-4 mt-10">
+                <p>Start following someone!<br>You're not currently following anyone, ask a friend for their share link to start!</p>
+            </EmptyInfo>
         }
         <VirtualizedCardList Items="@(FeedState.Value.FollowedUsers.Values.ToList())" CardClass="animate-fade-zoom-in">
             <FeedUserCardContent User="context" UpdateUser="UpdateUser" DeleteUser="() => BeginDeleteUser(context)" ViewUserPlan="() => ViewUserPlan(context)"/>
@@ -82,12 +76,9 @@
         }
         @if (FeedState.Value.Followers is { Count: 0 } && FeedState.Value.FollowRequests is { Count: 0 })
         {
-            <div class="flex flex-col justify-center items-center h-full gap-4 mt-10 text-on-surface">
-                <md-icon>info</md-icon>
-                <span>
-                    <p>Nobody is following you yet!<br>Share your link with friends to get followers</p>
-                </span>
-            </div>
+            <EmptyInfo class="mx-4 mt-10">
+                <p>Nobody is following you yet!<br>Share your link with friends to get followers</p>
+            </EmptyInfo>
         }
         <VirtualizedCardList Items="@(FeedState.Value.FollowRequests.ToList())" CardClass="animate-fade-zoom-in">
             <FollowRequestCardContent FollowRequest="context" Accept="@(() => AcceptFollowRequest(context))" Deny="@(() => DenyFollowRequest(context))"/>

diff --git a/LiftLog.Ui/Pages/History/HistoryPage.razor b/LiftLog.Ui/Pages/History/HistoryPage.razor
@@ -15,12 +15,9 @@
 
 @if (!_latestSessions.Any())
 {
-    <div class="flex flex-col justify-center items-center h-full gap-4 text-on-surface">
-        <md-icon>info</md-icon>
-        <span>
-            <p>Nothing recorded yet!<br> Complete a session and check again.</p>
-        </span>
-    </div>
+    <EmptyInfo>
+        <p>Nothing recorded yet!<br> Complete a session and check again.</p>
+    </EmptyInfo>
 }
 else
 {
@@ -47,12 +44,9 @@ else
     </CardList>
     @if (!filteredToMonthSessions.Any())
     {
-        <div class="flex flex-col justify-center items-center h-full gap-4 text-on-surface">
-            <md-icon>info</md-icon>
-            <span>
-                <p>Nothing recorded in @(currentMonth.ToString("MMMM"))<br> Complete a session or switch to another month to view your sessions.</p>
-            </span>
-        </div>
+        <EmptyInfo>
+            <p>Nothing recorded in @(currentMonth.ToString("MMMM"))<br> Complete a session or switch to another month to view your sessions.</p>
+        </EmptyInfo>
     }
 }
 

diff --git a/LiftLog.Ui/Pages/Settings/ManageWorkoutsPage.razor b/LiftLog.Ui/Pages/Settings/ManageWorkoutsPage.razor
@@ -23,12 +23,9 @@
 
     @if (!ProgramState.Value.GetSessionBlueprints(PlanId).Any())
     {
-        <div class="flex flex-col justify-center items-center h-full gap-4 text-on-surface">
-            <md-icon>info</md-icon>
-            <span>
-                <p>No sessions in plan<br> Add a session to get started.</p>
-            </span>
-        </div>
+        <EmptyInfo>
+            <p>No sessions in plan<br> Add a session to get started.</p>
+        </EmptyInfo>
     }
     <CardList Items="ProgramState.Value.GetSessionBlueprints(PlanId).IndexedTuples()" OnClick="(item) => SelectSession(item.Item, item.Index)">
         @{

diff --git a/LiftLog.Ui/Pages/StatsPage.razor b/LiftLog.Ui/Pages/StatsPage.razor
@@ -26,12 +26,9 @@
 }
 else if ((StatsState.Value.OverallView?.SessionStats.Count ?? 0) == 0)
 {
-    <div class="flex flex-col justify-center items-center h-full gap-4 text-on-surface">
-        <md-icon>info</md-icon>
-        <span>
-            <p>No data available.<br> Try changing your filters at the top.</p>
-        </span>
-    </div>
+    <EmptyInfo>
+        <p>No data available.<br> Try changing your filters at the top.</p>
+    </EmptyInfo>
 }
 else if (!StatsState.Value.IsLoading && StatsState.Value.OverallView is not null)
 {
@@ -80,9 +77,21 @@ else if (!StatsState.Value.IsLoading && StatsState.Value.OverallView is not null
         <Card class=@CardClass>
             <StatGraphCardContent Title="Sessions" Statistics="overallStats.SessionStats" RenderDelay="TimeSpan.FromMilliseconds(200)"/>
         </Card>
+        @{
+            var anyExercisesRendered = false;
+        }
         <CardList Items="@(overallStats.ExerciseStats.Where(x=>!StatsState.Value.IsExercisePinned(x)).Where(SearchTermMatches).IndexedTuples())">
+            @{
+                anyExercisesRendered = true;
+            }
             <StatGraphCardContent Title="@context.Item.ExerciseName" Statistics="[context.Item.Statistics, context.Item.OneRepMaxStatistics]" RenderDelay="TimeSpan.FromMilliseconds(200 + context.Index * 200)"/>
         </CardList>
+        @if(SearchTerm != "" && !anyExercisesRendered)
+        {
+            <EmptyInfo>
+                <p>No exercises found.<br> Try changing your filters at the top.</p>
+            </EmptyInfo>
+        }
     </div>
 }
 

diff --git a/LiftLog.Ui/Shared/Presentation/EmptyInfo.razor b/LiftLog.Ui/Shared/Presentation/EmptyInfo.razor
@@ -0,0 +1,19 @@
+
+<div class="flex flex-col justify-center items-center h-full gap-4 text-on-surface @(AdditionalAttributes?.GetValueOrDefault("class")) " @attributes="AdditionalAttributes" >
+    <md-icon>@Icon</md-icon>
+    <span>
+        @ChildContent
+    </span>
+</div>
+
+@code
+{
+    [Parameter]
+    public string Icon { get; set; } = "info";
+
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+}
diff --git a/LiftLog.Ui/Shared/Smart/SessionComponent.razor b/LiftLog.Ui/Shared/Smart/SessionComponent.razor
@@ -14,12 +14,9 @@
 
 @if (!Session.RecordedExercises.Any())
 {
-    <div class="flex flex-col justify-center items-center gap-4 my-8 text-on-surface">
-        <md-icon>info</md-icon>
-        <span>
-            <p>Session contains no exercises.</p>
-        </span>
-    </div>
+    <EmptyInfo class="my-8">
+        <p>Session contains no exercises.</p>
+    </EmptyInfo>
 }
 else
 {