From b029d3814543236b09f9b49b0d26413372bb3bc6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Romaszkin?= Date: Sun, 14 Jun 2020 21:21:04 +0200 Subject: [PATCH] Add basic caching --- .../app/_services/get-discussion.service.ts | 39 +++++++++++++++++++ .../src/app/_services/shared-data.service.ts | 13 ++++++- .../discussion-chooser.component.ts | 5 +-- .../discussion-viewer.component.html | 1 + .../discussion-viewer.component.scss | 0 .../discussion-viewer.component.ts | 33 ++++++++++++++++ .../app/main-view/main-view-routing.module.ts | 5 +++ .../app/main-view/main-view.component.html | 2 +- .../src/app/main-view/main-view.component.ts | 22 +++++++++-- .../src/app/main-view/main-view.module.ts | 9 ++++- 10 files changed, 119 insertions(+), 10 deletions(-) create mode 100644 frontend/src/app/_services/get-discussion.service.ts create mode 100644 frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.html create mode 100644 frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.scss create mode 100644 frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.ts diff --git a/frontend/src/app/_services/get-discussion.service.ts b/frontend/src/app/_services/get-discussion.service.ts new file mode 100644 index 0000000..e5eebd3 --- /dev/null +++ b/frontend/src/app/_services/get-discussion.service.ts @@ -0,0 +1,39 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Observable, of } from 'rxjs'; +import { map } from 'rxjs/operators'; + +@Injectable() +export class GetDiscussionService { + private discussionObservableCache$: { + [id: string]: Observable; + } = {}; + + private discussionCache$: { + [id: string]: string; + } = {}; + + constructor(private http: HttpClient) {} + + getDiscussion(id: string): Observable { + if (this.discussionCache$[id]) { + console.log('Cached'); + return of(this.discussionCache$[id]); + } else { + console.log('Not cached'); + this.discussionObservableCache$[id] = this.requestDiscussion(id); + return this.discussionObservableCache$[id]; + } + } + + private requestDiscussion(id: string): Observable { + return this.http + .get(`http://127.0.0.1:8000/discussions/${id}`) + .pipe(map((data) => this.mapData(id, data))); + } + + private mapData(id: string, data: any) { + this.discussionCache$[id] = data; + return data; + } +} diff --git a/frontend/src/app/_services/shared-data.service.ts b/frontend/src/app/_services/shared-data.service.ts index 598139d..74c76b3 100644 --- a/frontend/src/app/_services/shared-data.service.ts +++ b/frontend/src/app/_services/shared-data.service.ts @@ -1,10 +1,13 @@ import { Injectable } from '@angular/core'; import { BehaviorSubject, Observable } from 'rxjs'; -import { ForumData } from '../_interfaces/forumdata'; +import { NbMenuItem } from '@nebular/theme'; @Injectable() export class SharedDataService { private dataBS: BehaviorSubject = new BehaviorSubject(null); + private discussionsBS: BehaviorSubject = new BehaviorSubject( + [] as NbMenuItem[] + ); constructor() {} @@ -12,6 +15,14 @@ export class SharedDataService { this.dataBS.next(value); } + public setDiscussions(items: NbMenuItem[]) { + this.discussionsBS.next(items); + } + + public getDiscussions(): Observable { + return this.discussionsBS.asObservable(); + } + public getData(): Observable { return this.dataBS.asObservable(); } diff --git a/frontend/src/app/main-view/discussion-chooser/discussion-chooser.component.ts b/frontend/src/app/main-view/discussion-chooser/discussion-chooser.component.ts index 03e277f..bae3692 100644 --- a/frontend/src/app/main-view/discussion-chooser/discussion-chooser.component.ts +++ b/frontend/src/app/main-view/discussion-chooser/discussion-chooser.component.ts @@ -32,7 +32,6 @@ export class DiscussionChooserComponent implements OnInit, OnDestroy { public data: CustomForumData; colors: Colors[] = ['primary', 'danger', 'info', 'success', 'warning']; private dataSub: Subscription; - @Output() discussions = new EventEmitter(); constructor(private sharedDataService: SharedDataService) {} @@ -46,12 +45,12 @@ export class DiscussionChooserComponent implements OnInit, OnDestroy { (element): NbMenuItem => { return { title: element.title, - link: '/view/discussion', + link: `/view/forum/${element.id}`, }; } ); - this.discussions.emit(fetchedDiscussions); + this.sharedDataService.setDiscussions(fetchedDiscussions); } }); } diff --git a/frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.html b/frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.html new file mode 100644 index 0000000..11a32d9 --- /dev/null +++ b/frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.html @@ -0,0 +1 @@ +
diff --git a/frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.scss b/frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.ts b/frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.ts new file mode 100644 index 0000000..4609141 --- /dev/null +++ b/frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.ts @@ -0,0 +1,33 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { GetDiscussionService } from '../../_services/get-discussion.service'; +import { Subscription } from 'rxjs'; + +@Component({ + selector: 'app-discussion-viewer', + templateUrl: './discussion-viewer.component.html', + styleUrls: ['./discussion-viewer.component.scss'], +}) +export class DiscussionViewerComponent implements OnInit { + data: any; + id: string; + paramSub: Subscription; + discussionSub: Subscription; + + constructor( + private getDiscussionService: GetDiscussionService, + private router: ActivatedRoute + ) {} + + ngOnInit(): void { + this.paramSub = this.router.params.subscribe((params) => { + this.id = params.id; + + this.discussionSub = this.getDiscussionService + .getDiscussion(this.id) + .subscribe((res) => { + console.log(res); + }); + }); + } +} diff --git a/frontend/src/app/main-view/main-view-routing.module.ts b/frontend/src/app/main-view/main-view-routing.module.ts index 977f11e..e55a419 100644 --- a/frontend/src/app/main-view/main-view-routing.module.ts +++ b/frontend/src/app/main-view/main-view-routing.module.ts @@ -2,6 +2,7 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule, Router } from '@angular/router'; import { MainViewComponent } from './main-view.component'; import { DiscussionChooserComponent } from './discussion-chooser/discussion-chooser.component'; +import { DiscussionViewerComponent } from './discussion-viewer/discussion-viewer.component'; const routes: Routes = [ { @@ -12,6 +13,10 @@ const routes: Routes = [ path: 'discussions', component: DiscussionChooserComponent, }, + { + path: 'forum/:id', + component: DiscussionViewerComponent, + }, { path: '', redirectTo: 'discussions', diff --git a/frontend/src/app/main-view/main-view.component.html b/frontend/src/app/main-view/main-view.component.html index d4a5594..beb8324 100644 --- a/frontend/src/app/main-view/main-view.component.html +++ b/frontend/src/app/main-view/main-view.component.html @@ -20,6 +20,6 @@ - + diff --git a/frontend/src/app/main-view/main-view.component.ts b/frontend/src/app/main-view/main-view.component.ts index 763f20e..c0f8e83 100644 --- a/frontend/src/app/main-view/main-view.component.ts +++ b/frontend/src/app/main-view/main-view.component.ts @@ -1,14 +1,21 @@ -import { Component, OnInit, OnDestroy } from '@angular/core'; +import { + Component, + AfterViewInit, + ChangeDetectionStrategy, +} from '@angular/core'; import { Router } from '@angular/router'; +import { SharedDataService } from '../_services/shared-data.service'; + import { NbSidebarService, NbMenuItem } from '@nebular/theme'; @Component({ selector: 'app-main-view', + changeDetection: ChangeDetectionStrategy.OnPush, templateUrl: './main-view.component.html', styleUrls: ['./main-view.component.scss'], }) -export class MainViewComponent { +export class MainViewComponent implements AfterViewInit { items: NbMenuItem[] = [ { title: 'Dyskusje', @@ -17,6 +24,7 @@ export class MainViewComponent { ]; constructor( private sidebarService: NbSidebarService, + private sharedDataService: SharedDataService, private router: Router ) {} @@ -28,9 +36,15 @@ export class MainViewComponent { this.router.navigate(['/']); } - onActivate(event: any) { - event.discussions.subscribe((res: NbMenuItem[]) => { + ngAfterViewInit(): void { + this.sharedDataService.getDiscussions().subscribe((res) => { this.items[0].children = res; }); } + + // onActivate(event: any) { + // event.discussions.subscribe((res: NbMenuItem[]) => { + // this.items[0].children = res; + // }); + // } } diff --git a/frontend/src/app/main-view/main-view.module.ts b/frontend/src/app/main-view/main-view.module.ts index 281a649..960d5cf 100644 --- a/frontend/src/app/main-view/main-view.module.ts +++ b/frontend/src/app/main-view/main-view.module.ts @@ -13,9 +13,15 @@ import { NbCardModule, NbMenuModule, } from '@nebular/theme'; +import { DiscussionViewerComponent } from './discussion-viewer/discussion-viewer.component'; +import { GetDiscussionService } from '../_services/get-discussion.service'; @NgModule({ - declarations: [MainViewComponent, DiscussionChooserComponent], + declarations: [ + MainViewComponent, + DiscussionChooserComponent, + DiscussionViewerComponent, + ], imports: [ CommonModule, MainViewRoutingModule, @@ -26,5 +32,6 @@ import { NbCardModule, NbMenuModule, ], + providers: [GetDiscussionService], }) export class MainViewModule {}