Add basic caching

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<string>;
+  } = {};
+
+  private discussionCache$: {
+    [id: string]: string;
+  } = {};
+
+  constructor(private http: HttpClient) {}
+
+  getDiscussion(id: string): Observable<string> {
+    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<string> {
+    return this.http
+      .get<any>(`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;
+  }
+}

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<any> = new BehaviorSubject(null);
+  private discussionsBS: BehaviorSubject<NbMenuItem[]> = 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<NbMenuItem[]> {
+    return this.discussionsBS.asObservable();
+  }
+
   public getData(): Observable<string> {
     return this.dataBS.asObservable();
   }

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<NbMenuItem[]>();
 
   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);
       }
     });
   }

frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.html

@@ -0,0 +1 @@
+<div class="discussion-viewer"></div>

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);
+        });
+    });
+  }
+}

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',

frontend/src/app/main-view/main-view.component.html

@@ -20,6 +20,6 @@
     <nb-menu [items]="items"></nb-menu>
   </nb-sidebar>
   <nb-layout-column>
-    <router-outlet (activate)="onActivate($event)"></router-outlet>
+    <router-outlet></router-outlet>
   </nb-layout-column>
 </nb-layout>

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) {
+  ngAfterViewInit(): void {
-    event.discussions.subscribe((res: NbMenuItem[]) => {
+    this.sharedDataService.getDiscussions().subscribe((res) => {
       this.items[0].children = res;
     });
   }
+
+  // onActivate(event: any) {
+  //   event.discussions.subscribe((res: NbMenuItem[]) => {
+  //     this.items[0].children = res;
+  //   });
+  // }
 }

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 {}