Building a to-do list app (part 5)

Editors constantly “watch” passed task data

Remember we faced this problem where task editors had no way of knowing if tasks updated and they kept showing old values even if tasks did update? We must have. At least I did.

Well, there’s an easy way to fix that. By “watching” the task name and due time.

So, task editors may or may not get passed those values. At the very beginning, the passed data is set to the properties in data. After that, every time name and due time changes, the data properties are reset again.

mounted() {
    this.resetInputs();
},

watch: {
    currentName: function() {
        this.resetInputs();
    },
    currentDueTime: function() {
        this.resetInputs();
    }
},

methods: {
    resetInputs() {
        //
    }
}

Although the name is kind of misleading, resetInputs() sets the property values to whatever data is passed (task editor) or to empty strings if no data is passed (task adder, or task editor but with no due time):

resetInputs() {
    this.newName = this.currentName || '';
    if (this.currentDueTime) {
        this.newDate = this.paddedDateString;
        this.newTime = this.trimmedTimeString;
    } else {
        this.newDate = '';
        this.newTime = '';
    }
}

And since the only way the data passed to a task editor can change is if there was a fresh fetch somewhere up in the hierarchy, the pre-fill values in the editor’s input fields are always the right values.

Notification area

An app must show what is happening. Imagine clicking the “confirm” button and going away on your business, only to find out days later that your important email was not sent!

So, we need a notification area. At the very least, the user needs to see a message when they’ve successfully done something (edited/removed a task or parts of it) or thought they’ve successfully done something but actually something went wrong.

This needs rearranging the Vue components. Since the notification area can’t be a part of just the task list, what we’re looking for will look like this (this is just a representation, not the actual content of an HTML page):

<div id="app">

    <notification-area></notification-area>

    <task-list>
        <task>
            ...
            <task-editor></task-editor>
        </task>
        <task>
            ...
            <task-editor></task-editor>
        </task>
        ...
    </task-list>

    <task-adder></task-adder>

</div>

TaskList can cause a notification because there may be a network error while fetching tasks. Task editors and the task adder can throw errors if the user provides invalid inputs, or show a success message if a task is edited or added successfully.

That means we need to wrap them with another component like this (representation again):

<div id="app">

    <app>
        <notification-area></notification-area>
        <task-list></task-list>
        <task-adder></task-adder>
    </app>

</div>

Now, all child components can emit events when something good or bad happens, and App will catch them and pass the message to the NotificationArea component (or clear the existing notification when necessary).

Check out Mantle on GitHub here