Preventing refresh on filter addition

src/app/app-routing.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { RouteReuseStrategy, RouterModule, Routes } from "@angular/router";
 import { ItemsGridComponent } from './components/items-grid/items-grid.component';
+import { CustomRouteReuseStrategy } from "./misc/custom-route-reuse-strategy";
 import { NotFoundComponent } from './pages/not-found/not-found.component';
 import { PageResolver } from './services/page-resolver.service';
 import { ShowDetailsComponent } from './pages/show-details/show-details.component';
@@ -96,7 +97,7 @@ const routes: Routes = [
 @NgModule({
 	imports: [RouterModule.forRoot(routes,
 		{
-			scrollPositionRestoration: "enabled",
+			scrollPositionRestoration: "enabled"
 		})],
 	exports: [RouterModule],
 	providers: [
@@ -108,6 +109,7 @@ const routes: Routes = [
 		EpisodeService,
 		PageResolver.resolvers,
 		ItemResolver.resolvers,
+		{provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy}
 	]
 })
 export class AppRoutingModule { }

src/app/components/items-grid/items-grid.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from "@angular/core";
-import { ActivatedRoute, ActivatedRouteSnapshot, Router } from "@angular/router";
+import { ActivatedRoute, ActivatedRouteSnapshot, Params, Router } from "@angular/router";
 import { DomSanitizer } from '@angular/platform-browser';
 import { Genre } from "../../../models/resources/genre";
 import { LibraryItem } from "../../../models/resources/library-item";
@@ -44,29 +44,42 @@ export class ItemsGridComponent
 		{
 			this.page = data.items;
 		});
+		this.route.queryParams.subscribe((data) =>
+		{
+			this.updateGenresFilterFromQuery(data);
+			this.updateStudioFilterFromQuery(data);
+		});
 		this.loader.load<Genre>("/api/genres?limit=0").subscribe(data =>
 		{
 			this.genres = data;
-
+			this.updateGenresFilterFromQuery(this.route.snapshot.queryParams);
-			let selectedGenres: string[] = [];
-			if (this.route.snapshot.queryParams.genres?.startsWith("ctn:"))
-				selectedGenres = this.route.snapshot.queryParams.genres.substr(4).split(',');
-			else if (this.route.snapshot.queryParams.genres != null)
-				selectedGenres = this.route.snapshot.queryParams.genres.split(',');
-			if (this.router.url.startsWith("/genre"))
-				selectedGenres.push(this.route.snapshot.params.slug);
-
-			this.filters.genres = this.genres.filter(x => selectedGenres.includes(x.slug));
 		});
 		this.loader.load<Studio>("/api/studios?limit=0").subscribe(data =>
 		{
 			this.studios = data;
-			this.filters.studio = this.studios.find(x => x.slug == this.route.snapshot.queryParams.studio
+			this.updateStudioFilterFromQuery(this.route.snapshot.queryParams);
-			                                             || x.slug == this.route.snapshot.params.slug);
 		});
 	}
 
-	// TODO disable page refresh when swiching from /browse to /studio to /genre.
+	updateGenresFilterFromQuery(query: Params)
+	{
+		let selectedGenres: string[] = [];
+		if (query.genres?.startsWith("ctn:"))
+			selectedGenres = query.genres.substr(4).split(',');
+		else if (query.genres != null)
+			selectedGenres = query.genres.split(',');
+		if (this.router.url.startsWith("/genre"))
+			selectedGenres.push(query.slug);
+
+		this.filters.genres = this.genres.filter(x => selectedGenres.includes(x.slug));
+	}
+
+	updateStudioFilterFromQuery(query: Params)
+	{
+		this.filters.studio = this.studios.find(x => x.slug == query.studio
+			|| x.slug == this.route.snapshot.params.slug);
+	}
+
 	// TODO /collection & /people does not get refreshed data from the provider when using a new filter/sort.
 	// TODO add /people to the switch list.
 
@@ -135,8 +148,7 @@ export class ItemsGridComponent
 			{
 				this.router.navigate(["genre", this.filters.genres[0].slug], {
 					replaceUrl: true,
-					queryParams: {[category]: null},
+					queryParams: {sortBy: this.route.snapshot.queryParams.sortBy}
-					queryParamsHandling: "merge"
 				});
 				return;
 			}
@@ -144,15 +156,14 @@ export class ItemsGridComponent
 			{
 				this.router.navigate(["studio", this.filters.studio.slug], {
 					replaceUrl: true,
-					queryParams: {[category]: null},
+					queryParams: {sortBy: this.route.snapshot.queryParams.sortBy}
-					queryParamsHandling: "merge"
 				});
 				return;
 			}
  			if (this.getFilterCount() == 0 || this.router.url != "/browse")
 			{
 				let params = {[category]: param}
-				if (this.router.url.startsWith("/studio"))
+				if (this.router.url.startsWith("/studio") && category != "studio")
 					params.studio = this.route.snapshot.params.slug;
 				if (this.router.url.startsWith("/genre") && category != "genres")
 					params.genres = `${this.route.snapshot.params.slug}`;

src/app/misc/custom-route-reuse-strategy.ts

@@ -0,0 +1,35 @@
+import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from "@angular/router";
+
+export class CustomRouteReuseStrategy extends RouteReuseStrategy
+{
+	shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean
+	{
+		if (curr.routeConfig?.path == "browse"
+			|| curr.routeConfig?.path == "genre/:slug"
+			|| curr.routeConfig?.path == "studio/:slug")
+		{
+			console.log(`${curr.routeConfig?.path} - ${future.routeConfig?.path}`)
+			return future.routeConfig.path == "browse"
+				|| future.routeConfig.path == "genre/:slug"
+				|| future.routeConfig.path == "studio/:slug";
+		}
+		return future.routeConfig === curr.routeConfig;
+	}
+
+	shouldAttach(route: ActivatedRouteSnapshot): boolean
+	{
+		return false;
+	}
+
+	shouldDetach(route: ActivatedRouteSnapshot): boolean
+	{
+		return false;
+	}
+
+	store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void  {}
+
+	retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null
+	{
+		return null;
+	}
+}