List discussions in the sidebar

frontend/src/app/app.module.ts

@@ -11,6 +11,7 @@ import {
   NbThemeModule,
   NbSidebarModule,
   NbSidebarService,
+  NbMenuModule,
 } from '@nebular/theme';
 
 import { FrontPageModule } from './front-page/front-page.module';
@@ -25,6 +26,7 @@ import { SharedDataService } from './_services/shared-data.service';
     HttpClientModule,
     NbThemeModule.forRoot(),
     NbSidebarModule.forRoot(),
+    NbMenuModule.forRoot(),
     NbEvaIconsModule,
     FrontPageModule,
   ],

frontend/src/app/main-view/discussion-chooser/discussion-chooser.component.ts

@@ -3,11 +3,13 @@ import {
   OnInit,
   OnDestroy,
   ChangeDetectionStrategy,
-  AfterContentInit,
+  EventEmitter,
+  Output,
 } from '@angular/core';
 import { SharedDataService } from '../../_services/shared-data.service';
 import { Colors } from '../../_types/color';
 import { Subscription } from 'rxjs';
+import { NbMenuItem } from '@nebular/theme';
 
 interface CustomForumData {
   id: string;
@@ -30,15 +32,26 @@ 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) {}
 
   ngOnInit(): void {
     this.dataSub = this.sharedDataService.getData().subscribe((res) => {
       if (res) {
-        const obj = JSON.parse(res as string);
+        const parsedObj = JSON.parse(res as string);
-        this.data = obj as CustomForumData;
+        this.data = parsedObj as CustomForumData;
-        console.log(this.data);
+
+        const fetchedDiscussions = this.data.discussions.map(
+          (element): NbMenuItem => {
+            return {
+              title: element.title,
+              link: '/view/discussion',
+            };
+          }
+        );
+
+        this.discussions.emit(fetchedDiscussions);
       }
     });
   }

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

@@ -16,8 +16,10 @@
       </nb-actions>
     </div>
   </nb-layout-header>
-  <nb-sidebar tag="main"></nb-sidebar>
+  <nb-sidebar tag="main">
+    <nb-menu [items]="items"></nb-menu>
+  </nb-sidebar>
   <nb-layout-column>
-    <router-outlet></router-outlet>
+    <router-outlet (activate)="onActivate($event)"></router-outlet>
   </nb-layout-column>
 </nb-layout>

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

@@ -1,23 +1,25 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { NbSidebarService } from '@nebular/theme';
+import { NbSidebarService, NbMenuItem } from '@nebular/theme';
 
 @Component({
   selector: 'app-main-view',
   templateUrl: './main-view.component.html',
   styleUrls: ['./main-view.component.scss'],
 })
-export class MainViewComponent implements OnInit, OnDestroy {
+export class MainViewComponent {
+  items: NbMenuItem[] = [
+    {
+      title: 'Dyskusje',
+      link: '/view/discussions',
+    },
+  ];
   constructor(
     private sidebarService: NbSidebarService,
     private router: Router
   ) {}
 
-  ngOnInit(): void {}
-
-  ngOnDestroy(): void {}
-
   toggleSidebar() {
     this.sidebarService.toggle(true, 'main');
   }
@@ -25,4 +27,10 @@ export class MainViewComponent implements OnInit, OnDestroy {
   logout() {
     this.router.navigate(['/']);
   }
+
+  onActivate(event: any) {
+    event.discussions.subscribe((res: NbMenuItem[]) => {
+      this.items[0].children = res;
+    });
+  }
 }

frontend/src/app/main-view/main-view.module.ts

@@ -11,6 +11,7 @@ import {
   NbSidebarModule,
   NbTooltipModule,
   NbCardModule,
+  NbMenuModule,
 } from '@nebular/theme';
 
 @NgModule({
@@ -23,6 +24,7 @@ import {
     NbSidebarModule,
     NbTooltipModule,
     NbCardModule,
+    NbMenuModule,
   ],
 })
 export class MainViewModule {}