[frontend] Add dashboard routing and bare component logic

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

@@ -3,15 +3,17 @@ import { Routes, RouterModule } from '@angular/router';
 import { DashboardComponent } from './dashboard.component';
 import { HoodsComponent } from './hoods/hoods.component';
 import { SettingspageComponent } from './settingspage/settingspage.component';
+import { AuthGuard } from '../core/auth/auth.guard';
 
 const routes: Routes = [
   {
     path: '',
     component: DashboardComponent,
     children: [
-      { path: 'list', component: HoodsComponent },
+      { path: '', component: HoodsComponent },
       { path: 'settings', component: SettingspageComponent },
     ],
+    canActivate: [AuthGuard],
   },
 ];
 

kibicara-frontend/src/app/dashboard/dashboard.component.html

@@ -1 +1 @@
-<p>dashboard works!</p>
+<router-outlet></router-outlet>

kibicara-frontend/src/app/dashboard/dashboard.module.ts

@@ -3,9 +3,10 @@ import { CommonModule } from '@angular/common';
 import { HoodsComponent } from './hoods/hoods.component';
 import { SettingspageComponent } from './settingspage/settingspage.component';
 import { DashboardComponent } from './dashboard.component';
+import { DashboardRoutingModule } from './dashboard-routing.module';
 
 @NgModule({
   declarations: [HoodsComponent, SettingspageComponent, DashboardComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, DashboardRoutingModule],
 })
 export class DashboardModule {}

kibicara-frontend/src/app/dashboard/hoods/hoods.component.html

@@ -1 +1,2 @@
 <p>hoods works!</p>
+<div *ngFor="let item of hoods$ | async">{{ item.name }}</div>

kibicara-frontend/src/app/dashboard/hoods/hoods.component.ts

@@ -1,15 +1,23 @@
 import { Component, OnInit } from '@angular/core';
+import { AdminService } from 'src/app/core/api';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-hoods',
   templateUrl: './hoods.component.html',
-  styleUrls: ['./hoods.component.scss']
+  styleUrls: ['./hoods.component.scss'],
 })
 export class HoodsComponent implements OnInit {
+  hoods$ = this.adminService.getHoodsAdmin().pipe(
+    map((hoods) => {
+      const result = hoods.map((hood) => {
+        return hood.hood;
+      });
+      return result;
+    })
+  );
 
-  constructor() { }
+  constructor(private readonly adminService: AdminService) {}
-
-  ngOnInit(): void {
-  }
 
+  ngOnInit(): void {}
 }

kibicara-frontend/src/app/hoodpage/hoodpage.component.html

@@ -1 +1,3 @@
 <p>hoodpage works!</p>
+
+{{ hood.landingpage }}

kibicara-frontend/src/app/hoodpage/hoodpage.component.ts

@@ -1,15 +1,36 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { HoodsService, BodyHood } from '../core/api';
+import { first } from 'rxjs/operators';
 
 @Component({
   selector: 'app-hoodpage',
   templateUrl: './hoodpage.component.html',
-  styleUrls: ['./hoodpage.component.scss']
+  styleUrls: ['./hoodpage.component.scss'],
 })
 export class HoodpageComponent implements OnInit {
+  hood: BodyHood;
 
-  constructor() { }
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private readonly hoodService: HoodsService
+  ) {}
 
   ngOnInit(): void {
+    const hoodId = this.route.snapshot.params['id'];
+    if (hoodId) {
+      this.hoodService
+        .getHood(hoodId)
+        .pipe(first())
+        .subscribe(
+          (data) => {
+            this.hood = data;
+          },
+          (error) => {
+            this.router.navigate(['/404']);
+          }
+        );
+    }
   }
-
 }