Add view module, display data on routed component

frontend/src/app/app-routing.module.ts

@@ -1,12 +1,18 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+
 import { UploadComponent } from './upload/upload.component';
+import { ViewDataComponent } from './view/view-data/view-data.component';
 
 const routes: Routes = [
   {
     path: '',
     component: UploadComponent,
   },
+  {
+    path: 'view',
+    component: ViewDataComponent,
+  },
 ];
 
 @NgModule({

frontend/src/app/app.module.ts

@@ -4,7 +4,9 @@ import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
 import { UploadModule } from './upload/upload.module';
+import { ViewModule } from './view/view.module';
 
 import { NbThemeModule } from '@nebular/theme';
 import { NbEvaIconsModule } from '@nebular/eva-icons';
@@ -18,6 +20,7 @@ import { NbEvaIconsModule } from '@nebular/eva-icons';
     NbEvaIconsModule,
     BrowserAnimationsModule,
     UploadModule,
+    ViewModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

frontend/src/app/upload/upload.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { OpenFileButtonComponent } from './open-file-button/open-file-button.component';
 
@@ -13,7 +14,7 @@ export class UploadComponent implements OnInit {
   public fileName: string;
   private file: File;
 
-  constructor(private sendService: SendDataService) {}
+  constructor(private sendService: SendDataService, private router: Router) {}
 
   ngOnInit(): void {}
 
@@ -28,6 +29,7 @@ export class UploadComponent implements OnInit {
   sendFile(event: any) {
     this.sendService.postFile(this.file).subscribe((response: any) => {
       console.log(response);
+      this.router.navigate(['/view'], { state: { data: response } });
     });
   }
 }

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

@@ -0,0 +1 @@
+{{ tempdata | json }}

frontend/src/app/view/view-data/view-data.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ViewDataComponent } from './view-data.component';
+
+describe('ViewDataComponent', () => {
+  let component: ViewDataComponent;
+  let fixture: ComponentFixture<ViewDataComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ViewDataComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ViewDataComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+import {
+  NbGetters,
+  NbTreeGridDataSource,
+  NbTreeGridDataSourceBuilder,
+} from '@nebular/theme';
+
+/* TODO: move this to separated files */
+
+interface ForumData {
+  id: string;
+  name: string;
+  discussions: Array<Discussion>;
+}
+
+interface Discussion {
+  title: string;
+  id: string;
+  posts: Array<Post>;
+}
+
+interface Post {
+  author: string;
+  id: string;
+  message: string;
+}
+
+@Component({
+  selector: 'app-view-data',
+  templateUrl: './view-data.component.html',
+  styleUrls: ['./view-data.component.scss'],
+})
+export class ViewDataComponent implements OnInit {
+  data: ForumData;
+  tempdata: any;
+
+  constructor(
+    private router: Router,
+    dataSourceBuilder: NbTreeGridDataSourceBuilder<ForumData>
+  ) {
+    const fetch = this.router.getCurrentNavigation()?.extras.state?.data;
+    this.data = fetch as ForumData;
+    this.tempdata = JSON.parse(fetch);
+  }
+
+  ngOnInit(): void {}
+}

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ViewDataComponent } from './view-data/view-data.component';
+
+import { NbLayoutModule, NbCardModule, NbTreeGridModule } from '@nebular/theme';
+
+@NgModule({
+  declarations: [ViewDataComponent],
+  imports: [CommonModule, NbLayoutModule, NbCardModule, NbTreeGridModule],
+  exports: [ViewDataComponent],
+})
+export class ViewModule {}