Add support for inserting todo items and refactor code

Author: Vlad Sandu

TodoApp.DTO/TodoItemDto.cs

@@ -2,7 +2,6 @@
 {
     public class TodoItemDto
     {
-        public int UserId { get; set; }
         public string Description { get; set; }
     }
 }

TodoApp.Services/TodoItem/TodoItemService.cs

@@ -22,9 +22,9 @@ public IEnumerable<TodoItemDto> Get(string email)
                 .Select(t => Mapper.Map<TodoItem, TodoItemDto>(t)).ToList();
         }
 
-        public void Add(TodoItemDto todoItemDto, UserDto userDto)
+        public void Add(TodoItemDto todoItemDto, string email)
         {
-            var user = GetUser(userDto);
+            var user = GetUser(email);
             _dbContext.Add(new TodoItem
             {
                 Description = todoItemDto.Description,
@@ -33,9 +33,9 @@ public void Add(TodoItemDto todoItemDto, UserDto userDto)
             _dbContext.SaveChanges();
         }
 
-        public void Remove(TodoItemDto todoItemDto, UserDto userDto)
+        public void Remove(TodoItemDto todoItemDto, string email)
         {
-            var user = GetUser(userDto);
+            var user = GetUser(email);
             _dbContext.Remove(new TodoItem
             {
                 Description = todoItemDto.Description,
@@ -44,9 +44,9 @@ public void Remove(TodoItemDto todoItemDto, UserDto userDto)
             _dbContext.SaveChanges();
         }
 
-        private User GetUser(UserDto userDto)
+        private User GetUser(string email)
         {
-            return _dbContext.User.First(u => u.Email == userDto.Email);
+            return _dbContext.User.First(u => u.Email == email);
         }
     }
 }

TodoApp/ClientApp/src/app/app.module.ts

@@ -17,9 +17,8 @@ import { AuthGuard } from './guards/auth.guard';
 import { TodoItemService } from "./services/todoitem.service";
 import { TodoItemComponent } from './todo-item/todo-item.component';
 import { TodoListComponent } from './todo-list/todo-list.component';
-
-@
-NgModule({
+import { TodoItemInserterComponent } from './todo-item-inserter/todo-item-inserter.component';
+@NgModule({
   declarations: [
     AppComponent,
     NavMenuComponent,
@@ -28,7 +27,8 @@ NgModule({
     RegisterComponent,
     LogoutComponent,
     TodoItemComponent,
-    TodoListComponent
+    TodoListComponent,
+    TodoItemInserterComponent
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),

TodoApp/ClientApp/src/app/layouts/home-layout.component.html

@@ -5,6 +5,7 @@
     </div>
     <div class="col-sm-9" body-content>
       <todo-list [items]="todoItems | async"></todo-list>
+      <todo-item-inserter (shouldRefreshItems)="refreshItems()"></todo-item-inserter>
     </div>
   </div>
 </div>

TodoApp/ClientApp/src/app/layouts/home-layout.component.ts

@@ -10,11 +10,15 @@ export class HomeLayoutComponent implements AfterViewInit {
   todoItems: Observable<TodoItem[]>;
 
   constructor(private readonly todoItemService: TodoItemService) {
-    this.todoItems = this.todoItemService.get();
+    this.refreshItems();
   }
 
   ngAfterViewInit(): void {
 
   }
 
+  refreshItems() {
+    // TODO: Improve this
+    this.todoItems = this.todoItemService.get() as any;
+  }
 }

TodoApp/ClientApp/src/app/services/todoitem.service.ts

@@ -16,4 +16,12 @@ export class TodoItemService {
           return throwError(err);
         }));
   }
+
+  post(todoItem: TodoItem) {
+    return this.http.post('/api/todoitem', todoItem)
+      .pipe(
+        catchError(err => {
+          return throwError(err);
+        }));
+  }
 }

TodoApp/ClientApp/src/app/todo-item-inserter/todo-item-inserter.component.css

@@ -0,0 +1,12 @@
+<div class="container">
+  <h1>Add a Todo item:</h1>
+  <form>
+    <div class="form-group">
+      <label for="description">Description:</label>
+      <input type="text" class="form-control" id="description" #description required>
+    </div>
+
+    <button type="submit" class="btn btn-success" (click)="insertTodo(description.value)">Submit</button>
+  </form>
+</div>
+<div>{{resultMessage}}</div>

TodoApp/ClientApp/src/app/todo-item-inserter/todo-item-inserter.component.html

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TodoItemInserterComponent } from './todo-item-inserter.component';
+
+describe('TodoItemInserterComponent', () => {
+  let component: TodoItemInserterComponent;
+  let fixture: ComponentFixture<TodoItemInserterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TodoItemInserterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TodoItemInserterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

TodoApp/ClientApp/src/app/todo-item-inserter/todo-item-inserter.component.spec.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { TodoItemService } from "../services/todoitem.service";
+import { catchError } from 'rxjs/operators';
+import { throwError } from 'rxjs';
+
+@Component({
+  selector: 'todo-item-inserter',
+  templateUrl: './todo-item-inserter.component.html',
+  styleUrls: ['./todo-item-inserter.component.css']
+})
+export class TodoItemInserterComponent implements OnInit {
+  @Output() shouldRefreshItems = new EventEmitter<void>();
+  resultMessage: string;
+  
+  constructor(private readonly todoItemService: TodoItemService) { }
+
+  ngOnInit() {
+  }
+
+  insertTodo(description: string) {
+    const todoItem = { description };
+    this.todoItemService.post(todoItem).pipe(
+      catchError(err => {
+        this.resultMessage = err.message;
+        return throwError(err);
+      }))
+      .subscribe(() => {
+        this.resultMessage = "Message inserted successfully!";
+        this.shouldRefreshItems.emit();
+      });
+  }
+}

TodoApp/ClientApp/src/app/todo-item-inserter/todo-item-inserter.component.ts

@@ -32,5 +32,21 @@ public IActionResult Get()
                 return StatusCode(500);
             }
         }
+
+        [HttpPost]
+        public IActionResult Post(TodoItemDto todoItemDto)
+        {
+            try
+            {
+                var email = User.FindFirst(ClaimTypes.Email).Value;
+                _todoItemService.Add(todoItemDto, email);
+                return Ok();
+            }
+            catch (Exception e)
+            {
+                Console.WriteLine(e.Message);
+                return StatusCode(500);
+            }
+        }
     }
 }

TodoApp/Controllers/TodoItemController.cs

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
     <TargetFramework>netcoreapp2.1</TargetFramework>
@@ -7,7 +7,7 @@
     <IsPackable>false</IsPackable>
     <SpaRoot>ClientApp\</SpaRoot>
     <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
-
+    <TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>
     <!-- Set this to true if you enable server-side prerendering -->
     <BuildServerSideRenderer>false</BuildServerSideRenderer>
     <UserSecretsId>8aa6639e-8cfa-4b13-8ae4-9f0744c398f8</UserSecretsId>