Interaction Solution

[00:00:00]
>> Richard Feldman: Our first TO DO is, If msg.description is ClickedTag, then set the model's selectedTag field to be msg.data. Actually before we go through these, let me just go ahead and build this and bring it up in the browser. Got Part 3 Index.html, just so we can kinda see the before and then the after.

[00:00:21]
So before is that it's displaying all of the articles in the feed and clicking on these things doesn't do anything. So we're gonna make them actually work. So first one, we're gonna wire up the update function. So when we get one of these messages, we want to set the model selected tag field.

[00:00:39]
So if message.description is clicks tag, then you want to set the model's selectedTag field to be msg.data. So I'm gonna say model | selectedTag = msg.data.
>> Richard Feldman: So, we do need an else here because every if has to come with an else. Now we've got one. So fundamentally, what this is doing is, saying anytime that this function is called and messages a record with a description field.

[00:01:12]
That description field has clicked tag as the string inside there. Then, we're going to return a new model that is exactly the same as the old one. Except, that we've changed the selected tag to the whatever is in the data field of the message. So that's the first thing we're going to do.

[00:01:27]
The next thing we're going to do is we're going to use that currently selected tag inside the model to filter the articles down to only the ones that include that currently selected tag. So here's our list out of filter, so it's going to iterate through each element in the allArticles list inside of our model.

[00:01:45]
And then it's going to run this anonymous function on each of them. That's gonna be our sort of is keepable function. So we're gonna return True if we should keep it and False if we should drop it, and filter it out and not show it. So how do we know if we should keep it or not?

[00:01:59]
Well, each article has a tags field on it. So the tags is a list of strings that tells us which tags the article has. We also know about the selected tag on the model. So we wanna keep this article if and only if its tags list includes the model selected tag.

[00:02:18]
So how we're gonna do that is with list.member. And as we saw before, list.member takes as its first argument, the thing that we're gonna be checking for, which in this case is model.selectedTag. When we're checking for that inside the following List, the List of article.tags. So putting those together, we now have a filter function that is going to check for each of these articles.

[00:02:43]
Does that article's list of tags include the selected tag in the model? If so, keep it. It shouldn't be filtered out. And if not, then it should be filtered out and we will drop it from the list. Okay, and the last piece of the puzzle is connecting view and update through an onClick handler that's going to specify a message to send to update every time the user clicks it.

[00:03:11]
So here's our onClick handler. We're gonna give it a description, and that description is going to be based on the one that we want inside of update, which is to say ClickedTag. So it's really important that those line up, so that when update receives this message as an argument, it runs the appropriate logic.

[00:03:29]
So we're gonna put that there for description. And the data is going to change depending on the current tag. So the data, the way that we use that in update was that we said selectedtag=msg.data. So whatever we put in that data field is gonna end up becoming our selected tag.

[00:03:47]
And then later on, we use that selected tag inside of our filter function. So we want this selected tag to be one of the tags inside article.tags. Which means that it's going to need to be something along the lines of Elm programming etc., depending on what the current tag is.

[00:04:06]
So inside each of these tags we've got the selected tag names which is the one in our application that's currently selected. Then we also have tagName, which is what the current tag name for the tag that we’re rendering right now. And that’s the one we wanna put as the data.

[00:04:20]
So putting those together, whenever the user clicks, it’s going to send a message to update, that is, the Elm runtime’s gonna send this message to update, with the description of ClickedTag and a data of tagName. Then update is going to look at that descriptions AI, see I have receive a ClickedTag message.

[00:04:36]
If we had other messages, we can handle that with elses. And then update the model to have that be the selected tag. And then based on that, view is then gonna get called with that new model. It's going to re-run this filter function which is going to check to see if the currently, or the new selected tag is in each of the tags of each of these articles.

[00:04:57]
And it's only going to render the articles for which that's true. So let's see how that looks. Okay, so right away we can see that instead of having that filter function return true, even as soon as I refresh the page, on the very first load it looks a little bit different now.

[00:05:13]
Now, we only have articles being rendered that have that tag of Elm on them. We change it to fun, we only get that one. Programming, we only get that one. And dragons, we only get that one. So there we have it, fully interactive Elm application. Questions?
>> Richard Feldman: Yeah?

[00:05:34]
>> Speaker 2: So one of the things that I think can be a little maybe confusing is the unclick. We're used to, maybe if you're coming from JavaScript, to being a function, whereas here it's just like, here's a record.
>> Richard Feldman: Right. Yeah, so that's a great point. In JavaScript, onclick is usually a handler that takes a function.

[00:05:53]
Whereas in Elm, it does not take a function, it just takes a value. All it wants to know is, what is the message I should send to update? Which I guess is a pretty fundamental difference between Elm and JavaScript is that in elm, the elm architecture is the way that we describe how things interact.

[00:06:08]
Whereas in JavaScript, it's more open ended and you have event listers and stuff like that. So yeah, that is a definite difference between the two.