move filter to switch with badge

RBLNews.Shared/Components/Controls/SwitchWithBadge.razor

@@ -1,6 +1,7 @@
 @using RBLFeederCommon.Enums
+@using RBLNews.Shared.Models
 
-<Switch Class="mt-3" Value="this._filter" Label="@this.Text" ValueExpression="() => this._filter" ValueChanged="SwitchChanged" />
+<Switch Class="mt-2" Value="this._filter" Label="@this.Text" ValueExpression="() => this._filter" ValueChanged="SwitchChanged" />
 
 
 @code {
@@ -20,13 +21,17 @@
 	public int Count { get; set; }
 	
 	[Parameter]
-	public EventCallback<RssFeedSources> OnClickedCallback { get; set; }	
+	public EventCallback<FilterFeedEventArg> OnFilterChanged { get; set; }	
 	
 	Task SwitchChanged(bool value)
 	{
 		this._filter = value;
 	
-		OnClickedCallback.InvokeAsync(Source);
+		OnFilterChanged.InvokeAsync(new FilterFeedEventArg
+		{
+			Source = this.Source,
+			Value = value
+		});
 	
 		return Task.CompletedTask;
 	}

RBLNews.Shared/Components/Pages/Feeds.razor

@@ -4,6 +4,7 @@
 @using RBLFeederCommon.Models.RssFeed
 @using RBLNews.Shared.Services
 @using RBLNews.Shared.Components.Controls
+@using RBLNews.Shared.Models
 
 @inject IFeedDataService feedDataService
 @inject AppLifecycleService appLifecycleService
@@ -19,15 +20,19 @@ else
 	<div id="feeds-page">
 		<div class="container-fluid">
 			<section id="filter">
-				@foreach (IGrouping<int, int> sGrouping in SourceGroupings)
-				{
-					<SwitchWithBadge
-						Source="(RssFeedSources)sGrouping.Key"
-						OnClickedCallback="OnClicked"
-						Text="@GetRssSourceName((RssFeedSources)sGrouping.Key)"
-						Count="@sGrouping.Count()">
-					</SwitchWithBadge>
-				}
+				<div class="row">
+					@foreach (IGrouping<int, int> sGrouping in SourceGroupings)
+					{
+						<div class="col col-lg-1">
+							<SwitchWithBadge
+								Source="(RssFeedSources)sGrouping.Key"
+								OnFilterChanged="OnFilterChanged"
+								Text="@GetRssSourceName((RssFeedSources)sGrouping.Key)"
+								Count="@sGrouping.Count()">
+							</SwitchWithBadge>
+						</div>
+					}
+				</div>
 			</section>
 			<section id="feeds-list">
 				@foreach (FeedGroupVM feedGrp in FeedGroups)
@@ -37,7 +42,7 @@ else
 					</h1>
 					@foreach (FeedVM feed in feedGrp.Feeds)
 					{
-						<div class="col-xs-12 col-sm-12 col-md-8 col-lg-4">
+						<div class="col-xs-12 col-sm-12 col-md-9 col-lg-7 col-xl-5">
 							<Card>
 								<CardBody>
 									<CardTitle>@feed.Title</CardTitle>
@@ -78,7 +83,7 @@ else
 
 	private IEnumerable<IGrouping<int, int>> SourceGroupings { get; set; } = new List<IGrouping<int, int>>();
 
-	private List<RssFeedSources> activeFilters = new List<RssFeedSources>();
+	private List<RssFeedSources> activeFeedSources = new List<RssFeedSources>();
 
 
 	protected override void OnInitialized()
@@ -89,6 +94,19 @@ else
 	}
 
 
+	private void SetFilter()
+	{
+		this.activeFeedSources.Clear();
+
+		IEnumerable<int> enumerable = this.SourceGroupings.Select(grp => grp.Key).Distinct();
+
+		foreach (int i in enumerable)
+		{
+			this.activeFeedSources.Add((RssFeedSources)i);
+		}
+	}
+
+
 	private async void LoadFeeds()
 	{
 		// Copy feed list to keep original list
@@ -99,6 +117,10 @@ else
 
 		SourceGroupings = listTmp.SelectMany(fg => fg.Feeds.Select(f => f.Source)).GroupBy(sources => sources);
 
+		SetFilter();
+
+		this.FilterFeeds();
+
 		StateHasChanged();
 	}
 
@@ -126,24 +148,32 @@ else
 	}
 
 
-	private void OnClicked(RssFeedSources source, bool value)
+	private void OnFilterChanged(FilterFeedEventArg eventArg)
 	{
-		if (activeFilters.Contains(source))
+		if (eventArg.Value && !this.activeFeedSources.Contains(eventArg.Source))
 		{
-			activeFilters.Remove(source);
+			activeFeedSources.Add(eventArg.Source);
 		}
-		else
+		else if (this.activeFeedSources.Contains(eventArg.Source))
 		{
-			activeFilters.Add(source);
+			activeFeedSources.Remove(eventArg.Source);
 		}
 
-		FeedGroups = new List<FeedGroupVM>();
-		foreach (FeedGroupVM fg in FeedDataService.Feeds.FeedGroups)
+		this.FilterFeeds();
+
+		StateHasChanged();
+	}
+
+
+	private void FilterFeeds()
+	{
+		this.FeedGroups = new List<FeedGroupVM>();
+		foreach (FeedGroupVM fg in this.FeedDataService.Feeds.FeedGroups)
 		{
-			List<FeedVM> feeds = fg.Feeds.Where(f => activeFilters.Contains((RssFeedSources)f.Source)).ToList();
+			List<FeedVM> feeds = fg.Feeds.Where(f => this.activeFeedSources.Contains((RssFeedSources)f.Source)).ToList();
 			if (feeds.Any())
 			{
-				FeedGroups.Add(
+				this.FeedGroups.Add(
 					new FeedGroupVM
 					{
 						Feeds = feeds,
@@ -151,8 +181,6 @@ else
 					});
 			}
 		}
-
-		StateHasChanged();
 	}
 
 

RBLNews.Shared/Models/FilterFeedEventArg.cs

@@ -0,0 +1,13 @@
+using RBLFeederCommon.Enums;
+
+namespace RBLNews.Shared.Models;
+
+public class FilterFeedEventArg
+{
+	public RssFeedSources Source { get; set; }
+
+	/// <summary>
+	/// Value of the switch control
+	/// </summary>
+	public bool Value { get; set; }
+}