kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.html

@@ -1,5 +0,0 @@
-<div>
-  <a [routerLink]="[artist().id]" routerLinkActive="active">
-    <span>{{ artist().name }}</span>
-  </a>
-</div>

kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.ts

@@ -1,14 +0,0 @@
-import { Component, input, signal } from '@angular/core';
-import { Artist } from '../artist.model';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-
-@Component({
-  selector: 'app-artist-detail',
-  imports: [RouterLink, RouterLinkActive],
-  templateUrl: './artist-detail.component.html',
-  styleUrl: './artist-detail.component.css'
-})
-export class ArtistDetailComponent {
-  artist = input.required<Artist>();
-
-}

kontor-angular/src/app/kontor/comic/comic-artist/comic-artist.component.html

@@ -0,0 +1,5 @@
+<div>
+  <a [routerLink]="['/', 'comic', 'artist', artist().id]" routerLinkActive="active">
+    <span>{{ artist().name }}</span>
+  </a>
+</div>

kontor-angular/src/app/kontor/comic/comic-artist/comic-artist.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ArtistListComponent } from './artist-list.component';
+import { ComicArtistComponent } from './comic-artist.component';
 
-describe('ArtistListComponent', () => {
-  let component: ArtistListComponent;
-  let fixture: ComponentFixture<ArtistListComponent>;
+describe('ComicArtistComponent', () => {
+  let component: ComicArtistComponent;
+  let fixture: ComponentFixture<ComicArtistComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ArtistListComponent]
+      imports: [ComicArtistComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(ArtistListComponent);
+    fixture = TestBed.createComponent(ComicArtistComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

kontor-angular/src/app/kontor/comic/comic-artist/comic-artist.component.ts

@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+import { Artist } from '../comic-artists/artist.model';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-comic-artist',
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './comic-artist.component.html',
+  styleUrl: './comic-artist.component.css'
+})
+export class ComicArtistComponent {
+  artist = input.required<Artist>();
+}

kontor-angular/src/app/kontor/comic/comic-artists-list/comic-artists-list.component.html

@@ -1,7 +1,7 @@
 <ul>
   @for (artist of artists(); track artist.id) {
     <li>
-      <app-artist-detail [artist]="artist"/>
+      <app-comic-artist [artist]="artist"/>
     </li>
   }
 </ul>

kontor-angular/src/app/kontor/comic/comic-artists-list/comic-artists-list.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComicArtistsListComponent } from './comic-artists-list.component';
+
+describe('ComicArtistsListComponent', () => {
+  let component: ComicArtistsListComponent;
+  let fixture: ComponentFixture<ComicArtistsListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComicArtistsListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ComicArtistsListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

kontor-angular/src/app/kontor/comic/comic-artists-list/comic-artists-list.component.ts

@@ -1,16 +1,18 @@
 import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
-import { Artist } from '../artist.model';
-import { ArtistService } from '../artist.service';
-import { ArtistDetailComponent } from "../artist-detail/artist-detail.component";
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { Artist } from '../comic-artists/artist.model';
+import { ComicArtistComponent } from '../comic-artist/comic-artist.component';
+import { ArtistService } from '../comic-artists/artist.service';
 
 @Component({
-  selector: 'app-artist-list',
-  imports: [ArtistDetailComponent],
-  templateUrl: './artist-list.component.html',
-  styleUrl: './artist-list.component.css'
+  selector: 'app-comic-artists-list',
+  imports: [ComicArtistComponent],
+  templateUrl: './comic-artists-list.component.html',
+  styleUrl: './comic-artists-list.component.css'
 })
-export class ArtistListComponent implements OnInit {
-  artists = signal<Artist[] | undefined>(undefined);
+export class ComicArtistsListComponent implements OnInit {
+  
+  artists = signal<Artist[]>([]);
   isFetching = signal(false);
   error = signal('');
   private artistService = inject(ArtistService);
@@ -34,5 +36,4 @@ export class ArtistListComponent implements OnInit {
       subscription.unsubscribe();
     });
   }
-
 }

kontor-angular/src/app/kontor/comic/comic-artists/artist.service.ts

@@ -1,8 +1,8 @@
 import { inject, Injectable, signal } from "@angular/core";
-import { ErrorService } from "../../shared/error.service";
 import { HttpClient } from "@angular/common/http";
-import { Artist } from "./artist.model";
 import { catchError, map, throwError } from "rxjs";
+import { ErrorService } from "../../../shared/error.service";
+import { Artist } from "./artist.model";
 
 @Injectable({
   providedIn: 'root',

kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.html

@@ -0,0 +1,7 @@
+<p>artists works!</p>
+<div>
+  <app-comic-artists-list />
+</div>
+<div>
+  <h2>Artist Details</h2>
+</div>

kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ArtistDetailComponent } from './artist-detail.component';
+import { ComicArtistsComponent } from './comic-artists.component';
 
-describe('ArtistDetailComponent', () => {
-  let component: ArtistDetailComponent;
-  let fixture: ComponentFixture<ArtistDetailComponent>;
+describe('ComicArtistsComponent', () => {
+  let component: ComicArtistsComponent;
+  let fixture: ComponentFixture<ComicArtistsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ArtistDetailComponent]
+      imports: [ComicArtistsComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(ArtistDetailComponent);
+    fixture = TestBed.createComponent(ComicArtistsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { ComicArtistsListComponent } from '../comic-artists-list/comic-artists-list.component';
+
+@Component({
+  selector: 'app-comic-artists',
+  imports: [ComicArtistsListComponent],
+  templateUrl: './comic-artists.component.html',
+  styleUrl: './comic-artists.component.css'
+})
+export class ComicArtistsComponent {
+
+}

kontor-angular/src/app/kontor/comic/comic-section/comic-section.routes.ts

@@ -1,19 +1,31 @@
 import { Routes } from "@angular/router";
 import { ComicListComponent } from "../../../comic/comic/comic-list/comic-list.component";
 import { PublisherListComponent } from "../../../comic/publisher/publisher-list/publisher-list.component";
-import { ArtistListComponent } from "../../../comic/artist/artist-list/artist-list.component";
+import { ComicArtistsComponent } from "../comic-artists/comic-artists.component";
 
 export const comicRoutes: Routes = [
     {
         path: 'comics', 
         component: ComicListComponent
     },
+    // {
+    //     path: 'comics/:comicId',
+    //     component: ComicDetailsComponent,
+    // },
     { 
         path: 'publisher', 
         component: PublisherListComponent
     },
+    // {
+    //     path: 'publishers/:publisherId',
+    //     component: PublishersComponent,
+    // },
     { 
         path: 'artist', 
-        component: ArtistListComponent
+        component: ComicArtistsComponent
     },    
+    {
+        path: 'artist/:artistId',
+        component: ComicArtistsComponent,
+    },
 ];