Now that we have all of our pieces in place, lets build our application.

Replace the entire contents of `app.rb` with:

class App < Hyperloop::Component

The browser screen will go blank because we have not defined the three subcomponents. Lets define them now:

Add three new ruby files to the `app/hyperloop/components` folder:

class Header < Hyperloop::Component

end

class Index < Hyperloop::Component

end

class Footer < Hyperloop::Component

end

Once you add the Footer component you should see:

<div style="border:solid; margin-left: 10px; padding: 10px">

To display each Todo we will create a TodoItem component that takes a parameter:

class TodoItem < Hyperloop::Component

end

We can use this component in our Index component:

class Index < Hyperloop::Component

end

Now you will see something like

<div style="border:solid; margin-left: 10px; padding: 10px">

end

Now your display should look like this:

<div style="border:solid; margin-left: 10px; padding: 10px">

<div>Header will go here</div>

Meanwhile HyperReact sees the value of `params.todo.checked` changing, and this causes the associated HTML INPUT tag to be re-rendered.

We will finish up by adding a delete link at the end of the Todo item:

class TodoItem < Hyperloop::Component

end

*Note: If a component or tag block returns a string it is automatically wrapped in a SPAN, to insert a string in the middle you have to wrap it a SPAN like we did above.*

I hope you are starting to see a pattern here. HyperReact components determine what to display based on the `state` of some

scope :active, -> () { where(completed: false) }

Now we can say `Todo.all`, `Todo.completed`, and `Todo.active`, and get the desired subset of Todos.

You might want to try it now in the rails console. *Note: you will have to do a `reload!` to load the changes to the Model.*

Having the application display different data (or whole different components) based on the URL is called routing.

Lets change `App` to look like this:

class App < Hyperloop::Router

and the `Index` component to look like this:

class Index < Hyperloop::Router::Component

Of course we will want to add navigation to move between these routes. We will put the navigation in the footer:

class Footer < Hyperloop::Component

Then we can replace the anchor tag with the Router's `NavLink` component:

Change

A(href: "/#{path}", style: {marginRight: 10}) { path.camelize }

to

NavLink("/#{path}", style: {marginRight: 10}) { path.camelize }

So far we can mark Todos as completed, delete them, and filter them. Now we create an `EditItem` component so we can change the Todo title.

Add a new component like this:

class EditItem < Hyperloop::Component

+ When the user types the enter key (key code 13) the todo is saved.

Now update the `TodoItem` component replacing

SPAN { params.todo.title }

with

EditItem(todo: params.todo)

+ User changes focus away (`blur`) from the Todo being edited: editing changes to `false`.

In order to accomplish this our `EditItem` component is going to communicate via two callbacks - `on_save` and `on_cancel` - with the parent component. We can think of these callbacks as custom events, and indeed as we shall see they will work just like any other event.

Add the following 5 lines to the `EditItem` component like this:

class EditItem < Hyperloop::Component

Finally we add the `blur` event handler and simply transform it into our custom `cancel` event.

Now we can update our `TodoItem` component to be a little state machine, which will react to three events: `double_click`, `save` and `cancel`.

class TodoItem < Hyperloop::Component

Because of this we can easily reuse EditItem to create new Todos. Not only does this save us time, but it also insures that the user interface acts consistently.

Update the `Header` component to use EditItem like this:

class Header < Hyperloop::Component

Now its a matter of updating the css classes which are passed to components via the `class` parameter.

Let's start with the `App` component. With styling it will look like this:

class App < Hyperloop::Router

The `Footer` components needs have a `UL` added to hold the links nicely,

and we can also use the `NavLinks` `active_class` param to highlight the link that is currently active:

class Footer < Hyperloop::Component

For the Index component just add the `main` and `todo-list` classes.

class Index < Hyperloop::Router::Component

For the EditItem component we want the caller specify the class. To keep things compatible with React.js we need to call the param `className`,

but we can still send it to EditItem with the usual hyperloop style `class` param.

class EditItem < Hyperloop::Component

Now we can add classes to the TodoItem's list-item, input, anchor tags, and to the `EditItem` component:

class TodoItem < Hyperloop::Component

In the Header we can send a different class to the `EditItem` component. While we are at it

we will add the `H1 { 'todos' }` hero unit.

class Header < Hyperloop::Component

+ **Show How Many Items Left In Footer**

```ruby

...

render(DIV, class: :footer) do

```

+ **Add 'placeholder' Text To Edit Item**

EditItem should display a meaningful placeholder hint if the title is blank:

```ruby

...

INPUT(

```

+ **Don't Show the Footer If There are No Todos**

In the `App` component add a *guard* so that we won't show the Footer if there are no Todos:

```ruby

...

Footer() unless Todo.count.zero?