Update to REST Api to better handle PUT/DELETE

Author: isaacrlevin

ClientApp/app/components/user-detail/user-detail.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { IUser } from '../../models/User';
 import { UserService } from '../../shared/user.service';
 
@@ -8,7 +8,7 @@ import { UserService } from '../../shared/user.service';
 })
 export class UserDetailComponent {
     @Input() user: IUser;
-
+    @Output() userUpdate: EventEmitter<any> = new EventEmitter();
     constructor(private userService: UserService) { }
 
 
@@ -17,6 +17,7 @@ export class UserDetailComponent {
             console.log('Put user result: ', result);
         }, error => {
             console.log(`There was an issue. ${error._body}.`);
-        });
+          });
+      this.userUpdate.emit(null);
     }
 }

ClientApp/app/containers/users/users.component.html

@@ -1,4 +1,4 @@
-<h1>This is a RestAPI Example (hitting WebAPI in our case)</h1>
+<h1>This is a RestAPI Example (hitting WebAPI in our case)</h1>
 
 <blockquote>
   Let's get some fake users from Rest:<br>
@@ -26,4 +26,4 @@ <h2>Users</h2>
     </button>
   </li>
 </ul>
-<app-user-detail [user]="selectedUser"></app-user-detail>
+<app-user-detail (userUpdate)="onUserUpdate($event)" [user]="selectedUser"></app-user-detail>

ClientApp/app/containers/users/users.component.ts

@@ -1,69 +1,81 @@
-import {
-    Component, OnInit,
-    // animation imports
-    trigger, state, style, transition, animate, Inject
+import {
+  Component, OnInit,
+  // animation imports
+  trigger, state, style, transition, animate, Inject
 } from '@angular/core';
 import { IUser } from '../../models/User';
 import { UserService } from '../../shared/user.service';
 
 @Component({
-    selector: 'app-users',
-    templateUrl: './users.component.html',
-    styleUrls: ['./users.component.css'],
-    animations: [
-        // Animation example
-        // Triggered in the ngFor with [@flyInOut]
-        trigger('flyInOut', [
-            state('in', style({ transform: 'translateY(0)' })),
-            transition('void => *', [
-                style({ transform: 'translateY(-100%)' }),
-                animate(1000)
-            ]),
-            transition('* => void', [
-                animate(1000, style({ transform: 'translateY(100%)' }))
-            ])
-        ])
-    ]
+  selector: 'app-users',
+  templateUrl: './users.component.html',
+  styleUrls: ['./users.component.css'],
+  animations: [
+    // Animation example
+    // Triggered in the ngFor with [@flyInOut]
+    trigger('flyInOut', [
+      state('in', style({ transform: 'translateY(0)' })),
+      transition('void => *', [
+        style({ transform: 'translateY(-100%)' }),
+        animate(1000)
+      ]),
+      transition('* => void', [
+        animate(1000, style({ transform: 'translateY(100%)' }))
+      ])
+    ])
+  ]
 })
 export class UsersComponent implements OnInit {
 
-    users: IUser[];
-    selectedUser: IUser;
+  users: IUser[];
+  selectedUser: IUser;
 
-    // Use "constructor"s only for dependency injection
-    constructor(
-      private userService: UserService
-    ) { }
+  // Use "constructor"s only for dependency injection
+  constructor(
+    private userService: UserService
+  ) { }
 
-    // Here you want to handle anything with @Input()'s @Output()'s
-    // Data retrieval / etc - this is when the Component is "ready" and wired up
-    ngOnInit() {
-        this.userService.getUsers().subscribe(result => {
-            console.log('HttpClient [GET] /api/users/allresult', result);
-            this.users = result;
-        });
-    }
+  // Here you want to handle anything with @Input()'s @Output()'s
+  // Data retrieval / etc - this is when the Component is "ready" and wired up
+  ngOnInit() {
+    this.userService.getUsers().subscribe(result => {
+      console.log('HttpClient [GET] /api/users/allresult', result);
+      this.users = result;
+    });
+  }
 
-    onSelect(user: IUser): void {
-        this.selectedUser = user;
-    }
+  onSelect(user: IUser): void {
+    this.selectedUser = user;
+  }
 
-    deleteUser(user) {
-        this.userService.deleteUser(user).subscribe(result => {
-            console.log('Delete user result: ', result);
-            let position = this.users.indexOf(user);
-            this.users.splice(position, 1);
-        }, error => {
-            console.log(`There was an issue. ${error._body}.`);
-        });
-    }
+  deleteUser(user) {
+    this.clearUser();
+    this.userService.deleteUser(user).subscribe(result => {
+      console.log('Delete user result: ', result);
+      let position = this.users.indexOf(user);
+      this.users.splice(position, 1);
+    }, error => {
+      console.log(`There was an issue. ${error._body}.`);
+    });
+  }
+
+  onUserUpdate(event) {
+    this.clearUser();
+  }
+
+  addUser(newUserName) {
+    this.clearUser();
+    this.userService.addUser(newUserName).subscribe(result => {
+      console.log('Post user result: ', result);
+      this.users.push(result);
+    }, error => {
+      console.log(`There was an issue. ${error._body}.`);
+    });
+  }
 
-    addUser(newUserName) {
-        this.userService.addUser(newUserName).subscribe(result => {
-            console.log('Post user result: ', result);
-            this.users.push(result);
-        }, error => {
-            console.log(`There was an issue. ${error._body}.`);
-        });
+  clearUser() {
+    if (this.selectedUser) {
+      this.selectedUser = null;
     }
+  }
 }

Server/RestAPI/UsersController.cs

@@ -1,4 +1,4 @@
-using AspCoreServer.Data;
+using AspCoreServer.Data;
 using AspCoreServer.Models;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.EntityFrameworkCore;
@@ -89,7 +89,7 @@ public async Task<IActionResult> Put(int id, [FromBody]User userUpdateValue)
         {
           _context.Update(userUpdateValue);
           await _context.SaveChangesAsync();
-          return Ok("Updated user - " + userUpdateValue.Name);
+          return Json("Updated user - " + userUpdateValue.Name);
         }
       }
       catch (DbUpdateException)
@@ -116,7 +116,7 @@ public async Task<IActionResult> Delete(int id)
       {
         _context.User.Remove(userToRemove);
         await _context.SaveChangesAsync();
-        return Ok("Deleted user - " + userToRemove.Name);
+        return Json("Deleted user - " + userToRemove.Name);
       }
     }
   }