Commit dd6d9ac

* text=auto

*.sh eol=lf

artifacts/

bin/

obj/

.dotnet/

.nuget/

.packages/

.tools/

.vs/

.vscode/

node_modules/

BenchmarkDotNet.Artifacts/

.gradle/

src/SignalR/clients/**/dist/

modules/

dist/

.nuxt/

**Goal**: In this exercise, the participants will be asked to build the backend of a TodoReact App. The user will be exploring the functionality of FeatherHttp, a server-side framework.

**What is FeatherHttp**: FeatherHttp makes it **easy** to write web applications.

**Why FeatherHttp**: FeatherHttp is lightweight server-side framework designed to scale-up as your application grows in complexity.

1. Install [.NET Core 5.0 Preview 7 SDK ](https://dotnet.microsoft.com/download/dotnet/5.0)

1. Install [Node.js](https://nodejs.org/en/)

1. Install the FeatherHttp template using the `dotnet CLI`. Copy the command below into a terminal or command prompt to install the template.

```

TodoReact> npm i

TodoReact> npm start

Tutorial>dotnet new feather -n TodoApi

Tutorial> cd TodoApi

TodoApi> dotnet add package Microsoft.EntityFrameworkCore.InMemory --version 5.0.0-preview.7.20365.15

```

The above model will be used for reading in JSON and storing todo items into the database.

1. Create a file called `TodoDbContext.cs` with the following contents:

```C#

using Microsoft.EntityFrameworkCore;

public class TodoDbContext : DbContext

{

public DbSet<TodoItem> Todos { get; set; }

protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)

{

optionsBuilder.UseInMemoryDatabase("Todos");

}

}

```

This code does 2 things:

- It exposes a `Todos` property which represents the list of todo items in the database.

- The call to `UseInMemoryDatabase` wires up the in memory database storage. Data will only be persisted as long as the application is running.

1. Now we're going to use `dotnet watch` to run the server side application:

```

dotnet watch run

```

This will watch our application for source code changes and will restart the process as a result.

## Expose the list of todo items

1. Add the appropriate `usings` to the top of the `Program.cs` file.

```

using System.Threading.Tasks;

using Microsoft.AspNetCore.Builder;

using Microsoft.AspNetCore.Http;

using Microsoft.EntityFrameworkCore;

```

This will import the required namespaces so that the application compiles successfully.

1. In `Program.cs`, create a method called `GetTodos` inside of the `Program` class:

```C#

static async Task GetTodos(HttpContext http)

{

using var db = new TodoDbContext();

var todos = await db.Todos.ToListAsync();

await http.Response.WriteJsonAsync(todos);

}

```

This method gets the list of todo items from the database and writes a JSON representation to the HTTP response.

1. Wire up `GetTodos` to the `api/todos` route by modifying the code in `Main` to the following:

```C#

static async Task Main(string[] args)

{

var app = WebApplication.Create(args);

app.MapGet("/api/todos", GetTodos);

await app.RunAsync();

}

```

1. Navigate to the URL http://localhost:5000/api/todos in the browser. It should return an empty JSON array.

<img src="https://user-images.githubusercontent.com/2546640/75116317-1a235500-5635-11ea-9a73-e6fc30639865.png" alt="empty json array" style="text-align:center" width =70% />

## Adding a new todo item

1. In `Program.cs`, create another method called `CreateTodo` inside of the `Program` class:

```C#

static async Task CreateTodo(HttpContext http)

{

var todo = await http.Request.ReadJsonAsync<TodoItem>();

using var db = new TodoDbContext();

await db.Todos.AddAsync(todo);

await db.SaveChangesAsync();

http.Response.StatusCode = 204;

}

```

The above method reads the `TodoItem` from the incoming HTTP request and as a JSON payload and adds

it to the database.

1. Wire up `CreateTodo` to the `api/todos` route by modifying the code in `Main` to the following:

```C#

static async Task Main(string[] args)

{

var app = WebApplication.Create(args);

app.MapGet("/api/todos", GetTodos);

app.MapPost("/api/todos", CreateTodo);

await app.RunAsync();

}

```

1. Navigate to the `TodoReact` application which should be running on http://localhost:3000. The application should be able to add new todo items. Also, refreshing the page should show the stored todo items.


## Changing the state of todo items

1. In `Program.cs`, create another method called `UpdateCompleted` inside of the `Program` class:

```C#

static async Task UpdateCompleted(HttpContext http)

{

if (!http.Request.RouteValues.TryGet("id", out int id))

{

http.Response.StatusCode = 400;

return;

}

using var db = new TodoDbContext();

var todo = await db.Todos.FindAsync(id);

if (todo == null)

{

http.Response.StatusCode = 404;

return;

}

var inputTodo = await http.Request.ReadJsonAsync<TodoItem>();

todo.IsComplete = inputTodo.IsComplete;

await db.SaveChangesAsync();

http.Response.StatusCode = 204;

}

```

The above logic retrieves the id from the route parameter "id" and uses it to find the todo item in the database. It then reads the JSON payload from the incoming request, sets the `IsComplete` property and updates the todo item in the database.

1. Wire up `UpdateCompleted` to the `api/todos/{id}` route by modifying the code in `Main` to the following:

```C#

static async Task Main(string[] args)

{

var app = WebApplication.Create(args);

app.MapGet("/api/todos", GetTodos);

app.MapPost("/api/todos", CreateTodo);

app.MapPost("/api/todos/{id}", UpdateCompleted);

await app.RunAsync();

}

```

## Deleting a todo item

1. In `Program.cs` create another method called `DeleteTodo` inside of the `Program` class:

```C#

static async Task DeleteTodo(HttpContext http)

{

if (!http.Request.RouteValues.TryGet("id", out int id))

{

http.Response.StatusCode = 400;

return;

}

using var db = new TodoDbContext();

var todo = await db.Todos.FindAsync(id);

if (todo == null)

{

http.Response.StatusCode = 404;

return;

}

db.Todos.Remove(todo);

await db.SaveChangesAsync();

http.Response.StatusCode = 204;

}

```

The above logic is very similar to `UpdateCompleted` but instead. it removes the todo item from the database after finding it.

1. Wire up `DeleteTodo` to the `api/todos/{id}` route by modifying the code in `Main` to the following:

```C#

static async Task Main(string[] args)

{

var app = WebApplication.Create(args);

app.MapGet("/api/todos", GetTodos);

app.MapPost("/api/todos", CreateTodo);

app.MapPost("/api/todos/{id}", UpdateCompleted);

app.MapDelete("/api/todos/{id}", DeleteTodo);

await app.RunAsync();

}

```

## Test the application

The application should now be fully functional.