Setup word detail component

src/app/typings.d.ts

@@ -0,0 +1,12 @@
+export interface CurrentUser {
+  userName: string;
+}
+
+export interface Word {
+  id: number;
+  name: string;
+  description: string;
+  imageUrl?: string;
+  englishWordID: number;
+  category?: string;
+}

src/app/words/word-detail/word-detail.component.html

@@ -1,3 +1,9 @@
-<p>
-  word-detail works!
-</p>
+<div class="card">
+  <div class="card-header">{{ word.name }}</div>
+  <div class="card-body">
+    <dl>
+      <dt>Description:</dt>
+      <dd>{{ word.description }}</dd>
+    </dl>
+  </div>
+</div>

src/app/words/word-detail/word-detail.component.ts

@@ -1,15 +1,51 @@
 import { Component, OnInit } from '@angular/core';
+import { WordService } from '../word.service';
+import { Word } from '../../typings';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'app-word-detail',
   templateUrl: './word-detail.component.html',
   styleUrls: ['./word-detail.component.scss']
 })
 export class WordDetailComponent implements OnInit {
+  pageTitle = 'Word Detail';
+  word: Word;
+  errorMessage: string;
 
-  constructor() { }
+  constructor(
+    private wordService: WordService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) {}
 
   ngOnInit() {
+    if (this.route.snapshot.paramMap.get('id')) {
+      const id = +this.route.snapshot.paramMap.get('id');
+      this.getWord(id);
+    } else {
+      this.word = {
+        id: 1,
+        name: 'Amabibi',
+        description: 'Amabibi means my mother tongue',
+      };
+      // this.router.navigate(['/words/list']);
+    }
   }
 
+  getWord(id: number) {
+    this.wordService
+      .getWord(id)
+      .subscribe(
+        word => this.onWordRetrieved(word),
+        error => (this.errorMessage = <any>error)
+      );
+  }
+
+  onWordRetrieved(word: Word) {
+    this.word = word;
+
+    if (this.word) {
+    }
+  }
 }

src/app/words/word.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { WordService } from './word.service';
+
+describe('WordService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: WordService = TestBed.get(WordService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/words/word.service.ts

@@ -0,0 +1,68 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable, of, throwError } from 'rxjs';
+import { catchError, tap, map } from 'rxjs/operators';
+import { Word } from '../typings';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class WordService {
+  private wordsUrl = 'api/words';
+
+  constructor(private http: HttpClient) {}
+
+  createWord(word: Word): Observable<Word> {
+    if (!word) {
+
+    }
+    return of(word);
+  }
+
+  getWord(id: number): Observable<Word> {
+    if (id === 0) {
+      return of(this.initializeWord());
+    }
+    const url = `${this.wordsUrl}/${id}`;
+    return this.http.get<Word>(url).pipe(
+      tap(data => console.log('getWord: ' + JSON.stringify(data))),
+      catchError(this.handleError)
+    );
+  }
+
+  private handleError(err) {
+    // TODO: send the server to some remote logging infrastructure
+    let errorMessage: string;
+    if (err.error instanceof ErrorEvent) {
+      // Client-side error
+      errorMessage = `An error occurred: ${err.error.message}`;
+    } else {
+      // Backend Eerror
+      errorMessage = `Backend returned code ${err.status}: ${err.body.error}`;
+    }
+    console.error(err);
+    return throwError(errorMessage);
+  }
+
+  private initializeWord(): Word {
+    // Return an initialized object
+    return {
+      id: 0,
+      name: null,
+      description: null,
+      imageUrl: null
+    };
+  }
+
+  deleteWord(id: number): Observable<Word> {
+    if (id === 0) {
+      return of(this.initializeWord());
+    }
+    const url = `${this.wordsUrl}/${id}/delete`;
+    return this.http.get<Word>(url).pipe(
+      tap(data => console.log("deleteWord: " + JSON.stringify(data))),
+      catchError(this.handleError)
+    );
+  }
+}

src/app/words/words.module.ts

@@ -1,24 +1,46 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { WordsComponent } from './words/words.component';
-import { WordGroupsComponent } from './word-groups/word-groups.component';
-import { EnglishWordsComponent } from './english-words/english-words.component';
 import { WordDetailComponent } from './word-detail/word-detail.component';
 import { WordEditComponent } from './word-edit/word-edit.component';
 import { WordListComponent } from './word-list/word-list.component';
-import { WordGroupDetailsComponent } from './word-group-details/word-group-details.component';
 import { WordGroupEditComponent } from './word-group-edit/word-group-edit.component';
 import { WordGroupListComponent } from './word-group-list/word-group-list.component';
 import { EnglishWordListComponent } from './english-word-list/english-word-list.component';
-import { EnglishWordDetailsComponent } from './english-word-details/english-word-details.component';
 import { WordGroupDetailComponent } from './word-group-detail/word-group-detail.component';
 import { EnglishWordDetailComponent } from './english-word-detail/english-word-detail.component';
 import { EnglishWordEditComponent } from './english-word-edit/english-word-edit.component';
+import { RouterModule } from '@angular/router';
+import { AuthGuard } from '../auth.guard';
 
+const routes = [
+  {
+    canActivate: [AuthGuard],
+    path: '',
+    children: [
+      { path: 'list', component: WordListComponent },
+      { path: ':id/detail', component: WordDetailComponent },
+      { path: ':id/edit', component: WordEditComponent },
+      { path: 'group/list', component: WordGroupListComponent },
+      { path: 'group/:id/detail', component: WordGroupDetailComponent },
+      { path: 'group/:id/edit', component: WordGroupEditComponent },
+      { path: 'english/list', component: EnglishWordListComponent },
+      { path: 'english/:id/detail', component: EnglishWordDetailComponent },
+      { path: 'english/:id/edit', component: EnglishWordEditComponent },
+    ]
+  }
+];
 @NgModule({
-  declarations: [WordsComponent, WordGroupsComponent, EnglishWordsComponent, WordDetailComponent, WordEditComponent, WordListComponent, WordGroupDetailsComponent, WordGroupEditComponent, WordGroupListComponent, EnglishWordListComponent, EnglishWordDetailsComponent, WordGroupDetailComponent, EnglishWordDetailComponent, EnglishWordEditComponent],
-  imports: [
-    CommonModule
-  ]
+  declarations: [
+    WordListComponent,
+    WordDetailComponent,
+    WordEditComponent,
+    WordGroupListComponent,
+    WordGroupEditComponent,
+    WordGroupDetailComponent,
+    EnglishWordListComponent,
+    EnglishWordDetailComponent,
+    EnglishWordEditComponent
+  ],
+  imports: [CommonModule, RouterModule.forChild(routes)]
 })
-export class WordsModule { }
+export class WordsModule {}