Add discussion display

frontend/src/app/_interfaces/customforumdata.ts

@@ -0,0 +1,10 @@
+export interface CustomForumData {
+  id: string;
+  name: string;
+  discussions: [
+    {
+      title: string;
+      id: string;
+    }
+  ];
+}

frontend/src/app/_interfaces/predictedposts.ts

@@ -0,0 +1,7 @@
+export interface PredictedPost {
+  author: string;
+  id: number;
+  label: string[];
+  message: string[];
+  para_id: number[];
+}

frontend/src/app/_services/get-discussion.service.ts

@@ -6,27 +6,25 @@ import { map } from 'rxjs/operators';
 @Injectable()
 export class GetDiscussionService {
   private discussionObservableCache$: {
-    [id: string]: Observable<string>;
+    [id: string]: Observable<any>;
   } = {};
 
   private discussionCache$: {
-    [id: string]: string;
+    [id: string]: any;
   } = {};
 
   constructor(private http: HttpClient) {}
 
-  getDiscussion(id: string): Observable<string> {
+  getDiscussion(id: string): Observable<any> {
     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> {
+  private requestDiscussion(id: string): Observable<any> {
     return this.http
       .get<any>(`http://127.0.0.1:8000/discussions/${id}`)
       .pipe(map((data) => this.mapData(id, data)));

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

@@ -3,24 +3,23 @@ import {
   OnInit,
   OnDestroy,
   ChangeDetectionStrategy,
-  EventEmitter,
-  Output,
 } from '@angular/core';
 import { SharedDataService } from '../../_services/shared-data.service';
 import { Colors } from '../../_types/color';
+import { CustomForumData } from '../../_interfaces/customforumdata';
 import { Subscription } from 'rxjs';
 import { NbMenuItem } from '@nebular/theme';
 
-interface CustomForumData {
+// interface CustomForumData {
-  id: string;
+//   id: string;
-  name: string;
+//   name: string;
-  discussions: [
+//   discussions: [
-    {
+//     {
-      title: string;
+//       title: string;
-      id: string;
+//       id: string;
-    }
+//     }
-  ];
+//   ];
-}
+// }
 
 @Component({
   selector: 'app-discussion-chooser',

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

@@ -1 +1,14 @@
-<div class="discussion-viewer"></div>
+<div class="discussion-viewer">
+  <nb-card *ngFor="let item of data">
+    <nb-card-header>
+      {{ item.author }}
+    </nb-card-header>
+    <nb-card-body>
+      <app-styled-paragraph
+        *ngFor="let paragraph of item.message; let i = index"
+        [message]="paragraph"
+        [label]="item.label[i]"
+      ></app-styled-paragraph>
+    </nb-card-body>
+  </nb-card>
+</div>

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

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { GetDiscussionService } from '../../_services/get-discussion.service';
+import { PredictedPost } from '../../_interfaces/predictedposts';
 import { Subscription } from 'rxjs';
 
 @Component({
@@ -9,7 +10,7 @@ import { Subscription } from 'rxjs';
   styleUrls: ['./discussion-viewer.component.scss'],
 })
 export class DiscussionViewerComponent implements OnInit {
-  data: any;
+  data: PredictedPost[];
   id: string;
   paramSub: Subscription;
   discussionSub: Subscription;
@@ -22,11 +23,11 @@ export class DiscussionViewerComponent implements OnInit {
   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);
+          this.data = res.posts;
+          console.log(this.data);
         });
     });
   }

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

@@ -1,8 +1,4 @@
-import {
+import { Component, AfterContentInit } from '@angular/core';
-  Component,
-  AfterViewInit,
-  ChangeDetectionStrategy,
-} from '@angular/core';
 import { Router } from '@angular/router';
 
 import { SharedDataService } from '../_services/shared-data.service';
@@ -11,11 +7,10 @@ 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 implements AfterViewInit {
+export class MainViewComponent implements AfterContentInit {
   items: NbMenuItem[] = [
     {
       title: 'Dyskusje',
@@ -36,7 +31,7 @@ export class MainViewComponent implements AfterViewInit {
     this.router.navigate(['/']);
   }
 
-  ngAfterViewInit(): void {
+  ngAfterContentInit(): void {
     this.sharedDataService.getDiscussions().subscribe((res) => {
       this.items[0].children = res;
     });

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

@@ -15,12 +15,14 @@ import {
 } from '@nebular/theme';
 import { DiscussionViewerComponent } from './discussion-viewer/discussion-viewer.component';
 import { GetDiscussionService } from '../_services/get-discussion.service';
+import { StyledParagraphComponent } from './styled-paragraph/styled-paragraph.component';
 
 @NgModule({
   declarations: [
     MainViewComponent,
     DiscussionChooserComponent,
     DiscussionViewerComponent,
+    StyledParagraphComponent,
   ],
   imports: [
     CommonModule,

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

@@ -0,0 +1,3 @@
+<span class="border paragraph" [ngClass]="label" [nbTooltip]="label">{{
+  message
+}}</span>

frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.scss

@@ -0,0 +1,30 @@
+@import "../../../themes";
+
+.border {
+  border-width: medium;
+  border-style: solid;
+  padding: 4px;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+}
+
+.pozytywna {
+  border-color: nb-theme(color-success-100);
+}
+
+.negatywna {
+  border-color: nb-theme(color-danger-500);
+}
+
+.mieszana {
+  border-color: nb-theme(color-info-500);
+}
+
+.fakt {
+  border-color: orange;
+}
+
+.nieistotna {
+  border-color: black;
+}

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

@@ -0,0 +1,22 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  ChangeDetectionStrategy,
+} from '@angular/core';
+
+@Component({
+  selector: 'app-styled-paragraph',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './styled-paragraph.component.html',
+  styleUrls: ['./styled-paragraph.component.scss'],
+})
+export class StyledParagraphComponent implements OnInit {
+  @Input() message: string;
+  @Input() label: string;
+  constructor() {}
+  ngOnInit(): void {}
+  public getLabel() {
+    return this.label;
+  }
+}