## 6: Filter tasks

In this step, you will filter your tasks by status and show the number of pending tasks.

### 6.1: Reactive State

First, you will add a button to show or hide the completed tasks from the list.

In Svelte, we can manage component state using reactive variables directly in the `<script>` tag. Svelte's reactivity will automatically update the UI when the state changes.

We'll add a `hideCompleted` variable to the `App.svelte` component and a function to toggle it.

::: code-group

```html [imports/ui/App.svelte]
<script>
  import { Meteor } from "meteor/meteor";
  import { TasksCollection } from "../api/TasksCollection";
  import "/imports/api/TasksMethods";
  import Task from "./Task.svelte";

  let newTask = '';
  let hideCompleted = false; // [!code highlight]

  async function addTask(event) {
    event.preventDefault();
    if (newTask.trim()) {
      await Meteor.callAsync("tasks.insert", {
        text: newTask,
        createdAt: new Date(),
      });
      newTask = '';
    }
  }

  function toggleHideCompleted() { // [!code highlight]
    hideCompleted = !hideCompleted; // [!code highlight]
  } // [!code highlight]

  $m: handle = Meteor.subscribe("tasks");
  $m: subIsReady = handle.ready();
  $m: tasks = TasksCollection.find({}, { sort: { createdAt: -1, _id: -1 } }).fetch();
</script>

<!-- markup will be updated in next steps -->
```
:::

Then, add the button in the markup to toggle the state:

::: code-group

```html [imports/ui/App.svelte]
<!-- ... script remains the same -->

<div class="app">
  <header>
    <div class="app-bar">
      <div class="app-header">
        <h1>📝️ Todo List</h1>                    
      </div>
    </div>
  </header>

  <div class="main">
    <form class="task-form" on:submit={addTask}>
      <input type="text" placeholder="Type to add new tasks" bind:value={newTask} />
      <button type="submit">Add Task</button>
    </form>

    <div class="filter"> <!-- // [!code highlight] -->
      <button on:click={toggleHideCompleted}> <!-- // [!code highlight] -->
        {#if hideCompleted} <!-- // [!code highlight] -->
          Show All <!-- // [!code highlight] -->
        {:else} <!-- // [!code highlight] -->
          Hide Completed <!-- // [!code highlight] -->
        {/if} <!-- // [!code highlight] -->
      </button> <!-- // [!code highlight] -->
    </div> <!-- // [!code highlight] -->

    <ul class="tasks">
      {#if subIsReady}
        {#each tasks as task (task._id)}
          <Task {task} />
        {/each}
      {:else}
        <div>Loading ...</div>
      {/if}
    </ul>
  </div>
</div>
```
:::

You may notice we’re using <span v-pre>{#if}</span> (a conditional block) for the button text. You can learn more about Svelte's conditional rendering [here](https://svelte.dev/docs#client-side-component-api).

### 6.2: Button style

You should add some style to your button so it does not look gray and without a good contrast. You can use the styles below as a reference:

::: code-group

```css [client/main.css]
.filter {
  display: flex;
  justify-content: center;
}

.filter > button {
  background-color: #62807e;
}
```

:::

### 6.3: Filter Tasks

Now, update the reactive tasks fetch to apply the filter if `hideCompleted` is true. We'll also add a reactive variable for the incomplete count.

::: code-group

```html [imports/ui/App.svelte]
<script>
  import { Meteor } from "meteor/meteor";
  import { TasksCollection } from "../api/TasksCollection";
  import "/imports/api/TasksMethods";
  import Task from "./Task.svelte";

  let newTask = '';
  let hideCompleted = false;

  async function addTask(event) {
    event.preventDefault();
    if (newTask.trim()) {
      await Meteor.callAsync("tasks.insert", {
        text: newTask,
        createdAt: new Date(),
      });
      newTask = '';
    }
  }

  function toggleHideCompleted() {
    hideCompleted = !hideCompleted;
  }

  $m: handle = Meteor.subscribe("tasks");
  $m: subIsReady = handle.ready();

  // Reactive tasks with filter
  $m: tasks = TasksCollection.find( // [!code highlight]
    hideCompleted ? { isChecked: { $ne: true } } : {}, // [!code highlight]
    { sort: { createdAt: -1, _id: -1 } } // [!code highlight]
  ).fetch(); // [!code highlight]

  // Reactive incomplete count // [!code highlight]
  $m: incompleteCount = TasksCollection.find({ isChecked: { $ne: true } }).count(); // [!code highlight]
  $m: incompleteDisplay = incompleteCount > 0 ? `(${incompleteCount})` : ''; // [!code highlight]
</script>

<!-- markup remains the same -->
```

:::

### 6.4: Meteor Dev Tools Extension

You can install an extension to visualize the data in your Mini Mongo.

[Meteor DevTools Evolved](https://chrome.google.com/webstore/detail/meteor-devtools-evolved/ibniinmoafhgbifjojidlagmggecmpgf) will help you to debug your app as you can see what data is on Mini Mongo.

<img width="800px" src="/tutorials/svelte/assets/step06-extension.png"/>

You can also see all the messages that Meteor is sending and receiving from the server, this is useful for you to learn more about how Meteor works.

<img width="800px" src="/tutorials/svelte/assets/step06-ddp-messages.png"/>

Install it in your Google Chrome browser using this [link](https://chrome.google.com/webstore/detail/meteor-devtools-evolved/ibniinmoafhgbifjojidlagmggecmpgf).

### 6.5: Pending tasks

Update the App component in order to show the number of pending tasks in the app bar.

You should avoid adding zero to your app bar when there are no pending tasks. Use the reactive `incompleteDisplay` in the header:

::: code-group

```html [imports/ui/App.svelte]
<!-- ... script with incompleteDisplay remains the same -->

<div class="app">
  <header>
    <div class="app-bar">
      <div class="app-header">
        <h1>📝️ To Do List {incompleteDisplay}</h1> <!-- // [!code highlight] -->
      </div>
    </div>
  </header>

  <!-- rest of markup -->
</div>
```

:::

Your app should look like this:

<img width="200px" src="/tutorials/svelte/assets/step06-all.png"/>
<img width="200px" src="/tutorials/svelte/assets/step06-filtered.png"/>

In the next step we are going to include user access in your app.
