feat: save scroll positions in service and not in local storage

farscrl · Jan 15, 2024 · 3f9a79c · 3f9a79c
1 parent dc88334
commit 3f9a79c
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 36 deletions.
diff --git a/src/app/pages/events/events-list/events-list.component.ts b/src/app/pages/events/events-list/events-list.component.ts
@@ -8,8 +8,7 @@ import { NotificationsService } from '../../../shared/services/notifications.ser
 import { rmLocale } from '../../../shared/utils/day-js-locale';
 import { first, Subject, Subscription } from 'rxjs';
 import { IframeService } from '../../../services/iframe.service';
-
-const LOCALSTORAGE_EVENTS_LIST_SCROLL_POSITION = 'events-scroll-position';
+import { ScrollPositionService } from '../../../services/scroll-position.service';
 
 @Component({
     selector: 'app-events-list',
@@ -31,6 +30,7 @@ export class EventsListComponent implements OnInit, OnAttach, OnDetach, OnDestro
         private router: Router,
         private route: ActivatedRoute,
         public iframeService: IframeService,
+        private scrollPositionService: ScrollPositionService,
     ) {
         router.events.subscribe(
             (event) => {
@@ -88,16 +88,11 @@ export class EventsListComponent implements OnInit, OnAttach, OnDetach, OnDestro
     }
 
     onAttach(): void {
-        try {
-            if (window.localStorage) {
-                const scrollPosition = +(localStorage.getItem(LOCALSTORAGE_EVENTS_LIST_SCROLL_POSITION) || 0);
-                window.scrollTo({
-                    top: scrollPosition,
-                    behavior: 'instant',
-                });
-            }
-        } catch (e) {
-        }
+        const scrollPosition = this.scrollPositionService.getEventsScrollPosition();
+        window.scrollTo({
+            top: scrollPosition,
+            behavior: 'instant',
+        });
 
         this.eventFilterUrlParamSubscription = this.eventsFilterService.getEventFilterUrlParamsObservable().pipe(first()).subscribe((params) => {
             console.log(params);
@@ -113,12 +108,7 @@ export class EventsListComponent implements OnInit, OnAttach, OnDetach, OnDestro
     }
 
     onDetach(): void {
-        try {
-            if (window.localStorage) {
-                localStorage.setItem(LOCALSTORAGE_EVENTS_LIST_SCROLL_POSITION, window.scrollY.toString());
-            }
-        } catch (e) {
-        }
+        this.scrollPositionService.setEventsScrollPosition(window.scrollY);
     }
 
     ngOnDestroy() {

diff --git a/src/app/pages/notices/notices-list/notices-list.component.ts b/src/app/pages/notices/notices-list/notices-list.component.ts
@@ -7,8 +7,7 @@ import { IframeService } from '../../../services/iframe.service';
 import * as dayjs from 'dayjs';
 import { rmLocale } from '../../../shared/utils/day-js-locale';
 import { NoticesFilterService } from '../../../shared/services/notices-filter.service';
-
-const LOCALSTORAGE_NOTICES_LIST_SCROLL_POSITION = 'notices-scroll-position';
+import { ScrollPositionService } from '../../../services/scroll-position.service';
 
 @Component({
     selector: 'app-notices-list',
@@ -29,6 +28,7 @@ export class NoticesListComponent {
         private router: Router,
         private route: ActivatedRoute,
         public iframeService: IframeService,
+        private scrollPositionService: ScrollPositionService,
     ) {
         router.events.subscribe(
             (event) => {
@@ -74,16 +74,11 @@ export class NoticesListComponent {
     }
 
     onAttach(): void {
-        try {
-            if (window.localStorage) {
-                const scrollPosition = +(localStorage.getItem(LOCALSTORAGE_NOTICES_LIST_SCROLL_POSITION) || 0);
-                window.scrollTo({
-                    top: scrollPosition,
-                    behavior: 'instant',
-                });
-            }
-        } catch (e) {
-        }
+        const scrollPosition = this.scrollPositionService.getNoticeBoardScrollPosition();
+        window.scrollTo({
+            top: scrollPosition,
+            behavior: 'instant',
+        });
 
         this.noticesFilterUrlParamSubscription = this.noticesFilterService.getNoticesFilterUrlParamsObservable().pipe(first()).subscribe((params) => {
             /*this.router.navigate(
@@ -98,12 +93,7 @@ export class NoticesListComponent {
     }
 
     onDetach(): void {
-        try {
-            if (window.localStorage) {
-                localStorage.setItem(LOCALSTORAGE_NOTICES_LIST_SCROLL_POSITION, window.scrollY.toString());
-            }
-        } catch (e) {
-        }
+        this.scrollPositionService.setNoticeBoardScrollPosition(window.scrollY);
     }
 
     ngOnDestroy() {

diff --git a/src/app/services/scroll-position.service.spec.ts b/src/app/services/scroll-position.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ScrollPositionService } from './scroll-position.service';
+
+describe('ScrollPositionService', () => {
+  let service: ScrollPositionService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ScrollPositionService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/services/scroll-position.service.ts b/src/app/services/scroll-position.service.ts
@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ScrollPositionService {
+
+    private eventsScrollPosition = 0;
+    private noticeBoardScrollPosition = 0;
+
+    constructor() {
+    }
+
+    getEventsScrollPosition(): number {
+        return this.eventsScrollPosition;
+    }
+
+    setEventsScrollPosition(value: number) {
+        this.eventsScrollPosition = value;
+    }
+
+    getNoticeBoardScrollPosition(): number {
+        return this.noticeBoardScrollPosition;
+    }
+
+    setNoticeBoardScrollPosition(value: number) {
+        this.noticeBoardScrollPosition = value;
+    }
+}