From 119977667b1e4b568654a99272e849f96ed895a0 Mon Sep 17 00:00:00 2001
From: Lars Gyrup Brink Nielsen <larsbrinknielsen@gmail.com>
Date: Thu, 5 Jan 2023 01:56:06 +0100
Subject: [PATCH] feat: add navigation effects

---
 .../router-history.store.spec.ts              |  6 ++---
 .../router-history.store.ts                   | 22 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/router-component-store/src/lib/router-history-store/router-history.store.spec.ts b/packages/router-component-store/src/lib/router-history-store/router-history.store.spec.ts
index e960f1b..cd4d8d1 100644
--- a/packages/router-component-store/src/lib/router-history-store/router-history.store.spec.ts
+++ b/packages/router-component-store/src/lib/router-history-store/router-history.store.spec.ts
@@ -1,4 +1,4 @@
-import { AsyncPipe, Location, NgIf } from '@angular/common';
+import { AsyncPipe, NgIf } from '@angular/common';
 import { Component, inject, NgZone } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
@@ -39,13 +39,11 @@ function createTestComponent(name: string, selector: string) {
   `,
 })
 class TestAppComponent {
-  #location = inject(Location);
-
   protected routerHistory = inject(RouterHistoryStore);
 
   onBack(event: MouseEvent) {
     event.preventDefault();
-    this.#location.back();
+    this.routerHistory.onNavigateBack();
   }
 }
 
diff --git a/packages/router-component-store/src/lib/router-history-store/router-history.store.ts b/packages/router-component-store/src/lib/router-history-store/router-history.store.ts
index 1bc0834..f3e93c9 100644
--- a/packages/router-component-store/src/lib/router-history-store/router-history.store.ts
+++ b/packages/router-component-store/src/lib/router-history-store/router-history.store.ts
@@ -1,3 +1,4 @@
+import { Location as NgLocation } from '@angular/common';
 import {
   APP_INITIALIZER,
   FactoryProvider,
@@ -14,7 +15,7 @@ import {
   Router,
 } from '@angular/router';
 import { ComponentStore, provideComponentStore } from '@ngrx/component-store';
-import { filter, map, Observable, switchMap, take } from 'rxjs';
+import { filter, map, Observable, pipe, switchMap, take, tap } from 'rxjs';
 import { filterRouterEvents } from '../filter-router-event.operator';
 import { isPopstateNavigationStart } from './popstate-navigation-start';
 import {
@@ -57,6 +58,7 @@ export function provideRouterHistoryStore(): Provider[] {
 
 @Injectable()
 export class RouterHistoryStore extends ComponentStore<RouterHistoryState> {
+  #location = inject(NgLocation);
   #router = inject(Router);
 
   /**
@@ -163,6 +165,24 @@ export class RouterHistoryStore extends ComponentStore<RouterHistoryState> {
     this.#addRouterNavigatedSequence(this.#routerNavigated$);
   }
 
+  /**
+   * Navigate back in the browser history.
+   *
+   * @remarks
+   * This is only available when the browser history contains a back entry.
+   */
+  onNavigateBack = this.effect<void>(pipe(tap(() => this.#location.back())));
+
+  /**
+   * Navigate forward in the browser history.
+   *
+   * @remarks
+   * This is only available when the browser history contains a forward entry.
+   */
+  onNavigateForward = this.effect<void>(
+    pipe(tap(() => this.#location.forward()))
+  );
+
   /**
    * Add a router navigated sequence to the router navigated history.
    */