refactor(angular-tutorial-sample): definitions

samples/BookStore-Angular-MongoDb/angular/src/app/books/book-list/book-list.component.html

@@ -7,7 +7,7 @@
         </h5>
       </div>
       <div class="text-right col col-md-6">
-        <button id="create-role" class="btn btn-primary" type="button" (click)="onAdd()">
+        <button id="create-role" class="btn btn-primary" type="button" (click)="createBook()">
           <i class="fa fa-plus mr-1"></i> <span>New book</span>
         </button>
       </div>
@@ -37,7 +37,7 @@
                 <i class="fa fa-cog mr-1"></i>Actions
               </button>
               <div ngbDropdownMenu>
-                <button ngbDropdownItem (click)="onEdit(data.id)">Edit</button>
+                <button ngbDropdownItem (click)="editBook(data.id)">Edit</button>
                 <button ngbDropdownItem (click)="delete(data.id, data.name)">
                   Delete
                 </button>
@@ -97,6 +97,9 @@
     <button type="button" class="btn btn-secondary" #abpClose>
       Cancel
     </button>
-    <abp-button iconClass="fa fa-check" (click)="save()">Save</abp-button>
+    <button class="btn btn-primary" (click)="save()">
+      <i class="fa fa-check mr-1"></i>
+      Save
+    </button>
   </ng-template>
 </abp-modal>

samples/BookStore-Angular-MongoDb/angular/src/app/books/book-list/book-list.component.ts

@@ -54,13 +54,13 @@ export class BookListComponent implements OnInit {
     });
   }
 
-  onAdd() {
+  createBook() {
     this.selectedBook = {} as Books.Book;
     this.buildForm();
     this.isModalOpen = true;
   }
 
-  onEdit(id: string) {
+  editBook(id: string) {
     this.booksService.getById(id).subscribe(book => {
       this.selectedBook = book;
       this.buildForm();

samples/BookStore-Angular-MongoDb/angular/src/app/books/shared/books.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { RestService, Rest } from '@abp/ng.core';
+import { RestService } from '@abp/ng.core';
 import { Books } from '../../store/models';
 import { Observable } from 'rxjs';
 
@@ -7,52 +7,42 @@ import { Observable } from 'rxjs';
   providedIn: 'root',
 })
 export class BooksService {
-  constructor(private rest: RestService) {}
+  constructor(private restService: RestService) {}
 
   get(): Observable<Books.Response> {
-    const request: Rest.Request<null> = {
+    return this.restService.request<void, Books.Response>({
       method: 'GET',
       url: '/api/app/book',
-    };
+    });
-
-    return this.rest.request<null, Books.Response>(request);
   }
 
-  create(body: Books.CreateUpdateBookInput): Observable<Books.Book> {
+  create(createBookInput: Books.CreateUpdateBookInput): Observable<Books.Book> {
-    const request: Rest.Request<Books.CreateUpdateBookInput> = {
+    return this.restService.request<Books.CreateUpdateBookInput, Books.Book>({
       method: 'POST',
       url: '/api/app/book',
-      body,
+      body: createBookInput,
-    };
+    });
-
-    return this.rest.request<Books.CreateUpdateBookInput, Books.Book>(request);
   }
 
   getById(id: string): Observable<Books.Book> {
-    const request: Rest.Request<null> = {
+    return this.restService.request<void, Books.Book>({
       method: 'GET',
       url: `/api/app/book/${id}`,
-    };
+    });
-
-    return this.rest.request<null, Books.Book>(request);
   }
 
-  update(body: Books.CreateUpdateBookInput, id: string): Observable<Books.Book> {
+  update(updateBookInput: Books.CreateUpdateBookInput, id: string): Observable<Books.Book> {
-    const request: Rest.Request<Books.CreateUpdateBookInput> = {
+    return this.restService.request<Books.CreateUpdateBookInput, Books.Book>({
       method: 'PUT',
       url: `/api/app/book/${id}`,
-      body,
+      body: updateBookInput,
-    };
+    });
-
-    return this.rest.request<Books.CreateUpdateBookInput, Books.Book>(request);
   }
 
-  delete(id: string): Observable<null> {
+  delete(id: string): Observable<void> {
-    const request: Rest.Request<null> = {
+    return this.restService.request<void, void>({
       method: 'DELETE',
       url: `/api/app/book/${id}`,
-    };
+    });
-
-    return this.rest.request<null, null>(request);
   }
 }

samples/BookStore-Angular-MongoDb/angular/src/app/store/states/books.state.ts

@@ -10,38 +10,38 @@ import { GetBooks, CreateUpdateBook, DeleteBook } from '../actions/books.actions
 })
 export class BooksState {
   @Selector()
-  static getBooks({ books }: Books.State) {
+  static getBooks(state: Books.State) {
-    return books.items || [];
+    return state.books.items || [];
   }
 
   constructor(private booksService: BooksService) {}
 
   @Action(GetBooks)
-  get({ patchState }: StateContext<Books.State>) {
+  get(ctx: StateContext<Books.State>) {
     return this.booksService.get().pipe(
-      tap(books => {
+      tap(booksResponse => {
-        patchState({
+        ctx.patchState({
-          books,
+          books: booksResponse,
         });
       }),
     );
   }
 
   @Action(CreateUpdateBook)
-  save({ dispatch }: StateContext<Books.State>, { payload, id }: CreateUpdateBook) {
+  save(ctx: StateContext<Books.State>, action: CreateUpdateBook) {
     let request;
 
-    if (id) {
+    if (action.id) {
-      request = this.booksService.update(payload, id);
+      request = this.booksService.update(action.payload, action.id);
     } else {
-      request = this.booksService.create(payload);
+      request = this.booksService.create(action.payload);
     }
 
-    return request.pipe(switchMap(() => dispatch(new GetBooks())));
+    return request.pipe(switchMap(() => ctx.dispatch(new GetBooks())));
   }
 
   @Action(DeleteBook)
-  delete({ dispatch }: StateContext<Books.State>, { id }: DeleteBook) {
+  delete(ctx: StateContext<Books.State>, action: DeleteBook) {
-    return this.booksService.delete(id).pipe(switchMap(() => dispatch(new GetBooks())));
+    return this.booksService.delete(action.id).pipe(switchMap(() => ctx.dispatch(new GetBooks())));
   }
 }